ets-fe-ng-sdk 19.0.53 → 19.0.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ets-fe-ng-sdk.mjs +30 -35
- package/fesm2022/ets-fe-ng-sdk.mjs.map +1 -1
- package/lib/Services/utility.service.d.ts +1 -1
- package/lib/Shared/components/autocomplete/autocomplete-td-rf/autocomplete-td-rf.component.d.ts +1 -1
- package/lib/Shared/components/autocomplete/autocomplete.component.d.ts +1 -2
- package/lib/Shared/components/btn/btn.component.d.ts +2 -2
- package/lib/Shared/components/index-comp-layout/index-comp-layout.component.d.ts +1 -1
- package/lib/Shared/components/input/input-basic.component.d.ts +2 -2
- package/lib/Shared/components/phone-number/phone-number.component.d.ts +4 -4
- package/lib/Shared/components/table/table-https/table-https.component.d.ts +3 -3
- package/package.json +1 -1
|
@@ -6781,6 +6781,7 @@ class InputBasicComponent extends InputBase {
|
|
|
6781
6781
|
super();
|
|
6782
6782
|
this.autocomplete = true;
|
|
6783
6783
|
this.clearOnDisable = input(true);
|
|
6784
|
+
this.loading = model(undefined);
|
|
6784
6785
|
this.mSelectedOptionLabel = new EventEmitter();
|
|
6785
6786
|
this.options$ = new ReplaySubject();
|
|
6786
6787
|
effect(() => {
|
|
@@ -6856,11 +6857,11 @@ class InputBasicComponent extends InputBase {
|
|
|
6856
6857
|
this.control()?.patchValue(this.multiple ? this.files : this.files[0]);
|
|
6857
6858
|
}
|
|
6858
6859
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputBasicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6859
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputBasicComponent, isStandalone: true, selector: "app-input-basic,app-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, inp: { classPropertyName: "inp", publicName: "input", isSignal: false, isRequired: false, transformFunction: null }, contextData: { classPropertyName: "contextData", publicName: "contextData", isSignal: false, isRequired: false, transformFunction: null }, decimalPoints: { classPropertyName: "decimalPoints", publicName: "decimalPoints", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: false, isRequired: false, transformFunction: null }, clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, labelLink: { classPropertyName: "labelLink", publicName: "labelLink", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, optionsFunc: { classPropertyName: "optionsFunc", publicName: "optionsFunc", isSignal: false, isRequired: false, transformFunction: null }, vms: { classPropertyName: "vms", publicName: "vms", isSignal: false, isRequired: false, transformFunction: null }, _setCurrentDate: { classPropertyName: "_setCurrentDate", publicName: "setCurrentDate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { mSelectedOptionLabel: "mSelectedOptionLabel" }, providers: InputProviders, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelectTag"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | 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 | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | 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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n <mat-error *ngFor=\"let validation of inp.vms\">\n <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n </ng-container>\n </mat-error>\n </mat-form-field> -->\n </div>\n @if (endLabelSignal()) {\n <div\n class=\"col-auto text-primary ms-2\"\n (click)=\"iS.log(form())\"\n [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n {{ endLabelSignal() | appTranslateNL | async }}\n </div>\n }\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [debug]=\"debug()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
|
|
6860
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputBasicComponent, isStandalone: true, selector: "app-input-basic,app-input", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, inp: { classPropertyName: "inp", publicName: "input", isSignal: false, isRequired: false, transformFunction: null }, contextData: { classPropertyName: "contextData", publicName: "contextData", isSignal: false, isRequired: false, transformFunction: null }, decimalPoints: { classPropertyName: "decimalPoints", publicName: "decimalPoints", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, hide: { classPropertyName: "hide", publicName: "hide", isSignal: false, isRequired: false, transformFunction: null }, clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, labelLink: { classPropertyName: "labelLink", publicName: "labelLink", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, optionsFunc: { classPropertyName: "optionsFunc", publicName: "optionsFunc", isSignal: false, isRequired: false, transformFunction: null }, vms: { classPropertyName: "vms", publicName: "vms", isSignal: false, isRequired: false, transformFunction: null }, _setCurrentDate: { classPropertyName: "_setCurrentDate", publicName: "setCurrentDate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", mSelectedOptionLabel: "mSelectedOptionLabel" }, providers: InputProviders, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelectTag"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n #ele\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-otype]=\"oTypeSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n </div>\n }\n }\n\n @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n @if (pendingSignal()) {\n <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n }\n <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n <mat-error *ngFor=\"let validation of inp.vms\">\n <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n </ng-container>\n </mat-error>\n </mat-form-field> -->\n </div>\n @if (endLabelSignal()) {\n <div\n class=\"col-auto text-primary ms-2\"\n (click)=\"iS.log(form())\"\n [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n {{ endLabelSignal() | appTranslateNL | async }}\n </div>\n }\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [debug]=\"debug()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
|
|
6860
6861
|
}
|
|
6861
6862
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputBasicComponent, decorators: [{
|
|
6862
6863
|
type: Component,
|
|
6863
|
-
args: [{ selector: 'app-input-basic,app-input', providers: InputProviders, imports: [DateInputComponent, InputSharedModules, SDKTranslateNoLoaderPipe], template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | 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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n <mat-error *ngFor=\"let validation of inp.vms\">\n <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n </ng-container>\n </mat-error>\n </mat-form-field> -->\n </div>\n @if (endLabelSignal()) {\n <div\n class=\"col-auto text-primary ms-2\"\n (click)=\"iS.log(form())\"\n [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n {{ endLabelSignal() | appTranslateNL | async }}\n </div>\n }\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [debug]=\"debug()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
6864
|
+
args: [{ selector: 'app-input-basic,app-input', providers: InputProviders, imports: [DateInputComponent, InputSharedModules, SDKTranslateNoLoaderPipe], template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | 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"] }]
|
|
6864
6865
|
}], ctorParameters: () => [], propDecorators: { accept: [{
|
|
6865
6866
|
type: Input
|
|
6866
6867
|
}], autocomplete: [{
|
|
@@ -6878,8 +6879,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
6878
6879
|
type: Input
|
|
6879
6880
|
}], labelLink: [{
|
|
6880
6881
|
type: Input
|
|
6881
|
-
}], loading: [{
|
|
6882
|
-
type: Input
|
|
6883
6882
|
}], multiple: [{
|
|
6884
6883
|
type: Input
|
|
6885
6884
|
}], optionsFunc: [{
|
|
@@ -6960,11 +6959,11 @@ class InputTD_RFComponent extends InputBasicComponent {
|
|
|
6960
6959
|
super.ngAfterViewInit();
|
|
6961
6960
|
}
|
|
6962
6961
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputTD_RFComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6963
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputTD_RFComponent, isStandalone: true, selector: "app-input-td-rf", inputs: { _validators: ["validators", "_validators"], _asyncValidators: ["asyncValidators", "_asyncValidators"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, providers: InputProviders, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | 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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n <mat-error *ngFor=\"let validation of inp.vms\">\n <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n </ng-container>\n </mat-error>\n </mat-form-field> -->\n </div>\n @if (endLabelSignal()) {\n <div\n class=\"col-auto text-primary ms-2\"\n (click)=\"iS.log(form())\"\n [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n {{ endLabelSignal() | appTranslateNL | async }}\n </div>\n }\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [debug]=\"debug()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
|
|
6962
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputTD_RFComponent, isStandalone: true, selector: "app-input-td-rf", inputs: { _validators: ["validators", "_validators"], _asyncValidators: ["asyncValidators", "_asyncValidators"], _model: ["model", "_model"] }, outputs: { modelChange: "modelChange" }, providers: InputProviders, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n #ele\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-otype]=\"oTypeSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n </div>\n }\n }\n\n @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n @if (pendingSignal()) {\n <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n }\n <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n <mat-error *ngFor=\"let validation of inp.vms\">\n <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n </ng-container>\n </mat-error>\n </mat-form-field> -->\n </div>\n @if (endLabelSignal()) {\n <div\n class=\"col-auto text-primary ms-2\"\n (click)=\"iS.log(form())\"\n [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n {{ endLabelSignal() | appTranslateNL | async }}\n </div>\n }\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [debug]=\"debug()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
|
|
6964
6963
|
}
|
|
6965
6964
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputTD_RFComponent, decorators: [{
|
|
6966
6965
|
type: Component,
|
|
6967
|
-
args: [{ selector: 'app-input-td-rf', providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | 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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n <mat-error *ngFor=\"let validation of inp.vms\">\n <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n </ng-container>\n </mat-error>\n </mat-form-field> -->\n </div>\n @if (endLabelSignal()) {\n <div\n class=\"col-auto text-primary ms-2\"\n (click)=\"iS.log(form())\"\n [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n {{ endLabelSignal() | appTranslateNL | async }}\n </div>\n }\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [debug]=\"debug()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
6966
|
+
args: [{ selector: 'app-input-td-rf', providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | 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"] }]
|
|
6968
6967
|
}], ctorParameters: () => [], propDecorators: { _validators: [{
|
|
6969
6968
|
type: Input,
|
|
6970
6969
|
args: ['validators']
|
|
@@ -7071,18 +7070,16 @@ class AutocompleteTdRfComponent extends InputTD_RFComponent {
|
|
|
7071
7070
|
});
|
|
7072
7071
|
if (this.optionsFunc)
|
|
7073
7072
|
this.valueChanged
|
|
7074
|
-
.pipe(tap(() =>
|
|
7073
|
+
.pipe(tap(() => this.loading.set(true)), debounceTime$1(600), switchMap$1((v) => (v != null && v != '' ? this.optionsFunc(v) : of([]))))
|
|
7075
7074
|
.subscribe((r) => {
|
|
7076
7075
|
// debugger
|
|
7077
7076
|
this._options = r;
|
|
7078
|
-
this.loading
|
|
7077
|
+
this.loading.set(false);
|
|
7079
7078
|
});
|
|
7080
7079
|
}
|
|
7081
|
-
fetchOptions(
|
|
7082
|
-
if (this.optionsFunc)
|
|
7083
|
-
this.loading = true;
|
|
7080
|
+
fetchOptions() {
|
|
7081
|
+
if (this.optionsFunc)
|
|
7084
7082
|
this.valueChanged.next(this.control()?.getRawValue());
|
|
7085
|
-
}
|
|
7086
7083
|
}
|
|
7087
7084
|
ngAfterViewInit() {
|
|
7088
7085
|
super.ngAfterViewInit();
|
|
@@ -7094,7 +7091,7 @@ class AutocompleteTdRfComponent extends InputTD_RFComponent {
|
|
|
7094
7091
|
}, 600);
|
|
7095
7092
|
}
|
|
7096
7093
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AutocompleteTdRfComponent, deps: [{ token: AutocompleteService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7097
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AutocompleteTdRfComponent, isStandalone: true, selector: "autocomplete-td-rf,app-autocomplete-td-rf", inputs: { validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n <!-- {{options()|json}} -->\n @if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</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($event)\"\n [class]=\"inputClassSignal()\"\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 [displayWith]=\"displayWith\"\n class=\"options-w-auto\"\n (optionSelected)=\"selected($event)\">\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 {{ (optionsFunc ? 'Type to search' : placeholder())| appTranslateNL: translatorOptions() | async }}\n </mat-option>\n }\n @for (item of filteredOptions(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"item.hint || ele.innerText | appTranslateNL: translatorOptions() | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-autocomplete>\n @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n @if (loading) {\n <div class=\"d-flex text-primary me-1 validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n }\n </form>\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: ["i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
|
|
7094
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AutocompleteTdRfComponent, isStandalone: true, selector: "autocomplete-td-rf,app-autocomplete-td-rf", inputs: { validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true }], 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()\"\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 [displayWith]=\"displayWith\"\n class=\"options-w-auto\"\n (optionSelected)=\"selected($event)\">\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 <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"item.hint || ele.innerText | appTranslateNL: translatorOptions() | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-autocomplete>\n @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n @if (pendingSignal()) {\n <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n }\n <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n @if (loading()) {\n <div class=\"d-flex text-primary me-1 validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n }\n </form>\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: ["i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
|
|
7098
7095
|
}
|
|
7099
7096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AutocompleteTdRfComponent, decorators: [{
|
|
7100
7097
|
type: Component,
|
|
@@ -7114,8 +7111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
7114
7111
|
ToAnyPipe,
|
|
7115
7112
|
SDKTranslatePipe,
|
|
7116
7113
|
InputClassPipe,
|
|
7117
|
-
SDKTranslateNoLoaderPipe
|
|
7118
|
-
], template: "<div class=\"row align-items-center\">\n <!-- {{options()|json}} -->\n @if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</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
|
|
7114
|
+
SDKTranslateNoLoaderPipe,
|
|
7115
|
+
], 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()\"\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 [displayWith]=\"displayWith\"\n class=\"options-w-auto\"\n (optionSelected)=\"selected($event)\">\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 <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"item.hint || ele.innerText | appTranslateNL: translatorOptions() | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-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"] }]
|
|
7119
7116
|
}], ctorParameters: () => [{ type: AutocompleteService }], propDecorators: { validate: [{
|
|
7120
7117
|
type: Input
|
|
7121
7118
|
}], _options: [{
|
|
@@ -7146,7 +7143,7 @@ class AutocompleteComponent extends InputBasicComponent {
|
|
|
7146
7143
|
// debugger;
|
|
7147
7144
|
if (!val)
|
|
7148
7145
|
return null;
|
|
7149
|
-
if (!this.options())
|
|
7146
|
+
if (!this.options() || this.options().length === 0)
|
|
7150
7147
|
return null;
|
|
7151
7148
|
// debugger
|
|
7152
7149
|
if (this.skipDoesOptionExistCheck() || this.doesOptionExist(val))
|
|
@@ -7171,11 +7168,11 @@ class AutocompleteComponent extends InputBasicComponent {
|
|
|
7171
7168
|
});
|
|
7172
7169
|
if (this.optionsFunc)
|
|
7173
7170
|
this.valueChanged
|
|
7174
|
-
.pipe(tap(() =>
|
|
7171
|
+
.pipe(tap(() => this.loading.set(true)), debounceTime$1(600), switchMap$1((v) => (v != null && v != '' ? this.optionsFunc(v) : of([]))))
|
|
7175
7172
|
.subscribe((r) => {
|
|
7176
7173
|
// debugger
|
|
7177
7174
|
this._options = r;
|
|
7178
|
-
this.loading
|
|
7175
|
+
this.loading.set(false);
|
|
7179
7176
|
});
|
|
7180
7177
|
}
|
|
7181
7178
|
ngOnDestroy() {
|
|
@@ -7183,11 +7180,9 @@ class AutocompleteComponent extends InputBasicComponent {
|
|
|
7183
7180
|
if (this.control()?.hasValidator(this.includesOption))
|
|
7184
7181
|
this.control()?.removeValidators(this.includesOption);
|
|
7185
7182
|
}
|
|
7186
|
-
fetchOptions(
|
|
7187
|
-
if (this.optionsFunc)
|
|
7188
|
-
this.loading = true;
|
|
7183
|
+
fetchOptions() {
|
|
7184
|
+
if (this.optionsFunc)
|
|
7189
7185
|
this.valueChanged.next(this.control()?.getRawValue());
|
|
7190
|
-
}
|
|
7191
7186
|
}
|
|
7192
7187
|
selected($event) {
|
|
7193
7188
|
// debugger;
|
|
@@ -7199,7 +7194,7 @@ class AutocompleteComponent extends InputBasicComponent {
|
|
|
7199
7194
|
}, 600);
|
|
7200
7195
|
}
|
|
7201
7196
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
7202
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete,autocomplete", inputs: { showRequiredTag: { classPropertyName: "showRequiredTag", publicName: "showRequiredTag", isSignal: false, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n <!-- {{options()|json}} -->\n @if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</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($event)\"\n [class]=\"inputClassSignal()\"\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 [displayWith]=\"displayWith\"\n class=\"options-w-auto\"\n (optionSelected)=\"selected($event)\">\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 {{ (optionsFunc ? 'Type to search' : placeholder())| appTranslateNL: translatorOptions() | async }}\n </mat-option>\n }\n @for (item of filteredOptions(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"item.hint || ele.innerText | appTranslateNL: translatorOptions() | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-autocomplete>\n @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n <div [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n @if (loading) {\n <div class=\"d-flex text-primary me-1 validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n }\n </form>\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", "i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
|
|
7197
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete,autocomplete", inputs: { showRequiredTag: { classPropertyName: "showRequiredTag", publicName: "showRequiredTag", isSignal: false, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true }], 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()\"\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 [displayWith]=\"displayWith\"\n class=\"options-w-auto\"\n (optionSelected)=\"selected($event)\">\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 <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"item.hint || ele.innerText | appTranslateNL: translatorOptions() | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-autocomplete>\n @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n @if (pendingSignal()) {\n <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n }\n <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n @if (loading()) {\n <div class=\"d-flex text-primary me-1 validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n }\n </form>\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", "i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
|
|
7203
7198
|
}
|
|
7204
7199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
7205
7200
|
type: Component,
|
|
@@ -7216,7 +7211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
|
|
|
7216
7211
|
AsyncPipe,
|
|
7217
7212
|
ToAnyPipe,
|
|
7218
7213
|
SDKTranslateNoLoaderPipe,
|
|
7219
|
-
], template: "<div class=\"row align-items-center\">\n <!-- {{options()|json}} -->\n @if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</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
|
|
7214
|
+
], 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()\"\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 [displayWith]=\"displayWith\"\n class=\"options-w-auto\"\n (optionSelected)=\"selected($event)\">\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 <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"item.hint || ele.innerText | appTranslateNL: translatorOptions() | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-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"] }]
|
|
7220
7215
|
}], propDecorators: { showRequiredTag: [{
|
|
7221
7216
|
type: Input
|
|
7222
7217
|
}], validate: [{
|
|
@@ -8323,7 +8318,7 @@ class EditableTextCaseComponent {
|
|
|
8323
8318
|
}
|
|
8324
8319
|
}
|
|
8325
8320
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: EditableTextCaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8326
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: EditableTextCaseComponent, isStandalone: true, selector: "app-editable-text-case", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: false, isRequired: false, transformFunction: null }, coloredLbl: { classPropertyName: "coloredLbl", publicName: "coloredLbl", isSignal: false, isRequired: false, transformFunction: null }, coloredVal: { classPropertyName: "coloredVal", publicName: "coloredVal", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, valueHint: { classPropertyName: "valueHint", publicName: "valueHint", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, light: { classPropertyName: "light", publicName: "light", isSignal: false, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: false, isRequired: false, transformFunction: null }, routeFunc: { classPropertyName: "routeFunc", publicName: "routeFunc", isSignal: false, isRequired: false, transformFunction: null }, showEditing: { classPropertyName: "showEditing", publicName: "showEditing", isSignal: false, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"row align-items-center\">\n <label\n [matTooltip]=\"hint()\"\n class=\"col-md-{{\n stacked ? '12 pb-0' : mini ? 'auto' : ''\n }} m-0 hide-scroll-x\"\n [ngClass]=\"{\n 'text-primary': coloredLbl,\n light,\n 'overflow-x-auto': wrapLabel\n }\"\n >\n {{ label | appTranslate | async }}\n </label>\n <div class=\"{{ stacked ? 'col-12' : 'col-md' }} position-relative\">\n <div class=\"row align-items-center\">\n @if (editing) {\n <div class=\"col-9 pe-0\">\n <app-input-basic\n [form]=\"form\"\n [stacked]=\"true\"\n [showLabel]=\"false\"\n [name]=\"name\"\n [type]=\"type\"\n >\n </app-input-basic>\n </div>\n <div class=\"col-auto\">\n <i\n (click)=\"reset()\"\n class=\"ps-1 pointer fas fa-undo-alt text-danger\"\n ></i>\n </div>\n } @else {\n <a\n [matTooltip]=\"valueHint\"\n [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n !stacked ? 'auto' : showEditing ? '9' : '12'\n }} lbl\"\n >\n <div class=\"hide-scroll-x overflow-x-auto\">\n {{ (value | valueFormatter: formatter | async) || \"-\" }}\n </div>\n </a>\n <div class=\"col-auto\" *ngIf=\"showEditing\">\n <i\n (click)=\"unreset()\"\n class=\"ps-1 pointer fas fa-pencil-alt {{\n !coloredVal ? '' : 'text-primary'\n }}\"\n ></i>\n </div>\n }\n <ng-template #elseTemplate>\n <a\n [matTooltip]=\"valueHint\"\n [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n !stacked ? 'auto' : showEditing ? '9' : '12'\n }} lbl\"\n >\n <div class=\"hide-scroll-x overflow-x-auto\">\n {{ (value | valueFormatter: formatter | async) || \"-\" }}\n </div>\n </a>\n @if (showEditing) {\n <div class=\"col-auto\">\n <i\n (click)=\"unreset()\"\n class=\"ps-1 pointer fas fa-pencil-alt {{\n !coloredVal ? '' : 'text-primary'\n }}\"\n ></i>\n </div>\n }\n </ng-template>\n </div>\n </div>\n</div>\n", styles: [".lbl{display:flex;align-items:center}.light{font-weight:500}.fas{font-size:.7rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: ValueFormatterPipe, name: "valueFormatter" }] }); }
|
|
8321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: EditableTextCaseComponent, isStandalone: true, selector: "app-editable-text-case", inputs: { action: { classPropertyName: "action", publicName: "action", isSignal: false, isRequired: false, transformFunction: null }, coloredLbl: { classPropertyName: "coloredLbl", publicName: "coloredLbl", isSignal: false, isRequired: false, transformFunction: null }, coloredVal: { classPropertyName: "coloredVal", publicName: "coloredVal", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, valueHint: { classPropertyName: "valueHint", publicName: "valueHint", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, light: { classPropertyName: "light", publicName: "light", isSignal: false, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: false, isRequired: false, transformFunction: null }, routeFunc: { classPropertyName: "routeFunc", publicName: "routeFunc", isSignal: false, isRequired: false, transformFunction: null }, showEditing: { classPropertyName: "showEditing", publicName: "showEditing", isSignal: false, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, wrapLabel: { classPropertyName: "wrapLabel", publicName: "wrapLabel", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"row align-items-center\">\n <label\n [matTooltip]=\"hint()\"\n class=\"col-md-{{\n stacked ? '12 pb-0' : mini ? 'auto' : ''\n }} m-0 hide-scroll-x\"\n [ngClass]=\"{\n 'text-primary': coloredLbl,\n light,\n 'overflow-x-auto': wrapLabel\n }\"\n >\n {{ label | appTranslate | async }}\n </label>\n <div class=\"{{ stacked ? 'col-12' : 'col-md' }} position-relative\">\n <div class=\"row align-items-center\">\n @if (editing) {\n <div class=\"col-9 pe-0\">\n <app-input-basic\n [form]=\"form\"\n [stacked]=\"true\"\n [showLabel]=\"false\"\n [name]=\"name\"\n [type]=\"type\"\n >\n </app-input-basic>\n </div>\n <div class=\"col-auto\">\n <i\n (click)=\"reset()\"\n class=\"ps-1 pointer fas fa-undo-alt text-danger\"\n ></i>\n </div>\n } @else {\n <a\n [matTooltip]=\"valueHint\"\n [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n !stacked ? 'auto' : showEditing ? '9' : '12'\n }} lbl\"\n >\n <div class=\"hide-scroll-x overflow-x-auto\">\n {{ (value | valueFormatter: formatter | async) || \"-\" }}\n </div>\n </a>\n <div class=\"col-auto\" *ngIf=\"showEditing\">\n <i\n (click)=\"unreset()\"\n class=\"ps-1 pointer fas fa-pencil-alt {{\n !coloredVal ? '' : 'text-primary'\n }}\"\n ></i>\n </div>\n }\n <ng-template #elseTemplate>\n <a\n [matTooltip]=\"valueHint\"\n [mrouterLink]=\"route || (routeFunc | functionCaller1: value | async)\"\n class=\"{{ !coloredVal ? '' : 'text-primary' }} col-{{\n !stacked ? 'auto' : showEditing ? '9' : '12'\n }} lbl\"\n >\n <div class=\"hide-scroll-x overflow-x-auto\">\n {{ (value | valueFormatter: formatter | async) || \"-\" }}\n </div>\n </a>\n @if (showEditing) {\n <div class=\"col-auto\">\n <i\n (click)=\"unreset()\"\n class=\"ps-1 pointer fas fa-pencil-alt {{\n !coloredVal ? '' : 'text-primary'\n }}\"\n ></i>\n </div>\n }\n </ng-template>\n </div>\n </div>\n</div>\n", styles: [".lbl{display:flex;align-items:center}.light{font-weight:500}.fas{font-size:.7rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "pipe", type: ValueFormatterPipe, name: "valueFormatter" }] }); }
|
|
8327
8322
|
}
|
|
8328
8323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: EditableTextCaseComponent, decorators: [{
|
|
8329
8324
|
type: Component,
|
|
@@ -12513,7 +12508,7 @@ class FormGeneratorComponent extends BaseFormGenerator {
|
|
|
12513
12508
|
this.onSubmit.emit(this.formValue());
|
|
12514
12509
|
}
|
|
12515
12510
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: FormGeneratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12516
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: FormGeneratorComponent, isStandalone: true, selector: "form-generator", inputs: { keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: false, isRequired: false, transformFunction: null }, presetValueForSingleOption: { classPropertyName: "presetValueForSingleOption", publicName: "presetValueForSingleOption", isSignal: true, isRequired: false, transformFunction: null }, isCreate: { classPropertyName: "isCreate", publicName: "isCreate", isSignal: true, isRequired: false, transformFunction: null }, submitOnEnterKey: { classPropertyName: "submitOnEnterKey", publicName: "submitOnEnterKey", isSignal: true, isRequired: false, transformFunction: null }, submitFunc: { classPropertyName: "submitFunc", publicName: "submitFunc", isSignal: false, isRequired: false, transformFunction: null }, submitBtnText: { classPropertyName: "submitBtnText", publicName: "submitBtnText", isSignal: true, isRequired: false, transformFunction: null }, submitBtnTemplate: { classPropertyName: "submitBtnTemplate", publicName: "submitBtnTemplate", isSignal: true, isRequired: false, transformFunction: null }, submitSuccessText: { classPropertyName: "submitSuccessText", publicName: "submitSuccessText", isSignal: true, isRequired: false, transformFunction: null }, showSubmitBtn: { classPropertyName: "showSubmitBtn", publicName: "showSubmitBtn", isSignal: true, isRequired: false, transformFunction: null }, gridStyle: { classPropertyName: "gridStyle", publicName: "gridStyle", isSignal: true, isRequired: false, transformFunction: null }, gridMDStyle: { classPropertyName: "gridMDStyle", publicName: "gridMDStyle", isSignal: true, isRequired: false, transformFunction: null }, gridLGStyle: { classPropertyName: "gridLGStyle", publicName: "gridLGStyle", isSignal: true, isRequired: false, transformFunction: null }, gridXXLStyle: { classPropertyName: "gridXXLStyle", publicName: "gridXXLStyle", isSignal: true, isRequired: false, transformFunction: null }, formGridClass: { classPropertyName: "formGridClass", publicName: "formGridClass", isSignal: true, isRequired: false, transformFunction: null }, useLoader: { classPropertyName: "useLoader", publicName: "useLoader", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: false, transformFunction: null }, _formSchemaNoForm: { classPropertyName: "_formSchemaNoForm", publicName: "formSchemaNoForm", isSignal: false, isRequired: false, transformFunction: null }, _isShow: { classPropertyName: "_isShow", publicName: "isShow", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", mchange: "mchange", saved: "saved", form: "formChange" }, viewQueries: [{ propertyName: "formTagRef", first: true, predicate: ["formTag"], descendants: true, isSignal: true }, { propertyName: "submitBtnRef", first: true, predicate: ["submitBtn"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- {{formValue()|json}}\n{{formValid()|json}} -->\n<loader [loading]=\"computedLoading()\">\n <form [formGroup]=\"form()\" #formTag>\n <div\n class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{\n gridLGStyle()\n }} row-cols-xxl-{{ gridXXLStyle() }} align-items-center {{ formGridClass() }}\">\n @for (scheme of computedFormSchema(); track scheme.field) {\n <div class=\"col {{ scheme.cls }} \">\n @switch (true) {\n @case (scheme.type == 'template') {\n <ng-container\n *ngTemplateOutlet=\"\n customTemplates()[scheme.field];\n context: { $implicit: { scheme, form: form() } }\n \"/>\n }\n @case (scheme.type == 'tel') {\n <app-phone-number\n [form]=\"scheme.form || form()\"\n [label]=\"scheme.label\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [stacked]=\"scheme.stacked\"\n [name]=\"scheme.field\"\n [noFormat]=\"scheme.noFormat\"\n [verbose]=\"scheme.verbose\"\n [endLabel]=\"scheme.endLabel\"\n [endLabelTooltip]=\"scheme.endLabelTooltip\"\n [debug]=\"scheme.debug\"\n (mchange)=\"mchangeEmitter()\"\n [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n [autoPickValueField]=\"scheme.autoPickValueField\"\n [showRequiredTag]=\"scheme.showRequiredTag\"\n [showValidationMsg]=\"scheme.showValidationMsg\"\n [countryCode3]=\"scheme.countryCode3\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n \" />\n }\n @case (scheme.type == 'autocomplete') {\n <app-autocomplete\n [form]=\"scheme.form || form()\"\n [label]=\"scheme.label\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [stacked]=\"scheme.stacked\"\n [verbose]=\"scheme.verbose\"\n [endLabel]=\"scheme.endLabel\"\n [endLabelTooltip]=\"scheme.endLabelTooltip\"\n [skipDoesOptionExistCheck]=\"scheme.skipDoesOptionExistCheck\"\n [presetValue]=\"scheme.presetValue\"\n [labelField]=\"scheme.labelField\"\n [noFormat]=\"scheme.noFormat\"\n [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n [labelType]=\"scheme.labelType | toAny\"\n (mchange)=\"mchangeEmitter()\"\n (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n [name]=\"scheme.field\"\n [debug]=\"scheme.debug\"\n [setFormattedValue]=\"scheme.setControlFormattedValue\"\n [showRequiredTag]=\"scheme.showRequiredTag\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [valueField]=\"scheme.valueField\"\n [optionsFunc]=\"scheme.optionsFunc\"\n [showValidationMsg]=\"scheme.showValidationMsg\"\n [autoPickValueField]=\"scheme.autoPickValueField\"\n [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n [hint]=\"scheme.hint\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n \" />\n }\n @case (scheme.type == 'richtext') {\n <rich-text-editor-rf\n [form]=\"scheme.form || form()\"\n [label]=\"scheme.label!\"\n [clearOnDisable]=\"scheme.clearOnDisable!\"\n [stacked]=\"scheme.stacked\"\n [verbose]=\"scheme.verbose\"\n [labelField]=\"scheme.labelField!\"\n [noFormat]=\"scheme.noFormat!\"\n [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n [labelType]=\"scheme.labelType | toAny\"\n (mchange)=\"mchangeEmitter()\"\n (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n [name]=\"scheme.field\"\n [debug]=\"scheme.debug!\"\n [setFormattedValue]=\"scheme.setControlFormattedValue\"\n [showRequiredTag]=\"scheme.showRequiredTag!\"\n [optionFormatter]=\"scheme.optionFormatter!\"\n [valueField]=\"scheme.valueField!\"\n [optionsFunc]=\"scheme.optionsFunc!\"\n [showValidationMsg]=\"scheme.showValidationMsg\"\n [autoPickValueField]=\"scheme.autoPickValueField!\"\n [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n [hint]=\"scheme.hint!\"\n [maxLength]=\"scheme.maxLength\"\n [minLength]=\"scheme.minLength\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf! | functionCaller2: formValue() : (scheme.field | toAny))\n \" />\n }\n @default {\n <app-input-basic\n [noFormat]=\"scheme.noFormat\"\n [name]=\"scheme.field\"\n [form]=\"scheme.form || form()\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [type]=\"scheme.type\"\n [verbose]=\"scheme.verbose\"\n [valueField]=\"scheme.valueField\"\n [autoPickValueField]=\"scheme.autoPickValueField\"\n [presetValue]=\"scheme.presetValue\"\n [endLabel]=\"scheme.endLabel\"\n [endLabelTooltip]=\"scheme.endLabelTooltip\"\n [stacked]=\"scheme.stacked\"\n [labelType]=\"scheme.labelType | toAny\"\n [checkedSignal]=\"scheme.checked\"\n [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n [debug]=\"scheme.debug\"\n (mchange)=\"mchangeEmitter()\"\n [setFormattedValue]=\"scheme.setControlFormattedValue\"\n [showRequiredTag]=\"scheme.showRequiredTag\"\n [labelField]=\"scheme.labelField\"\n [optionFormatter]=\"scheme.optionFormatter\"\n (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n [decimalPoints]=\"scheme.decimalPoints\"\n [hint]=\"scheme.hint\"\n [max]=\"scheme.max\"\n [min]=\"scheme.min\"\n [maxLength]=\"scheme.maxLength\"\n [minLength]=\"scheme.minLength\"\n [placeholder]=\"scheme.placeholder\"\n [label]=\"scheme.label\"\n [showValidationMsg]=\"scheme.showValidationMsg\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n \" />\n }\n }\n </div>\n }\n </div>\n <div class=\"row row-cols-auto justify-content-end\">\n <div class=\"\">\n @if (showSubmitBtn()) {\n <app-btn\n [text]=\"submitBtnText()\"\n group=\"submit\"\n [form]=\"form()\"\n (mclick)=\"submit(submitBtn)\"\n #submitBtn />\n }\n @if (submitBtnTemplate()) {\n <ng-container *ngTemplateOutlet=\"submitBtnTemplate()\"/>\n }\n </div>\n </div>\n </form>\n</loader>\n", styles: [""], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "component", type: RichTextEditorRFComponent, selector: "rich-text-editor-rf" }, { 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: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
|
|
12511
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: FormGeneratorComponent, isStandalone: true, selector: "form-generator", inputs: { keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: false, isRequired: false, transformFunction: null }, presetValueForSingleOption: { classPropertyName: "presetValueForSingleOption", publicName: "presetValueForSingleOption", isSignal: true, isRequired: false, transformFunction: null }, isCreate: { classPropertyName: "isCreate", publicName: "isCreate", isSignal: true, isRequired: false, transformFunction: null }, submitOnEnterKey: { classPropertyName: "submitOnEnterKey", publicName: "submitOnEnterKey", isSignal: true, isRequired: false, transformFunction: null }, submitFunc: { classPropertyName: "submitFunc", publicName: "submitFunc", isSignal: false, isRequired: false, transformFunction: null }, submitBtnText: { classPropertyName: "submitBtnText", publicName: "submitBtnText", isSignal: true, isRequired: false, transformFunction: null }, submitBtnTemplate: { classPropertyName: "submitBtnTemplate", publicName: "submitBtnTemplate", isSignal: true, isRequired: false, transformFunction: null }, submitSuccessText: { classPropertyName: "submitSuccessText", publicName: "submitSuccessText", isSignal: true, isRequired: false, transformFunction: null }, showSubmitBtn: { classPropertyName: "showSubmitBtn", publicName: "showSubmitBtn", isSignal: true, isRequired: false, transformFunction: null }, gridStyle: { classPropertyName: "gridStyle", publicName: "gridStyle", isSignal: true, isRequired: false, transformFunction: null }, gridMDStyle: { classPropertyName: "gridMDStyle", publicName: "gridMDStyle", isSignal: true, isRequired: false, transformFunction: null }, gridLGStyle: { classPropertyName: "gridLGStyle", publicName: "gridLGStyle", isSignal: true, isRequired: false, transformFunction: null }, gridXXLStyle: { classPropertyName: "gridXXLStyle", publicName: "gridXXLStyle", isSignal: true, isRequired: false, transformFunction: null }, formGridClass: { classPropertyName: "formGridClass", publicName: "formGridClass", isSignal: true, isRequired: false, transformFunction: null }, useLoader: { classPropertyName: "useLoader", publicName: "useLoader", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: false, transformFunction: null }, _formSchemaNoForm: { classPropertyName: "_formSchemaNoForm", publicName: "formSchemaNoForm", isSignal: false, isRequired: false, transformFunction: null }, _isShow: { classPropertyName: "_isShow", publicName: "isShow", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", mchange: "mchange", saved: "saved", form: "formChange" }, viewQueries: [{ propertyName: "formTagRef", first: true, predicate: ["formTag"], descendants: true, isSignal: true }, { propertyName: "submitBtnRef", first: true, predicate: ["submitBtn"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- {{formValue()|json}}\n{{formValid()|json}} -->\n<loader [loading]=\"computedLoading()\">\n <form [formGroup]=\"form()\" #formTag>\n <div\n class=\"row row-cols-{{ gridStyle() }} row-cols-md-{{ gridMDStyle() }} row-cols-lg-{{\n gridLGStyle()\n }} row-cols-xxl-{{ gridXXLStyle() }} align-items-center {{ formGridClass() }}\">\n @for (scheme of computedFormSchema(); track scheme.field) {\n <div class=\"col {{ scheme.cls }} \">\n @switch (true) {\n @case (scheme.type == 'template') {\n <ng-container\n *ngTemplateOutlet=\"\n customTemplates()[scheme.field];\n context: { $implicit: { scheme, form: form() } }\n \"/>\n }\n @case (scheme.type == 'tel') {\n <app-phone-number\n [form]=\"scheme.form || form()\"\n [label]=\"scheme.label\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [stacked]=\"scheme.stacked\"\n [name]=\"scheme.field\"\n [noFormat]=\"scheme.noFormat\"\n [verbose]=\"scheme.verbose\"\n [endLabel]=\"scheme.endLabel\"\n [endLabelTooltip]=\"scheme.endLabelTooltip\"\n [debug]=\"scheme.debug\"\n (mchange)=\"mchangeEmitter()\"\n [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n [autoPickValueField]=\"scheme.autoPickValueField\"\n [showRequiredTag]=\"scheme.showRequiredTag\"\n [showValidationMsg]=\"scheme.showValidationMsg\"\n [countryCode3]=\"scheme.countryCode3\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n \" />\n }\n @case (scheme.type == 'autocomplete') {\n <app-autocomplete\n [form]=\"scheme.form || form()\"\n [label]=\"scheme.label\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [stacked]=\"scheme.stacked\"\n [verbose]=\"scheme.verbose\"\n [endLabel]=\"scheme.endLabel\"\n [endLabelTooltip]=\"scheme.endLabelTooltip\"\n [skipDoesOptionExistCheck]=\"scheme.skipDoesOptionExistCheck\"\n [presetValue]=\"scheme.presetValue\"\n [labelField]=\"scheme.labelField\"\n [noFormat]=\"scheme.noFormat\"\n [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n [labelType]=\"scheme.labelType | toAny\"\n (mchange)=\"mchangeEmitter()\"\n (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n [name]=\"scheme.field\"\n [debug]=\"scheme.debug\"\n [setFormattedValue]=\"scheme.setControlFormattedValue\"\n [showRequiredTag]=\"scheme.showRequiredTag\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [valueField]=\"scheme.valueField\"\n [optionsFunc]=\"scheme.optionsFunc\"\n [showValidationMsg]=\"scheme.showValidationMsg\"\n [autoPickValueField]=\"scheme.autoPickValueField\"\n [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n [hint]=\"scheme.hint\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n \" />\n }\n @case (scheme.type == 'richtext') {\n <rich-text-editor-rf\n [form]=\"scheme.form || form()\"\n [label]=\"scheme.label!\"\n [clearOnDisable]=\"scheme.clearOnDisable!\"\n [stacked]=\"scheme.stacked\"\n [verbose]=\"scheme.verbose\"\n [labelField]=\"scheme.labelField!\"\n [noFormat]=\"scheme.noFormat!\"\n [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n [labelType]=\"scheme.labelType | toAny\"\n (mchange)=\"mchangeEmitter()\"\n (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n [name]=\"scheme.field\"\n [debug]=\"scheme.debug!\"\n [setFormattedValue]=\"scheme.setControlFormattedValue\"\n [showRequiredTag]=\"scheme.showRequiredTag!\"\n [optionFormatter]=\"scheme.optionFormatter!\"\n [valueField]=\"scheme.valueField!\"\n [optionsFunc]=\"scheme.optionsFunc!\"\n [showValidationMsg]=\"scheme.showValidationMsg\"\n [autoPickValueField]=\"scheme.autoPickValueField!\"\n [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n [hint]=\"scheme.hint!\"\n [maxLength]=\"scheme.maxLength\"\n [minLength]=\"scheme.minLength\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf! | functionCaller2: formValue() : (scheme.field | toAny))\n \" />\n }\n @default {\n <app-input-basic\n [noFormat]=\"scheme.noFormat\"\n [name]=\"scheme.field\"\n [form]=\"scheme.form || form()\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [type]=\"scheme.type\"\n [verbose]=\"scheme.verbose\"\n [valueField]=\"scheme.valueField\"\n [autoPickValueField]=\"scheme.autoPickValueField\"\n [presetValue]=\"scheme.presetValue\"\n [endLabel]=\"scheme.endLabel\"\n [endLabelTooltip]=\"scheme.endLabelTooltip\"\n [stacked]=\"scheme.stacked\"\n [labelType]=\"scheme.labelType | toAny\"\n [checkedSignal]=\"scheme.checked\"\n [showValidation]=\"scheme.showValidation || !!scheme.asyncValidators\"\n [showValidationIcon]=\"scheme.showValidationIcon || !!scheme.asyncValidators\"\n [debug]=\"scheme.debug\"\n (mchange)=\"mchangeEmitter()\"\n [setFormattedValue]=\"scheme.setControlFormattedValue\"\n [showRequiredTag]=\"scheme.showRequiredTag\"\n [labelField]=\"scheme.labelField\"\n [optionFormatter]=\"scheme.optionFormatter\"\n (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n [options]=\"scheme.options || optionsMap()[scheme.field | toAny]\"\n [decimalPoints]=\"scheme.decimalPoints\"\n [hint]=\"scheme.hint\"\n [max]=\"scheme.max\"\n [min]=\"scheme.min\"\n [maxLength]=\"scheme.maxLength\"\n [minLength]=\"scheme.minLength\"\n [placeholder]=\"scheme.placeholder\"\n [label]=\"scheme.label\"\n [showValidationMsg]=\"scheme.showValidationMsg\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n \" />\n }\n }\n </div>\n }\n </div>\n <div class=\"row row-cols-auto justify-content-end\">\n <div class=\"\">\n @if (showSubmitBtn()) {\n <app-btn\n [text]=\"submitBtnText()\"\n group=\"submit\"\n [form]=\"form()\"\n (mclick)=\"submit(submitBtn)\"\n #submitBtn />\n }\n @if (submitBtnTemplate()) {\n <ng-container *ngTemplateOutlet=\"submitBtnTemplate()\"/>\n }\n </div>\n </div>\n </form>\n</loader>\n", styles: [""], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "component", type: RichTextEditorRFComponent, selector: "rich-text-editor-rf" }, { 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: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
|
|
12517
12512
|
}
|
|
12518
12513
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: FormGeneratorComponent, decorators: [{
|
|
12519
12514
|
type: Component,
|
|
@@ -13870,7 +13865,7 @@ class DayHourMinInputComponent extends InputBasicComponent {
|
|
|
13870
13865
|
this.sub3?.unsubscribe();
|
|
13871
13866
|
}
|
|
13872
13867
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DayHourMinInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13873
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DayHourMinInputComponent, isStandalone: true, selector: "app-day-hour-min-input", inputs: { clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, toMins: { classPropertyName: "toMins", publicName: "toMins", isSignal: false, isRequired: false, transformFunction: null }, mins: { classPropertyName: "mins", publicName: "mins", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n <div class=\"\">subForm: {{ subFormValue() | json }}</div>\n}\n<div class=\"row\">\n @if (showLabelSignal()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n <div class=\"row\">\n <div class=\"col-4\">\n <app-input-basic\n [showLabel]=\"false\"\n [form]=\"subForm\"\n name=\"days\"\n [min]=\"0\"\n [type]=\"typeSignal()\"\n [noFormat]=\"true\"\n [stacked]=\"true\"\n [clearOnDisable]=\"clearOnDisable()\"\n placeholder=\"days\"\n [showValidation]=\"daysTag.invalidSignal()\"\n #daysTag />\n </div>\n <div class=\"col-4\">\n <app-input-basic\n [showLabel]=\"false\"\n [form]=\"subForm\"\n name=\"hours\"\n [min]=\"0\"\n [type]=\"typeSignal()\"\n [noFormat]=\"true\"\n [stacked]=\"true\"\n [clearOnDisable]=\"clearOnDisable()\"\n placeholder=\"hours\"\n [showValidation]=\"hoursTag.invalidSignal()\"\n #hoursTag />\n </div>\n <div class=\"col-4\">\n <app-input-basic\n [showLabel]=\"false\"\n [form]=\"subForm\"\n name=\"mins\"\n [min]=\"0\"\n [type]=\"typeSignal()\"\n [noFormat]=\"true\"\n [stacked]=\"true\"\n [clearOnDisable]=\"clearOnDisable()\"\n placeholder=\"minutes\"\n [showValidation]=\"minsTag.invalidSignal()\"\n #minsTag />\n </div>\n </div>\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [""], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
|
|
13868
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: DayHourMinInputComponent, isStandalone: true, selector: "app-day-hour-min-input", inputs: { clearOnDisable: { classPropertyName: "clearOnDisable", publicName: "clearOnDisable", isSignal: true, isRequired: false, transformFunction: null }, toMins: { classPropertyName: "toMins", publicName: "toMins", isSignal: false, isRequired: false, transformFunction: null }, mins: { classPropertyName: "mins", publicName: "mins", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n <div class=\"\">subForm: {{ subFormValue() | json }}</div>\n}\n<div class=\"row\">\n @if (showLabelSignal()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n <div class=\"row\">\n <div class=\"col-4\">\n <app-input-basic\n [showLabel]=\"false\"\n [form]=\"subForm\"\n name=\"days\"\n [min]=\"0\"\n [type]=\"typeSignal()\"\n [noFormat]=\"true\"\n [stacked]=\"true\"\n [clearOnDisable]=\"clearOnDisable()\"\n placeholder=\"days\"\n [showValidation]=\"daysTag.invalidSignal()\"\n #daysTag />\n </div>\n <div class=\"col-4\">\n <app-input-basic\n [showLabel]=\"false\"\n [form]=\"subForm\"\n name=\"hours\"\n [min]=\"0\"\n [type]=\"typeSignal()\"\n [noFormat]=\"true\"\n [stacked]=\"true\"\n [clearOnDisable]=\"clearOnDisable()\"\n placeholder=\"hours\"\n [showValidation]=\"hoursTag.invalidSignal()\"\n #hoursTag />\n </div>\n <div class=\"col-4\">\n <app-input-basic\n [showLabel]=\"false\"\n [form]=\"subForm\"\n name=\"mins\"\n [min]=\"0\"\n [type]=\"typeSignal()\"\n [noFormat]=\"true\"\n [stacked]=\"true\"\n [clearOnDisable]=\"clearOnDisable()\"\n placeholder=\"minutes\"\n [showValidation]=\"minsTag.invalidSignal()\"\n #minsTag />\n </div>\n </div>\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [""], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }] }); }
|
|
13874
13869
|
}
|
|
13875
13870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: DayHourMinInputComponent, decorators: [{
|
|
13876
13871
|
type: Component,
|
|
@@ -13893,11 +13888,11 @@ class InputControlComponent extends InputBasicComponent {
|
|
|
13893
13888
|
super.ngOnInit();
|
|
13894
13889
|
}
|
|
13895
13890
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13896
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputControlComponent, isStandalone: true, selector: "input-control", inputs: { setControl: ["control", "setControl"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | 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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n <mat-error *ngFor=\"let validation of inp.vms\">\n <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n </ng-container>\n </mat-error>\n </mat-form-field> -->\n </div>\n @if (endLabelSignal()) {\n <div\n class=\"col-auto text-primary ms-2\"\n (click)=\"iS.log(form())\"\n [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n {{ endLabelSignal() | appTranslateNL | async }}\n </div>\n }\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [debug]=\"debug()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
|
|
13891
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputControlComponent, isStandalone: true, selector: "input-control", inputs: { setControl: ["control", "setControl"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n #ele\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-otype]=\"oTypeSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n </div>\n }\n }\n\n @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n @if (pendingSignal()) {\n <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n }\n <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n <mat-error *ngFor=\"let validation of inp.vms\">\n <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n </ng-container>\n </mat-error>\n </mat-form-field> -->\n </div>\n @if (endLabelSignal()) {\n <div\n class=\"col-auto text-primary ms-2\"\n (click)=\"iS.log(form())\"\n [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n {{ endLabelSignal() | appTranslateNL | async }}\n </div>\n }\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [debug]=\"debug()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
|
|
13897
13892
|
}
|
|
13898
13893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputControlComponent, decorators: [{
|
|
13899
13894
|
type: Component,
|
|
13900
|
-
args: [{ selector: 'input-control', providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | 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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n <mat-error *ngFor=\"let validation of inp.vms\">\n <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n </ng-container>\n </mat-error>\n </mat-form-field> -->\n </div>\n @if (endLabelSignal()) {\n <div\n class=\"col-auto text-primary ms-2\"\n (click)=\"iS.log(form())\"\n [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n {{ endLabelSignal() | appTranslateNL | async }}\n </div>\n }\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [debug]=\"debug()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
13895
|
+
args: [{ selector: 'input-control', providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | 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"] }]
|
|
13901
13896
|
}], ctorParameters: () => [], propDecorators: { setControl: [{
|
|
13902
13897
|
type: Input,
|
|
13903
13898
|
args: ['control']
|
|
@@ -13940,11 +13935,11 @@ class InputComponent extends InputBase {
|
|
|
13940
13935
|
console.log(this.form);
|
|
13941
13936
|
}
|
|
13942
13937
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
13943
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputComponent, isStandalone: true, selector: "app-input-old", inputs: { _inp: ["input", "_inp"], accept: "accept", autocomplete: "autocomplete", endLabel: "endLabel", endLabelTooltip: "endLabelTooltip", files: "files", id: "id", inpCl: "inpCl", labelLink: "labelLink", loading: "loading", multiple: "multiple", optionsFunc: "optionsFunc", showEmptyOption: "showEmptyOption", showLabel: "showLabel", showValidation: "showValidation", showValidationMsg: "showValidationMsg", showValidationIcon: "showValidationIcon", small: "small", stacked: "stacked", _value: ["value", "_value"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | 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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n <mat-error *ngFor=\"let validation of inp.vms\">\n <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n </ng-container>\n </mat-error>\n </mat-form-field> -->\n </div>\n @if (endLabelSignal()) {\n <div\n class=\"col-auto text-primary ms-2\"\n (click)=\"iS.log(form())\"\n [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n {{ endLabelSignal() | appTranslateNL | async }}\n </div>\n }\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [debug]=\"debug()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
|
|
13938
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputComponent, isStandalone: true, selector: "app-input-old", inputs: { _inp: ["input", "_inp"], accept: "accept", autocomplete: "autocomplete", endLabel: "endLabel", endLabelTooltip: "endLabelTooltip", files: "files", id: "id", inpCl: "inpCl", labelLink: "labelLink", loading: "loading", multiple: "multiple", optionsFunc: "optionsFunc", showEmptyOption: "showEmptyOption", showLabel: "showLabel", showValidation: "showValidation", showValidationMsg: "showValidationMsg", showValidationIcon: "showValidationIcon", small: "small", stacked: "stacked", _value: ["value", "_value"] }, providers: InputProviders, usesInheritance: true, ngImport: i0, template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | appTranslateNL | async\"\n [matTooltipDisabled]=\"ele.scrollWidth <= ele.offsetWidth\"\n #ele\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-otype]=\"oTypeSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n </div>\n }\n }\n\n @if (dirtySignal() && (showValidationSignal() || showValidationIconSignal())) {\n <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n @if (pendingSignal()) {\n <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n }\n <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n <mat-error *ngFor=\"let validation of inp.vms\">\n <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n </ng-container>\n </mat-error>\n </mat-form-field> -->\n </div>\n @if (endLabelSignal()) {\n <div\n class=\"col-auto text-primary ms-2\"\n (click)=\"iS.log(form())\"\n [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n {{ endLabelSignal() | appTranslateNL | async }}\n </div>\n }\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [debug]=\"debug()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: DateInputComponent, selector: "date-input", inputs: ["value", "inpCl", "cls", "inputClass", "valid", "max", "min", "id", "invalid", "disabled", "debug", "readonly", "type", "showValidation"], outputs: ["valueChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: i3$1.FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: i6.MatDatepickerModule }, { kind: "ngmodule", type: i7.MatFormFieldModule }, { kind: "ngmodule", type: i8.MatInputModule }, { kind: "ngmodule", type: i9.MatNativeDateModule }, { kind: "ngmodule", type: i9.MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i10.MatSelectModule }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: i11.MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i3$1.ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }] }); }
|
|
13944
13939
|
}
|
|
13945
13940
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputComponent, decorators: [{
|
|
13946
13941
|
type: Component,
|
|
13947
|
-
args: [{ selector: 'app-input-old', providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | 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 [ngClass]=\"{ valid: validSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-check\"></i>\n </div>\n <div [ngClass]=\"{ pending: pendingSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-spinner fa-spin\"></i>\n </div>\n <div [ngClass]=\"{ invalid: invalidSignal() }\" class=\"validity-icon\">\n <i class=\"fa fa-times\"></i>\n </div>\n }\n <!-- <mat-form-field class=\"input\" appearance=\"fill\">\n <input type=\"{{inp.type}}\" matInput [formControl]=\"inp.formControl\">\n <mat-error *ngFor=\"let validation of inp.vms\">\n <ng-container *ngIf=\"validation|validator:inp.formControl:inp.formControl?.value\">\n {{validation.message|validationMsg:inp.prefix:inp.suffix}}\n </ng-container>\n </mat-error>\n </mat-form-field> -->\n </div>\n @if (endLabelSignal()) {\n <div\n class=\"col-auto text-primary ms-2\"\n (click)=\"iS.log(form())\"\n [matTooltip]=\"endLabelTooltipSignal() | appTranslateNL | async\">\n {{ endLabelSignal() | appTranslateNL | async }}\n </div>\n }\n </div>\n</div>\n@if (showValidationMsgSignal()) {\n <app-validation-message\n [label]=\"labelSignal()\"\n [minLength]=\"minLength()\"\n [debug]=\"debug()\"\n [maxLength]=\"maxLength()\"\n [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
13942
|
+
args: [{ selector: 'app-input-old', providers: InputProviders, imports: [DateInputComponent, InputSharedModules], template: "<!-- <div>form().getRawValue: {{ff}}</div> -->\n@if (verbose()) {\n <div>disabledSignal: {{ disabledSignal() }}</div>\n <div>validSignal: {{ validSignal() }}</div>\n <div>invalidSignal: {{ invalidSignal() }}</div>\n <div>valueSignal: {{ valueSignal() }}</div>\n <div>hasValue: {{ hasValue() }}</div>\n <div>dirtySignal: {{ dirtySignal() }}</div>\n <div>touchedSignal: {{ touchedSignal() }}</div>\n <div>errorsSignal: {{ errorsSignaljson() }}</div>\n <div>pendingSignal: {{ pendingSignal() }}</div>\n <div>requiredSignal: {{ requiredSignal() }}</div>\n <div>pristineSignal: {{ pristineSignal() }}</div>\n <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n}\n<div\n class=\" custom-input align-items-center {{ typeSignal() }} gx-1\"\n [formGroup]=\"form() | toAny\"\n [ngClass]=\"{ 'd-flex': !stackedSignal() }\">\n @let placeholderTrans=placeholder()| appTranslateNL | async;\n @if (computedShowLabel()) {\n <app-input-label\n [colored]=\"coloredSignal()\"\n [form]=\"form()\"\n [hint]=\"hint()\"\n [id]=\"idSignal()\"\n [invalidCheckbox]=\"invalidCheckboxSignal()\"\n [isRequired]=\"isRequiredSignal()\"\n [label]=\"labelSignal()\"\n [lblCl]=\"lblCl()\"\n [light]=\"light()\"\n [mini]=\"miniSignal()\"\n [ngClass]=\"{ 'w-100': stackedSignal() }\"\n [inlineHint]=\"inlineHint()\"\n [showRequiredTag]=\"showRequiredTagSignal()\"\n [showLabel]=\"showLabelSignal()\"\n [small]=\"smallSignal()\"\n [stacked]=\"stackedSignal()\"\n [theme]=\"theme()\"\n [xsmall]=\"xsmall()\" />\n }\n <div class=\"d-flex align-items-center {{ inputContClassSignal() }} \">\n <div\n class=\"position-relative d-flex input-content w-100\"\n [ngClass]=\"{\n 'ms-2': !stackedSignal(),\n showValidationIcon: showValidationSignal() || showValidationIconSignal(),\n dontFormatAsInput: dontFormatAsInputSignal(),\n }\">\n <ng-template #date>\n <date-input\n #dateInput\n [debug]=\"debug()\"\n [readonly]=\"readonlySignal()\"\n [id]=\"idSignal()\"\n class=\"w-100\"\n [type]=\"typeSignal()\"\n (valueChanged)=\"dateChanged($event)\"\n [value]=\"valueSignal()\"\n [inputClass]=\"inputClassSignal()\"\n [disabled]=\"disabledSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [valid]=\"validSignal()\"\n [invalid]=\"invalidSignal()\"\n [showValidation]=\"showValidationSignal()\" />\n </ng-template>\n @switch (typeSignal()) {\n <!-- DATE -->\n @case ('date') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- DATETIME-LOCAL -->\n @case ('datetime-local') {\n <ng-container *ngTemplateOutlet=\"date\" />\n }\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <input\n type=\"checkbox\"\n [id]=\"idSignal()\"\n [formControlName]=\"nameStrSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [attr.data-debug]=\"debug()\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n placeholder=\"{{ placeholderTrans }}\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [checked]=\"checkedSignal()\"\n [attr.indeterminate]=\"indeterminate\" />\n }\n @case ('checkedbox') {\n <input\n type=\"checkbox\"\n class=\"{{ inpClSignal() }} d-inline-block form-control width-unset\"\n [checked]=\"checkedSignal()\"\n [attr.data-debug]=\"debug()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\" />\n }\n <!-- FILE -->\n @case ('file') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\" />\n }\n <!-- FILE BUTTON-->\n @case ('fileButton') {\n <input\n type=\"file\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n (change)=\"upload($event)\"\n [accept]=\"accept\"\n [attr.multiple]=\"multiple\"\n hidden\n #file />\n <app-btn\n class=\"w-100\"\n (mclick)=\"file.click()\"\n icon=\"upload\"\n [type]=\"files ? 'primary' : 'secondary'\"\n text=\"{{ placeholderTrans || labelSignal() || 'Upload' }}\"></app-btn>\n }\n <!-- SELECT -->\n @case ('select') {\n <!-- [attr.disabled]=\"disabled\" -->\n <mat-select\n #matSelectTag\n placeholder=\"{{ placeholderTrans }}\"\n formControlName=\"{{ nameStrSignal() }}\"\n [id]=\"idSignal()\"\n class=\"{{ cls() }} {{ inputClassSignal() }}\"\n [required]=\"requiredSignal()\"\n (selectionChange)=\"change({ target: $event })\"\n [matTooltip]=\"selectedOption()?.hint | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!selectedOption()?.hint\">\n @if (showEmptyOptionSignal()) {\n <mat-option selected [value]=\"null\" class=\"empty-option\">\n {{ placeholderTrans }}\n </mat-option>\n }\n @for (item of options(); track item._id) {\n <mat-option\n [value]=\"item.value\"\n (onSelectionChange)=\"selectOption(item)\"\n [matTooltip]=\"(item.hint || item.label) | appTranslateNL | async\"\n [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n <div class=\"option\" #ele>\n {{ item.label | appTranslateNL: translatorOptions() | async }}\n </div>\n </mat-option>\n }\n </mat-select>\n }\n <!-- TEXTAREA -->\n @case ('textarea') {\n <textarea\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [rows]=\"textareaRowsSignal()\"\n [required]=\"requiredSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"></textarea>\n }\n <!-- Radio -->\n @case ('radio') {\n <input\n type=\"radio\"\n [formControlName]=\"nameStrSignal()\"\n [id]=\"idSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [value]=\"valueSignal()\" />\n }\n <!-- Viewer -->\n @case ('viewer') {\n <input\n type=\"text\"\n [id]=\"idSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [class]=\"inputClassSignal()\"\n [readonly]=\"true\"\n [value]=\"valueSignal()\" />\n }\n <!-- PASSWORD -->\n @case ('password') {\n <input\n type=\"{{ showPasswordSignal() ? 'text' : 'password' }}\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [attr.data-noformat]=\"computedNoFormat()\"\n [id]=\"idSignal()\"\n [class]=\"inputClassSignal()\"\n [required]=\"requiredSignal()\"\n [max]=\"maxSignal()\"\n [min]=\"minSignal()\"\n [readonly]=\"readonlySignal()\"\n (change)=\"change($event)\"\n [value]=\"valueSignal()\" />\n <div\n class=\"password-icons pointer\"\n (click)=\"showPasswordSignal.set(!showPasswordSignal())\">\n @if (showPasswordSignal()) {\n <i class=\"fa fa-eye-slash\"></i>\n } @else {\n <i class=\"fa fa-eye\"></i>\n }\n </div>\n }\n <!-- DEFAULT -->\n @default {\n <div\n [class]=\"inputClassSignal()\"\n [ngClass]=\"{\n 'has-prefix': !!prefixSignal(),\n disabled: readonlySignal() || disabledSignal(),\n }\">\n @if (prefixSignal()) {\n <div class=\"prefix-val\" #prefixVal>\n {{ prefixSignal() }}\n </div>\n }\n <input\n [type]=\"typeSignal()\"\n [formControlName]=\"nameStrSignal()\"\n placeholder=\"{{ placeholderTrans }}\"\n [id]=\"idSignal()\"\n [matTooltip]=\"ele.innerText | 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"] }]
|
|
13948
13943
|
}], propDecorators: { _inp: [{
|
|
13949
13944
|
type: Input,
|
|
13950
13945
|
args: ['input']
|
|
@@ -15749,7 +15744,7 @@ class TableInputRowComponent extends FormGeneratorComponent {
|
|
|
15749
15744
|
});
|
|
15750
15745
|
}
|
|
15751
15746
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TableInputRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
15752
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: TableInputRowComponent, isStandalone: true, selector: "tr[table-input-row]", inputs: { isShow: { classPropertyName: "isShow", publicName: "isShow", isSignal: true, isRequired: false, transformFunction: null }, hideAdd: { classPropertyName: "hideAdd", publicName: "hideAdd", isSignal: true, isRequired: false, transformFunction: null }, hideDelete: { classPropertyName: "hideDelete", publicName: "hideDelete", isSignal: true, isRequired: false, transformFunction: null }, borderedInput: { classPropertyName: "borderedInput", publicName: "borderedInput", isSignal: true, isRequired: false, transformFunction: null }, actionBtns: { classPropertyName: "actionBtns", publicName: "actionBtns", isSignal: true, isRequired: false, transformFunction: null }, childrenFormSchemaMap: { classPropertyName: "childrenFormSchemaMap", publicName: "childrenFormSchemaMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDeleteRowFunc: "onDeleteRowFunc", onAddRowFunc: "onAddRowFunc", onActionButtonClick: "onActionButtonClick" }, usesInheritance: true, ngImport: i0, template: "@for (scheme of formSchema(); track scheme._id) {\n <td\n class=\"{{ scheme.cls }} \"\n [ngClass]=\"{ stickyColumn: scheme.sticky }\"\n [style.left.px]=\"scheme.sticky ? tdEl.offsetLeft : null\"\n #tdEl>\n @if (scheme.type == 'button') {\n <div class=\"d-flex\">\n <app-btn\n [text]=\"scheme.label\"\n [type]=\"\n (form()\n | hasFormValue\n : (childrenFormSchemaMap()[scheme.field].formSchemaStr | toAny)\n : formValue())\n ? 'primary'\n : 'secondary'\n \"\n onFormInvalid=\"warn\"\n [form]=\"form()\"\n [icon]=\"scheme.icon\"\n [formSchema]=\"childrenFormSchemaMap()[scheme.field].formSchema\"\n [matTooltip]=\"\n formValue() | formValue: childrenFormSchemaMap()[scheme.field].formSchema | toAny\n \"\n (mclick)=\"dModal.open()\" />\n </div>\n <modal-comp #dModal [showFooter]=\"false\" header=\"{{ scheme.label }} Form\" width=\"70%\">\n <ng-template modalBody>\n <form-generator\n [form]=\"form()\"\n [gridXXLStyle]=\"4\"\n [gridLGStyle]=\"4\"\n [showSubmitBtn]=\"false\"\n [formSchema]=\"childrenFormSchemaMap()[scheme.field].formSchema\"\n (onSubmit)=\"dModal.close()\"></form-generator>\n @if (!isShow()) {\n <div class=\"d-flex justify-content-end\">\n <app-btn (mclick)=\"dModal.close()\" text=\"Done\" />\n </div>\n }\n </ng-template>\n </modal-comp>\n } @else if (scheme.type == 'template') {\n <ng-container *ngTemplateOutlet=\"scheme.templateRef; context: { $implicit: { scheme,form:form() } }\" />\n } @else if (scheme.field) {\n @switch (true) {\n @case (scheme.type == 'tel') {\n <app-phone-number\n [form]=\"form()\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [name]=\"scheme.field\"\n [showLabel]=\"false\"\n [noFormat]=\"scheme.noFormat\"\n [debug]=\"scheme.debug\"\n [showValidation]=\"scheme.showValidation\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [showValidationIcon]=\"scheme.showValidationIcon\"\n [countryCode3]=\"scheme.countryCode3\"\n [showValidationMsg]=\"scheme.showValidationMsg == null ? true : scheme.showValidationMsg\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n \"\n #inputTag />\n }\n @case (scheme.type == 'autocomplete') {\n <app-autocomplete\n [form]=\"form()\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [labelField]=\"scheme.labelField\"\n [noFormat]=\"scheme.noFormat\"\n [labelType]=\"scheme.labelType | toAny\"\n [showValidationMsg]=\"scheme.showValidationMsg == null ? true : scheme.showValidationMsg\"\n (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n [name]=\"scheme.field | toAny\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [debug]=\"scheme.debug\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [valueField]=\"scheme.valueField\"\n [options]=\"scheme.options || optionsMap[scheme.field | toAny]\"\n [hint]=\"scheme.hint\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n \"\n #inputTag />\n }\n\n @default {\n <app-input-basic\n #formField\n [name]=\"scheme.field | toAny\"\n [form]=\"form()\"\n [dontFormatAsInput]=\"scheme.dontFormatAsInput\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [type]=\"scheme.type\"\n [valueField]=\"scheme.valueField\"\n [labelType]=\"scheme.labelType | toAny\"\n [showValidationMsg]=\"scheme.showValidationMsg == null ? true : scheme.showValidationMsg\"\n [checkedSignal]=\"scheme.checked\"\n [showValidation]=\"!!scheme.asyncValidators\"\n [noFormat]=\"scheme.noFormat\"\n [showValidationIcon]=\"!!scheme.asyncValidators\"\n [debug]=\"scheme.debug\"\n [labelField]=\"scheme.labelField\"\n [optionFormatter]=\"scheme.optionFormatter\"\n (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n [options]=\"scheme.options || optionsMap[scheme.field | toAny]\"\n [decimalPoints]=\"scheme.decimalPoints\"\n [hint]=\"scheme.hint\"\n [max]=\"scheme.max\"\n [min]=\"scheme.min\"\n [placeholder]=\"scheme.placeholder\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n \" />\n }\n }\n }\n </td>\n}\n@if (!isShow()) {\n @if (!hideDelete()) {\n <td class=\"w-1\">\n <app-btn\n group=\"delete\"\n [iconBtn]=\"true\"\n (mclick)=\"onDeleteRowFunc.emit({ btn: deleteBtn })\"\n #deleteBtn />\n </td>\n }\n @if (!hideAdd()) {\n <td class=\"w-1\">\n <app-btn [iconBtn]=\"true\" group=\"add\" (mclick)=\"onAddRowFunc.emit({ btn: addBtn })\" #addBtn />\n </td>\n }\n @for (actionBtn of actionBtns(); track actionBtn.icon) {\n <td class=\"w-1\">\n <app-btn\n [iconBtn]=\"true\"\n [group]=\"actionBtn.group\"\n [icon]=\"actionBtn.icon\"\n (mclick)=\"\n onActionButtonClick.emit({\n btn: actionBtnTemp,\n actionButton: actionBtn,\n })\n \"\n #actionBtnTemp />\n </td>\n }\n}\n", styles: [":host{position:relative}\n"], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "component", type: FormGeneratorComponent, selector: "form-generator", inputs: ["keyField", "presetValueForSingleOption", "isCreate", "submitOnEnterKey", "submitFunc", "submitBtnText", "submitBtnTemplate", "submitSuccessText", "showSubmitBtn", "gridStyle", "gridMDStyle", "gridLGStyle", "gridXXLStyle", "formGridClass", "useLoader", "loading", "form", "formSchema", "formSchemaNoForm", "isShow"], outputs: ["onSubmit", "mchange", "saved", "formChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: FormValuePipe, name: "formValue" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: HasFormValuePipe, name: "hasFormValue" }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
15747
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: TableInputRowComponent, isStandalone: true, selector: "tr[table-input-row]", inputs: { isShow: { classPropertyName: "isShow", publicName: "isShow", isSignal: true, isRequired: false, transformFunction: null }, hideAdd: { classPropertyName: "hideAdd", publicName: "hideAdd", isSignal: true, isRequired: false, transformFunction: null }, hideDelete: { classPropertyName: "hideDelete", publicName: "hideDelete", isSignal: true, isRequired: false, transformFunction: null }, borderedInput: { classPropertyName: "borderedInput", publicName: "borderedInput", isSignal: true, isRequired: false, transformFunction: null }, actionBtns: { classPropertyName: "actionBtns", publicName: "actionBtns", isSignal: true, isRequired: false, transformFunction: null }, childrenFormSchemaMap: { classPropertyName: "childrenFormSchemaMap", publicName: "childrenFormSchemaMap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDeleteRowFunc: "onDeleteRowFunc", onAddRowFunc: "onAddRowFunc", onActionButtonClick: "onActionButtonClick" }, usesInheritance: true, ngImport: i0, template: "@for (scheme of formSchema(); track scheme._id) {\n <td\n class=\"{{ scheme.cls }} \"\n [ngClass]=\"{ stickyColumn: scheme.sticky }\"\n [style.left.px]=\"scheme.sticky ? tdEl.offsetLeft : null\"\n #tdEl>\n @if (scheme.type == 'button') {\n <div class=\"d-flex\">\n <app-btn\n [text]=\"scheme.label\"\n [type]=\"\n (form()\n | hasFormValue\n : (childrenFormSchemaMap()[scheme.field].formSchemaStr | toAny)\n : formValue())\n ? 'primary'\n : 'secondary'\n \"\n onFormInvalid=\"warn\"\n [form]=\"form()\"\n [icon]=\"scheme.icon\"\n [formSchema]=\"childrenFormSchemaMap()[scheme.field].formSchema\"\n [matTooltip]=\"\n formValue() | formValue: childrenFormSchemaMap()[scheme.field].formSchema | toAny\n \"\n (mclick)=\"dModal.open()\" />\n </div>\n <modal-comp #dModal [showFooter]=\"false\" header=\"{{ scheme.label }} Form\" width=\"70%\">\n <ng-template modalBody>\n <form-generator\n [form]=\"form()\"\n [gridXXLStyle]=\"4\"\n [gridLGStyle]=\"4\"\n [showSubmitBtn]=\"false\"\n [formSchema]=\"childrenFormSchemaMap()[scheme.field].formSchema\"\n (onSubmit)=\"dModal.close()\"></form-generator>\n @if (!isShow()) {\n <div class=\"d-flex justify-content-end\">\n <app-btn (mclick)=\"dModal.close()\" text=\"Done\" />\n </div>\n }\n </ng-template>\n </modal-comp>\n } @else if (scheme.type == 'template') {\n <ng-container *ngTemplateOutlet=\"scheme.templateRef; context: { $implicit: { scheme,form:form() } }\" />\n } @else if (scheme.field) {\n @switch (true) {\n @case (scheme.type == 'tel') {\n <app-phone-number\n [form]=\"form()\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [name]=\"scheme.field\"\n [showLabel]=\"false\"\n [noFormat]=\"scheme.noFormat\"\n [debug]=\"scheme.debug\"\n [showValidation]=\"scheme.showValidation\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [showValidationIcon]=\"scheme.showValidationIcon\"\n [countryCode3]=\"scheme.countryCode3\"\n [showValidationMsg]=\"scheme.showValidationMsg == null ? true : scheme.showValidationMsg\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n \"\n #inputTag />\n }\n @case (scheme.type == 'autocomplete') {\n <app-autocomplete\n [form]=\"form()\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [labelField]=\"scheme.labelField\"\n [noFormat]=\"scheme.noFormat\"\n [labelType]=\"scheme.labelType | toAny\"\n [showValidationMsg]=\"scheme.showValidationMsg == null ? true : scheme.showValidationMsg\"\n (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n [name]=\"scheme.field | toAny\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [debug]=\"scheme.debug\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [valueField]=\"scheme.valueField\"\n [options]=\"scheme.options || optionsMap[scheme.field | toAny]\"\n [hint]=\"scheme.hint\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n \"\n #inputTag />\n }\n\n @default {\n <app-input-basic\n #formField\n [name]=\"scheme.field | toAny\"\n [form]=\"form()\"\n [dontFormatAsInput]=\"scheme.dontFormatAsInput\"\n [clearOnDisable]=\"scheme.clearOnDisable\"\n [type]=\"scheme.type\"\n [valueField]=\"scheme.valueField\"\n [labelType]=\"scheme.labelType | toAny\"\n [showValidationMsg]=\"scheme.showValidationMsg == null ? true : scheme.showValidationMsg\"\n [checkedSignal]=\"scheme.checked\"\n [showValidation]=\"!!scheme.asyncValidators\"\n [noFormat]=\"scheme.noFormat\"\n [showValidationIcon]=\"!!scheme.asyncValidators\"\n [debug]=\"scheme.debug\"\n [labelField]=\"scheme.labelField\"\n [optionFormatter]=\"scheme.optionFormatter\"\n (mSelectedOptionLabel)=\"setOptionLabel($event, scheme)\"\n [options]=\"scheme.options || optionsMap[scheme.field | toAny]\"\n [decimalPoints]=\"scheme.decimalPoints\"\n [hint]=\"scheme.hint\"\n [max]=\"scheme.max\"\n [min]=\"scheme.min\"\n [placeholder]=\"scheme.placeholder\"\n [disabled]=\"\n scheme.disabled ||\n (scheme.disabledIf | functionCaller2: formValue() : (scheme.field | toAny))\n \" />\n }\n }\n }\n </td>\n}\n@if (!isShow()) {\n @if (!hideDelete()) {\n <td class=\"w-1\">\n <app-btn\n group=\"delete\"\n [iconBtn]=\"true\"\n (mclick)=\"onDeleteRowFunc.emit({ btn: deleteBtn })\"\n #deleteBtn />\n </td>\n }\n @if (!hideAdd()) {\n <td class=\"w-1\">\n <app-btn [iconBtn]=\"true\" group=\"add\" (mclick)=\"onAddRowFunc.emit({ btn: addBtn })\" #addBtn />\n </td>\n }\n @for (actionBtn of actionBtns(); track actionBtn.icon) {\n <td class=\"w-1\">\n <app-btn\n [iconBtn]=\"true\"\n [group]=\"actionBtn.group\"\n [icon]=\"actionBtn.icon\"\n (mclick)=\"\n onActionButtonClick.emit({\n btn: actionBtnTemp,\n actionButton: actionBtn,\n })\n \"\n #actionBtnTemp />\n </td>\n }\n}\n", styles: [":host{position:relative}\n"], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "component", type: FormGeneratorComponent, selector: "form-generator", inputs: ["keyField", "presetValueForSingleOption", "isCreate", "submitOnEnterKey", "submitFunc", "submitBtnText", "submitBtnTemplate", "submitSuccessText", "showSubmitBtn", "gridStyle", "gridMDStyle", "gridLGStyle", "gridXXLStyle", "formGridClass", "useLoader", "loading", "form", "formSchema", "formSchemaNoForm", "isShow"], outputs: ["onSubmit", "mchange", "saved", "formChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: FormValuePipe, name: "formValue" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: HasFormValuePipe, name: "hasFormValue" }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
15753
15748
|
}
|
|
15754
15749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TableInputRowComponent, decorators: [{
|
|
15755
15750
|
type: Component,
|
|
@@ -16187,7 +16182,7 @@ class TablePlainComponent extends TableBaseComponent {
|
|
|
16187
16182
|
this.filterChange.emit(e);
|
|
16188
16183
|
}
|
|
16189
16184
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: TablePlainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16190
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: TablePlainComponent, isStandalone: true, selector: "table-plain", inputs: { customSelectClass: { classPropertyName: "customSelectClass", publicName: "customSelectClass", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, obsDataSource: { classPropertyName: "obsDataSource", publicName: "obsDataSource", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByField: { classPropertyName: "disableSelectionByField", publicName: "disableSelectionByField", isSignal: false, isRequired: false, transformFunction: null }, _data: { classPropertyName: "_data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, _filterFields: { classPropertyName: "_filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, _filterFieldsMap: { classPropertyName: "_filterFieldsMap", publicName: "filterFieldsMap", isSignal: false, isRequired: false, transformFunction: null }, selectionPerPage: { classPropertyName: "selectionPerPage", publicName: "selectionPerPage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _view: "view", dataChanged: "dataChanged", filterChange: "filterChange", listMutated: "listMutated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-plain\">\n @if (header()) {\n <h6 class=\"text-primary\">\n {{ header() | appTranslate | async }}\n </h6>\n }\n\n @if (filterFields()) {\n <div class=\"d-flex\">\n <app-btn\n text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n </div>\n <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n @for (scheme of filterFields(); track scheme.field) {\n <div class=\"col-md-4 col-xxl-3\">\n @switch (scheme.type) {\n @case ('autocomplete') {\n <div class=\"col\">\n <app-autocomplete\n [form]=\"filterForm\"\n [label]=\"scheme.label\"\n [labelField]=\"scheme.labelField\"\n [labelType]=\"scheme.labelType | toAny\"\n [name]=\"scheme.field | toAny\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [valueField]=\"scheme.valueField\"\n [hint]=\"scheme.hint\"\n [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n #inputTag\n [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n <app-validation-message [input]=\"inputTag\" />\n </div>\n }\n @default {\n <app-input-basic\n #formField\n [name]=\"scheme.field | toAny\"\n [form]=\"filterForm\"\n [stacked]=\"true\"\n [type]=\"scheme.type\"\n [valueField]=\"scheme.valueField\"\n [labelType]=\"scheme.labelType | toAny\"\n [labelField]=\"scheme.labelField\"\n [noFormat]=\"true\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [decimalPoints]=\"scheme.decimalPoints\"\n [hint]=\"scheme.hint\"\n [max]=\"scheme.max\"\n [min]=\"scheme.min\"\n [placeholder]=\"scheme.placeholder\"\n [label]=\"scheme.label\"\n [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n <app-validation-message [input]=\"formField\" />\n }\n }\n </div>\n }\n <div class=\"col-md justify-content-end d-flex\">\n <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n </div>\n </div>\n }\n\n @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n <div class=\" \">\n <div class=\"row g-3 justify-content-between align-items-end\">\n <div class=\"col-md\">\n @if (startSectionTemplate()) {\n <div class=\"{{ starterSectionClass() }}\">\n <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n </div>\n }\n @if (showFilter()) {\n <form [formGroup]=\"filterForm\">\n <div class=\"row justify-content-center align-items-end\">\n <div class=\"col-md-auto\">\n <app-autocomplete\n label=\"Filter\"\n type=\"select\"\n [form]=\"filterForm\"\n name=\"field\"\n [stacked]=\"false\"\n [options]=\"filterOptions()\"\n valueField=\"code\"\n labelField=\"description\" />\n </div>\n <div class=\"col-md-auto\">\n <app-input-basic\n label=\"Value\"\n type=\"text\"\n [form]=\"filterForm\"\n name=\"value\"\n [stacked]=\"false\" />\n </div>\n <div class=\"col-md-auto\">\n <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n </div>\n </div>\n </form>\n }\n </div>\n @if (showExport() || showAdditionalColumns()) {\n <div class=\"col-md-auto\">\n <div class=\"row row-cols-auto g-3 justify-content-end\">\n <span>\n @if (showExport()) {\n <app-export-table\n [disabled]=\"!dataSource()?.data?.length\"\n [label]=\"label()\"\n [debug]=\"debug()\"\n [displayedColumns]=\"computedDisplayedColumns()\"\n [data]=\"dataSource()?.data\" />\n }\n </span>\n @if (showAdditionalColumns()) {\n <div class=\"d-flex\">\n <fields-to-display\n [fields]=\"allTableColumns()\"\n [currentColumns]=\"computedDisplayedColumns()\"\n (fieldsChanged)=\"fieldsChanged($event)\" />\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div\n [ngClass]=\"{ border: distinct() }\"\n class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n <div class=\"table-responsive\">\n <table\n mat-table\n [dataSource]=\"dataSource() || obsDataSource()\"\n matSort\n class=\"w-100 d-table table mb-0\"\n [multiTemplateDataRows]=\"isExpandable()\"\n #table\n [ngClass]=\"{\n smallerFonts: smallerFonts(),\n nowrap: nowrap(),\n centerCells: centerCells(),\n curvy: curvy(),\n 'table-striped': striped(),\n }\">\n <!-- Checkbox Column -->\n <ng-container\n matColumnDef=\"mselect\"\n [sticky]=\"!placeSelectionAtRight()\"\n [stickyEnd]=\"placeSelectionAtRight()\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n @if (customSelectClass()) {\n <input\n type=\"checkbox\"\n [class]=\"customSelectClass()\"\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [attr.aria-label]=\"checkboxLabel()\" />\n }\n @if (!customSelectClass()) {\n <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n }\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n @if (customSelectClass()) {\n <input\n type=\"checkbox\"\n class=\"form-control control-bg-gray\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [attr.aria-label]=\"checkboxLabel(row)\" />\n }\n @if (!customSelectClass()) {\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [aria-label]=\"checkboxLabel(row)\"\n [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n }\n </td>\n </ng-container>\n <!-- Columns -->\n @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n <ng-template #thContent>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </ng-template>\n\n @switch (col.type) {\n <!-- CHECKBOX -->\n @case ('textarea') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <!-- <app-input-td-rf [(model)]=\"col.\" [showLabel]=\"false\" /> -->\n </td>\n </ng-container>\n }\n <!--// -->\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n <!-- Removing the empty space above checkboxes -->\n <app-input-ngmodel\n [showLabel]=\"false\"\n [stacked]=\"true\"\n type=\"checkbox\"\n [disabled]=\"col.disabled\"\n [checked]=\"col.checked\"\n [(model)]=\"row[col.f]\"\n (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Input -->\n @case ('input') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <!-- Removing the empty space above checkboxes -->\n <app-input-basic\n [showLabel]=\"false\"\n [stacked]=\"true\"\n type=\"text\"\n [disabled]=\"col.disabled\"\n [form]=\"row\"\n [name]=\"col.f\"\n [noFormat]=\"true\" />\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- PROGRESS BAR -->\n @case ('progress') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"progress\">\n <div\n class=\"progress-bar progress-bar-striped bg-success\"\n role=\"progressbar\"\n [ngStyle]=\"{ width: row[col.f] }\">\n {{ row[col.f] }}\n </div>\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- COLOR -->\n @case ('color') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Button -->\n @case ('button') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n <app-btn\n [icon]=\"col.icon || col.btn?.icon\"\n [type]=\"col.btn?.type\"\n (mclick)=\"\n col.action\n ? col.action(row, col.f, getActionStatusCallback(col), index)\n : null\n \"\n [help]=\"col.btn?.help\"\n [showHelpIcon]=\"col.btn?.showHelpIcon\"\n [text]=\"col.btn?.label\"\n [loading]=\"col.btn?.loading\"\n [iconBtn]=\"col.btn?.iconBtn\"\n mclass=\"w-auto\"\n [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Sub Table -->\n @case ('table') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n <div class=\"inline-block\">\n <app-btn\n [icon]=\"col.icon\"\n [type]=\"col.btn?.type || 'dark'\"\n (mclick)=\"col.action ? col.action(row, col.f) : null\"\n [group]=\"col.btn?.group\"\n [help]=\"col.subTable | tableToString: row | async\"\n [showHelpIcon]=\"false\"\n [text]=\"col.btn?.label\"\n [iconBtn]=\"true\"\n mclass=\"w-auto\" />\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- ACTION COLUMNS -->\n @case ('btns') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n @for (button of col.buttons; track button.icon + button.label) {\n <div class=\"mx-2\">\n <app-btn\n [icon]=\"button.icon\"\n [text]=\"button.label\"\n [help]=\"button.help\"\n [showHelpIcon]=\"button.showHelpIcon\"\n [type]=\"button.type\"\n [group]=\"button.group\"\n [iconBtn]=\"!button.label\"\n mclass=\"w-auto\"\n (mclick)=\"\n button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\n \"\n #btn />\n </div>\n }\n </div>\n </td>\n </ng-container>\n }\n\n <!-- EDITABLE -->\n @case ('editable') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <a\n class=\"cell\"\n [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n <i\n (click)=\"col.action ? col.action(row, col.f) : null\"\n class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n </td>\n </ng-container>\n }\n\n <!-- DEFAULT -->\n @default {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let rowIndex = index\"\n [matTooltip]=\"\n col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n \">\n <ng-template #cellContent>\n @switch (true) {\n @case (!!col.routeFormatter) {\n @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n <a\n class=\"cell\"\n [ngClass]=\"{ pointer: col.action, link: col.action }\"\n (click)=\"col.action ? col.action(row, col.f) : null\"\n [queryParams]=\"cellRoute.queryParams\"\n routerLink=\"{{ cellRoute.route }}\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n }\n }\n @case (!!col.customTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n col.customTemplate;\n context: { $implicit: { row, rowIndex } }\n \" />\n }\n @default {\n <span\n class=\"cell\"\n [ngClass]=\"{ pointer: col.action, link: col.action }\"\n (click)=\"col.action ? col.action(row, col.f) : null\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n }\n }\n @if (col.expandable) {\n <button\n matTooltip=\"Exapnd\"\n [matTooltipShowDelay]=\"1000\"\n mat-icon-button\n (click)=\"expandCell(row, col, expandModal)\"\n class=\"expandBtn\">\n <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n </button>\n }\n </ng-template>\n\n @if (col._onHoverFunction) {\n <span\n class=\"\"\n [nelDebug]=\"debug()\"\n [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n [nelDelay]=\"col._onHoverDelay\">\n <ng-container *ngTemplateOutlet=\"cellContent\" />\n </span>\n } @else {\n <ng-container *ngTemplateOutlet=\"cellContent\" />\n }\n </td>\n </ng-container>\n }\n\n <!--// -->\n }\n }\n <!-- EXPANDABLE COLUMN-->\n @if (isExpandable()) {\n <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\"> </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"d-flex justify-content-end\">\n <app-btn\n [iconBtn]=\"true\"\n type=\"clear\"\n [customIcon]=\"\n expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n \"\n aria-label=\"expand row\"\n (mclick)=\"\n expandedElement.set(expandedElement() === row ? null : row);\n $event.stopPropagation()\n \" />\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n <!-- Options Column -->\n @if (hasRowOptions()) {\n <ng-container matColumnDef=\"option\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef disableClear></th>\n <td mat-cell *matCellDef=\"let row\">\n @if (rowOptionsMap()) {\n @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n <i class=\"fa fa-ellipsis-v me-0\"></i>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of _rowoptions; track option.t) {\n <button\n mat-menu-item\n class=\"{{ option.itemClass }}\"\n (click)=\"option.action?.(row)\">\n @if (option.iconClass) {\n <i class=\"{{ option.iconClass }}\"></i>\n }\n {{ option.t | appTranslate | async }}\n </button>\n }\n </mat-menu>\n }\n } @else {\n <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n <i class=\"fa fa-ellipsis-v me-0\"></i>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of rowOptions(); track option.t) {\n <button\n mat-menu-item\n class=\"{{ option.itemClass }}\"\n (click)=\"option.action?.(row)\">\n @if (option.iconClass) {\n <i class=\"{{ option.iconClass }}\"></i>\n }\n {{ option.t | appTranslate | async }}\n </button>\n }\n </mat-menu>\n }\n </td>\n </ng-container>\n }\n\n @if (rawColumns(); as dcols) {\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n @if (isExpandable()) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let row\"\n [attr.colspan]=\"dcols?.length || 1\"\n [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n <div\n class=\"example-element-detail\"\n [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n <ng-container\n *ngTemplateOutlet=\"\n expandedRowTemplate();\n context: { $implicit: { row } }\n \"></ng-container>\n </div>\n </td>\n </ng-container>\n }\n <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: dcols\"\n [ngClass]=\"{\n pointer: showRowPointer(),\n disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n }\"\n [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n (click)=\"rowClick(row)\"></tr>\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n {{ noItemTxt() | appTranslate | async }}\n </td>\n </tr>\n @if (isExpandable()) {\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"expanded-detail-row\"\n [style.height.px]=\"0\"></tr>\n }\n }\n </table>\n </div>\n @if (showPager()) {\n <mat-paginator\n [length]=\"resultsLength()\"\n [pageSizeOptions]=\"computedPageSizeOptions()\"\n [pageSize]=\"pageSize()\"\n showFirstLastButtons></mat-paginator>\n }\n </div>\n</div>\n\n<modal-comp\n [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n [header]=\"selectedCellForExpansion()?.column?.t\"\n [showFooter]=\"false\"\n (modalClose)=\"closeExpandedCell()\"\n #expandModal>\n <ng-template modalBody>\n @if (selectedCellForExpansion(); as _selected) {\n <div\n class=\"\"\n [innerHTML]=\"\n _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n \"></div>\n }\n </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "debug", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["query1", "query2", "fields", "currentColumns"], outputs: ["query1Change", "query2Change", "fieldsChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
|
|
16185
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: TablePlainComponent, isStandalone: true, selector: "table-plain", inputs: { customSelectClass: { classPropertyName: "customSelectClass", publicName: "customSelectClass", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, obsDataSource: { classPropertyName: "obsDataSource", publicName: "obsDataSource", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPager: { classPropertyName: "showPager", publicName: "showPager", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByField: { classPropertyName: "disableSelectionByField", publicName: "disableSelectionByField", isSignal: false, isRequired: false, transformFunction: null }, _data: { classPropertyName: "_data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, _filterFields: { classPropertyName: "_filterFields", publicName: "filterFields", isSignal: false, isRequired: false, transformFunction: null }, _filterFieldsMap: { classPropertyName: "_filterFieldsMap", publicName: "filterFieldsMap", isSignal: false, isRequired: false, transformFunction: null }, selectionPerPage: { classPropertyName: "selectionPerPage", publicName: "selectionPerPage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { _view: "view", dataChanged: "dataChanged", filterChange: "filterChange", listMutated: "listMutated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"table-plain\">\n @if (header()) {\n <h6 class=\"text-primary\">\n {{ header() | appTranslate | async }}\n </h6>\n }\n\n @if (filterFields()) {\n <div class=\"d-flex\">\n <app-btn\n text=\"{{ filterCont.hidden ? 'Show Filter' : 'Hide Filter' }}\"\n [icon]=\"filterCont.hidden ? 'search' : 'close'\"\n (mclick)=\"filterCont.hidden = !filterCont.hidden\" />\n </div>\n <div class=\"row align-items-center mt-2\" [hidden]=\"true\" #filterCont>\n @for (scheme of filterFields(); track scheme.field) {\n <div class=\"col-md-4 col-xxl-3\">\n @switch (scheme.type) {\n @case ('autocomplete') {\n <div class=\"col\">\n <app-autocomplete\n [form]=\"filterForm\"\n [label]=\"scheme.label\"\n [labelField]=\"scheme.labelField\"\n [labelType]=\"scheme.labelType | toAny\"\n [name]=\"scheme.field | toAny\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [valueField]=\"scheme.valueField\"\n [hint]=\"scheme.hint\"\n [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n #inputTag\n [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n <app-validation-message [input]=\"inputTag\" />\n </div>\n }\n @default {\n <app-input-basic\n #formField\n [name]=\"scheme.field | toAny\"\n [form]=\"filterForm\"\n [stacked]=\"true\"\n [type]=\"scheme.type\"\n [valueField]=\"scheme.valueField\"\n [labelType]=\"scheme.labelType | toAny\"\n [labelField]=\"scheme.labelField\"\n [noFormat]=\"true\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [decimalPoints]=\"scheme.decimalPoints\"\n [hint]=\"scheme.hint\"\n [max]=\"scheme.max\"\n [min]=\"scheme.min\"\n [placeholder]=\"scheme.placeholder\"\n [label]=\"scheme.label\"\n [disabled]=\"scheme.disabledIf | functionCaller2: filterForm.value : scheme.field\"\n [options]=\"scheme.options || cellOptions[scheme.field | toAny]\"\n (mchange)=\"onFilterChange(dataSource().filteredData)\" />\n <app-validation-message [input]=\"formField\" />\n }\n }\n </div>\n }\n <div class=\"col-md justify-content-end d-flex\">\n <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilter()\" />\n </div>\n </div>\n }\n\n @if (startSectionTemplate() || showFilter() || showExport() || showAdditionalColumns()) {\n <div class=\" \">\n <div class=\"row g-3 justify-content-between align-items-end\">\n <div class=\"col-md\">\n @if (startSectionTemplate()) {\n <div class=\"{{ starterSectionClass() }}\">\n <ng-container [ngTemplateOutlet]=\"startSectionTemplate()\" />\n </div>\n }\n @if (showFilter()) {\n <form [formGroup]=\"filterForm\">\n <div class=\"row justify-content-center align-items-end\">\n <div class=\"col-md-auto\">\n <app-autocomplete\n label=\"Filter\"\n type=\"select\"\n [form]=\"filterForm\"\n name=\"field\"\n [stacked]=\"false\"\n [options]=\"filterOptions()\"\n valueField=\"code\"\n labelField=\"description\" />\n </div>\n <div class=\"col-md-auto\">\n <app-input-basic\n label=\"Value\"\n type=\"text\"\n [form]=\"filterForm\"\n name=\"value\"\n [stacked]=\"false\" />\n </div>\n <div class=\"col-md-auto\">\n <app-btn text=\"Clear\" type=\"secondary\" (mclick)=\"clearFilter()\" />\n </div>\n </div>\n </form>\n }\n </div>\n @if (showExport() || showAdditionalColumns()) {\n <div class=\"col-md-auto\">\n <div class=\"row row-cols-auto g-3 justify-content-end\">\n <span>\n @if (showExport()) {\n <app-export-table\n [disabled]=\"!dataSource()?.data?.length\"\n [label]=\"label()\"\n [debug]=\"debug()\"\n [displayedColumns]=\"computedDisplayedColumns()\"\n [data]=\"dataSource()?.data\" />\n }\n </span>\n @if (showAdditionalColumns()) {\n <div class=\"d-flex\">\n <fields-to-display\n [fields]=\"allTableColumns()\"\n [currentColumns]=\"computedDisplayedColumns()\"\n (fieldsChanged)=\"fieldsChanged($event)\" />\n </div>\n }\n </div>\n </div>\n }\n </div>\n </div>\n }\n <div\n [ngClass]=\"{ border: distinct() }\"\n class=\"mt-2 rounded-10 overflow-auto table-container {{ tableContainerClass() }} \">\n <div class=\"table-responsive\">\n <table\n mat-table\n [dataSource]=\"dataSource() || obsDataSource()\"\n matSort\n class=\"w-100 d-table table mb-0\"\n [multiTemplateDataRows]=\"isExpandable()\"\n #table\n [ngClass]=\"{\n smallerFonts: smallerFonts(),\n nowrap: nowrap(),\n centerCells: centerCells(),\n curvy: curvy(),\n 'table-striped': striped(),\n }\">\n <!-- Checkbox Column -->\n <ng-container\n matColumnDef=\"mselect\"\n [sticky]=\"!placeSelectionAtRight()\"\n [stickyEnd]=\"placeSelectionAtRight()\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n @if (customSelectClass()) {\n <input\n type=\"checkbox\"\n [class]=\"customSelectClass()\"\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [attr.aria-label]=\"checkboxLabel()\" />\n }\n @if (!customSelectClass()) {\n <mat-checkbox\n (change)=\"$event ? masterToggle() : null\"\n [checked]=\"selection.hasValue() && isAllSelected()\"\n [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n [aria-label]=\"checkboxLabel()\"></mat-checkbox>\n }\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n @if (customSelectClass()) {\n <input\n type=\"checkbox\"\n class=\"form-control control-bg-gray\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [attr.aria-label]=\"checkboxLabel(row)\" />\n }\n @if (!customSelectClass()) {\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"\n [aria-label]=\"checkboxLabel(row)\"\n [disabled]=\"this.disableSelectionByField | functionCaller1: row\"></mat-checkbox>\n }\n </td>\n </ng-container>\n <!-- Columns -->\n @for (col of computedDisplayedColumns(); track col.f; let i = $index) {\n <ng-template #thContent>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </ng-template>\n\n @switch (col.type) {\n <!-- CHECKBOX -->\n @case ('textarea') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <!-- <app-input-td-rf [(model)]=\"col.\" [showLabel]=\"false\" /> -->\n </td>\n </ng-container>\n }\n <!--// -->\n <!-- CHECKBOX -->\n @case ('checkbox') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef class=\"w-1\">\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"w-1\">\n <!-- Removing the empty space above checkboxes -->\n <app-input-ngmodel\n [showLabel]=\"false\"\n [stacked]=\"true\"\n type=\"checkbox\"\n [disabled]=\"col.disabled\"\n [checked]=\"col.checked\"\n [(model)]=\"row[col.f]\"\n (mchange)=\"outputCheckbox(col.f, row, $event)\"></app-input-ngmodel>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Input -->\n @case ('input') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <!-- Removing the empty space above checkboxes -->\n <app-input-basic\n [showLabel]=\"false\"\n [stacked]=\"true\"\n type=\"text\"\n [disabled]=\"col.disabled\"\n [form]=\"row\"\n [name]=\"col.f\"\n [noFormat]=\"true\" />\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- PROGRESS BAR -->\n @case ('progress') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <ng-container *ngTemplateOutlet=\"thContent\"></ng-container>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"progress\">\n <div\n class=\"progress-bar progress-bar-striped bg-success\"\n role=\"progressbar\"\n [ngStyle]=\"{ width: row[col.f] }\">\n {{ row[col.f] }}\n </div>\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- COLOR -->\n @case ('color') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"square-2\" [style]=\"'background-color:' + row[col.f]\"></div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Button -->\n @case ('button') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row; let index = index\" class=\"btn-cell\">\n <app-btn\n [icon]=\"col.icon || col.btn?.icon\"\n [type]=\"col.btn?.type\"\n (mclick)=\"\n col.action\n ? col.action(row, col.f, getActionStatusCallback(col), index)\n : null\n \"\n [help]=\"col.btn?.help\"\n [showHelpIcon]=\"col.btn?.showHelpIcon\"\n [text]=\"col.btn?.label\"\n [loading]=\"col.btn?.loading\"\n [iconBtn]=\"col.btn?.iconBtn\"\n mclass=\"w-auto\"\n [disabled]=\"col.btn?.disabled || col.btn?.loading\" />\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- Sub Table -->\n @case ('table') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell class=\"text-center\" *matHeaderCellDef>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell class=\"text-center\" *matCellDef=\"let row\">\n <div class=\"inline-block\">\n <app-btn\n [icon]=\"col.icon\"\n [type]=\"col.btn?.type || 'dark'\"\n (mclick)=\"col.action ? col.action(row, col.f) : null\"\n [group]=\"col.btn?.group\"\n [help]=\"col.subTable | tableToString: row | async\"\n [showHelpIcon]=\"false\"\n [text]=\"col.btn?.label\"\n [iconBtn]=\"true\"\n mclass=\"w-auto\" />\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n\n <!-- ACTION COLUMNS -->\n @case ('btns') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef class=\"btn-cell text-center\">\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row; let i = index\" class=\"btn-cell\">\n <div class=\"d-flex col-md-auto col-sm-auto justify-content-center\">\n @for (button of col.buttons; track button.icon + button.label) {\n <div class=\"mx-2\">\n <app-btn\n [icon]=\"button.icon\"\n [text]=\"button.label\"\n [help]=\"button.help\"\n [showHelpIcon]=\"button.showHelpIcon\"\n [type]=\"button.type\"\n [group]=\"button.group\"\n [iconBtn]=\"!button.label\"\n mclass=\"w-auto\"\n (mclick)=\"\n button.action(row, i + paginator.pageIndex * paginator.pageSize, btn)\n \"\n #btn />\n </div>\n }\n </div>\n </td>\n </ng-container>\n }\n\n <!-- EDITABLE -->\n @case ('editable') {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <a\n class=\"cell\"\n [mqueryParams]=\"col.mqueryParams | functionCaller2: row : col.f\"\n [mrouterLink]=\"col.routeFormatter | functionCaller2: row : col.f\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n <i\n (click)=\"col.action ? col.action(row, col.f) : null\"\n class=\"ps-1 pointer fas fa-pencil-alt\"></i>\n </td>\n </ng-container>\n }\n\n <!-- DEFAULT -->\n @default {\n <ng-container matColumnDef=\"{{ col.f | toAny }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header>\n <app-info-icon [text]=\"col.hint\">\n {{ col.t | appTranslate | async }}\n </app-info-icon>\n </th>\n <td\n mat-cell\n *matCellDef=\"let row; let rowIndex = index\"\n [matTooltip]=\"\n col.hintFormatter ? (col.hintFormatter | functionCaller1: row | async) : null\n \">\n <ng-template #cellContent>\n @switch (true) {\n @case (!!col.routeFormatter) {\n @if (extractRoute | functionCaller2: col : row; as cellRoute) {\n <a\n class=\"cell\"\n [ngClass]=\"{ pointer: col.action, link: col.action }\"\n (click)=\"col.action ? col.action(row, col.f) : null\"\n [queryParams]=\"cellRoute.queryParams\"\n routerLink=\"{{ cellRoute.route }}\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></a>\n }\n }\n @case (!!col.customTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n col.customTemplate;\n context: { $implicit: { row, rowIndex } }\n \" />\n }\n @default {\n <span\n class=\"cell\"\n [ngClass]=\"{ pointer: col.action, link: col.action }\"\n (click)=\"col.action ? col.action(row, col.f) : null\"\n [innerHTML]=\"row | getColFormatted: col | async | valueOrX: '-'\"></span>\n }\n }\n @if (col.expandable) {\n <button\n matTooltip=\"Exapnd\"\n [matTooltipShowDelay]=\"1000\"\n mat-icon-button\n (click)=\"expandCell(row, col, expandModal)\"\n class=\"expandBtn\">\n <mat-icon [inline]=\"true\">open_in_full</mat-icon>\n </button>\n }\n </ng-template>\n\n @if (col._onHoverFunction) {\n <span\n class=\"\"\n [nelDebug]=\"debug()\"\n [nelMouseEntered]=\"{ action: col._onHoverFunction, argument: row }\"\n [nelDelay]=\"col._onHoverDelay\">\n <ng-container *ngTemplateOutlet=\"cellContent\" />\n </span>\n } @else {\n <ng-container *ngTemplateOutlet=\"cellContent\" />\n }\n </td>\n </ng-container>\n }\n\n <!--// -->\n }\n }\n <!-- EXPANDABLE COLUMN-->\n @if (isExpandable()) {\n <ng-container matColumnDef=\"_expandCol\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\"> </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"d-flex justify-content-end\">\n <app-btn\n [iconBtn]=\"true\"\n type=\"clear\"\n [customIcon]=\"\n expandedElement() !== row ? 'fa fa-chevron-down' : 'fa fa-chevron-up'\n \"\n aria-label=\"expand row\"\n (mclick)=\"\n expandedElement.set(expandedElement() === row ? null : row);\n $event.stopPropagation()\n \" />\n </div>\n </td>\n </ng-container>\n }\n <!--// -->\n <!-- Options Column -->\n @if (hasRowOptions()) {\n <ng-container matColumnDef=\"option\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef disableClear></th>\n <td mat-cell *matCellDef=\"let row\">\n @if (rowOptionsMap()) {\n @if (formOptionsMap() | functionCaller: row; as _rowoptions) {\n <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n <i class=\"fa fa-ellipsis-v me-0\"></i>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of _rowoptions; track option.t) {\n <button\n mat-menu-item\n class=\"{{ option.itemClass }}\"\n (click)=\"option.action?.(row)\">\n @if (option.iconClass) {\n <i class=\"{{ option.iconClass }}\"></i>\n }\n {{ option.t | appTranslate | async }}\n </button>\n }\n </mat-menu>\n }\n } @else {\n <button type=\"button\" [matMenuTriggerFor]=\"menu\" class=\"btn ms-2\">\n <i class=\"fa fa-ellipsis-v me-0\"></i>\n </button>\n <mat-menu #menu=\"matMenu\">\n @for (option of rowOptions(); track option.t) {\n <button\n mat-menu-item\n class=\"{{ option.itemClass }}\"\n (click)=\"option.action?.(row)\">\n @if (option.iconClass) {\n <i class=\"{{ option.iconClass }}\"></i>\n }\n {{ option.t | appTranslate | async }}\n </button>\n }\n </mat-menu>\n }\n </td>\n </ng-container>\n }\n\n @if (rawColumns(); as dcols) {\n <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n @if (isExpandable()) {\n <ng-container matColumnDef=\"expandedDetail\">\n <td\n mat-cell\n *matCellDef=\"let row\"\n [attr.colspan]=\"dcols?.length || 1\"\n [ngClass]=\"{ hideBorder: row != expandedElement() }\">\n <div\n class=\"example-element-detail\"\n [@detailExpand]=\"row == expandedElement() ? 'expanded' : 'collapsed'\">\n <ng-container\n *ngTemplateOutlet=\"\n expandedRowTemplate();\n context: { $implicit: { row } }\n \"></ng-container>\n </div>\n </td>\n </ng-container>\n }\n <tr mat-header-row *matHeaderRowDef=\"dcols\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: dcols\"\n [ngClass]=\"{\n pointer: showRowPointer(),\n disabled: isDisabledFunc() ? isDisabledFunc()(row) : false,\n }\"\n [matTooltip]=\"isDisabledFunc() && isDisabledFunc()(row) ? 'Disabled' : null\"\n (click)=\"rowClick(row)\"></tr>\n <tr class=\"mat-row\" *matNoDataRow>\n <td class=\"mat-cell no-item\" [attr.colspan]=\"dcols?.length || 1\">\n {{ noItemTxt() | appTranslate | async }}\n </td>\n </tr>\n @if (isExpandable()) {\n <tr\n mat-row\n *matRowDef=\"let row; columns: ['expandedDetail']\"\n class=\"expanded-detail-row\"\n [style.height.px]=\"0\"></tr>\n }\n }\n </table>\n </div>\n @if (showPager()) {\n <mat-paginator\n [length]=\"resultsLength()\"\n [pageSizeOptions]=\"computedPageSizeOptions()\"\n [pageSize]=\"pageSize()\"\n showFirstLastButtons></mat-paginator>\n }\n </div>\n</div>\n\n<modal-comp\n [width]=\"selectedCellForExpansion()?.column?.expandedWidth || '900px'\"\n [header]=\"selectedCellForExpansion()?.column?.t\"\n [showFooter]=\"false\"\n (modalClose)=\"closeExpandedCell()\"\n #expandModal>\n <ng-template modalBody>\n @if (selectedCellForExpansion(); as _selected) {\n <div\n class=\"\"\n [innerHTML]=\"\n _selected.row | getColFormattedE: _selected.column | async | valueOrX: '-'\n \"></div>\n }\n </ng-template>\n</modal-comp>\n", styles: [":host ::ng-deep .table-plain .w-1,:host ::ng-deep .table-https .w-1{width:1%}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail{padding:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail.hideBorder{border-bottom:0}:host ::ng-deep .table-plain td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail,:host ::ng-deep .table-https td.cdk-column-expandedDetail.mat-column-expandedDetail .example-element-detail{overflow:hidden;display:flex}:host ::ng-deep .table-plain .mat-cell,:host ::ng-deep .table-https .mat-cell{padding:3px 5px!important}:host ::ng-deep .table-plain .colour,:host ::ng-deep .table-https .colour{height:15px;width:15px;display:inline-block;border-radius:5px}:host ::ng-deep .table-plain .centerCells .mat-sort-header-container,:host ::ng-deep .table-plain .centerCells .mat-mdc-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-sort-header-container,:host ::ng-deep .table-https .centerCells .mat-mdc-sort-header-container{justify-content:center}:host ::ng-deep .table-plain .default.colour,:host ::ng-deep .table-https .default.colour{background-color:#545454}:host ::ng-deep .table-plain .btn-cell,:host ::ng-deep .table-https .btn-cell{width:1%}:host ::ng-deep .table-plain input[type=checkbox]:not(.form-control),:host ::ng-deep .table-https input[type=checkbox]:not(.form-control){border:1px solid rgba(80,78,245,.3019607843)}:host ::ng-deep .table-plain .mat-header-cell,:host ::ng-deep .table-plain .mat-mdc-header-cell,:host ::ng-deep .table-https .mat-header-cell,:host ::ng-deep .table-https .mat-mdc-header-cell{vertical-align:middle;color:var(--primary);font-style:normal;font-weight:600;font-size:14px;text-align:center}:host ::ng-deep .table-plain .mat-table-sticky-border-elem-left,:host ::ng-deep .table-plain .mat-mdc-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-table-sticky-border-elem-left,:host ::ng-deep .table-https .mat-mdc-table-sticky-border-elem-left{border-right:1px solid #e0e0e0;background-color:#fff}:host ::ng-deep .table-plain .mat-mdc-table-sticky,:host ::ng-deep .table-https .mat-mdc-table-sticky{background-color:#fff!important}:host ::ng-deep .table-plain .smallerFonts td,:host ::ng-deep .table-plain .smallerFonts th,:host ::ng-deep .table-https .smallerFonts td,:host ::ng-deep .table-https .smallerFonts th{font-size:.7rem}:host ::ng-deep .table-plain .nowrap td,:host ::ng-deep .table-plain .nowrap th,:host ::ng-deep .table-https .nowrap td,:host ::ng-deep .table-https .nowrap th{white-space:nowrap;text-align:left;padding:5px}:host ::ng-deep .table-plain table tr,:host ::ng-deep .table-https table tr{position:relative}:host ::ng-deep .table-plain table tr.mat-mdc-row,:host ::ng-deep .table-plain table tr.mat-mdc-header-row,:host ::ng-deep .table-plain table tr .mat-header-row,:host ::ng-deep .table-https table tr.mat-mdc-row,:host ::ng-deep .table-https table tr.mat-mdc-header-row,:host ::ng-deep .table-https table tr .mat-header-row{height:52px}:host ::ng-deep .table-plain table tr td:hover,:host ::ng-deep .table-https table tr td:hover{color:unset!important;text-decoration:unset;cursor:unset}:host ::ng-deep .table-plain table tr.disabled:after,:host ::ng-deep .table-https table tr.disabled:after{content:\" \";display:block;background-color:#c7c7c726;width:100%;height:100%;position:absolute;top:0;left:0;z-index:11111;cursor:not-allowed}:host ::ng-deep .table-plain .centerCells td,:host ::ng-deep .table-https .centerCells td{text-align:center}:host ::ng-deep .table-plain .curvy tr,:host ::ng-deep .table-https .curvy tr{border-radius:0 10px}:host ::ng-deep .table-plain .inline-block,:host ::ng-deep .table-https .inline-block{display:inline-block}:host ::ng-deep .table-plain td.no-item,:host ::ng-deep .table-https td.no-item{border-bottom:none!important;height:50px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ExportTableComponent, selector: "app-export-table", inputs: ["data", "displayedColumns", "searchFunc", "searchQuery", "label", "debug", "disabled"] }, { kind: "component", type: FieldsToDisplayComponent, selector: "fields-to-display", inputs: ["query1", "query2", "fields", "currentColumns"], outputs: ["query1Change", "query2Change", "fieldsChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "pipe", type: FunctionCaller1, name: "functionCaller1" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: GetColFormattedPipe, name: "getColFormatted" }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "directive", type: InputFormatDirective, selector: "input:not([matInput]):not([noformat])", inputs: ["value"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "component", type: InputNGModelComponent, selector: "app-input-ngmodel", inputs: ["mvalue", "cls", "colored", "disabled", "hide", "hint", "id", "inpCl", "label", "lblCl", "lblPosition", "mini", "light", "name", "model", "optionFormatter", "options", "checked", "contextData", "decimalPoints", "labelField", "max", "min", "placeholder", "prefix", "readonly", "required", "showEmptyOption", "showLabel", "showValidation", "showValidationIcon", "small", "stacked", "suffix", "theme", "type", "valueField", "labelType", "xsmall"], outputs: ["modelChange", "mchange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i9$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "pipe", type: GetColFormattedEPipe, name: "getColFormattedE" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MouseEnterListenerDirective, selector: "[nelMouseEntered]", inputs: ["nelMouseEntered"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MrouterLinkirective, selector: "[mrouterLink]", inputs: ["mrouterLink", "mrouterLinkActivatedRoute", "mqueryParams", "isPhone", "isEmail"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TablePipesModule }, { kind: "pipe", type: TableToStringPipe, name: "tableToString" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: ValueOrXPipe, name: "valueOrX" }, { kind: "pipe", type: FunctionCaller, name: "functionCaller" }], animations: [
|
|
16191
16186
|
trigger('detailExpand', [
|
|
16192
16187
|
state('collapsed', style({ height: '0px', minHeight: '0' })),
|
|
16193
16188
|
state('expanded', style({ height: '*' })),
|
|
@@ -16929,7 +16924,7 @@ class InputTableComponent {
|
|
|
16929
16924
|
this.downloadCSV([this.templateObj], 'template ' + this.label);
|
|
16930
16925
|
}
|
|
16931
16926
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputTableComponent, deps: [{ token: UtilityService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16932
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputTableComponent, isStandalone: true, selector: "app-input-table", inputs: { bordered: "bordered", ioFormatted: "ioFormatted", keyField: "keyField", label: "label", pageSizeOptions: "pageSizeOptions", realTimeValidation: "realTimeValidation", showAddRow: "showAddRow", showCSV: "showCSV", showEditRow: "showEditRow", showExportBtn: "showExportBtn", showIOBtns: "showIOBtns", showSN: "showSN", submitFunc: "submitFunc", validationFunc: "validationFunc", _numOfRows: ["numOfRows", "_numOfRows"], _schemas: ["schemas", "_schemas"], _data: ["data", "_data"] }, outputs: { submitted: "submitted" }, viewQueries: [{ propertyName: "errorListTag", first: true, predicate: ["errorList"], descendants: true }], ngImport: i0, template: "<loader [loading]=\"loading\"> \n <div [ngClass]=\"{ border: bordered, unbordered: !bordered }\">\n <div class=\"overflow-auto position-relative\">\n <!-- <div class=\"overflow-auto position-relative\" PSBox> -->\n <table matSort (matSortChange)=\"sortData($event)\" class=\"w-100 d-table mb-0 input-table\">\n <thead>\n <tr class=\"text-primary\">\n @if (showSN) {\n <th class=\"text-center\">{{ 'S/N' | appTranslate | async }}</th>\n }\n @for (item of schemas; track item) {\n\n @if (!item.hidden) {\n <th mat-sort-header=\"{{ item[keyField|toAny] }}\">\n {{ item.label | appTranslate | async }}\n </th>\n }\n\n }\n <th></th>\n </tr>\n </thead>\n <tbody>\n @for (\n subForm of form.controls|toAny; track subFormTrackBy(si,\n subForm); let si = $index) {\n <tr [id]=\"subForm.value.__rowID\">\n @if (showSN) {\n <td>\n <div class=\"center\">{{ si + 1 }}</div>\n </td>\n }\n @for (scheme of schemas; track schemeTrackBy(ci, scheme); let ci = $index) {\n\n <td class=\"content-cell\" [hidden]=\"scheme.hidden\">\n\n @switch (true) {\n @case (scheme.type == 'tel') {\n\n <app-phone-number [form]=\"subForm\" [label]=\"scheme.label\" [name]=\"scheme[keyField]\"\n [id]=\"subForm.value.__rowID|toAny\" [showLabel]=\"false\" [showValidation]=\"scheme.showValidation\"\n [showValidationIcon]=\"scheme.showValidationIcon\" [stacked]=\"true\" [countryCode3]=\"\n cellCountryCode3s[scheme.getCountryCode3Key+si] || scheme.countryCode3\n \" [disabled]=\"\n scheme.disabledIf\n | functionCaller2: subForm.value:scheme[keyField]\n \" #inputTag>\n </app-phone-number>\n <app-validation-message [input]=\"inputTag\" />\n\n }\n @case (scheme.type == 'autocomplete') {\n\n <app-autocomplete [form]=\"subForm\" [label]=\"scheme.label\" [labelField]=\"scheme.labelField\"\n [id]=\"subForm.value.__rowID|toAny\" [autoPickValueField]=\"true\" [labelType]=\"scheme.labelType\"\n [name]=\"scheme[keyField|toAny]\" [optionFormatter]=\"scheme.optionFormatter\" [showLabel]=\"false\"\n [stacked]=\"true\" [valueField]=\"scheme.valueField\" (mchange)=\"addCellOption(scheme,subForm,$event,si)\"\n [options]=\"\n scheme.options||schemaMap[scheme.field|toAny]?.options||cellOptions[scheme.optionsKey+si]\n \" [hint]=\"scheme.hint\" [disabled]=\"\n scheme.disabledIf\n | functionCaller2: subForm.value:scheme[keyField]\n \" #inputTag></app-autocomplete>\n <app-validation-message [input]=\"inputTag\" />\n\n }\n @default {\n\n <app-input-basic #inputTag [decimalPoints]=\"scheme.decimalPoints\" [form]=\"subForm\"\n [id]=\"subForm.value.__rowID|toAny\" [hint]=\"scheme.hint\" [label]=\"scheme.label\"\n [labelField]=\"scheme.labelField\" [autoPickValueField]=\"true\" [labelType]=\"scheme.labelType\"\n [max]=\"scheme.max\" [min]=\"scheme.min\" [name]=\"scheme[keyField|toAny]\"\n [optionFormatter]=\"scheme.optionFormatter\" [placeholder]=\"scheme.placeholder\" [showLabel]=\"false\"\n [showValidation]=\"scheme.showValidation\" [showValidationIcon]=\"scheme.showValidationIcon\"\n [type]=\"scheme.type\" [valueField]=\"scheme.valueField\"\n (mchange)=\"addCellOption(scheme,subForm,$event,si)\" [options]=\"\n scheme.options||schemaMap[scheme.field|toAny]?.options||cellOptions[scheme.optionsKey+si]\n \" [disabled]=\"\n scheme.disabledIf\n | functionCaller2: subForm.value:scheme[keyField]\n \" />\n <app-validation-message [input]=\"inputTag\" />\n\n }\n }\n\n </td>\n\n }\n <td>\n <div class=\"d-flex justify-content-center\">\n @if (showEditRow) {\n\n <app-btn group=\"edit\" (mclick)=\"editRow(si)\"></app-btn>\n <span class=\"mx-1\"></span>\n\n }\n <app-btn group=\"delete\" (mclick)=\"removeRow(si)\"></app-btn>\n @if (showAddRow) {\n\n <span class=\"mx-1\"></span>\n <app-btn group=\"add\" (mclick)=\"addRow(si + 1)\"></app-btn>\n\n }\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n <!-- <mat-paginator *ngIf=\"batchUpload\" [length]=\"form?.length\" [pageSize]=\"pageSizeOptions[0]\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"openPage($event)\" aria-label=\"Select page\">\n </mat-paginator> -->\n <!-- <mat-paginator [length]=\"thi\" [pageSizeOptions]=\"pageSizeOptions\" [pageSize]=\"pageSize\"\n showFirstLastButtons>\n </mat-paginator> -->\n </div>\n @if (submitFunc) {\n <div class=\"row align-items-center justify-content-end mt-3\">\n <div class=\"col-auto d-flex\">\n <app-btn (mclick)=\"submit()\" text=\"Submit\" [form]=\"form\" type=\"secondary\" icon=\"save\">\n </app-btn>\n </div>\n </div>\n }\n</loader>", styles: ["tr{vertical-align:top}.content-cell{min-width:200px}th:first-child,td:first-child{position:sticky;left:0;z-index:2}th{position:sticky;left:0;z-index:1;font-weight:500}th:last-child,td:last-child{position:sticky;right:0;z-index:2;width:1%}th,td{background-color:#fff;padding:5px}.border th,.border td{border:1px solid #d4d4d4}.unbordered th,.unbordered td{border:none}::ng-deep .mat-sort-header-content{overflow:auto;white-space:nowrap}::ng-deep .mat-expansion-panel-header{padding:0 10px!important}::ng-deep .mat-expansion-panel-body{padding:0 10px!important}.invalidRow td,td.invalidCell{background-color:#ffe4e4}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
|
|
16927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: InputTableComponent, isStandalone: true, selector: "app-input-table", inputs: { bordered: "bordered", ioFormatted: "ioFormatted", keyField: "keyField", label: "label", pageSizeOptions: "pageSizeOptions", realTimeValidation: "realTimeValidation", showAddRow: "showAddRow", showCSV: "showCSV", showEditRow: "showEditRow", showExportBtn: "showExportBtn", showIOBtns: "showIOBtns", showSN: "showSN", submitFunc: "submitFunc", validationFunc: "validationFunc", _numOfRows: ["numOfRows", "_numOfRows"], _schemas: ["schemas", "_schemas"], _data: ["data", "_data"] }, outputs: { submitted: "submitted" }, viewQueries: [{ propertyName: "errorListTag", first: true, predicate: ["errorList"], descendants: true }], ngImport: i0, template: "<loader [loading]=\"loading\"> \n <div [ngClass]=\"{ border: bordered, unbordered: !bordered }\">\n <div class=\"overflow-auto position-relative\">\n <!-- <div class=\"overflow-auto position-relative\" PSBox> -->\n <table matSort (matSortChange)=\"sortData($event)\" class=\"w-100 d-table mb-0 input-table\">\n <thead>\n <tr class=\"text-primary\">\n @if (showSN) {\n <th class=\"text-center\">{{ 'S/N' | appTranslate | async }}</th>\n }\n @for (item of schemas; track item) {\n\n @if (!item.hidden) {\n <th mat-sort-header=\"{{ item[keyField|toAny] }}\">\n {{ item.label | appTranslate | async }}\n </th>\n }\n\n }\n <th></th>\n </tr>\n </thead>\n <tbody>\n @for (\n subForm of form.controls|toAny; track subFormTrackBy(si,\n subForm); let si = $index) {\n <tr [id]=\"subForm.value.__rowID\">\n @if (showSN) {\n <td>\n <div class=\"center\">{{ si + 1 }}</div>\n </td>\n }\n @for (scheme of schemas; track schemeTrackBy(ci, scheme); let ci = $index) {\n\n <td class=\"content-cell\" [hidden]=\"scheme.hidden\">\n\n @switch (true) {\n @case (scheme.type == 'tel') {\n\n <app-phone-number [form]=\"subForm\" [label]=\"scheme.label\" [name]=\"scheme[keyField]\"\n [id]=\"subForm.value.__rowID|toAny\" [showLabel]=\"false\" [showValidation]=\"scheme.showValidation\"\n [showValidationIcon]=\"scheme.showValidationIcon\" [stacked]=\"true\" [countryCode3]=\"\n cellCountryCode3s[scheme.getCountryCode3Key+si] || scheme.countryCode3\n \" [disabled]=\"\n scheme.disabledIf\n | functionCaller2: subForm.value:scheme[keyField]\n \" #inputTag>\n </app-phone-number>\n <app-validation-message [input]=\"inputTag\" />\n\n }\n @case (scheme.type == 'autocomplete') {\n\n <app-autocomplete [form]=\"subForm\" [label]=\"scheme.label\" [labelField]=\"scheme.labelField\"\n [id]=\"subForm.value.__rowID|toAny\" [autoPickValueField]=\"true\" [labelType]=\"scheme.labelType\"\n [name]=\"scheme[keyField|toAny]\" [optionFormatter]=\"scheme.optionFormatter\" [showLabel]=\"false\"\n [stacked]=\"true\" [valueField]=\"scheme.valueField\" (mchange)=\"addCellOption(scheme,subForm,$event,si)\"\n [options]=\"\n scheme.options||schemaMap[scheme.field|toAny]?.options||cellOptions[scheme.optionsKey+si]\n \" [hint]=\"scheme.hint\" [disabled]=\"\n scheme.disabledIf\n | functionCaller2: subForm.value:scheme[keyField]\n \" #inputTag></app-autocomplete>\n <app-validation-message [input]=\"inputTag\" />\n\n }\n @default {\n\n <app-input-basic #inputTag [decimalPoints]=\"scheme.decimalPoints\" [form]=\"subForm\"\n [id]=\"subForm.value.__rowID|toAny\" [hint]=\"scheme.hint\" [label]=\"scheme.label\"\n [labelField]=\"scheme.labelField\" [autoPickValueField]=\"true\" [labelType]=\"scheme.labelType\"\n [max]=\"scheme.max\" [min]=\"scheme.min\" [name]=\"scheme[keyField|toAny]\"\n [optionFormatter]=\"scheme.optionFormatter\" [placeholder]=\"scheme.placeholder\" [showLabel]=\"false\"\n [showValidation]=\"scheme.showValidation\" [showValidationIcon]=\"scheme.showValidationIcon\"\n [type]=\"scheme.type\" [valueField]=\"scheme.valueField\"\n (mchange)=\"addCellOption(scheme,subForm,$event,si)\" [options]=\"\n scheme.options||schemaMap[scheme.field|toAny]?.options||cellOptions[scheme.optionsKey+si]\n \" [disabled]=\"\n scheme.disabledIf\n | functionCaller2: subForm.value:scheme[keyField]\n \" />\n <app-validation-message [input]=\"inputTag\" />\n\n }\n }\n\n </td>\n\n }\n <td>\n <div class=\"d-flex justify-content-center\">\n @if (showEditRow) {\n\n <app-btn group=\"edit\" (mclick)=\"editRow(si)\"></app-btn>\n <span class=\"mx-1\"></span>\n\n }\n <app-btn group=\"delete\" (mclick)=\"removeRow(si)\"></app-btn>\n @if (showAddRow) {\n\n <span class=\"mx-1\"></span>\n <app-btn group=\"add\" (mclick)=\"addRow(si + 1)\"></app-btn>\n\n }\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n <!-- <mat-paginator *ngIf=\"batchUpload\" [length]=\"form?.length\" [pageSize]=\"pageSizeOptions[0]\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"openPage($event)\" aria-label=\"Select page\">\n </mat-paginator> -->\n <!-- <mat-paginator [length]=\"thi\" [pageSizeOptions]=\"pageSizeOptions\" [pageSize]=\"pageSize\"\n showFirstLastButtons>\n </mat-paginator> -->\n </div>\n @if (submitFunc) {\n <div class=\"row align-items-center justify-content-end mt-3\">\n <div class=\"col-auto d-flex\">\n <app-btn (mclick)=\"submit()\" text=\"Submit\" [form]=\"form\" type=\"secondary\" icon=\"save\">\n </app-btn>\n </div>\n </div>\n }\n</loader>", styles: ["tr{vertical-align:top}.content-cell{min-width:200px}th:first-child,td:first-child{position:sticky;left:0;z-index:2}th{position:sticky;left:0;z-index:1;font-weight:500}th:last-child,td:last-child{position:sticky;right:0;z-index:2;width:1%}th,td{background-color:#fff;padding:5px}.border th,.border td{border:1px solid #d4d4d4}.unbordered th,.unbordered td{border:none}::ng-deep .mat-sort-header-content{overflow:auto;white-space:nowrap}::ng-deep .mat-expansion-panel-header{padding:0 10px!important}::ng-deep .mat-expansion-panel-body{padding:0 10px!important}.invalidRow td,td.invalidCell{background-color:#ffe4e4}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
|
|
16933
16928
|
}
|
|
16934
16929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: InputTableComponent, decorators: [{
|
|
16935
16930
|
type: Component,
|
|
@@ -18851,7 +18846,7 @@ class FindItemComponent extends BaseFormGenerator {
|
|
|
18851
18846
|
this._loading.set(false);
|
|
18852
18847
|
}
|
|
18853
18848
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: FindItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
18854
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: FindItemComponent, isStandalone: true, selector: "app-find-item,find-item", inputs: { autoFormatSchema: { classPropertyName: "autoFormatSchema", publicName: "autoFormatSchema", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, autoOrder: { classPropertyName: "autoOrder", publicName: "autoOrder", isSignal: true, isRequired: false, transformFunction: null }, centerCells: { classPropertyName: "centerCells", publicName: "centerCells", isSignal: true, isRequired: false, transformFunction: null }, _displayedColumns: { classPropertyName: "_displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, gridClass: { classPropertyName: "gridClass", publicName: "gridClass", isSignal: true, isRequired: false, transformFunction: null }, hideForm: { classPropertyName: "hideForm", publicName: "hideForm", isSignal: true, isRequired: false, transformFunction: null }, customTableCellTemplates: { classPropertyName: "customTableCellTemplates", publicName: "customTableCellTemplates", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowOptionsMap: { classPropertyName: "rowOptionsMap", publicName: "rowOptionsMap", isSignal: true, isRequired: false, transformFunction: null }, isExpandable: { classPropertyName: "isExpandable", publicName: "isExpandable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "rowOptions", isSignal: true, isRequired: false, transformFunction: null }, orderDirection: { classPropertyName: "orderDirection", publicName: "orderDirection", isSignal: true, isRequired: false, transformFunction: null }, orderField: { classPropertyName: "orderField", publicName: "orderField", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showData: { classPropertyName: "showData", publicName: "showData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", isSignal: true, isRequired: false, transformFunction: null }, startSectionTemplate: { classPropertyName: "startSectionTemplate", publicName: "startSectionTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSearchBtn: { classPropertyName: "showSearchBtn", publicName: "showSearchBtn", isSignal: true, isRequired: false, transformFunction: null }, showClearBtn: { classPropertyName: "showClearBtn", publicName: "showClearBtn", isSignal: true, isRequired: false, transformFunction: null }, showValidationMsg: { classPropertyName: "showValidationMsg", publicName: "showValidationMsg", isSignal: true, isRequired: false, transformFunction: null }, createBtnRoute: { classPropertyName: "createBtnRoute", publicName: "createBtnRoute", isSignal: true, isRequired: false, transformFunction: null }, showAdditionalColumns: { classPropertyName: "showAdditionalColumns", publicName: "showAdditionalColumns", isSignal: true, isRequired: false, transformFunction: null }, smallerFonts: { classPropertyName: "smallerFonts", publicName: "smallerFonts", isSignal: true, isRequired: false, transformFunction: null }, useSelection: { classPropertyName: "useSelection", publicName: "useSelection", isSignal: true, isRequired: false, transformFunction: null }, initialQuery: { classPropertyName: "initialQuery", publicName: "initialQuery", isSignal: true, isRequired: false, transformFunction: null }, createButton: { classPropertyName: "createButton", publicName: "createButton", isSignal: true, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: false, transformFunction: null }, searchObservableFunc: { classPropertyName: "searchObservableFunc", publicName: "searchObservableFunc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { initialQuery: "initialQueryChange", _rowClick: "rowClick", clickedCreate: "clickedCreate" }, viewQueries: [{ propertyName: "tableHTTPSREF", first: true, predicate: (TableHttpsComponent), descendants: true, isSignal: true }, { propertyName: "tablePlainRef", first: true, predicate: (TablePlainComponent), descendants: true, isSignal: true }, { propertyName: "tableHTTPSREFSignal", first: true, predicate: TableHttpsComponent, descendants: true, isSignal: true }, { propertyName: "tablePlainRefSignal", first: true, predicate: TablePlainComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"_loading()\" [useStaticLoader]=\"useStaticLoader()\">\n @if (!hideForm() && searchForm()) {\n <div class=\"row align-items-center\">\n @for (scheme of computedFormSchema(); track scheme.field) {\n <form class=\"{{ gridClass() }} \" (ngSubmit)=\"fieldAction(scheme)\">\n <div class=\"form-cell\" [ngClass]=\"{ showValidationMsg: showValidationMsg() }\">\n <ng-template #actionCell let-formField>\n <app-btn\n [icon]=\"scheme.icon || 'show'\"\n [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n actionType=\"submit\"\n [disabled]=\"!formField?.validSignal()\" />\n </ng-template>\n\n @switch (scheme.type) {\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n customTemplates()[scheme.field];\n context: { $implicit: { scheme, form: scheme.form } }\n \" />\n }\n @case ('tel') {\n <app-phone-number\n [form]=\"scheme.form\"\n [label]=\"scheme.label\"\n [name]=\"scheme.field\"\n [showLabel]=\"false\"\n [showValidation]=\"scheme.showValidation\"\n [showValidationIcon]=\"scheme.showValidationIcon\"\n [countryCode3]=\"scheme.countryCode3\"\n [showValidationMsg]=\"showValidationMsg()\"\n [disabled]=\"\n scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\n \"\n #inputTag />\n @if (scheme.needsButton) {\n <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n }\n }\n @case ('autocomplete') {\n <app-autocomplete\n [form]=\"scheme.form\"\n [label]=\"scheme.label\"\n [labelField]=\"scheme.labelField\"\n [autoPickValueField]=\"scheme.autoPickValueField\"\n [labelType]=\"scheme.labelType | toAny\"\n [optionsFunc]=\"scheme.optionsFunc\"\n [name]=\"scheme.field\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [valueField]=\"scheme.valueField\"\n [options]=\"scheme.options\"\n [showValidationMsg]=\"showValidationMsg()\"\n [hint]=\"scheme.hint\"\n [disabled]=\"\n scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n \"\n #inputTag />\n @if (scheme.needsButton) {\n <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n }\n }\n @default {\n <app-input-basic\n #inputTag\n [name]=\"scheme.field\"\n [form]=\"scheme.form\"\n [type]=\"scheme.type\"\n [autoPickValueField]=\"scheme.autoPickValueField\"\n [valueField]=\"scheme.valueField\"\n [labelType]=\"scheme.labelType | toAny\"\n [checkedSignal]=\"scheme.checked\"\n [showValidation]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n [showValidationIcon]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n [noFormat]=\"true\"\n [labelField]=\"scheme.labelField\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [options]=\"scheme.options\"\n [decimalPoints]=\"scheme.decimalPoints\"\n [hint]=\"scheme.hint\"\n [showValidationMsg]=\"showValidationMsg()\"\n [max]=\"scheme.max\"\n [min]=\"scheme.min\"\n [placeholder]=\"scheme.placeholder\"\n [label]=\"scheme.label\"\n [disabled]=\"\n scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n \" />\n @if (scheme.needsButton) {\n <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n }\n }\n }\n </div>\n </form>\n }\n <div class=\"col-md justify-content-end align-items-center d-flex\">\n @if (showClearBtn()) {\n <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n }\n <span class=\"mx-1\"></span>\n @if (showSearchBtn()) {\n <app-btn\n [group]=\"'search'\"\n [iconBtn]=\"true\"\n text=\"Search\"\n actionType=\"submit\"\n (mclick)=\"search()\"\n [excludeLogging]=\"true\"\n [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n }\n @if (isCompact()) {\n <app-btn\n [showHelpIcon]=\"false\"\n mclass=\"ms-1\"\n [excludeLogging]=\"true\"\n help=\"Search Fields\"\n customIcon=\"fa fa-ellipsis-v\"\n (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n <ng-template modalBody>\n <toggle-input-form\n [valueField]=\"'field' | toAny\"\n labelField=\"label\"\n [gridNo]=\"3\"\n [checkedChecker]=\"asfCheckedChecker()\"\n [list]=\"compactedFields()\"\n (selected)=\"tempSelectedCompactedFields.set($event)\" />\n </ng-template>\n <ng-template modalFooter>\n <app-btn\n icon=\"save\"\n (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n text=\"Save\" />\n </ng-template>\n </modal-comp>\n }\n @if (createButton()) {\n <span class=\"mx-1\"></span>\n @if (createBtnRoute()) {\n <app-btn\n type=\"outline\"\n text=\"Create\"\n icon=\"add\"\n (mclick)=\"clickedCreate.emit()\"\n routerLink=\"{{ createBtnRoute() }}\" />\n } @else {\n <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n }\n }\n </div>\n </div>\n }\n\n <ng-content select=\"[tablePanel]\"></ng-content>\n <!-- {{searchForm()?.getRawValue()|json}}\n <hr>\n {{standaloneForm()?.getRawValue()|json}} -->\n @if (hasColumns()) {\n <div class=\"mt-3\" [hidden]=\"hideTable()\">\n <ng-container>\n @if (isTablePaginated()) {\n <table-https\n #tableHTTPS\n [searchIfNoQuery]=\"searchIfNoQuery()\"\n [displayedColumns]=\"displayedColumns()\"\n [observableFunc]=\"searchObservableFunc()\"\n (rowClick)=\"rowClick($event)\"\n [centerCells]=\"centerCells()\"\n [expandedRowTemplate]=\"expandedRowTemplate()\"\n [isExpandable]=\"isExpandable()\"\n [customTemplates]=\"customTableCellTemplates()\"\n [label]=\"label()\"\n [striped]=\"striped()\"\n [nowrap]=\"nowrap()\"\n [orderDirection]=\"orderDirection()\"\n [orderField]=\"orderField()\"\n [pageSize]=\"pageSize()\"\n [rowOptions]=\"options()\"\n [debug]=\"debug()\"\n [searchPromptText]=\"searchPromptText()\"\n [rowOptionsMap]=\"rowOptionsMap()\"\n [(queryData)]=\"initialQuery\"\n [showAdditionalColumns]=\"showAdditionalColumns()\"\n [showExport]=\"showExport()\"\n [showRefreshBtn]=\"showRefreshBtn()\"\n [smallerFonts]=\"smallerFonts()\"\n [startSectionTemplate]=\"startSectionTemplate()\"\n [useSelection]=\"useSelection()\"\n noItemTxt=\"No results found\" />\n } @else {\n <table-plain\n [distinct]=\"true\"\n [showPager]=\"true\"\n [pageSize]=\"pageSize()\"\n [centerCells]=\"false\"\n [startSectionTemplate]=\"startSectionTemplate()\"\n [smallerFonts]=\"smallerFonts()\"\n [nowrap]=\"nowrap()\"\n [showFilter]=\"showFilter()\"\n [showExport]=\"showExport()\"\n [isExpandable]=\"isExpandable()\"\n [customTemplates]=\"customTableCellTemplates()\"\n [expandedRowTemplate]=\"expandedRowTemplate()\"\n [label]=\"label()\"\n [striped]=\"striped()\"\n noItemTxt=\"No results found\"\n (rowClick)=\"rowClick($event)\"\n [orderField]=\"orderField()\"\n [rowOptions]=\"options()\"\n [debug]=\"debug()\"\n [rowOptionsMap]=\"rowOptionsMap()\"\n [showAdditionalColumns]=\"showAdditionalColumns()\"\n [orderDirection]=\"orderDirection()\"\n [displayedColumns]=\"displayedColumns()\"\n [data]=\"data()\" />\n }\n </ng-container>\n </div>\n }\n</loader>\n", styles: [":host .form-cell{display:flex;align-items:end;gap:8px}:host .form-cell.showValidationMsg{align-items:center}:host .form-cell>*:first-child{width:100%}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["mSelectedOptionLabel"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "directive", type: ModalFooterDirective, selector: "[modalFooter]" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleInputFormComponent, selector: "toggle-input-form", inputs: ["addToFormFunc", "defaultToggleAll", "readOnly", "hideSearchMenu", "hideGridMenu", "hideToggle", "deleteFromFormFunc", "gridNo", "labelField", "labelSeparator", "searchQuery", "showToggleAll", "valueField", "checkedChecker", "list"], outputs: ["gridNoChange", "searchQueryChange", "selected"] }, { kind: "component", type: TableHttpsComponent, selector: "table-https", inputs: ["observableFunc", "pageNumber", "queryData", "searchIfNoQuery", "showRefreshBtn", "useStaticLoader", "searchPromptText"], outputs: ["queryDataChange", "dataFetched"] }, { kind: "component", type: TablePlainComponent, selector: "table-plain", inputs: ["customSelectClass", "idField", "obsDataSource", "showFilter", "showPager", "disableSelectionByField", "data", "filterFields", "filterFieldsMap", "selectionPerPage"], outputs: ["view", "dataChanged", "filterChange", "listMutated"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
|
|
18849
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: FindItemComponent, isStandalone: true, selector: "app-find-item,find-item", inputs: { autoFormatSchema: { classPropertyName: "autoFormatSchema", publicName: "autoFormatSchema", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, autoOrder: { classPropertyName: "autoOrder", publicName: "autoOrder", isSignal: true, isRequired: false, transformFunction: null }, centerCells: { classPropertyName: "centerCells", publicName: "centerCells", isSignal: true, isRequired: false, transformFunction: null }, _displayedColumns: { classPropertyName: "_displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, gridClass: { classPropertyName: "gridClass", publicName: "gridClass", isSignal: true, isRequired: false, transformFunction: null }, hideForm: { classPropertyName: "hideForm", publicName: "hideForm", isSignal: true, isRequired: false, transformFunction: null }, customTableCellTemplates: { classPropertyName: "customTableCellTemplates", publicName: "customTableCellTemplates", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowOptionsMap: { classPropertyName: "rowOptionsMap", publicName: "rowOptionsMap", isSignal: true, isRequired: false, transformFunction: null }, isExpandable: { classPropertyName: "isExpandable", publicName: "isExpandable", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "rowOptions", isSignal: true, isRequired: false, transformFunction: null }, orderDirection: { classPropertyName: "orderDirection", publicName: "orderDirection", isSignal: true, isRequired: false, transformFunction: null }, orderField: { classPropertyName: "orderField", publicName: "orderField", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, showData: { classPropertyName: "showData", publicName: "showData", isSignal: true, isRequired: false, transformFunction: null }, searchIfNoQuery: { classPropertyName: "searchIfNoQuery", publicName: "searchIfNoQuery", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showRefreshBtn: { classPropertyName: "showRefreshBtn", publicName: "showRefreshBtn", isSignal: true, isRequired: false, transformFunction: null }, useStaticLoader: { classPropertyName: "useStaticLoader", publicName: "useStaticLoader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, searchPromptText: { classPropertyName: "searchPromptText", publicName: "searchPromptText", isSignal: true, isRequired: false, transformFunction: null }, startSectionTemplate: { classPropertyName: "startSectionTemplate", publicName: "startSectionTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSearchBtn: { classPropertyName: "showSearchBtn", publicName: "showSearchBtn", isSignal: true, isRequired: false, transformFunction: null }, showClearBtn: { classPropertyName: "showClearBtn", publicName: "showClearBtn", isSignal: true, isRequired: false, transformFunction: null }, showValidationMsg: { classPropertyName: "showValidationMsg", publicName: "showValidationMsg", isSignal: true, isRequired: false, transformFunction: null }, createBtnRoute: { classPropertyName: "createBtnRoute", publicName: "createBtnRoute", isSignal: true, isRequired: false, transformFunction: null }, showAdditionalColumns: { classPropertyName: "showAdditionalColumns", publicName: "showAdditionalColumns", isSignal: true, isRequired: false, transformFunction: null }, smallerFonts: { classPropertyName: "smallerFonts", publicName: "smallerFonts", isSignal: true, isRequired: false, transformFunction: null }, useSelection: { classPropertyName: "useSelection", publicName: "useSelection", isSignal: true, isRequired: false, transformFunction: null }, initialQuery: { classPropertyName: "initialQuery", publicName: "initialQuery", isSignal: true, isRequired: false, transformFunction: null }, createButton: { classPropertyName: "createButton", publicName: "createButton", isSignal: true, isRequired: false, transformFunction: null }, _formSchema: { classPropertyName: "_formSchema", publicName: "formSchema", isSignal: false, isRequired: false, transformFunction: null }, searchObservableFunc: { classPropertyName: "searchObservableFunc", publicName: "searchObservableFunc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { initialQuery: "initialQueryChange", _rowClick: "rowClick", clickedCreate: "clickedCreate" }, viewQueries: [{ propertyName: "tableHTTPSREF", first: true, predicate: (TableHttpsComponent), descendants: true, isSignal: true }, { propertyName: "tablePlainRef", first: true, predicate: (TablePlainComponent), descendants: true, isSignal: true }, { propertyName: "tableHTTPSREFSignal", first: true, predicate: TableHttpsComponent, descendants: true, isSignal: true }, { propertyName: "tablePlainRefSignal", first: true, predicate: TablePlainComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<loader [loading]=\"_loading()\" [useStaticLoader]=\"useStaticLoader()\">\n @if (!hideForm() && searchForm()) {\n <div class=\"row align-items-center\">\n @for (scheme of computedFormSchema(); track scheme.field) {\n <form class=\"{{ gridClass() }} \" (ngSubmit)=\"fieldAction(scheme)\">\n <div class=\"form-cell\" [ngClass]=\"{ showValidationMsg: showValidationMsg() }\">\n <ng-template #actionCell let-formField>\n <app-btn\n [icon]=\"scheme.icon || 'show'\"\n [group]=\"scheme.standalone && scheme.action ? 'show' : null\"\n actionType=\"submit\"\n [disabled]=\"!formField?.validSignal()\" />\n </ng-template>\n\n @switch (scheme.type) {\n @case ('template') {\n <ng-container\n *ngTemplateOutlet=\"\n customTemplates()[scheme.field];\n context: { $implicit: { scheme, form: scheme.form } }\n \" />\n }\n @case ('tel') {\n <app-phone-number\n [form]=\"scheme.form\"\n [label]=\"scheme.label\"\n [name]=\"scheme.field\"\n [showLabel]=\"false\"\n [showValidation]=\"scheme.showValidation\"\n [showValidationIcon]=\"scheme.showValidationIcon\"\n [countryCode3]=\"scheme.countryCode3\"\n [showValidationMsg]=\"showValidationMsg()\"\n [disabled]=\"\n scheme.disabledIf | functionCaller2: searchFormValue() : (scheme.field | toAny)\n \"\n #inputTag />\n @if (scheme.needsButton) {\n <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n }\n }\n @case ('autocomplete') {\n <app-autocomplete\n [form]=\"scheme.form\"\n [label]=\"scheme.label\"\n [labelField]=\"scheme.labelField\"\n [autoPickValueField]=\"scheme.autoPickValueField\"\n [labelType]=\"scheme.labelType | toAny\"\n [optionsFunc]=\"scheme.optionsFunc\"\n [name]=\"scheme.field\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [valueField]=\"scheme.valueField\"\n [options]=\"scheme.options\"\n [showValidationMsg]=\"showValidationMsg()\"\n [hint]=\"scheme.hint\"\n [disabled]=\"\n scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n \"\n #inputTag />\n @if (scheme.needsButton) {\n <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n }\n }\n @default {\n <app-input-basic\n #inputTag\n [name]=\"scheme.field\"\n [form]=\"scheme.form\"\n [type]=\"scheme.type\"\n [autoPickValueField]=\"scheme.autoPickValueField\"\n [valueField]=\"scheme.valueField\"\n [labelType]=\"scheme.labelType | toAny\"\n [checkedSignal]=\"scheme.checked\"\n [showValidation]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n [showValidationIcon]=\"inputTag.hasValue() && !!scheme.asyncValidators\"\n [noFormat]=\"true\"\n [labelField]=\"scheme.labelField\"\n [optionFormatter]=\"scheme.optionFormatter\"\n [options]=\"scheme.options\"\n [decimalPoints]=\"scheme.decimalPoints\"\n [hint]=\"scheme.hint\"\n [showValidationMsg]=\"showValidationMsg()\"\n [max]=\"scheme.max\"\n [min]=\"scheme.min\"\n [placeholder]=\"scheme.placeholder\"\n [label]=\"scheme.label\"\n [disabled]=\"\n scheme.disabledIf | functionCaller2: searchFormValue : (scheme.field | toAny)\n \" />\n @if (scheme.needsButton) {\n <ng-container *ngTemplateOutlet=\"actionCell; context: { $implicit: inputTag }\" />\n }\n }\n }\n </div>\n </form>\n }\n <div class=\"col-md justify-content-end align-items-center d-flex\">\n @if (showClearBtn()) {\n <app-btn type=\"danger-outline\" text=\"Clear\" icon=\"delete\" (mclick)=\"clearFilters()\" />\n }\n <span class=\"mx-1\"></span>\n @if (showSearchBtn()) {\n <app-btn\n [group]=\"'search'\"\n [iconBtn]=\"true\"\n text=\"Search\"\n actionType=\"submit\"\n (mclick)=\"search()\"\n [excludeLogging]=\"true\"\n [disabled]=\"!searchFunction() && !isTablePaginated()\" />\n }\n @if (isCompact()) {\n <app-btn\n [showHelpIcon]=\"false\"\n mclass=\"ms-1\"\n [excludeLogging]=\"true\"\n help=\"Search Fields\"\n customIcon=\"fa fa-ellipsis-v\"\n (mclick)=\"extraFieldsModal.open(); tempSelectedCompactedFields.set([])\" />\n <modal-comp #extraFieldsModal header=\"Additional Search Fields\" width=\"800px\">\n <ng-template modalBody>\n <toggle-input-form\n [valueField]=\"'field' | toAny\"\n labelField=\"label\"\n [gridNo]=\"3\"\n [checkedChecker]=\"asfCheckedChecker()\"\n [list]=\"compactedFields()\"\n (selected)=\"tempSelectedCompactedFields.set($event)\" />\n </ng-template>\n <ng-template modalFooter>\n <app-btn\n icon=\"save\"\n (mclick)=\"extraFieldsModal.close(); selectedCompactedFields()\"\n text=\"Save\" />\n </ng-template>\n </modal-comp>\n }\n @if (createButton()) {\n <span class=\"mx-1\"></span>\n @if (createBtnRoute()) {\n <app-btn\n type=\"outline\"\n text=\"Create\"\n icon=\"add\"\n (mclick)=\"clickedCreate.emit()\"\n routerLink=\"{{ createBtnRoute() }}\" />\n } @else {\n <app-btn type=\"outline\" text=\"Create\" icon=\"add\" (mclick)=\"clickedCreate.emit()\" />\n }\n }\n </div>\n </div>\n }\n\n <ng-content select=\"[tablePanel]\"></ng-content>\n <!-- {{searchForm()?.getRawValue()|json}}\n <hr>\n {{standaloneForm()?.getRawValue()|json}} -->\n @if (hasColumns()) {\n <div class=\"mt-3\" [hidden]=\"hideTable()\">\n <ng-container>\n @if (isTablePaginated()) {\n <table-https\n #tableHTTPS\n [searchIfNoQuery]=\"searchIfNoQuery()\"\n [displayedColumns]=\"displayedColumns()\"\n [observableFunc]=\"searchObservableFunc()\"\n (rowClick)=\"rowClick($event)\"\n [centerCells]=\"centerCells()\"\n [expandedRowTemplate]=\"expandedRowTemplate()\"\n [isExpandable]=\"isExpandable()\"\n [customTemplates]=\"customTableCellTemplates()\"\n [label]=\"label()\"\n [striped]=\"striped()\"\n [nowrap]=\"nowrap()\"\n [orderDirection]=\"orderDirection()\"\n [orderField]=\"orderField()\"\n [pageSize]=\"pageSize()\"\n [rowOptions]=\"options()\"\n [debug]=\"debug()\"\n [searchPromptText]=\"searchPromptText()\"\n [rowOptionsMap]=\"rowOptionsMap()\"\n [(queryData)]=\"initialQuery\"\n [showAdditionalColumns]=\"showAdditionalColumns()\"\n [showExport]=\"showExport()\"\n [showRefreshBtn]=\"showRefreshBtn()\"\n [smallerFonts]=\"smallerFonts()\"\n [startSectionTemplate]=\"startSectionTemplate()\"\n [useSelection]=\"useSelection()\"\n noItemTxt=\"No results found\" />\n } @else {\n <table-plain\n [distinct]=\"true\"\n [showPager]=\"true\"\n [pageSize]=\"pageSize()\"\n [centerCells]=\"false\"\n [startSectionTemplate]=\"startSectionTemplate()\"\n [smallerFonts]=\"smallerFonts()\"\n [nowrap]=\"nowrap()\"\n [showFilter]=\"showFilter()\"\n [showExport]=\"showExport()\"\n [isExpandable]=\"isExpandable()\"\n [customTemplates]=\"customTableCellTemplates()\"\n [expandedRowTemplate]=\"expandedRowTemplate()\"\n [label]=\"label()\"\n [striped]=\"striped()\"\n noItemTxt=\"No results found\"\n (rowClick)=\"rowClick($event)\"\n [orderField]=\"orderField()\"\n [rowOptions]=\"options()\"\n [debug]=\"debug()\"\n [rowOptionsMap]=\"rowOptionsMap()\"\n [showAdditionalColumns]=\"showAdditionalColumns()\"\n [orderDirection]=\"orderDirection()\"\n [displayedColumns]=\"displayedColumns()\"\n [data]=\"data()\" />\n }\n </ng-container>\n </div>\n }\n</loader>\n", styles: [":host .form-cell{display:flex;align-items:end;gap:8px}:host .form-cell.showValidationMsg{align-items:center}:host .form-cell>*:first-child{width:100%}\n"], dependencies: [{ kind: "component", type: LoaderComponent, selector: "loader", inputs: ["class", "text", "loading", "height", "width", "useStaticLoader", "ratioHW"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PhoneNumberComponent, selector: "app-phone-number", inputs: ["showLabel", "countryCode3", "config"], outputs: ["onCountrySelect"] }, { kind: "component", type: AutocompleteComponent, selector: "app-autocomplete,autocomplete", inputs: ["showRequiredTag", "validate", "skipDoesOptionExistCheck", "options"], outputs: ["skipDoesOptionExistCheckChange"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: InputBasicComponent, selector: "app-input-basic,app-input", inputs: ["accept", "autocomplete", "input", "contextData", "decimalPoints", "files", "hide", "clearOnDisable", "labelLink", "loading", "multiple", "optionsFunc", "vms", "setCurrentDate", "options"], outputs: ["loadingChange", "mSelectedOptionLabel"] }, { kind: "component", type: ModalComponent, selector: "modal-comp", inputs: ["header", "bodyTemplateRef", "footerTemplateRef", "showHeader", "loading", "isFullscreen", "showFooter", "width", "minWidth", "height", "maxHeight", "icon", "data", "disableClose", "hasBackdrop", "baseConfig"], outputs: ["headerChange", "showHeaderChange", "mouseLeft", "loadingChange", "showFooterChange", "modalOpen", "modalClose"] }, { kind: "directive", type: ModalBodyDirective, selector: "[modalBody]" }, { kind: "directive", type: ModalFooterDirective, selector: "[modalFooter]" }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleInputFormComponent, selector: "toggle-input-form", inputs: ["addToFormFunc", "defaultToggleAll", "readOnly", "hideSearchMenu", "hideGridMenu", "hideToggle", "deleteFromFormFunc", "gridNo", "labelField", "labelSeparator", "searchQuery", "showToggleAll", "valueField", "checkedChecker", "list"], outputs: ["gridNoChange", "searchQueryChange", "selected"] }, { kind: "component", type: TableHttpsComponent, selector: "table-https", inputs: ["observableFunc", "pageNumber", "queryData", "searchIfNoQuery", "showRefreshBtn", "useStaticLoader", "searchPromptText"], outputs: ["queryDataChange", "dataFetched"] }, { kind: "component", type: TablePlainComponent, selector: "table-plain", inputs: ["customSelectClass", "idField", "obsDataSource", "showFilter", "showPager", "disableSelectionByField", "data", "filterFields", "filterFieldsMap", "selectionPerPage"], outputs: ["view", "dataChanged", "filterChange", "listMutated"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: FunctionCaller2, name: "functionCaller2" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }] }); }
|
|
18855
18850
|
}
|
|
18856
18851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: FindItemComponent, decorators: [{
|
|
18857
18852
|
type: Component,
|