ets-fe-ng-sdk 19.0.26 → 19.0.28

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

@@ -807,7 +807,7 @@ var EVFunctions;
     EVFunctions.strConcatenator = strConcatenator;
     function strConcatenator2(param1, param2, joinerText = ' - ') {
         if (Array.isArray(param1)) {
-            const jt = param2 != null ? param2 : '-';
+            const jt = param2 != null ? param2 : ' - ';
             return param1
                 .map((x) => x?.toString()?.trim())
                 .filter((x) => x != null)
@@ -3493,10 +3493,20 @@ class TranslationService {
         this.translationResponseMatrix = new BehaviorSubject({});
         this.separator = '~~~';
         this.name = 'glossary';
+        this.sourceLanguage = signal(null);
+        this.targetLanguage = signal(null);
+        this.transGlossary = signal(null);
         this.toastNotificationService = inject(ToastNotificationsService);
         this.interval = 600;
+        this.route = computed(() => {
+            const transGlossary = this.transGlossary();
+            return (this.baseURL +
+                (transGlossary?.code
+                    ? `language?glossaryCode=${transGlossary?.code}&sourceLang=${this.sourceLanguage()}&targetLang=${this.targetLanguage()}`
+                    : `language/${this.targetLanguage()}`));
+        });
         this.pipeTransformer = (text) => of(text);
-        this.translateHTML = (HTMLString, sourceLanguage = this.sourceLanguage, targetLanguage = this.targetLanguage, config) => {
+        this.translateHTML = (HTMLString, sourceLanguage = this.sourceLanguage(), targetLanguage = this.targetLanguage(), config) => {
             return new Observable((res) => {
                 if (config?.debug)
                     debugger;
@@ -3564,15 +3574,12 @@ class TranslationService {
     async startInterval() {
         if (this.intervalSub && !this.intervalSub.closed)
             return;
-        const transGlossary = this.transGlossary || (await lastValueFrom(this.getGlossary()));
+        const transGlossary = this.transGlossary() || (await lastValueFrom(this.getGlossary()));
         this.intervalSub = interval(this.interval)
             .pipe(filter$1(() => this.translationRequestMatrix.length > 0), tap(async () => {
             const body = this.translationRequestMatrix.splice(0);
             // debugger;
-            lastValueFrom(this.apiService.postString(this.baseURL +
-                (this.transGlossary?.code
-                    ? `language?glossaryCode=${this.transGlossary?.code}&sourceLang=${this.sourceLanguage}&targetLang=${this.targetLanguage}`
-                    : `language/${this.targetLanguage}`), body.map((x) => this.tagger(x.id, x.text)).join(this.separator)))
+            lastValueFrom(this.translate(body.map((x) => this.tagger(x.id, x.text)).join(this.separator)))
                 .then((r) => {
                 this.translationResponseMatrix.next(this.detagger(r));
             })
@@ -3588,20 +3595,26 @@ class TranslationService {
     tagger(id, str) {
         return `<div id="${id}">${str}</div>`;
     }
-    getGlossary(sourceLanguage = environment.sourceLanguage, targetLanguage = environment.targetLanguage) {
-        this.sourceLanguage = sourceLanguage || this.sourceLanguage;
-        this.targetLanguage = targetLanguage || this.targetLanguage;
+    translate(body) {
+        return this.apiService.postString(this.route(), body);
+    }
+    getGlossary(sourceLanguage, targetLanguage) {
+        if (sourceLanguage)
+            this.sourceLanguage.set(sourceLanguage || this.sourceLanguage());
+        if (targetLanguage)
+            this.targetLanguage.set(targetLanguage || this.targetLanguage());
         return this.apiService.get(`${this.baseURL}glossary/`).pipe(map((r) => {
             // debugger;
-            const glossary = r?.find((x) => x.sourceLang == this.sourceLanguage &&
-                x.targetLang == this.targetLanguage &&
+            const glossary = r?.find((x) => x.sourceLang == this.sourceLanguage() &&
+                x.targetLang == this.targetLanguage() &&
                 x.name == this.name);
             return glossary ? glossary : null;
         }), map((glossary) => {
             if (!glossary)
                 return null;
-            this.transGlossary = environment.transGlossary = glossary;
-            this.storageS.saveItem(environment.transGlossaryKey, this.transGlossary);
+            environment.transGlossary = glossary;
+            this.transGlossary.set(glossary);
+            this.storageS.saveItem(environment.transGlossaryKey, this.transGlossary());
             return glossary;
         }));
     }
@@ -3666,6 +3679,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                     standalone: true,
                 }]
         }] });
+class SDKTranslateSinglePipe {
+    transform(text, config) {
+        return this.tS.pipeTransformer(text, { ...config, singleHandle: true });
+    }
+    constructor(tS) {
+        this.tS = tS;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SDKTranslateSinglePipe, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: SDKTranslateSinglePipe, isStandalone: true, name: "appTranslateSingle" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SDKTranslateSinglePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'appTranslateSingle',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: TranslationService }] });
+/**Translate without a loader */
+class SDKTranslateSingleNoLoaderPipe extends SDKTranslatePipe {
+    transform(text, config) {
+        return this.tS.pipeTransformer(text, { ...config, noLoader: true, singleHandle: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SDKTranslateSingleNoLoaderPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: SDKTranslateSingleNoLoaderPipe, isStandalone: true, name: "appTranslateSingleNL" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SDKTranslateSingleNoLoaderPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'appTranslateSingleNL',
+                    standalone: true,
+                }]
+        }] });
 const comps$5 = [SDKTranslatePipe, SDKTranslateNoLoaderPipe];
 const modules$1 = [];
 class TranslatePipeModule {
@@ -6791,11 +6836,11 @@ 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.0.0", ngImport: i0, type: InputBasicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", 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: false, 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: { 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  @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=\"{{ placeholder() }}\"\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=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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=\"{{ placeholder() }}\"\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=\"{{ placeholder() }}\"\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()\"\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=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"], 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.0.0", 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: false, 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: { 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\"\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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()\"\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\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InputBasicComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-basic,app-input', providers: InputProviders, imports: [DateInputComponent, InputSharedModules, SDKTranslateNoLoaderPipe], 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  @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=\"{{ placeholder() }}\"\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=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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=\"{{ placeholder() }}\"\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=\"{{ placeholder() }}\"\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()\"\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=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"] }]
+            args: [{ selector: 'app-input-basic,app-input', providers: InputProviders, imports: [DateInputComponent, InputSharedModules, SDKTranslateNoLoaderPipe], 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\"\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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()\"\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\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"] }]
         }], ctorParameters: () => [], propDecorators: { accept: [{
                 type: Input
             }], autocomplete: [{
@@ -6895,11 +6940,11 @@ class InputTD_RFComponent extends InputBasicComponent {
         super.ngAfterViewInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InputTD_RFComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", 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  @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=\"{{ placeholder() }}\"\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=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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=\"{{ placeholder() }}\"\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=\"{{ placeholder() }}\"\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()\"\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=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"], 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.0.0", 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\"\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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()\"\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\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InputTD_RFComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-td-rf', providers: InputProviders, imports: [DateInputComponent, InputSharedModules], 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  @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=\"{{ placeholder() }}\"\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=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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=\"{{ placeholder() }}\"\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=\"{{ placeholder() }}\"\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()\"\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=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"] }]
