ets-fe-ng-sdk 19.0.82 → 19.0.83

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

@@ -5724,6 +5724,7 @@ class ValidationMessageComponent {
         this.control = input();
         this.customMessage = input('Value is invalid');
         this.debug = input();
+        this.applyMargin = input(true);
         this.ignoreDirtiness = input();
         this.input = input();
         this.label = model();
@@ -5792,7 +5793,7 @@ class ValidationMessageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: ValidationMessageComponent, isStandalone: true, selector: "app-validation-message", inputs: { _maxLength: { classPropertyName: "_maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, _minLength: { classPropertyName: "_minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, customMessage: { classPropertyName: "customMessage", publicName: "customMessage", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, ignoreDirtiness: { classPropertyName: "ignoreDirtiness", publicName: "ignoreDirtiness", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hideOverflow: { classPropertyName: "hideOverflow", publicName: "hideOverflow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { label: "labelChange" }, ngImport: i0, template: "<div class=\"text-danger\" (click)=\"logErrors()\" [ngClass]=\"{ hideOverflow: hideOverflow() }\" #el>\n  @for (error of computedErrors(); track error) {\n    <div class=\"d-flex align-items-center 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{margin-top:5px;min-height:25px;position:relative}.errormssg{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:.8rem}.hideOverflow{height:25px;overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: i0.forwardRef(() => AsyncPipe), name: "async" }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i11.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i0.forwardRef(() => SDKTranslateNoLoaderPipe), name: "appTranslateNL" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: ValidationMessageComponent, isStandalone: true, selector: "app-validation-message", inputs: { _maxLength: { classPropertyName: "_maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, _minLength: { classPropertyName: "_minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, customMessage: { classPropertyName: "customMessage", publicName: "customMessage", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, applyMargin: { classPropertyName: "applyMargin", publicName: "applyMargin", isSignal: true, isRequired: false, transformFunction: null }, ignoreDirtiness: { classPropertyName: "ignoreDirtiness", publicName: "ignoreDirtiness", isSignal: true, isRequired: false, transformFunction: null }, input: { classPropertyName: "input", publicName: "input", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hideOverflow: { classPropertyName: "hideOverflow", publicName: "hideOverflow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { label: "labelChange" }, ngImport: i0, 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 align-items-center 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"], dependencies: [{ kind: "pipe", type: i0.forwardRef(() => AsyncPipe), name: "async" }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i11.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i0.forwardRef(() => SDKTranslateNoLoaderPipe), name: "appTranslateNL" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: ValidationMessageComponent, decorators: [{
             type: Component,
@@ -5805,7 +5806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         forwardRef(() => ErrorMessagePipe),
                         MatTooltipModule,
                         SDKTranslateNoLoaderPipe
-                    ], template: "<div class=\"text-danger\" (click)=\"logErrors()\" [ngClass]=\"{ hideOverflow: hideOverflow() }\" #el>\n  @for (error of computedErrors(); track error) {\n    <div class=\"d-flex align-items-center 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{margin-top:5px;min-height:25px;position:relative}.errormssg{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:.8rem}.hideOverflow{height:25px;overflow:hidden}\n"] }]
+                    ], 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 align-items-center 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"] }]
         }] });
 class ErrorMessagePipe {
     constructor() {
@@ -6877,7 +6878,7 @@ class InputBasicComponent extends InputBase {
         this.control()?.patchValue(this.multiple ? this.files : this.files[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputBasicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputBasicComponent, isStandalone: true, selector: "app-input-basic,app-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, inp: { classPropertyName: "inp", publicName: "input", isSignal: false, isRequired: false, transformFunction: null }, contextData: { classPropertyName: "contextData", publicName: "contextData", isSignal: false, isRequired: false, transformFunction: null }, decimalPoints: { classPropertyName: "decimalPoints", publicName: "decimalPoints", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: false, isRequired: false, transformFunction: null }, clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, labelLink: { classPropertyName: "labelLink", publicName: "labelLink", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, optionsFunc: { classPropertyName: "optionsFunc", publicName: "optionsFunc", isSignal: false, isRequired: false, transformFunction: null }, vms: { classPropertyName: "vms", publicName: "vms", isSignal: false, isRequired: false, transformFunction: null }, _setCurrentDate: { classPropertyName: "_setCurrentDate", publicName: "setCurrentDate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", mSelectedOptionLabel: "mSelectedOptionLabel" }, providers: InputProviders, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelectTag"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@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}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputBasicComponent, isStandalone: true, selector: "app-input-basic,app-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, inp: { classPropertyName: "inp", publicName: "input", isSignal: false, isRequired: false, transformFunction: null }, contextData: { classPropertyName: "contextData", publicName: "contextData", isSignal: false, isRequired: false, transformFunction: null }, decimalPoints: { classPropertyName: "decimalPoints", publicName: "decimalPoints", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: false, isRequired: false, transformFunction: null }, clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, labelLink: { classPropertyName: "labelLink", publicName: "labelLink", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, optionsFunc: { classPropertyName: "optionsFunc", publicName: "optionsFunc", isSignal: false, isRequired: false, transformFunction: null }, vms: { classPropertyName: "vms", publicName: "vms", isSignal: false, isRequired: false, transformFunction: null }, _setCurrentDate: { classPropertyName: "_setCurrentDate", publicName: "setCurrentDate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", mSelectedOptionLabel: "mSelectedOptionLabel" }, providers: InputProviders, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelectTag"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@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}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputBasicComponent, decorators: [{
             type: Component,
@@ -6979,7 +6980,7 @@ class InputTD_RFComponent extends InputBasicComponent {
         super.ngAfterViewInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputTD_RFComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputTD_RFComponent, isStandalone: true, selector: "app-input-td-rf", inputs: { _validators: ["validators", "_validators"], _asyncValidators: ["asyncValidators", "_asyncValidators"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, providers: InputProviders, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@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}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputTD_RFComponent, isStandalone: true, selector: "app-input-td-rf", inputs: { _validators: ["validators", "_validators"], _asyncValidators: ["asyncValidators", "_asyncValidators"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, providers: InputProviders, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@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}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputTD_RFComponent, decorators: [{
             type: Component,
@@ -7115,7 +7116,7 @@ class AutocompleteTdRfComponent extends InputTD_RFComponent {
         }, 600);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AutocompleteTdRfComponent, deps: [{ token: AutocompleteService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AutocompleteTdRfComponent, isStandalone: true, selector: "autocomplete-td-rf,app-autocomplete-td-rf", inputs: { validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true, isSignal: true }, { propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        class=\"{{inputClassSignal()}} input-container\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: ["i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AutocompleteTdRfComponent, isStandalone: true, selector: "autocomplete-td-rf,app-autocomplete-td-rf", inputs: { validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true, isSignal: true }, { propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        class=\"{{inputClassSignal()}} input-container\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: ["i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AutocompleteTdRfComponent, decorators: [{
             type: Component,
@@ -7229,7 +7230,7 @@ class AutocompleteComponent extends InputBasicComponent {
         }, 600);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete,autocomplete", inputs: { showRequiredTag: { classPropertyName: "showRequiredTag", publicName: "showRequiredTag", isSignal: false, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true, isSignal: true }, { propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        class=\"{{inputClassSignal()}} input-container\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", "i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete,autocomplete", inputs: { showRequiredTag: { classPropertyName: "showRequiredTag", publicName: "showRequiredTag", isSignal: false, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true, isSignal: true }, { propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        class=\"{{inputClassSignal()}} input-container\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", "i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -12134,7 +12135,7 @@ class PhoneNumberComponent extends InputBasicComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: PhoneNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: PhoneNumberComponent, isStandalone: true, selector: "app-phone-number", inputs: { showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, _countryCode3: { classPropertyName: "_countryCode3", publicName: "countryCode3", isSignal: true, isRequired: false, transformFunction: null }, _config: { classPropertyName: "_config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCountrySelect: "onCountrySelect" }, viewQueries: [{ propertyName: "pnRef", first: true, predicate: ["pn"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "directive", type: NGTelInputDirective, selector: "[ngTelInput]", inputs: ["scriptPath", "utilScriptPath", "ng2TelInputOptions"], outputs: ["hasError", "ng2TelOutput", "countryChange", "intlTelInputObject"], exportAs: ["ngTelInput"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: PhoneNumberComponent, isStandalone: true, selector: "app-phone-number", inputs: { showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, _countryCode3: { classPropertyName: "_countryCode3", publicName: "countryCode3", isSignal: true, isRequired: false, transformFunction: null }, _config: { classPropertyName: "_config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCountrySelect: "onCountrySelect" }, viewQueries: [{ propertyName: "pnRef", first: true, predicate: ["pn"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "directive", type: NGTelInputDirective, selector: "[ngTelInput]", inputs: ["scriptPath", "utilScriptPath", "ng2TelInputOptions"], outputs: ["hasError", "ng2TelOutput", "countryChange", "intlTelInputObject"], exportAs: ["ngTelInput"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: PhoneNumberComponent, decorators: [{
             type: Component,
@@ -12202,7 +12203,7 @@ class RichTextEditorRFComponent extends InputBasicComponent {
         return this.iS.onContentChanged($event, this.form(), this.name());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: RichTextEditorRFComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: RichTextEditorRFComponent, isStandalone: true, selector: "rich-text-editor-rf", viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (computedShowLabel()) {\n  <app-input-label\n    [colored]=\"coloredSignal()\"\n    [form]=\"form()\"\n    [hint]=\"hint()\"\n    [id]=\"idSignal()\"\n    [invalidCheckbox]=\"invalidCheckboxSignal()\"\n    [isRequired]=\"isRequiredSignal()\"\n    [label]=\"labelSignal()\"\n    [lblCl]=\"lblCl()\"\n    [light]=\"light()\"\n    [mini]=\"miniSignal()\"\n    [ngClass]=\"{ 'w-100': stackedSignal() }\"\n    [inlineHint]=\"inlineHint()\"\n    [showRequiredTag]=\"showRequiredTagSignal()\"\n    [showLabel]=\"showLabelSignal()\"\n    [small]=\"smallSignal()\"\n    [stacked]=\"stackedSignal()\"\n    [theme]=\"theme()\"\n    [xsmall]=\"xsmall()\" />\n}\n@if (!disabledSignal()) {\n  <div [formGroup]=\"form() | toAny\">\n    <quill-editor\n      [modules]=\"modules()\"\n      [formControlName]=\"nameStrSignal()\"\n      theme=\"snow\"\n      class=\"w-100\"\n      (onContentChanged)=\"onContentChanged($event)\" />\n  </div>\n} @else {\n  <quill-view-html [content]=\"valueSignal()\" theme=\"snow\" class=\"w-100\" />\n}\n\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [":host ::ng-deep .ql-container{border-radius:0 0 var(--border-radius) var(--border-radius)}:host ::ng-deep .ql-toolbar{border-radius:var(--border-radius) var(--border-radius) 0 0}:host ::ng-deep .ql-picker-label,:host ::ng-deep .ql-picker-options{border-radius:var(--border-radius)}:host ::ng-deep .ql-mention-list-container{height:300px}:host ::ng-deep .ngx-quill-view-html .ql-editor{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: QuillModule }, { kind: "component", type: i2$2.QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: i2$2.QuillViewHTMLComponent, selector: "quill-view-html", inputs: ["content", "theme", "sanitize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: RichTextEditorRFComponent, isStandalone: true, selector: "rich-text-editor-rf", viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (computedShowLabel()) {\n  <app-input-label\n    [colored]=\"coloredSignal()\"\n    [form]=\"form()\"\n    [hint]=\"hint()\"\n    [id]=\"idSignal()\"\n    [invalidCheckbox]=\"invalidCheckboxSignal()\"\n    [isRequired]=\"isRequiredSignal()\"\n    [label]=\"labelSignal()\"\n    [lblCl]=\"lblCl()\"\n    [light]=\"light()\"\n    [mini]=\"miniSignal()\"\n    [ngClass]=\"{ 'w-100': stackedSignal() }\"\n    [inlineHint]=\"inlineHint()\"\n    [showRequiredTag]=\"showRequiredTagSignal()\"\n    [showLabel]=\"showLabelSignal()\"\n    [small]=\"smallSignal()\"\n    [stacked]=\"stackedSignal()\"\n    [theme]=\"theme()\"\n    [xsmall]=\"xsmall()\" />\n}\n@if (!disabledSignal()) {\n  <div [formGroup]=\"form() | toAny\">\n    <quill-editor\n      [modules]=\"modules()\"\n      [formControlName]=\"nameStrSignal()\"\n      theme=\"snow\"\n      class=\"w-100\"\n      (onContentChanged)=\"onContentChanged($event)\" />\n  </div>\n} @else {\n  <quill-view-html [content]=\"valueSignal()\" theme=\"snow\" class=\"w-100\" />\n}\n\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [":host ::ng-deep .ql-container{border-radius:0 0 var(--border-radius) var(--border-radius)}:host ::ng-deep .ql-toolbar{border-radius:var(--border-radius) var(--border-radius) 0 0}:host ::ng-deep .ql-picker-label,:host ::ng-deep .ql-picker-options{border-radius:var(--border-radius)}:host ::ng-deep .ql-mention-list-container{height:300px}:host ::ng-deep .ngx-quill-view-html .ql-editor{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: QuillModule }, { kind: "component", type: i2$2.QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: i2$2.QuillViewHTMLComponent, selector: "quill-view-html", inputs: ["content", "theme", "sanitize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: RichTextEditorRFComponent, decorators: [{
             type: Component,
@@ -13206,7 +13207,7 @@ class FormErrorComponent {
         }, 500);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: FormErrorComponent, deps: [{ token: i0.ElementRef }, { token: UtilityService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: FormErrorComponent, isStandalone: true, selector: "form-error", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, customResult: { classPropertyName: "customResult", publicName: "customResult", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, lgGridNo: { classPropertyName: "lgGridNo", publicName: "lgGridNo", isSignal: true, isRequired: false, transformFunction: null }, xxlGridNo: { classPropertyName: "xxlGridNo", publicName: "xxlGridNo", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resultTemplateRef", first: true, predicate: ["resultTemplate"], descendants: true, isSignal: true }, { propertyName: "errContRef", first: true, predicate: ["errCont"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasError()) {\n  <div class=\"d-flex justify-content-end\" [class.mt-2]=\"!inline()\">\n    <app-btn\n      text=\"Form Errors\"\n      icon=\"info\"\n      type=\"clear\"\n      mclass=\"btn-outline-warning\"\n      (mclick)=\"toggleErrors()\" />\n  </div>\n}\n@if (!customResult()) {\n  <ng-container *ngTemplateOutlet=\"resultTemplate\" />\n}\n<ng-template #resultTemplate>\n  @if (hasError()) { \n    <div class=\"border form-error-container p-3 mt-2\" #errCont [hidden]=\"true\">\n      <div class=\"row row-cols-lg-{{ lgGridNo() }} row-cols-xxl-{{ xxlGridNo() }}\">\n        @if (false) {\n          <div class=\"col-lg-12 d-flex\">\n            <div>\n              <div class=\"pe-3\">{{ 'Form errors' | appTranslate | async }}</div>\n              <!-- <hr class=\"my-0\"> -->\n            </div>\n          </div>\n        }\n        @for (item of cErrors(); track item.label + item.parent) {\n          @if (item.formControl) {\n            <div class=\"error-item-case\">\n              @if (item.parent) {\n                <app-info-icon text=\"Group: {{ item.parent }}\" />\n                <!-- <div class=\"\" [matTooltip]=\"item.parent\">Parent</div> -->\n              }\n              <app-validation-message\n                [label]=\"item.label | titlecase\"\n                [ignoreDirtiness]=\"true\"\n                [control]=\"item.formControl\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .errormssg{color:#870000}:host .form-error-container{border-radius:10px}:host app-info-icon{margin-right:5px}:host .error-item-case{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { 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: MatTooltipModule }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: FormErrorComponent, isStandalone: true, selector: "form-error", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, customResult: { classPropertyName: "customResult", publicName: "customResult", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, lgGridNo: { classPropertyName: "lgGridNo", publicName: "lgGridNo", isSignal: true, isRequired: false, transformFunction: null }, xxlGridNo: { classPropertyName: "xxlGridNo", publicName: "xxlGridNo", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resultTemplateRef", first: true, predicate: ["resultTemplate"], descendants: true, isSignal: true }, { propertyName: "errContRef", first: true, predicate: ["errCont"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasError()) {\n  <div class=\"d-flex justify-content-end\" [class.mt-2]=\"!inline()\">\n    <app-btn\n      text=\"Form Errors\"\n      icon=\"info\"\n      type=\"clear\"\n      mclass=\"btn-outline-warning\"\n      (mclick)=\"toggleErrors()\" />\n  </div>\n}\n@if (!customResult()) {\n  <ng-container *ngTemplateOutlet=\"resultTemplate\" />\n}\n<ng-template #resultTemplate>\n  @if (hasError()) { \n    <div class=\"border form-error-container p-3 mt-2\" #errCont [hidden]=\"true\">\n      <div class=\"row row-cols-lg-{{ lgGridNo() }} row-cols-xxl-{{ xxlGridNo() }}\">\n        @if (false) {\n          <div class=\"col-lg-12 d-flex\">\n            <div>\n              <div class=\"pe-3\">{{ 'Form errors' | appTranslate | async }}</div>\n              <!-- <hr class=\"my-0\"> -->\n            </div>\n          </div>\n        }\n        @for (item of cErrors(); track item.label + item.parent) {\n          @if (item.formControl) {\n            <div class=\"error-item-case\">\n              @if (item.parent) {\n                <app-info-icon text=\"Group: {{ item.parent }}\" />\n                <!-- <div class=\"\" [matTooltip]=\"item.parent\">Parent</div> -->\n              }\n              <app-validation-message\n                [label]=\"item.label | titlecase\"\n                [ignoreDirtiness]=\"true\"\n                [applyMargin]=\"false\"\n                [control]=\"item.formControl\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .errormssg{color:#870000}:host .form-error-container{border-radius:10px}:host app-info-icon{margin-right:5px}:host .error-item-case{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { 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: MatTooltipModule }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: FormErrorComponent, decorators: [{
             type: Component,
@@ -13217,7 +13218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         BtnComponent,
                         MatTooltipModule,
                         InfoIconComponent,
-                    ], template: "@if (hasError()) {\n  <div class=\"d-flex justify-content-end\" [class.mt-2]=\"!inline()\">\n    <app-btn\n      text=\"Form Errors\"\n      icon=\"info\"\n      type=\"clear\"\n      mclass=\"btn-outline-warning\"\n      (mclick)=\"toggleErrors()\" />\n  </div>\n}\n@if (!customResult()) {\n  <ng-container *ngTemplateOutlet=\"resultTemplate\" />\n}\n<ng-template #resultTemplate>\n  @if (hasError()) { \n    <div class=\"border form-error-container p-3 mt-2\" #errCont [hidden]=\"true\">\n      <div class=\"row row-cols-lg-{{ lgGridNo() }} row-cols-xxl-{{ xxlGridNo() }}\">\n        @if (false) {\n          <div class=\"col-lg-12 d-flex\">\n            <div>\n              <div class=\"pe-3\">{{ 'Form errors' | appTranslate | async }}</div>\n              <!-- <hr class=\"my-0\"> -->\n            </div>\n          </div>\n        }\n        @for (item of cErrors(); track item.label + item.parent) {\n          @if (item.formControl) {\n            <div class=\"error-item-case\">\n              @if (item.parent) {\n                <app-info-icon text=\"Group: {{ item.parent }}\" />\n                <!-- <div class=\"\" [matTooltip]=\"item.parent\">Parent</div> -->\n              }\n              <app-validation-message\n                [label]=\"item.label | titlecase\"\n                [ignoreDirtiness]=\"true\"\n                [control]=\"item.formControl\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .errormssg{color:#870000}:host .form-error-container{border-radius:10px}:host app-info-icon{margin-right:5px}:host .error-item-case{display:flex;align-items:center}\n"] }]
+                    ], template: "@if (hasError()) {\n  <div class=\"d-flex justify-content-end\" [class.mt-2]=\"!inline()\">\n    <app-btn\n      text=\"Form Errors\"\n      icon=\"info\"\n      type=\"clear\"\n      mclass=\"btn-outline-warning\"\n      (mclick)=\"toggleErrors()\" />\n  </div>\n}\n@if (!customResult()) {\n  <ng-container *ngTemplateOutlet=\"resultTemplate\" />\n}\n<ng-template #resultTemplate>\n  @if (hasError()) { \n    <div class=\"border form-error-container p-3 mt-2\" #errCont [hidden]=\"true\">\n      <div class=\"row row-cols-lg-{{ lgGridNo() }} row-cols-xxl-{{ xxlGridNo() }}\">\n        @if (false) {\n          <div class=\"col-lg-12 d-flex\">\n            <div>\n              <div class=\"pe-3\">{{ 'Form errors' | appTranslate | async }}</div>\n              <!-- <hr class=\"my-0\"> -->\n            </div>\n          </div>\n        }\n        @for (item of cErrors(); track item.label + item.parent) {\n          @if (item.formControl) {\n            <div class=\"error-item-case\">\n              @if (item.parent) {\n                <app-info-icon text=\"Group: {{ item.parent }}\" />\n                <!-- <div class=\"\" [matTooltip]=\"item.parent\">Parent</div> -->\n              }\n              <app-validation-message\n                [label]=\"item.label | titlecase\"\n                [ignoreDirtiness]=\"true\"\n                [applyMargin]=\"false\"\n                [control]=\"item.formControl\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .errormssg{color:#870000}:host .form-error-container{border-radius:10px}:host app-info-icon{margin-right:5px}:host .error-item-case{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: UtilityService }, { type: i0.DestroyRef }], propDecorators: { form: [{
                 type: Input
             }] } });
@@ -13896,7 +13897,7 @@ class DayHourMinInputComponent extends InputBasicComponent {
         this.sub3?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DayHourMinInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DayHourMinInputComponent, isStandalone: true, selector: "app-day-hour-min-input", inputs: { clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, toMins: { classPropertyName: "toMins", publicName: "toMins", isSignal: false, isRequired: false, transformFunction: null }, mins: { classPropertyName: "mins", publicName: "mins", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DayHourMinInputComponent, isStandalone: true, selector: "app-day-hour-min-input", inputs: { clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, toMins: { classPropertyName: "toMins", publicName: "toMins", isSignal: false, isRequired: false, transformFunction: null }, mins: { classPropertyName: "mins", publicName: "mins", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DayHourMinInputComponent, decorators: [{
             type: Component,
@@ -13919,7 +13920,7 @@ class InputControlComponent extends InputBasicComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputControlComponent, isStandalone: true, selector: "input-control", inputs: { setControl: ["control", "setControl"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@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}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputControlComponent, isStandalone: true, selector: "input-control", inputs: { setControl: ["control", "setControl"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@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}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputControlComponent, decorators: [{
             type: Component,
@@ -13966,7 +13967,7 @@ class InputComponent extends InputBase {
             console.log(this.form);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputComponent, isStandalone: true, selector: "app-input-old", inputs: { _inp: ["input", "_inp"], accept: "accept", autocomplete: "autocomplete", endLabel: "endLabel", endLabelTooltip: "endLabelTooltip", files: "files", id: "id", inpCl: "inpCl", labelLink: "labelLink", loading: "loading", multiple: "multiple", optionsFunc: "optionsFunc", showEmptyOption: "showEmptyOption", showLabel: "showLabel", showValidation: "showValidation", showValidationMsg: "showValidationMsg", showValidationIcon: "showValidationIcon", small: "small", stacked: "stacked", _value: ["value", "_value"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@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}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputComponent, isStandalone: true, selector: "app-input-old", inputs: { _inp: ["input", "_inp"], accept: "accept", autocomplete: "autocomplete", endLabel: "endLabel", endLabelTooltip: "endLabelTooltip", files: "files", id: "id", inpCl: "inpCl", labelLink: "labelLink", loading: "loading", multiple: "multiple", optionsFunc: "optionsFunc", showEmptyOption: "showEmptyOption", showLabel: "showLabel", showValidation: "showValidation", showValidationMsg: "showValidationMsg", showValidationIcon: "showValidationIcon", small: "small", stacked: "stacked", _value: ["value", "_value"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@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}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -16214,7 +16215,7 @@ class TablePlainComponent extends TableBaseComponent {
         this.filterChange.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TablePlainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: TablePlainComponent, isStandalone: true, selector: "table-plain", inputs: { customSelectClass: { classPropertyName: "customSelectClass", publicName: "customSelectClass", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, obsDataSource: { classPropertyName: "obsDataSource", publicName: "obsDataSource", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByField: { classPropertyName: "disableSelectionByField", publicName: "disableSelectionByField", isSignal: false, isRequired: false, transformFunction: null }, _data: { classPropertyName: "_data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, _filterFields: { classPropertyName: "_filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, _filterFieldsMap: { classPropertyName: "_filterFieldsMap", publicName: "filterFieldsMap", isSignal: false, isRequired: false, transformFunction: null }, selectionPerPage: { classPropertyName: "selectionPerPage", publicName: "selectionPerPage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _view: "view", dataChanged: "dataChanged", filterChange: "filterChange", listMutated: "listMutated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-plain\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  @if (filterFields()) {\n    <div class=\"d-flex\">\n      <app-btn\n        text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n        [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n        (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n    </div>\n    <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n      @for (scheme of filterFields(); track scheme.field) {\n        <div class=\"col-md-4 col-xxl-3\">\n          @switch (scheme.type) {\n            @case ('autocomplete') {\n              <div class=\"col\">\n                <app-autocomplete\n                  [form]=\"filterForm\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [name]=\"scheme.field | toAny\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                  #inputTag\n                  [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                  (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n                <app-validation-message [input]=\"inputTag\" />\n              </div>\n            }\n            @default {\n              <app-input-basic\n                #formField\n                [name]=\"scheme.field | toAny\"\n                [form]=\"filterForm\"\n                [stacked]=\"true\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"true\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n              <app-validation-message [input]=\"formField\" />\n            }\n          }\n        </div>\n      }\n      <div class=\"col-md justify-content-end d-flex\">\n        <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n      </div>\n    </div>\n  }\n\n  @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n    <div class=\" \">\n      <div class=\"row g-3 justify-content-between align-items-end\">\n        <div class=\"col-md\">\n          @if (startSectionTemplate()) {\n            <div class=\"{{ starterSectionClass() }}\">\n              <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n            </div>\n          }\n          @if (showFilter()) {\n            <form [formGroup]=\"filterForm\">\n              <div class=\"row justify-content-center align-items-end\">\n                <div class=\"col-md-auto\">\n                  <app-autocomplete\n                    label=\"Filter\"\n                    type=\"select\"\n                    [form]=\"filterForm\"\n                    name=\"field\"\n                    [stacked]=\"false\"\n                    [options]=\"filterOptions()\"\n                    valueField=\"code\"\n                    labelField=\"description\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-input-basic\n                    label=\"Value\"\n                    type=\"text\"\n                    [form]=\"filterForm\"\n                    name=\"value\"\n                    [stacked]=\"false\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n                </div>\n              </div>\n            </form>\n          }\n        </div>\n        @if (showExport() || showAdditionalColumns()) {\n          <div class=\"col-md-auto\">\n            <div class=\"row row-cols-auto g-3 justify-content-end\">\n              <span>\n                @if (showExport()) {\n                  <app-export-table\n                    [disabled]=\"!dataSource()?.data?.length\"\n                    [label]=\"label()\"\n                    [debug]=\"debug()\"\n                    [displayedColumns]=\"computedDisplayedColumns()\"\n                    [data]=\"dataSource()?.data\" />\n                }\n              </span>\n              @if (showAdditionalColumns()) {\n                <div class=\"d-flex\">\n                  <fields-to-display\n                    [fields]=\"allTableColumns()\"\n                    [currentColumns]=\"computedDisplayedColumns()\"\n                    (fieldsChanged)=\"fieldsChanged($event)\" />\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div\n    [ngClass]=\"{ border: distinct() }\"\n    class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n    <div class=\"table-responsive\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource() || obsDataSource()\"\n        matSort\n        class=\"w-100 d-table table mb-0\"\n        [multiTemplateDataRows]=\"isExpandable()\"\n        #table\n        [ngClass]=\"{\n          smallerFonts: smallerFonts(),\n          nowrap: nowrap(),\n          centerCells: centerCells(),\n          curvy: curvy(),\n          'table-striped': striped(),\n        }\">\n        <!-- Checkbox Column -->\n        <ng-container\n          matColumnDef=\"mselect\"\n          [sticky]=\"!placeSelectionAtRight()\"\n          [stickyEnd]=\"placeSelectionAtRight()\">\n          <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                [class]=\"customSelectClass()\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [attr.aria-label]=\"checkboxLabel()\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n            }\n          </th>\n          <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                class=\"form-control control-bg-gray\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [attr.aria-label]=\"checkboxLabel(row)\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n            }\n          </td>\n        </ng-container>\n        <!-- Columns -->\n        @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n          <ng-template #thContent>\n            <app-info-icon [text]=\"col.hint\">\n              {{ col.t | appTranslate | async }}\n            </app-info-icon>\n          </ng-template>\n\n          @switch (col.type) {\n            <!-- CHECKBOX -->\n            @case ('textarea') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- <app-input-td-rf  [(model)]=\"col.\" [showLabel]=\"false\"  /> -->\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n            <!-- CHECKBOX -->\n            @case ('checkbox') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-ngmodel\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"checkbox\"\n                    [disabled]=\"col.disabled\"\n                    [checked]=\"col.checked\"\n                    [(model)]=\"row[col.f]\"\n                    (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Input -->\n            @case ('input') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-basic\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"text\"\n                    [disabled]=\"col.disabled\"\n                    [form]=\"row\"\n                    [name]=\"col.f\"\n                    [noFormat]=\"true\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- PROGRESS BAR -->\n            @case ('progress') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"progress\">\n                    <div\n                      class=\"progress-bar progress-bar-striped bg-success\"\n                      role=\"progressbar\"\n                      [ngStyle]=\"{ width: row[col.f] }\">\n                      {{ row[col.f] }}\n                    </div>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- COLOR -->\n            @case ('color') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Button -->\n            @case ('button') {\n              <ng-container\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                  <app-btn\n                    [icon]=\"col.icon || col.btn?.icon\"\n                    [type]=\"col.btn?.type\"\n                    (mclick)=\"\n                      col.action\n                        ? col.action(row, col.f, getActionStatusCallback(col), index)\n                        : null\n                    \"\n                    [help]=\"col.btn?.help\"\n                    [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                    [text]=\"col.btn?.label\"\n                    [loading]=\"col.btn?.loading\"\n                    [iconBtn]=\"col.btn?.iconBtn\"\n                    mclass=\"w-auto\"\n                    [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Sub Table -->\n            @case ('table') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n                  <div class=\"inline-block\">\n                    <app-btn\n                      [icon]=\"col.icon\"\n                      [type]=\"col.btn?.type || 'dark'\"\n                      (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                      [group]=\"col.btn?.group\"\n                      [help]=\"col.subTable | tableToString: row | async\"\n                      [showHelpIcon]=\"false\"\n                      [text]=\"col.btn?.label\"\n                      [iconBtn]=\"true\"\n                      mclass=\"w-auto\" />\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- ACTION COLUMNS -->\n            @case ('btns') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\" [stickyEnd]=\"true\" [sticky]=\"true\">\n                <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                  <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n                    @for (button of col.buttons; track button.icon + button.label) {\n                      <div class=\"mx-2\">\n                        <app-btn\n                          [icon]=\"button.icon\"\n                          [text]=\"button.label\"\n                          [help]=\"button.help\"\n                          [showHelpIcon]=\"button.showHelpIcon\"\n                          [type]=\"button.type\"\n                          [group]=\"button.group\"\n                          [iconBtn]=\"!button.label\"\n                          mclass=\"w-auto\"\n                          (mclick)=\"\n                            button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\n                          \"\n                          #btn />\n                      </div>\n                    }\n                  </div>\n                </td>\n              </ng-container>\n            }\n\n            <!-- EDITABLE -->\n            @case ('editable') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <a\n                    class=\"cell\"\n                    [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                    [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                    [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                  <i\n                    (click)=\"col.action ? col.action(row, col.f) : null\"\n                    class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                </td>\n              </ng-container>\n            }\n\n            <!-- DEFAULT -->\n            @default {\n              <ng-container\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td\n                  mat-cell\n                  *matCellDef=\"let row; let rowIndex = index\"\n                  [matTooltip]=\"\n                    col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n                  \">\n                  <ng-template #cellContent>\n                    @switch (true) {\n                      @case (!!col.routeFormatter) {\n                        @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n                          <a\n                            class=\"cell\"\n                            [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                            (click)=\"col.action ? col.action(row, col.f) : null\"\n                            [queryParams]=\"cellRoute.queryParams\"\n                            routerLink=\"{{ cellRoute.route }}\"\n                            [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                        }\n                      }\n                      @case (!!col.customTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            col.customTemplate;\n                            context: { $implicit: { row, rowIndex } }\n                          \" />\n                      }\n                      @default {\n                        <span\n                          class=\"cell\"\n                          [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                          (click)=\"col.action ? col.action(row, col.f) : null\"\n                          [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n                      }\n                    }\n                    @if (col.expandable) {\n                      <button\n                        matTooltip=\"Exapnd\"\n                        [matTooltipShowDelay]=\"1000\"\n                        mat-icon-button\n                        (click)=\"expandCell(row, col, expandModal)\"\n                        class=\"expandBtn\">\n                        <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n                      </button>\n                    }\n                  </ng-template>\n\n                  @if (col._onHoverFunction) {\n                    <span\n                      class=\"\"\n                      [nelDebug]=\"debug()\"\n                      [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n                      [nelDelay]=\"col._onHoverDelay\">\n                      <ng-container *ngTemplateOutlet=\"cellContent\" />\n                    </span>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"cellContent\" />\n                  }\n                </td>\n              </ng-container>\n            }\n\n            <!--// -->\n          }\n        }\n        <!-- EXPANDABLE COLUMN-->\n        @if (isExpandable()) {\n          <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\n            <td mat-cell *matCellDef=\"let row\">\n              <div class=\"d-flex justify-content-end\">\n                <app-btn\n                  [iconBtn]=\"true\"\n                  type=\"clear\"\n                  [customIcon]=\"\n                    expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n                  \"\n                  aria-label=\"expand row\"\n                  (mclick)=\"\n                    expandedElement.set(expandedElement() === row ? null : row);\n                    clickedExpandRow.emit({ open: expandedElement() === row, row });\n                    $event.stopPropagation()\n                  \" />\n              </div>\n            </td>\n          </ng-container>\n        }\n        <!--// -->\n        <!-- Options Column -->\n        @if (hasRowOptions()) {\n          <ng-container matColumnDef=\"option\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef disableClear></th>\n            <td mat-cell *matCellDef=\"let row\">\n              @if (rowOptionsMap()) {\n                @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n                  <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                    <i class=\"fa fa-ellipsis-v me-0\"></i>\n                  </button>\n                  <mat-menu #menu=\"matMenu\">\n                    @for (option of _rowoptions; track option.t) {\n                      <button\n                        mat-menu-item\n                        class=\"{{ option.itemClass }}\"\n                        (click)=\"option.action?.(row)\">\n                        @if (option.iconClass) {\n                          <i class=\"{{ option.iconClass }}\"></i>\n                        }\n                        {{ option.t | appTranslate | async }}\n                      </button>\n                    }\n                  </mat-menu>\n                }\n              } @else {\n                <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                  <i class=\"fa fa-ellipsis-v me-0\"></i>\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                  @for (option of rowOptions(); track option.t) {\n                    <button\n                      mat-menu-item\n                      class=\"{{ option.itemClass }}\"\n                      (click)=\"option.action?.(row)\">\n                      @if (option.iconClass) {\n                        <i class=\"{{ option.iconClass }}\"></i>\n                      }\n                      {{ option.t | appTranslate | async }}\n                    </button>\n                  }\n                </mat-menu>\n              }\n            </td>\n          </ng-container>\n        }\n\n        @if (rawColumns(); as dcols) {\n          <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n          @if (isExpandable()) {\n            <ng-container matColumnDef=\"expandedDetail\">\n              <td\n                mat-cell\n                *matCellDef=\"let row\"\n                [attr.colspan]=\"dcols?.length || 1\"\n                [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n                <div\n                  class=\"example-element-detail\"\n                  [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n                  @if (row == expandedElement()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        expandedRowTemplate();\n                        context: { $implicit: { row } }\n                      \"></ng-container>\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n          <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: dcols\"\n            [ngClass]=\"{\n              pointer: showRowPointer(),\n              disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n            }\"\n            [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n            (click)=\"rowClick(row)\"></tr>\n          <tr class=\"mat-row\" *matNoDataRow>\n            <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n              {{ noItemTxt() | appTranslate | async }}\n            </td>\n          </tr>\n          @if (isExpandable()) {\n            <tr\n              mat-row\n              *matRowDef=\"let row; columns: ['expandedDetail']\"\n              class=\"expanded-detail-row\"\n              [style.height.px]=\"0\"></tr>\n          }\n        }\n      </table>\n    </div>\n    @if (showPager()) {\n      <mat-paginator\n        [length]=\"resultsLength()\"\n        [pageSizeOptions]=\"computedPageSizeOptions()\"\n        [pageSize]=\"pageSize()\"\n        showFirstLastButtons></mat-paginator>\n    }\n  </div>\n</div>\n\n<modal-comp\n  [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n  [header]=\"selectedCellForExpansion()?.column?.t\"\n  [showFooter]=\"false\"\n  (modalClose)=\"closeExpandedCell()\"\n  #expandModal>\n  <ng-template modalBody>\n    @if (selectedCellForExpansion(); as _selected) {\n      <div\n        class=\"\"\n        [innerHTML]=\"\n          _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n        \"></div>\n    }\n  </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { 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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "debug", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["query1", "query2", "fields", "currentColumns"], outputs: ["query1Change", "query2Change", "fieldsChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { 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: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { 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: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { 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: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: TablePlainComponent, isStandalone: true, selector: "table-plain", inputs: { customSelectClass: { classPropertyName: "customSelectClass", publicName: "customSelectClass", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, obsDataSource: { classPropertyName: "obsDataSource", publicName: "obsDataSource", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByField: { classPropertyName: "disableSelectionByField", publicName: "disableSelectionByField", isSignal: false, isRequired: false, transformFunction: null }, _data: { classPropertyName: "_data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, _filterFields: { classPropertyName: "_filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, _filterFieldsMap: { classPropertyName: "_filterFieldsMap", publicName: "filterFieldsMap", isSignal: false, isRequired: false, transformFunction: null }, selectionPerPage: { classPropertyName: "selectionPerPage", publicName: "selectionPerPage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _view: "view", dataChanged: "dataChanged", filterChange: "filterChange", listMutated: "listMutated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-plain\">\n  @if (header()) {\n    <h6 class=\"text-primary\">\n      {{ header() | appTranslate | async }}\n    </h6>\n  }\n\n  @if (filterFields()) {\n    <div class=\"d-flex\">\n      <app-btn\n        text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n        [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n        (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n    </div>\n    <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n      @for (scheme of filterFields(); track scheme.field) {\n        <div class=\"col-md-4 col-xxl-3\">\n          @switch (scheme.type) {\n            @case ('autocomplete') {\n              <div class=\"col\">\n                <app-autocomplete\n                  [form]=\"filterForm\"\n                  [label]=\"scheme.label\"\n                  [labelField]=\"scheme.labelField\"\n                  [labelType]=\"scheme.labelType | toAny\"\n                  [name]=\"scheme.field | toAny\"\n                  [optionFormatter]=\"scheme.optionFormatter\"\n                  [valueField]=\"scheme.valueField\"\n                  [hint]=\"scheme.hint\"\n                  [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                  #inputTag\n                  [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                  (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n                <app-validation-message [input]=\"inputTag\" />\n              </div>\n            }\n            @default {\n              <app-input-basic\n                #formField\n                [name]=\"scheme.field | toAny\"\n                [form]=\"filterForm\"\n                [stacked]=\"true\"\n                [type]=\"scheme.type\"\n                [valueField]=\"scheme.valueField\"\n                [labelType]=\"scheme.labelType | toAny\"\n                [labelField]=\"scheme.labelField\"\n                [noFormat]=\"true\"\n                [optionFormatter]=\"scheme.optionFormatter\"\n                [decimalPoints]=\"scheme.decimalPoints\"\n                [hint]=\"scheme.hint\"\n                [max]=\"scheme.max\"\n                [min]=\"scheme.min\"\n                [placeholder]=\"scheme.placeholder\"\n                [label]=\"scheme.label\"\n                [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n                [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n                (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n              <app-validation-message [input]=\"formField\" />\n            }\n          }\n        </div>\n      }\n      <div class=\"col-md justify-content-end d-flex\">\n        <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n      </div>\n    </div>\n  }\n\n  @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n    <div class=\" \">\n      <div class=\"row g-3 justify-content-between align-items-end\">\n        <div class=\"col-md\">\n          @if (startSectionTemplate()) {\n            <div class=\"{{ starterSectionClass() }}\">\n              <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n            </div>\n          }\n          @if (showFilter()) {\n            <form [formGroup]=\"filterForm\">\n              <div class=\"row justify-content-center align-items-end\">\n                <div class=\"col-md-auto\">\n                  <app-autocomplete\n                    label=\"Filter\"\n                    type=\"select\"\n                    [form]=\"filterForm\"\n                    name=\"field\"\n                    [stacked]=\"false\"\n                    [options]=\"filterOptions()\"\n                    valueField=\"code\"\n                    labelField=\"description\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-input-basic\n                    label=\"Value\"\n                    type=\"text\"\n                    [form]=\"filterForm\"\n                    name=\"value\"\n                    [stacked]=\"false\" />\n                </div>\n                <div class=\"col-md-auto\">\n                  <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n                </div>\n              </div>\n            </form>\n          }\n        </div>\n        @if (showExport() || showAdditionalColumns()) {\n          <div class=\"col-md-auto\">\n            <div class=\"row row-cols-auto g-3 justify-content-end\">\n              <span>\n                @if (showExport()) {\n                  <app-export-table\n                    [disabled]=\"!dataSource()?.data?.length\"\n                    [label]=\"label()\"\n                    [debug]=\"debug()\"\n                    [displayedColumns]=\"computedDisplayedColumns()\"\n                    [data]=\"dataSource()?.data\" />\n                }\n              </span>\n              @if (showAdditionalColumns()) {\n                <div class=\"d-flex\">\n                  <fields-to-display\n                    [fields]=\"allTableColumns()\"\n                    [currentColumns]=\"computedDisplayedColumns()\"\n                    (fieldsChanged)=\"fieldsChanged($event)\" />\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  <div\n    [ngClass]=\"{ border: distinct() }\"\n    class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n    <div class=\"table-responsive\">\n      <table\n        mat-table\n        [dataSource]=\"dataSource() || obsDataSource()\"\n        matSort\n        class=\"w-100 d-table table mb-0\"\n        [multiTemplateDataRows]=\"isExpandable()\"\n        #table\n        [ngClass]=\"{\n          smallerFonts: smallerFonts(),\n          nowrap: nowrap(),\n          centerCells: centerCells(),\n          curvy: curvy(),\n          'table-striped': striped(),\n        }\">\n        <!-- Checkbox Column -->\n        <ng-container\n          matColumnDef=\"mselect\"\n          [sticky]=\"!placeSelectionAtRight()\"\n          [stickyEnd]=\"placeSelectionAtRight()\">\n          <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                [class]=\"customSelectClass()\"\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [attr.aria-label]=\"checkboxLabel()\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (change)=\"$event ? masterToggle() : null\"\n                [checked]=\"selection.hasValue() && isAllSelected()\"\n                [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n                [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n            }\n          </th>\n          <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n            @if (customSelectClass()) {\n              <input\n                type=\"checkbox\"\n                class=\"form-control control-bg-gray\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [attr.aria-label]=\"checkboxLabel(row)\" />\n            }\n            @if (!customSelectClass()) {\n              <mat-checkbox\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"$event ? selection.toggle(row) : null\"\n                [checked]=\"selection.isSelected(row)\"\n                [aria-label]=\"checkboxLabel(row)\"\n                [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n            }\n          </td>\n        </ng-container>\n        <!-- Columns -->\n        @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n          <ng-template #thContent>\n            <app-info-icon [text]=\"col.hint\">\n              {{ col.t | appTranslate | async }}\n            </app-info-icon>\n          </ng-template>\n\n          @switch (col.type) {\n            <!-- CHECKBOX -->\n            @case ('textarea') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- <app-input-td-rf  [(model)]=\"col.\" [showLabel]=\"false\"  /> -->\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n            <!-- CHECKBOX -->\n            @case ('checkbox') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-ngmodel\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"checkbox\"\n                    [disabled]=\"col.disabled\"\n                    [checked]=\"col.checked\"\n                    [(model)]=\"row[col.f]\"\n                    (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Input -->\n            @case ('input') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <!-- Removing the empty space above checkboxes -->\n                  <app-input-basic\n                    [showLabel]=\"false\"\n                    [stacked]=\"true\"\n                    type=\"text\"\n                    [disabled]=\"col.disabled\"\n                    [form]=\"row\"\n                    [name]=\"col.f\"\n                    [noFormat]=\"true\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- PROGRESS BAR -->\n            @case ('progress') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"progress\">\n                    <div\n                      class=\"progress-bar progress-bar-striped bg-success\"\n                      role=\"progressbar\"\n                      [ngStyle]=\"{ width: row[col.f] }\">\n                      {{ row[col.f] }}\n                    </div>\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- COLOR -->\n            @case ('color') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Button -->\n            @case ('button') {\n              <ng-container\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n                  <app-btn\n                    [icon]=\"col.icon || col.btn?.icon\"\n                    [type]=\"col.btn?.type\"\n                    (mclick)=\"\n                      col.action\n                        ? col.action(row, col.f, getActionStatusCallback(col), index)\n                        : null\n                    \"\n                    [help]=\"col.btn?.help\"\n                    [showHelpIcon]=\"col.btn?.showHelpIcon\"\n                    [text]=\"col.btn?.label\"\n                    [loading]=\"col.btn?.loading\"\n                    [iconBtn]=\"col.btn?.iconBtn\"\n                    mclass=\"w-auto\"\n                    [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- Sub Table -->\n            @case ('table') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n                  <div class=\"inline-block\">\n                    <app-btn\n                      [icon]=\"col.icon\"\n                      [type]=\"col.btn?.type || 'dark'\"\n                      (mclick)=\"col.action ? col.action(row, col.f) : null\"\n                      [group]=\"col.btn?.group\"\n                      [help]=\"col.subTable | tableToString: row | async\"\n                      [showHelpIcon]=\"false\"\n                      [text]=\"col.btn?.label\"\n                      [iconBtn]=\"true\"\n                      mclass=\"w-auto\" />\n                  </div>\n                </td>\n              </ng-container>\n            }\n            <!--// -->\n\n            <!-- ACTION COLUMNS -->\n            @case ('btns') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\" [stickyEnd]=\"true\" [sticky]=\"true\">\n                <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n                  <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n                    @for (button of col.buttons; track button.icon + button.label) {\n                      <div class=\"mx-2\">\n                        <app-btn\n                          [icon]=\"button.icon\"\n                          [text]=\"button.label\"\n                          [help]=\"button.help\"\n                          [showHelpIcon]=\"button.showHelpIcon\"\n                          [type]=\"button.type\"\n                          [group]=\"button.group\"\n                          [iconBtn]=\"!button.label\"\n                          mclass=\"w-auto\"\n                          (mclick)=\"\n                            button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\n                          \"\n                          #btn />\n                      </div>\n                    }\n                  </div>\n                </td>\n              </ng-container>\n            }\n\n            <!-- EDITABLE -->\n            @case ('editable') {\n              <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <a\n                    class=\"cell\"\n                    [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n                    [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n                    [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                  <i\n                    (click)=\"col.action ? col.action(row, col.f) : null\"\n                    class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n                </td>\n              </ng-container>\n            }\n\n            <!-- DEFAULT -->\n            @default {\n              <ng-container\n                [sticky]=\"col.stickyStart\"\n                [stickyEnd]=\"col.stickyEnd || col.sticky\"\n                matColumnDef=\"{{ col.f | toAny }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                  <app-info-icon [text]=\"col.hint\">\n                    {{ col.t | appTranslate | async }}\n                  </app-info-icon>\n                </th>\n                <td\n                  mat-cell\n                  *matCellDef=\"let row; let rowIndex = index\"\n                  [matTooltip]=\"\n                    col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n                  \">\n                  <ng-template #cellContent>\n                    @switch (true) {\n                      @case (!!col.routeFormatter) {\n                        @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n                          <a\n                            class=\"cell\"\n                            [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                            (click)=\"col.action ? col.action(row, col.f) : null\"\n                            [queryParams]=\"cellRoute.queryParams\"\n                            routerLink=\"{{ cellRoute.route }}\"\n                            [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n                        }\n                      }\n                      @case (!!col.customTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            col.customTemplate;\n                            context: { $implicit: { row, rowIndex } }\n                          \" />\n                      }\n                      @default {\n                        <span\n                          class=\"cell\"\n                          [ngClass]=\"{ pointer: col.action, link: col.action }\"\n                          (click)=\"col.action ? col.action(row, col.f) : null\"\n                          [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n                      }\n                    }\n                    @if (col.expandable) {\n                      <button\n                        matTooltip=\"Exapnd\"\n                        [matTooltipShowDelay]=\"1000\"\n                        mat-icon-button\n                        (click)=\"expandCell(row, col, expandModal)\"\n                        class=\"expandBtn\">\n                        <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n                      </button>\n                    }\n                  </ng-template>\n\n                  @if (col._onHoverFunction) {\n                    <span\n                      class=\"\"\n                      [nelDebug]=\"debug()\"\n                      [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n                      [nelDelay]=\"col._onHoverDelay\">\n                      <ng-container *ngTemplateOutlet=\"cellContent\" />\n                    </span>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"cellContent\" />\n                  }\n                </td>\n              </ng-container>\n            }\n\n            <!--// -->\n          }\n        }\n        <!-- EXPANDABLE COLUMN-->\n        @if (isExpandable()) {\n          <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\">&nbsp;</th>\n            <td mat-cell *matCellDef=\"let row\">\n              <div class=\"d-flex justify-content-end\">\n                <app-btn\n                  [iconBtn]=\"true\"\n                  type=\"clear\"\n                  [customIcon]=\"\n                    expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n                  \"\n                  aria-label=\"expand row\"\n                  (mclick)=\"\n                    expandedElement.set(expandedElement() === row ? null : row);\n                    clickedExpandRow.emit({ open: expandedElement() === row, row });\n                    $event.stopPropagation()\n                  \" />\n              </div>\n            </td>\n          </ng-container>\n        }\n        <!--// -->\n        <!-- Options Column -->\n        @if (hasRowOptions()) {\n          <ng-container matColumnDef=\"option\" stickyEnd>\n            <th mat-header-cell *matHeaderCellDef disableClear></th>\n            <td mat-cell *matCellDef=\"let row\">\n              @if (rowOptionsMap()) {\n                @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n                  <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                    <i class=\"fa fa-ellipsis-v me-0\"></i>\n                  </button>\n                  <mat-menu #menu=\"matMenu\">\n                    @for (option of _rowoptions; track option.t) {\n                      <button\n                        mat-menu-item\n                        class=\"{{ option.itemClass }}\"\n                        (click)=\"option.action?.(row)\">\n                        @if (option.iconClass) {\n                          <i class=\"{{ option.iconClass }}\"></i>\n                        }\n                        {{ option.t | appTranslate | async }}\n                      </button>\n                    }\n                  </mat-menu>\n                }\n              } @else {\n                <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n                  <i class=\"fa fa-ellipsis-v me-0\"></i>\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                  @for (option of rowOptions(); track option.t) {\n                    <button\n                      mat-menu-item\n                      class=\"{{ option.itemClass }}\"\n                      (click)=\"option.action?.(row)\">\n                      @if (option.iconClass) {\n                        <i class=\"{{ option.iconClass }}\"></i>\n                      }\n                      {{ option.t | appTranslate | async }}\n                    </button>\n                  }\n                </mat-menu>\n              }\n            </td>\n          </ng-container>\n        }\n\n        @if (rawColumns(); as dcols) {\n          <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n          @if (isExpandable()) {\n            <ng-container matColumnDef=\"expandedDetail\">\n              <td\n                mat-cell\n                *matCellDef=\"let row\"\n                [attr.colspan]=\"dcols?.length || 1\"\n                [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n                <div\n                  class=\"example-element-detail\"\n                  [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n                  @if (row == expandedElement()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        expandedRowTemplate();\n                        context: { $implicit: { row } }\n                      \"></ng-container>\n                  }\n                </div>\n              </td>\n            </ng-container>\n          }\n          <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n          <tr\n            mat-row\n            *matRowDef=\"let row; columns: dcols\"\n            [ngClass]=\"{\n              pointer: showRowPointer(),\n              disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n            }\"\n            [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n            (click)=\"rowClick(row)\"></tr>\n          <tr class=\"mat-row\" *matNoDataRow>\n            <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n              {{ noItemTxt() | appTranslate | async }}\n            </td>\n          </tr>\n          @if (isExpandable()) {\n            <tr\n              mat-row\n              *matRowDef=\"let row; columns: ['expandedDetail']\"\n              class=\"expanded-detail-row\"\n              [style.height.px]=\"0\"></tr>\n          }\n        }\n      </table>\n    </div>\n    @if (showPager()) {\n      <mat-paginator\n        [length]=\"resultsLength()\"\n        [pageSizeOptions]=\"computedPageSizeOptions()\"\n        [pageSize]=\"pageSize()\"\n        showFirstLastButtons></mat-paginator>\n    }\n  </div>\n</div>\n\n<modal-comp\n  [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n  [header]=\"selectedCellForExpansion()?.column?.t\"\n  [showFooter]=\"false\"\n  (modalClose)=\"closeExpandedCell()\"\n  #expandModal>\n  <ng-template modalBody>\n    @if (selectedCellForExpansion(); as _selected) {\n      <div\n        class=\"\"\n        [innerHTML]=\"\n          _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n        \"></div>\n    }\n  </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { 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: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "debug", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["query1", "query2", "fields", "currentColumns"], outputs: ["query1Change", "query2Change", "fieldsChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { 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: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { 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: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { 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: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
             trigger('detailExpand', [
                 state('collapsed', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -16957,7 +16958,7 @@ class InputTableComponent {
         this.downloadCSV([this.templateObj], 'template ' + this.label);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputTableComponent, deps: [{ token: UtilityService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputTableComponent, isStandalone: true, selector: "app-input-table", inputs: { bordered: "bordered", ioFormatted: "ioFormatted", keyField: "keyField", label: "label", pageSizeOptions: "pageSizeOptions", realTimeValidation: "realTimeValidation", showAddRow: "showAddRow", showCSV: "showCSV", showEditRow: "showEditRow", showExportBtn: "showExportBtn", showIOBtns: "showIOBtns", showSN: "showSN", submitFunc: "submitFunc", validationFunc: "validationFunc", _numOfRows: ["numOfRows", "_numOfRows"], _schemas: ["schemas", "_schemas"], _data: ["data", "_data"] }, outputs: { submitted: "submitted" }, viewQueries: [{ propertyName: "errorListTag", first: true, predicate: ["errorList"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { 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: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputTableComponent, isStandalone: true, selector: "app-input-table", inputs: { bordered: "bordered", ioFormatted: "ioFormatted", keyField: "keyField", label: "label", pageSizeOptions: "pageSizeOptions", realTimeValidation: "realTimeValidation", showAddRow: "showAddRow", showCSV: "showCSV", showEditRow: "showEditRow", showExportBtn: "showExportBtn", showIOBtns: "showIOBtns", showSN: "showSN", submitFunc: "submitFunc", validationFunc: "validationFunc", _numOfRows: ["numOfRows", "_numOfRows"], _schemas: ["schemas", "_schemas"], _data: ["data", "_data"] }, outputs: { submitted: "submitted" }, viewQueries: [{ propertyName: "errorListTag", first: true, predicate: ["errorList"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { 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: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputTableComponent, decorators: [{
             type: Component,