ets-fe-ng-sdk 19.0.71 → 19.0.72

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

@@ -6883,11 +6883,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.1.1", ngImport: i0, type: InputBasicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputBasicComponent, isStandalone: true, selector: "app-input-basic,app-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, inp: { classPropertyName: "inp", publicName: "input", isSignal: false, isRequired: false, transformFunction: null }, contextData: { classPropertyName: "contextData", publicName: "contextData", isSignal: false, isRequired: false, transformFunction: null }, decimalPoints: { classPropertyName: "decimalPoints", publicName: "decimalPoints", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: false, isRequired: false, transformFunction: null }, clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, labelLink: { classPropertyName: "labelLink", publicName: "labelLink", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, optionsFunc: { classPropertyName: "optionsFunc", publicName: "optionsFunc", isSignal: false, isRequired: false, transformFunction: null }, vms: { classPropertyName: "vms", publicName: "vms", isSignal: false, isRequired: false, transformFunction: null }, _setCurrentDate: { classPropertyName: "_setCurrentDate", publicName: "setCurrentDate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", mSelectedOptionLabel: "mSelectedOptionLabel" }, providers: InputProviders, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelectTag"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n  <div>disabledSignal: {{ disabledSignal() }}</div>\n  <div>validSignal: {{ validSignal() }}</div>\n  <div>invalidSignal: {{ invalidSignal() }}</div>\n  <div>valueSignal: {{ valueSignal() }}</div>\n  <div>hasValue: {{ hasValue() }}</div>\n  <div>dirtySignal: {{ dirtySignal() }}</div>\n  <div>touchedSignal: {{ touchedSignal() }}</div>\n  <div>errorsSignal: {{ errorsSignaljson() }}</div>\n  <div>pendingSignal: {{ pendingSignal() }}</div>\n  <div>requiredSignal: {{ requiredSignal() }}</div>\n  <div>pristineSignal: {{ pristineSignal() }}</div>\n  <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n  <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n  <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            [class]=\"inputClassSignal()\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputBasicComponent, isStandalone: true, selector: "app-input-basic,app-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, inp: { classPropertyName: "inp", publicName: "input", isSignal: false, isRequired: false, transformFunction: null }, contextData: { classPropertyName: "contextData", publicName: "contextData", isSignal: false, isRequired: false, transformFunction: null }, decimalPoints: { classPropertyName: "decimalPoints", publicName: "decimalPoints", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: false, isRequired: false, transformFunction: null }, clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, labelLink: { classPropertyName: "labelLink", publicName: "labelLink", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, optionsFunc: { classPropertyName: "optionsFunc", publicName: "optionsFunc", isSignal: false, isRequired: false, transformFunction: null }, vms: { classPropertyName: "vms", publicName: "vms", isSignal: false, isRequired: false, transformFunction: null }, _setCurrentDate: { classPropertyName: "_setCurrentDate", publicName: "setCurrentDate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", mSelectedOptionLabel: "mSelectedOptionLabel" }, providers: InputProviders, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelectTag"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n  <div>disabledSignal: {{ disabledSignal() }}</div>\n  <div>validSignal: {{ validSignal() }}</div>\n  <div>invalidSignal: {{ invalidSignal() }}</div>\n  <div>valueSignal: {{ valueSignal() }}</div>\n  <div>hasValue: {{ hasValue() }}</div>\n  <div>dirtySignal: {{ dirtySignal() }}</div>\n  <div>touchedSignal: {{ touchedSignal() }}</div>\n  <div>errorsSignal: {{ errorsSignaljson() }}</div>\n  <div>pendingSignal: {{ pendingSignal() }}</div>\n  <div>requiredSignal: {{ requiredSignal() }}</div>\n  <div>pristineSignal: {{ pristineSignal() }}</div>\n  <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n  <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n  <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            [class]=\"inputClassSignal()\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            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 | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accept: [{
                 type: Input
             }], autocomplete: [{
@@ -6985,11 +6985,11 @@ class InputTD_RFComponent extends InputBasicComponent {
         super.ngAfterViewInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputTD_RFComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputTD_RFComponent, isStandalone: true, selector: "app-input-td-rf", inputs: { _validators: ["validators", "_validators"], _asyncValidators: ["asyncValidators", "_asyncValidators"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, providers: InputProviders, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n  <div>disabledSignal: {{ disabledSignal() }}</div>\n  <div>validSignal: {{ validSignal() }}</div>\n  <div>invalidSignal: {{ invalidSignal() }}</div>\n  <div>valueSignal: {{ valueSignal() }}</div>\n  <div>hasValue: {{ hasValue() }}</div>\n  <div>dirtySignal: {{ dirtySignal() }}</div>\n  <div>touchedSignal: {{ touchedSignal() }}</div>\n  <div>errorsSignal: {{ errorsSignaljson() }}</div>\n  <div>pendingSignal: {{ pendingSignal() }}</div>\n  <div>requiredSignal: {{ requiredSignal() }}</div>\n  <div>pristineSignal: {{ pristineSignal() }}</div>\n  <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n  <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n  <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            [class]=\"inputClassSignal()\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputTD_RFComponent, isStandalone: true, selector: "app-input-td-rf", inputs: { _validators: ["validators", "_validators"], _asyncValidators: ["asyncValidators", "_asyncValidators"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, providers: InputProviders, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n  <div>disabledSignal: {{ disabledSignal() }}</div>\n  <div>validSignal: {{ validSignal() }}</div>\n  <div>invalidSignal: {{ invalidSignal() }}</div>\n  <div>valueSignal: {{ valueSignal() }}</div>\n  <div>hasValue: {{ hasValue() }}</div>\n  <div>dirtySignal: {{ dirtySignal() }}</div>\n  <div>touchedSignal: {{ touchedSignal() }}</div>\n  <div>errorsSignal: {{ errorsSignaljson() }}</div>\n  <div>pendingSignal: {{ pendingSignal() }}</div>\n  <div>requiredSignal: {{ requiredSignal() }}</div>\n  <div>pristineSignal: {{ pristineSignal() }}</div>\n  <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n  <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n  <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            [class]=\"inputClassSignal()\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            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 | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _validators: [{
                 type: Input,
                 args: ['validators']
@@ -13929,11 +13929,11 @@ class InputControlComponent extends InputBasicComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputControlComponent, isStandalone: true, selector: "input-control", inputs: { setControl: ["control", "setControl"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n  <div>disabledSignal: {{ disabledSignal() }}</div>\n  <div>validSignal: {{ validSignal() }}</div>\n  <div>invalidSignal: {{ invalidSignal() }}</div>\n  <div>valueSignal: {{ valueSignal() }}</div>\n  <div>hasValue: {{ hasValue() }}</div>\n  <div>dirtySignal: {{ dirtySignal() }}</div>\n  <div>touchedSignal: {{ touchedSignal() }}</div>\n  <div>errorsSignal: {{ errorsSignaljson() }}</div>\n  <div>pendingSignal: {{ pendingSignal() }}</div>\n  <div>requiredSignal: {{ requiredSignal() }}</div>\n  <div>pristineSignal: {{ pristineSignal() }}</div>\n  <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n  <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n  <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            [class]=\"inputClassSignal()\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputControlComponent, isStandalone: true, selector: "input-control", inputs: { setControl: ["control", "setControl"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n  <div>disabledSignal: {{ disabledSignal() }}</div>\n  <div>validSignal: {{ validSignal() }}</div>\n  <div>invalidSignal: {{ invalidSignal() }}</div>\n  <div>valueSignal: {{ valueSignal() }}</div>\n  <div>hasValue: {{ hasValue() }}</div>\n  <div>dirtySignal: {{ dirtySignal() }}</div>\n  <div>touchedSignal: {{ touchedSignal() }}</div>\n  <div>errorsSignal: {{ errorsSignaljson() }}</div>\n  <div>pendingSignal: {{ pendingSignal() }}</div>\n  <div>requiredSignal: {{ requiredSignal() }}</div>\n  <div>pristineSignal: {{ pristineSignal() }}</div>\n  <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n  <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n  <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            [class]=\"inputClassSignal()\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            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 | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { setControl: [{
                 type: Input,
                 args: ['control']
@@ -13976,11 +13976,11 @@ class InputComponent extends InputBase {
             console.log(this.form);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputComponent, isStandalone: true, selector: "app-input-old", inputs: { _inp: ["input", "_inp"], accept: "accept", autocomplete: "autocomplete", endLabel: "endLabel", endLabelTooltip: "endLabelTooltip", files: "files", id: "id", inpCl: "inpCl", labelLink: "labelLink", loading: "loading", multiple: "multiple", optionsFunc: "optionsFunc", showEmptyOption: "showEmptyOption", showLabel: "showLabel", showValidation: "showValidation", showValidationMsg: "showValidationMsg", showValidationIcon: "showValidationIcon", small: "small", stacked: "stacked", _value: ["value", "_value"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n  <div>disabledSignal: {{ disabledSignal() }}</div>\n  <div>validSignal: {{ validSignal() }}</div>\n  <div>invalidSignal: {{ invalidSignal() }}</div>\n  <div>valueSignal: {{ valueSignal() }}</div>\n  <div>hasValue: {{ hasValue() }}</div>\n  <div>dirtySignal: {{ dirtySignal() }}</div>\n  <div>touchedSignal: {{ touchedSignal() }}</div>\n  <div>errorsSignal: {{ errorsSignaljson() }}</div>\n  <div>pendingSignal: {{ pendingSignal() }}</div>\n  <div>requiredSignal: {{ requiredSignal() }}</div>\n  <div>pristineSignal: {{ pristineSignal() }}</div>\n  <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n  <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n  <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            [class]=\"inputClassSignal()\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputComponent, isStandalone: true, selector: "app-input-old", inputs: { _inp: ["input", "_inp"], accept: "accept", autocomplete: "autocomplete", endLabel: "endLabel", endLabelTooltip: "endLabelTooltip", files: "files", id: "id", inpCl: "inpCl", labelLink: "labelLink", loading: "loading", multiple: "multiple", optionsFunc: "optionsFunc", showEmptyOption: "showEmptyOption", showLabel: "showLabel", showValidation: "showValidation", showValidationMsg: "showValidationMsg", showValidationIcon: "showValidationIcon", small: "small", stacked: "stacked", _value: ["value", "_value"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n  <div>disabledSignal: {{ disabledSignal() }}</div>\n  <div>validSignal: {{ validSignal() }}</div>\n  <div>invalidSignal: {{ invalidSignal() }}</div>\n  <div>valueSignal: {{ valueSignal() }}</div>\n  <div>hasValue: {{ hasValue() }}</div>\n  <div>dirtySignal: {{ dirtySignal() }}</div>\n  <div>touchedSignal: {{ touchedSignal() }}</div>\n  <div>errorsSignal: {{ errorsSignaljson() }}</div>\n  <div>pendingSignal: {{ pendingSignal() }}</div>\n  <div>requiredSignal: {{ requiredSignal() }}</div>\n  <div>pristineSignal: {{ pristineSignal() }}</div>\n  <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n  <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n  <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n  class=\"  custom-input align-items-center {{ typeSignal() }} gx-1\"\n  [formGroup]=\"form() | toAny\"\n  [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", 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  @let placeholderTrans = placeholder() | appTranslateNL | async;\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [ngClass]=\"{ 'w-100': stackedSignal() }\"\n      [inlineHint]=\"inlineHint()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n    <div\n      class=\"position-relative d-flex input-content w-100\"\n      [ngClass]=\"{\n        'ms-2': !stackedSignal(),\n        showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n        dontFormatAsInput: dontFormatAsInputSignal(),\n      }\">\n      <ng-template #date>\n        <date-input\n          #dateInput\n          [debug]=\"debug()\"\n          [readonly]=\"readonlySignal()\"\n          [id]=\"idSignal()\"\n          class=\"w-100\"\n          [type]=\"typeSignal()\"\n          (valueChanged)=\"dateChanged($event)\"\n          [value]=\"valueSignal()\"\n          [inputClass]=\"inputClassSignal()\"\n          [disabled]=\"disabledSignal()\"\n          [max]=\"maxSignal()\"\n          [min]=\"minSignal()\"\n          [valid]=\"validSignal()\"\n          [invalid]=\"invalidSignal()\"\n          [showValidation]=\"showValidationSignal()\" />\n      </ng-template>\n      @switch (typeSignal()) {\n        <!-- DATE -->\n        @case ('date') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- DATETIME-LOCAL -->\n        @case ('datetime-local') {\n          <ng-container *ngTemplateOutlet=\"date\" />\n        }\n        <!-- CHECKBOX -->\n        @case ('checkbox') {\n          <input\n            type=\"checkbox\"\n            [id]=\"idSignal()\"\n            [formControlName]=\"nameStrSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [attr.data-debug]=\"debug()\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [checked]=\"checkedSignal()\"\n            [attr.indeterminate]=\"indeterminate\" />\n        }\n        @case ('checkedbox') {\n          <input\n            type=\"checkbox\"\n            class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n            [checked]=\"checkedSignal()\"\n            [attr.data-debug]=\"debug()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\" />\n        }\n        <!-- FILE -->\n        @case ('file') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\" />\n        }\n        <!-- FILE BUTTON-->\n        @case ('fileButton') {\n          <input\n            type=\"file\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            (change)=\"upload($event)\"\n            [accept]=\"accept\"\n            [attr.multiple]=\"multiple\"\n            hidden\n            #file />\n          <app-btn\n            class=\"w-100\"\n            (mclick)=\"file.click()\"\n            icon=\"upload\"\n            [type]=\"files ? 'primary' : 'secondary'\"\n            text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n        }\n        <!-- SELECT -->\n        @case ('select') {\n          <!-- [attr.disabled]=\"disabled\" -->\n          <mat-select\n            #matSelectTag\n            placeholder=\"{{ placeholderTrans }}\"\n            formControlName=\"{{ nameStrSignal() }}\"\n            [id]=\"idSignal()\"\n            class=\"{{ cls() }} {{ inputClassSignal() }}\"\n            [required]=\"requiredSignal()\"\n            (selectionChange)=\"change({ target: $event })\"\n            [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            [class]=\"inputClassSignal()\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+            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 | appTranslateNL | async\"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!selectedOption()?.hint\">\n            @if (showEmptyOptionSignal()) {\n              <mat-option selected [value]=\"null\" class=\"empty-option\">\n                {{ placeholderTrans }}\n              </mat-option>\n            }\n            @for (item of options(); track item._id) {\n              <mat-option\n                [value]=\"item.value\"\n                (onSelectionChange)=\"selectOption(item)\"\n                [matTooltip]=\"item.hint || item.label | appTranslateNL | async\"\n                [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n                [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n                <div class=\"option\" #ele>\n                  {{ item.label }}\n                </div>\n              </mat-option>\n            }\n          </mat-select>\n        }\n        <!-- TEXTAREA -->\n        @case ('textarea') {\n          <textarea\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [rows]=\"textareaRowsSignal()\"\n            [required]=\"requiredSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"></textarea>\n        }\n        <!-- Radio -->\n        @case ('radio') {\n          <input\n            type=\"radio\"\n            [formControlName]=\"nameStrSignal()\"\n            [id]=\"idSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- Viewer -->\n        @case ('viewer') {\n          <input\n            type=\"text\"\n            [id]=\"idSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [class]=\"inputClassSignal()\"\n            [readonly]=\"true\"\n            [value]=\"valueSignal()\" />\n        }\n        <!-- PASSWORD -->\n        @case ('password') {\n          <input\n            type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n            [formControlName]=\"nameStrSignal()\"\n            placeholder=\"{{ placeholderTrans }}\"\n            [attr.data-noformat]=\"computedNoFormat()\"\n            [id]=\"idSignal()\"\n            [class]=\"inputClassSignal()\"\n            [required]=\"requiredSignal()\"\n            [max]=\"maxSignal()\"\n            [min]=\"minSignal()\"\n            [readonly]=\"readonlySignal()\"\n            (change)=\"change($event)\"\n            [value]=\"valueSignal()\" />\n          <div\n            class=\"password-icons pointer\"\n            (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n            @if (showPasswordSignal()) {\n              <i class=\"fa fa-eye-slash\"></i>\n            } @else {\n              <i class=\"fa fa-eye\"></i>\n            }\n          </div>\n        }\n        <!-- DEFAULT -->\n        @default {\n          <div\n            class=\"{{inputClassSignal()}} input-container\"\n            [ngClass]=\"{\n              'has-prefix': !!prefixSignal(),\n              disabled: readonlySignal() || disabledSignal(),\n            }\">\n            @if (prefixSignal()) {\n              <div class=\"prefix-val\" #prefixVal>\n                {{ prefixSignal() }}\n              </div>\n            }\n            <input\n              [type]=\"typeSignal()\"\n              [formControlName]=\"nameStrSignal()\"\n              placeholder=\"{{ placeholderTrans }}\"\n              [id]=\"idSignal()\"\n              [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n              [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n              #ele\n              [attr.data-debug]=\"debug()\"\n              [attr.data-noformat]=\"computedNoFormat()\"\n              [attr.data-otype]=\"oTypeSignal()\"\n              [required]=\"requiredSignal()\"\n              [max]=\"maxSignal()\"\n              [min]=\"minSignal()\"\n              [readonly]=\"readonlySignal()\"\n              (change)=\"change($event)\" />\n          </div>\n        }\n      }\n\n      @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n        <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n        <mat-error *ngFor=\"let validation of inp.vms\">\n          <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n            {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n          </ng-container>\n        </mat-error>\n      </mat-form-field> -->\n    </div>\n    @if (endLabelSignal()) {\n      <div\n        class=\"col-auto text-primary ms-2\"\n        (click)=\"iS.log(form())\"\n        [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n        {{ endLabelSignal() | appTranslateNL | async }}\n      </div>\n    }\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message\n    [label]=\"labelSignal()\"\n    [minLength]=\"minLength()\"\n    [debug]=\"debug()\"\n    [maxLength]=\"maxLength()\"\n    [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], propDecorators: { _inp: [{
                 type: Input,
                 args: ['input']