+            args: [{ selector: 'app-input-td-rf', providers: InputProviders, imports: [DateInputComponent, InputSharedModules], 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\"\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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()\"\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\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"] }]
         }], ctorParameters: () => [], propDecorators: { _validators: [{
                 type: Input,
                 args: ['validators']
@@ -13821,11 +13866,11 @@ class InputControlComponent extends InputBasicComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InputControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", 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  @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=\"{{ placeholder() }}\"\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=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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=\"{{ placeholder() }}\"\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=\"{{ placeholder() }}\"\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()\"\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=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"], 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.0.0", 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\"\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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()\"\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\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InputControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-control', providers: InputProviders, imports: [DateInputComponent, InputSharedModules], 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  @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=\"{{ placeholder() }}\"\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=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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=\"{{ placeholder() }}\"\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=\"{{ placeholder() }}\"\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()\"\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=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"] }]
+            args: [{ selector: 'input-control', providers: InputProviders, imports: [DateInputComponent, InputSharedModules], 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\"\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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()\"\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\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"] }]
         }], ctorParameters: () => [], propDecorators: { setControl: [{
                 type: Input,
                 args: ['control']
@@ -13868,11 +13913,11 @@ class InputComponent extends InputBase {
             console.log(this.form);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", 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  @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=\"{{ placeholder() }}\"\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=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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=\"{{ placeholder() }}\"\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=\"{{ placeholder() }}\"\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()\"\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=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"], 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.0.0", 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\"\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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()\"\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\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-old', providers: InputProviders, imports: [DateInputComponent, InputSharedModules], 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  @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=\"{{ placeholder() }}\"\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=\"{{ placeholder() || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholder() }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholder() }}\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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=\"{{ placeholder() }}\"\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=\"{{ placeholder() }}\"\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()\"\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=\"{{ placeholder() }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"] }]
