ets-fe-ng-sdk 20.3.14 → 20.3.15

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

@@ -5709,7 +5709,7 @@ class BtnComponent {
         this._mclass.update((mclass) => _mclass || mclass);
         if (_icon)
             this._icon = _icon;
-        if (_type != v)
+        if (_type && _type != v)
             this._type = _type;
     }
     /**
@@ -10642,11 +10642,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: "20.3.2", ngImport: i0, type: InputBasicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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          [timeType]=\"timeType()\"\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", "timeType", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { 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: i2$2.FormsModule }, { kind: "directive", type: i2$2.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: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.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$1.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: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2$2.ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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          [timeType]=\"timeType()\"\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:0;height:100%;display:flex;align-items:center}[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", "timeType", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { 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: i2$2.FormsModule }, { kind: "directive", type: i2$2.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: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.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$1.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: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2$2.ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", 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          [timeType]=\"timeType()\"\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"] }]
+            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          [timeType]=\"timeType()\"\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:0;height:100%;display:flex;align-items:center}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accept: [{
                 type: Input
             }], autocomplete: [{
@@ -10779,11 +10779,11 @@ class InputTD_RFComponent extends InputBasicComponent {
         super.ngAfterViewInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: InputTD_RFComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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          [timeType]=\"timeType()\"\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", "timeType", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { 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: i2$2.FormsModule }, { kind: "directive", type: i2$2.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: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.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$1.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: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2$2.ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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          [timeType]=\"timeType()\"\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:0;height:100%;display:flex;align-items:center}[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", "timeType", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { 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: i2$2.FormsModule }, { kind: "directive", type: i2$2.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: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.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$1.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: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2$2.ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", 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          [timeType]=\"timeType()\"\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"] }]
+            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          [timeType]=\"timeType()\"\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:0;height:100%;display:flex;align-items:center}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _validators: [{
                 type: Input,
                 args: ['validators']
@@ -10996,7 +10996,7 @@ class AutocompleteTdRfComponent extends InputTD_RFComponent {
         }, 600);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutocompleteTdRfComponent, deps: [{ token: AutocompleteService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: AutocompleteTdRfComponent, isStandalone: true, selector: "autocomplete-td-rf,app-autocomplete-td-rf", inputs: { validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true, isSignal: true }, { propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        class=\"{{inputClassSignal()}} input-container\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: ["i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: AutocompleteTdRfComponent, isStandalone: true, selector: "autocomplete-td-rf,app-autocomplete-td-rf", inputs: { validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true, isSignal: true }, { propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        class=\"{{ inputClassSignal() }} input-container\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <div class=\"input-icon-cont\">\n          <i\n            class=\"input-icon fa fa-search\"\n            (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n        </div>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [":host .input-icon-cont{right:7px;position:absolute;top:0;height:100%;display:flex;align-items:center}:host .input-icon-cont i.input-icon{opacity:.4;font-size:10px}:host .option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutocompleteTdRfComponent, decorators: [{
             type: Component,
@@ -11012,7 +11012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         AsyncPipe,
                         ToAnyPipe,
                         SDKTranslateNoLoaderPipe,
-                    ], template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        class=\"{{inputClassSignal()}} input-container\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: ["i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+                    ], template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        class=\"{{ inputClassSignal() }} input-container\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <div class=\"input-icon-cont\">\n          <i\n            class=\"input-icon fa fa-search\"\n            (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n        </div>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [":host .input-icon-cont{right:7px;position:absolute;top:0;height:100%;display:flex;align-items:center}:host .input-icon-cont i.input-icon{opacity:.4;font-size:10px}:host .option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: AutocompleteService }], propDecorators: { validate: [{
                 type: Input
             }], _options: [{
@@ -11160,7 +11160,7 @@ class AutocompleteComponent extends InputBasicComponent {
         }, 600);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete,autocomplete", inputs: { showRequiredTag: { classPropertyName: "showRequiredTag", publicName: "showRequiredTag", isSignal: false, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true, isSignal: true }, { propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        class=\"{{inputClassSignal()}} input-container\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", "i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete,autocomplete", inputs: { showRequiredTag: { classPropertyName: "showRequiredTag", publicName: "showRequiredTag", isSignal: false, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true, isSignal: true }, { propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        class=\"{{ inputClassSignal() }} input-container\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <div class=\"input-icon-cont\">\n          <i\n            class=\"input-icon fa fa-search\"\n            (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n        </div>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:0;height:100%;display:flex;align-items:center}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", ":host .input-icon-cont{right:7px;position:absolute;top:0;height:100%;display:flex;align-items:center}:host .input-icon-cont i.input-icon{opacity:.4;font-size:10px}:host .option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -11176,7 +11176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         AsyncPipe,
                         ToAnyPipe,
                         SDKTranslateNoLoaderPipe,
-                    ], template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        class=\"{{inputClassSignal()}} input-container\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", "i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+                    ], template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        class=\"{{ inputClassSignal() }} input-container\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <div class=\"input-icon-cont\">\n          <i\n            class=\"input-icon fa fa-search\"\n            (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n        </div>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:0;height:100%;display:flex;align-items:center}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", ":host .input-icon-cont{right:7px;position:absolute;top:0;height:100%;display:flex;align-items:center}:host .input-icon-cont i.input-icon{opacity:.4;font-size:10px}:host .option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], propDecorators: { showRequiredTag: [{
                 type: Input
             }], validate: [{
@@ -15766,7 +15766,7 @@ class PhoneNumberComponent extends InputBasicComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PhoneNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PhoneNumberComponent, isStandalone: true, selector: "app-phone-number", inputs: { showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, _countryCode3: { classPropertyName: "_countryCode3", publicName: "countryCode3", isSignal: true, isRequired: false, transformFunction: null }, _config: { classPropertyName: "_config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCountrySelect: "onCountrySelect" }, viewQueries: [{ propertyName: "pnRef", first: true, predicate: ["pn"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form() | toAny\" class=\"row\">\n  @if (showLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showLabel]=\"showLabel()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <input\n    type=\"text\"\n    ngTelInput\n    [formControlName]=\"nameStrSignal()\"\n    [class]=\"inputClassSignal()\"\n    [ng2TelInputOptions]=\"config()\"\n    #pn\n    (ng2TelOutput)=\"getNumber($event)\"\n    (intlTelInputObject)=\"telInputObject($event)\"\n    (countryChange)=\"onCountrySelect.emit($event)\" />\n  @if (showValidationMsgSignal()) {\n    <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n  }\n  <!-- <input type=\"text\" [formControlName]=\"name|toAny\" [class]=\"inpCl|inputClass:valid:invalid:showValidation\" ng2TelInput\n    [ng2TelInputOptions]=\"config\" (hasError)=\"isValid($event)\" #pn (ng2TelOutput)=\"getNumber($event)\"\n    (intlTelInputObject)=\"telInputObject($event)\" (countryChange)=\"onCountryChange($event)\" /> -->\n</div>\n", styles: ["", ".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "directive", type: NGTelInputDirective, selector: "[ngTelInput]", inputs: ["scriptPath", "utilScriptPath", "ng2TelInputOptions"], outputs: ["hasError", "ng2TelOutput", "countryChange", "intlTelInputObject"], exportAs: ["ngTelInput"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PhoneNumberComponent, isStandalone: true, selector: "app-phone-number", inputs: { showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, _countryCode3: { classPropertyName: "_countryCode3", publicName: "countryCode3", isSignal: true, isRequired: false, transformFunction: null }, _config: { classPropertyName: "_config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCountrySelect: "onCountrySelect" }, viewQueries: [{ propertyName: "pnRef", first: true, predicate: ["pn"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form() | toAny\" class=\"row\">\n  @if (showLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showLabel]=\"showLabel()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <input\n    type=\"text\"\n    ngTelInput\n    [formControlName]=\"nameStrSignal()\"\n    [class]=\"inputClassSignal()\"\n    [ng2TelInputOptions]=\"config()\"\n    #pn\n    (ng2TelOutput)=\"getNumber($event)\"\n    (intlTelInputObject)=\"telInputObject($event)\"\n    (countryChange)=\"onCountrySelect.emit($event)\" />\n  @if (showValidationMsgSignal()) {\n    <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n  }\n  <!-- <input type=\"text\" [formControlName]=\"name|toAny\" [class]=\"inpCl|inputClass:valid:invalid:showValidation\" ng2TelInput\n    [ng2TelInputOptions]=\"config\" (hasError)=\"isValid($event)\" #pn (ng2TelOutput)=\"getNumber($event)\"\n    (intlTelInputObject)=\"telInputObject($event)\" (countryChange)=\"onCountryChange($event)\" /> -->\n</div>\n", styles: ["", ".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:0;height:100%;display:flex;align-items:center}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "directive", type: NGTelInputDirective, selector: "[ngTelInput]", inputs: ["scriptPath", "utilScriptPath", "ng2TelInputOptions"], outputs: ["hasError", "ng2TelOutput", "countryChange", "intlTelInputObject"], exportAs: ["ngTelInput"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PhoneNumberComponent, decorators: [{
             type: Component,
@@ -15778,7 +15778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         InputClassPipe,
                         ToAnyPipe,
                         NGTelInputDirective
-                    ], template: "<div [formGroup]=\"form() | toAny\" class=\"row\">\n  @if (showLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showLabel]=\"showLabel()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <input\n    type=\"text\"\n    ngTelInput\n    [formControlName]=\"nameStrSignal()\"\n    [class]=\"inputClassSignal()\"\n    [ng2TelInputOptions]=\"config()\"\n    #pn\n    (ng2TelOutput)=\"getNumber($event)\"\n    (intlTelInputObject)=\"telInputObject($event)\"\n    (countryChange)=\"onCountrySelect.emit($event)\" />\n  @if (showValidationMsgSignal()) {\n    <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n  }\n  <!-- <input type=\"text\" [formControlName]=\"name|toAny\" [class]=\"inpCl|inputClass:valid:invalid:showValidation\" ng2TelInput\n    [ng2TelInputOptions]=\"config\" (hasError)=\"isValid($event)\" #pn (ng2TelOutput)=\"getNumber($event)\"\n    (intlTelInputObject)=\"telInputObject($event)\" (countryChange)=\"onCountryChange($event)\" /> -->\n</div>\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+                    ], template: "<div [formGroup]=\"form() | toAny\" class=\"row\">\n  @if (showLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form()\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showLabel]=\"showLabel()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <input\n    type=\"text\"\n    ngTelInput\n    [formControlName]=\"nameStrSignal()\"\n    [class]=\"inputClassSignal()\"\n    [ng2TelInputOptions]=\"config()\"\n    #pn\n    (ng2TelOutput)=\"getNumber($event)\"\n    (intlTelInputObject)=\"telInputObject($event)\"\n    (countryChange)=\"onCountrySelect.emit($event)\" />\n  @if (showValidationMsgSignal()) {\n    <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n  }\n  <!-- <input type=\"text\" [formControlName]=\"name|toAny\" [class]=\"inpCl|inputClass:valid:invalid:showValidation\" ng2TelInput\n    [ng2TelInputOptions]=\"config\" (hasError)=\"isValid($event)\" #pn (ng2TelOutput)=\"getNumber($event)\"\n    (intlTelInputObject)=\"telInputObject($event)\" (countryChange)=\"onCountryChange($event)\" /> -->\n</div>\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:0;height:100%;display:flex;align-items:center}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }] });
 
 // debugger;
@@ -18191,11 +18191,11 @@ class InputControlComponent extends InputBasicComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: InputControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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          [timeType]=\"timeType()\"\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", "timeType", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { 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: i2$2.FormsModule }, { kind: "directive", type: i2$2.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: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.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$1.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: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2$2.ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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          [timeType]=\"timeType()\"\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:0;height:100%;display:flex;align-items:center}[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", "timeType", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { 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: i2$2.FormsModule }, { kind: "directive", type: i2$2.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: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.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$1.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: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2$2.ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", 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          [timeType]=\"timeType()\"\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"] }]
+            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          [timeType]=\"timeType()\"\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:0;height:100%;display:flex;align-items:center}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { setControl: [{
                 type: Input,
                 args: ['control']
@@ -18268,11 +18268,11 @@ class InputComponent extends InputBase {
             console.log(this.form);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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          [timeType]=\"timeType()\"\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", "timeType", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { 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: i2$2.FormsModule }, { kind: "directive", type: i2$2.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: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.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$1.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: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2$2.ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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          [timeType]=\"timeType()\"\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:0;height:100%;display:flex;align-items:center}[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", "timeType", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { 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: i2$2.FormsModule }, { kind: "directive", type: i2$2.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: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.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$1.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: i1.MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i2$2.ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", 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          [timeType]=\"timeType()\"\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"] }]
+            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          [timeType]=\"timeType()\"\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:0;height:100%;display:flex;align-items:center}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], propDecorators: { _inp: [{
                 type: Input,
                 args: ['input']
@@ -22969,8 +22969,13 @@ class AppService {
      * Sets the default CSS class on the body element based on the first available system
      */
     setDefaultClass() {
-        document.getElementsByTagName('body')[0].className =
-            this.getFirstAvailableSystem.name?.toString();
+        try {
+            document.getElementsByTagName('body')[0].className =
+                this.getFirstAvailableSystem?.name?.toString();
+        }
+        catch (error) {
+            console.warn(error);
+        }
     }
     /**
      * Gets the bus line for the current system