+            args: [{ selector: 'app-input-old', providers: InputProviders, imports: [DateInputComponent, InputSharedModules], 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\"\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\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label | appTranslateNL: translatorOptions() | async }}\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()\"\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\"\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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n        <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <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"] }]
         }], propDecorators: { _inp: [{
                 type: Input,
                 args: ['input']
@@ -19405,5 +19450,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddItemComponent, ApiService, AppRouteBase, AppRouteService, AppRouteState, AppService, ArraySplitter, AuthenticationInterceptorService, AutocompleteComponent, AutocompleteModule, AutocompleteService, AutocompleteTdRfComponent, BaseNativeEventListenerDirective, BlinkingBlocksComponent, BouncingBallComponent, Btn, BtnComponent, BtnLg, BtnLgComponent, BtnLinkComponent, BtnModule, BtnService, ButtonComponent, CETSInput, CacheService, CacheUpdaterService, CardComponent, CardComponent as CardModule, CodeTitleDescPipe, CommafyNumberDirective, ButtonComponent as ComponentsModule, Config, ConfirmDialogComponent, ConfirmDialogComponent as ConfirmDialogModule, Constant, CustomDatePipe, DEFAULT_TIMEOUT, DateInputComponent, Day, DayHourMinInputComponent, DebouncerService, DesktopClassDirective, DetailsBtnComponent, DetailsBtnComponent as DetailsBtnModule, DirectivesModule, DocumentsNameDisplayComponent, DocumentsNameDisplayComponent as DocumentsNameDisplayModule, DragDropFileUploadDirective, EETSPageBtnID, ELanguage, EMenuLocation, EMenuType, EPageType, ESubSystem, ESystem, ESystemBusLine, ETSCheckForUpdateService, ETSConfirmDialogService, ETSExtraPagesModule, ETSFKVP, ETSForms, ETSHandleUnrecoverableStateService, ETSKVP, ETSLogUpdateService, ETSLoggerModule, ETSMenuItem, ETSMenuItemDivider, ETSPageNotFoundComponent, ETSPromptUpdateService, ETSReactiveFormInputService, ETSResetModule, ETSResponsivenessDirectiveModule, ETSRobotModule, ETSServiceWorkerService, ETSStorageService, ETSThemeService, ETSTimeoutTesterModule, ETSVersionModule, ETSWindowSecurityService, EUA, EVFunctions, EValidationType, EditableTextCaseComponent, EditableTextCaseComponent as EditableTextCaseModule, SDKEnvironment as Environment, EqualChildrenDirective, ErrorMessagePipe, ErrorReporterService, ExportTableComponent, ExportTableComponent as ExportTableModule, FCInput, FadingBarsComponent, FadingCirclesComponent, FieldToLabelPipe, FieldsToDisplayComponent, FileUploadComponent, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayControlPipe, FilterFormArrayGroupPipe, FilterOptions, FindItemComponent, FormErrorComponent, FormGeneratedValueComponent, FormGeneratorComponent, FormGeneratorComponent as FormGeneratorModule, FormGeneratorService, FormInvalidClassDirective, FormInvalidClassPipe, FormLinkComponent, FormLinkComponent as FormLinkModule, FormSchemaToTableColumnsPipe, FormTabHeadersComponent, FormTabHeadersComponent as FormTabHeadersModule, FormValuePipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetColFormattedEPipe, GetColFormattedPipe, GetHeadersPipe, GetRawFieldsPipe, GetValueLabel, GlobalErrorHandlerService, HasFormValuePipe, HasValuePipe, HideDesktopDirective, HideMobileDirective, HtmlerService, HttpListCaller, HttpListCaller1, HttpListCaller2, IdlerComponent, IdlerService, ImageLoaderDirective, ImageUpload, IndexCompLayoutComponent, InfoDialogComponent, InfoDialogModule, InfoDialogService, InfoIconComponent, InfoIconComponent as InfoIconModule, InputBasicComponent, InputClassPipe, InputComponent, inputs_component as InputComponents, InputControlComponent, InputFormatDirective, InputFormatDirectivesModule, InputFormatService, InputFormattersPipe, InputLabelComponent, InputModule, InputNGModelComponent, InputNGModelComponent as InputNGModelModule, InputPipesModule, InputService, InputTD_RFComponent, InputTableComponent, InputTableService, IntegerOnlyDirective, IsClonePage, IsShowPage, LabelComponent, LabelComponent as LabelModule, Lbl, ListOptionFinderPipe, LoaderComponent, LoaderComponent as LoaderModule, LoaderService, LocalCacheService, Log, LoggerComponent, LoggerInterceptorService, LoggerRoutingModule, LoggerService, MHrefDirective, MobileClassDirective, ModalBodyDirective, ModalComponent, ModalComponents, ModalFooterDirective, ModalFormComponent, ModalFormComponent as ModalFormModule, ModalHeaderComponent, ModalHeaderComponent as ModalHeaderModule, ModalComponent as ModalModule, MouseClickListenerDirective, MouseEnterListenerDirective, MouseLeaveListenerDirective, MrouterLinkirective, NELEventName, NarrationHistoryCompComponent, NativeEventListenerDirectives, NegativeNumberOnlyDirective, NotificationsComponent, NotificationsService, ObjectToArrayPipe, ObjectToLabelsPipe, OnClickDirective, OptionLabeller, OptionerPipe, OptionsFormatter, PSDirective, PageCenterBodyComponent, PageLoader, PageLoaderService, PageModal, PageService, PageTemplateComponent, PageTemplateComponent as PageTemplateModule, PageToComponentComponent, PageToComponentDirective, PageToComponentComponent as PageToComponentModule, PageToComponentService, PaginatorComponent, PaginatorPipe, PhoneNumberComponent, PhoneNumberService, PointerMoveListenerDirective, prototypes as Prototypes, RefresherPipe, RemoveUsedOptionsPipe, RemoveUsedOptionsReactivePipe, ReplaceAllPipe, RequestLoggerInterceptorService, RequestTimeoutInterceptorService, ResizeGridPipe, ResponsiveValPipe, ResponsivenessDirective, RichTextEditorComponent, RichTextEditorRFComponent, RingRipplesComponent, RoundPipe, RouteItem, RowActionsComponent, RowActionsComponent as RowActionsModule, BaseEffect as SDKBaseEffect, BaseFacadeService as SDKBaseFacadeService, BaseService as SDKBaseService, SDKTranslateNoLoaderPipe, SDKTranslatePipe, SaverClass, SaverService, SecondsToTimePipe, SharedModule, SortPipe, SpinnerComponent, StorageClass, StrConcatenatorPipe, SvgIconComponent, SvgIconService, TableBaseComponent, TableCol, TableHttpsComponent, TableInputClassFunctionPipe, TableInputComponent, TableInputRowComponent, TablePipesModule, TablePlainComponent, TableService, TableToStringPipe, TextAreaModalComponent, TextAreaModalService, TextCase1Component, TextCase2Component, TextCase2ForObject, TextCaseInputComponent, TextCaseService, TextComponent, ToAnyArrayPipe, ToAnyPipe, ToggleInputFormComponent, TranslatePipeModule, TranslationService, TranslatorCaseComponent, TranslatorDirective, TrimPipe, TrimTextPipe, TyperPipe, UserActivity, UserActivityService, UtilityPipesModule, UtilityService, ValidationMessageComponent, ValidationMessageNgmodelComponent, ValidationMsg, Validator, ValueFormatterPipe, ValueOrXPipe, VerticalNavComponent, ViewFormButtonsComponent, ViewFormButtonsComponent as ViewFormButtonsModule, WatermarkComponent, WebUserAuthenticationService, WebUserForgotPasswordComponent, WebUserLoginComponent, WebUserResetPasswordComponent, WebcamMediaComponent, XOrYPipe, YearMonthTdRfComponent, _SharedModule, configForms, configPatterns, configValidationMessages, environment, pageErrorRouter, webUserAuthenticationGuard, webUserAuthenticationInterceptor };
+export { AddItemComponent, ApiService, AppRouteBase, AppRouteService, AppRouteState, AppService, ArraySplitter, AuthenticationInterceptorService, AutocompleteComponent, AutocompleteModule, AutocompleteService, AutocompleteTdRfComponent, BaseNativeEventListenerDirective, BlinkingBlocksComponent, BouncingBallComponent, Btn, BtnComponent, BtnLg, BtnLgComponent, BtnLinkComponent, BtnModule, BtnService, ButtonComponent, CETSInput, CacheService, CacheUpdaterService, CardComponent, CardComponent as CardModule, CodeTitleDescPipe, CommafyNumberDirective, ButtonComponent as ComponentsModule, Config, ConfirmDialogComponent, ConfirmDialogComponent as ConfirmDialogModule, Constant, CustomDatePipe, DEFAULT_TIMEOUT, DateInputComponent, Day, DayHourMinInputComponent, DebouncerService, DesktopClassDirective, DetailsBtnComponent, DetailsBtnComponent as DetailsBtnModule, DirectivesModule, DocumentsNameDisplayComponent, DocumentsNameDisplayComponent as DocumentsNameDisplayModule, DragDropFileUploadDirective, EETSPageBtnID, ELanguage, EMenuLocation, EMenuType, EPageType, ESubSystem, ESystem, ESystemBusLine, ETSCheckForUpdateService, ETSConfirmDialogService, ETSExtraPagesModule, ETSFKVP, ETSForms, ETSHandleUnrecoverableStateService, ETSKVP, ETSLogUpdateService, ETSLoggerModule, ETSMenuItem, ETSMenuItemDivider, ETSPageNotFoundComponent, ETSPromptUpdateService, ETSReactiveFormInputService, ETSResetModule, ETSResponsivenessDirectiveModule, ETSRobotModule, ETSServiceWorkerService, ETSStorageService, ETSThemeService, ETSTimeoutTesterModule, ETSVersionModule, ETSWindowSecurityService, EUA, EVFunctions, EValidationType, EditableTextCaseComponent, EditableTextCaseComponent as EditableTextCaseModule, SDKEnvironment as Environment, EqualChildrenDirective, ErrorMessagePipe, ErrorReporterService, ExportTableComponent, ExportTableComponent as ExportTableModule, FCInput, FadingBarsComponent, FadingCirclesComponent, FieldToLabelPipe, FieldsToDisplayComponent, FileUploadComponent, FilterArrayByStringPipe, FilterArrayPipe, FilterFormArrayControlPipe, FilterFormArrayGroupPipe, FilterOptions, FindItemComponent, FormErrorComponent, FormGeneratedValueComponent, FormGeneratorComponent, FormGeneratorComponent as FormGeneratorModule, FormGeneratorService, FormInvalidClassDirective, FormInvalidClassPipe, FormLinkComponent, FormLinkComponent as FormLinkModule, FormSchemaToTableColumnsPipe, FormTabHeadersComponent, FormTabHeadersComponent as FormTabHeadersModule, FormValuePipe, FunctionCaller, FunctionCaller1, FunctionCaller2, FunctionCaller3, GenderPipe, GetColFormattedEPipe, GetColFormattedPipe, GetHeadersPipe, GetRawFieldsPipe, GetValueLabel, GlobalErrorHandlerService, HasFormValuePipe, HasValuePipe, HideDesktopDirective, HideMobileDirective, HtmlerService, HttpListCaller, HttpListCaller1, HttpListCaller2, IdlerComponent, IdlerService, ImageLoaderDirective, ImageUpload, IndexCompLayoutComponent, InfoDialogComponent, InfoDialogModule, InfoDialogService, InfoIconComponent, InfoIconComponent as InfoIconModule, InputBasicComponent, InputClassPipe, InputComponent, inputs_component as InputComponents, InputControlComponent, InputFormatDirective, InputFormatDirectivesModule, InputFormatService, InputFormattersPipe, InputLabelComponent, InputModule, InputNGModelComponent, InputNGModelComponent as InputNGModelModule, InputPipesModule, InputService, InputTD_RFComponent, InputTableComponent, InputTableService, IntegerOnlyDirective, IsClonePage, IsShowPage, LabelComponent, LabelComponent as LabelModule, Lbl, ListOptionFinderPipe, LoaderComponent, LoaderComponent as LoaderModule, LoaderService, LocalCacheService, Log, LoggerComponent, LoggerInterceptorService, LoggerRoutingModule, LoggerService, MHrefDirective, MobileClassDirective, ModalBodyDirective, ModalComponent, ModalComponents, ModalFooterDirective, ModalFormComponent, ModalFormComponent as ModalFormModule, ModalHeaderComponent, ModalHeaderComponent as ModalHeaderModule, ModalComponent as ModalModule, MouseClickListenerDirective, MouseEnterListenerDirective, MouseLeaveListenerDirective, MrouterLinkirective, NELEventName, NarrationHistoryCompComponent, NativeEventListenerDirectives, NegativeNumberOnlyDirective, NotificationsComponent, NotificationsService, ObjectToArrayPipe, ObjectToLabelsPipe, OnClickDirective, OptionLabeller, OptionerPipe, OptionsFormatter, PSDirective, PageCenterBodyComponent, PageLoader, PageLoaderService, PageModal, PageService, PageTemplateComponent, PageTemplateComponent as PageTemplateModule, PageToComponentComponent, PageToComponentDirective, PageToComponentComponent as PageToComponentModule, PageToComponentService, PaginatorComponent, PaginatorPipe, PhoneNumberComponent, PhoneNumberService, PointerMoveListenerDirective, prototypes as Prototypes, RefresherPipe, RemoveUsedOptionsPipe, RemoveUsedOptionsReactivePipe, ReplaceAllPipe, RequestLoggerInterceptorService, RequestTimeoutInterceptorService, ResizeGridPipe, ResponsiveValPipe, ResponsivenessDirective, RichTextEditorComponent, RichTextEditorRFComponent, RingRipplesComponent, RoundPipe, RouteItem, RowActionsComponent, RowActionsComponent as RowActionsModule, BaseEffect as SDKBaseEffect, BaseFacadeService as SDKBaseFacadeService, BaseService as SDKBaseService, SDKTranslateNoLoaderPipe, SDKTranslatePipe, SDKTranslateSingleNoLoaderPipe, SDKTranslateSinglePipe, SaverClass, SaverService, SecondsToTimePipe, SharedModule, SortPipe, SpinnerComponent, StorageClass, StrConcatenatorPipe, SvgIconComponent, SvgIconService, TableBaseComponent, TableCol, TableHttpsComponent, TableInputClassFunctionPipe, TableInputComponent, TableInputRowComponent, TablePipesModule, TablePlainComponent, TableService, TableToStringPipe, TextAreaModalComponent, TextAreaModalService, TextCase1Component, TextCase2Component, TextCase2ForObject, TextCaseInputComponent, TextCaseService, TextComponent, ToAnyArrayPipe, ToAnyPipe, ToggleInputFormComponent, TranslatePipeModule, TranslationService, TranslatorCaseComponent, TranslatorDirective, TrimPipe, TrimTextPipe, TyperPipe, UserActivity, UserActivityService, UtilityPipesModule, UtilityService, ValidationMessageComponent, ValidationMessageNgmodelComponent, ValidationMsg, Validator, ValueFormatterPipe, ValueOrXPipe, VerticalNavComponent, ViewFormButtonsComponent, ViewFormButtonsComponent as ViewFormButtonsModule, WatermarkComponent, WebUserAuthenticationService, WebUserForgotPasswordComponent, WebUserLoginComponent, WebUserResetPasswordComponent, WebcamMediaComponent, XOrYPipe, YearMonthTdRfComponent, _SharedModule, configForms, configPatterns, configValidationMessages, environment, pageErrorRouter, webUserAuthenticationGuard, webUserAuthenticationInterceptor };
 //# sourceMappingURL=ets-fe-ng-sdk.mjs.map