kwikid-forms 0.3.3 → 0.3.5
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/bundles/kwikid-forms.umd.js +101 -56
- package/bundles/kwikid-forms.umd.js.map +1 -1
- package/esm2015/lib/builder/builder.component.js +2 -1
- package/esm2015/lib/builder/element-config-editor/element-config-editor.component.js +12 -7
- package/esm2015/lib/renderer/config-converter.helper.js +24 -1
- package/esm2015/lib/renderer/form-view/definitions/form-view.fields.definition.js +2 -1
- package/esm2015/lib/renderer/form-view/form-view.component.js +15 -3
- package/fesm2015/kwikid-forms.js +49 -7
- package/fesm2015/kwikid-forms.js.map +1 -1
- package/lib/renderer/form-view/definitions/form-view.fields.definition.d.ts +15 -2
- package/package.json +2 -2
package/fesm2015/kwikid-forms.js
CHANGED
|
@@ -5,7 +5,7 @@ import * as i0 from '@angular/core';
|
|
|
5
5
|
import { EventEmitter, Component, Input, Output, ViewEncapsulation, Pipe, Inject, HostListener, NgModule } from '@angular/core';
|
|
6
6
|
import * as i2 from '@angular/forms';
|
|
7
7
|
import { FormGroup, FormControl, FormArray, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
8
|
-
import { logMethod, setMissingKeyValue, mergeObjects, getObjectFromLocalStorage, isNotEmptyValue, isEmptyValue,
|
|
8
|
+
import { logMethod, setMissingKeyValue, mergeObjects, checkObjectKeyExists, getObjectFromLocalStorage, isNotEmptyValue, isEmptyValue, setValueToObjectPath, Source, Rule, Condition, Action, PATTERNS, Validation, isUndefined, isNull, replaceString, getObjectValueFromPath, ESourceKey, getObjectDeepCopy } from 'kwikid-toolkit';
|
|
9
9
|
import * as i1 from 'kwikui';
|
|
10
10
|
import { KwikUIButtonIconModule, KwikUIButtonModule, KwikUIInputModule, KwikUIInputNumberModule, KwikUISelectComboboxModule, KwikUITableModule, KwikUITextareaModule, KwikUIModule } from 'kwikui';
|
|
11
11
|
import * as i5 from '@angular/common';
|
|
@@ -2959,11 +2959,16 @@ class ElementConfigEditor {
|
|
|
2959
2959
|
if (verifyChange("elementConfig")) {
|
|
2960
2960
|
this.elementConfig = changes.elementConfig.currentValue;
|
|
2961
2961
|
if (this.elementConfig !== undefined) {
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
2962
|
+
if (!checkObjectKeyExists(this.elementConfig, "elementType")) {
|
|
2963
|
+
throw new Error("'elementConfig' doesn't have 'elementType'");
|
|
2964
|
+
}
|
|
2965
|
+
else if (!checkObjectKeyExists(this.elementConfig, "elementCategory")) {
|
|
2966
|
+
throw new Error("'elementConfig' doesn't have 'elementCategory'");
|
|
2967
|
+
}
|
|
2968
|
+
else {
|
|
2969
|
+
this.elementType = this.elementConfig.elementType;
|
|
2970
|
+
this.elementCategory = this.elementConfig.elementCategory;
|
|
2971
|
+
}
|
|
2967
2972
|
}
|
|
2968
2973
|
}
|
|
2969
2974
|
}
|
|
@@ -3122,6 +3127,7 @@ class KwikIDFormsBuilderComponent {
|
|
|
3122
3127
|
}
|
|
3123
3128
|
removeElement(idx, id) {
|
|
3124
3129
|
this.formElementsDropList.splice(idx, 1);
|
|
3130
|
+
this.elementEditorElementConfig = undefined;
|
|
3125
3131
|
}
|
|
3126
3132
|
editElement(idx, item) {
|
|
3127
3133
|
this.elementEditorElementConfig = item;
|
|
@@ -3302,6 +3308,7 @@ var EFieldType;
|
|
|
3302
3308
|
EFieldType["CHECKBOX"] = "checkbox";
|
|
3303
3309
|
EFieldType["NUMBER"] = "number";
|
|
3304
3310
|
EFieldType["DATE"] = "date";
|
|
3311
|
+
EFieldType["PREVIEW_IMAGE"] = "preview-image";
|
|
3305
3312
|
EFieldType["PHONE"] = "phone";
|
|
3306
3313
|
EFieldType["RADIO"] = "radio";
|
|
3307
3314
|
EFieldType["DROPDOWN_WITH_SEARCH"] = "dropdown-with-search";
|
|
@@ -3640,6 +3647,20 @@ class Converter {
|
|
|
3640
3647
|
field = this.setFieldKeyValue(field, "hidden", false);
|
|
3641
3648
|
return field;
|
|
3642
3649
|
};
|
|
3650
|
+
const formatFieldTypePreviewImage = (field) => {
|
|
3651
|
+
field = this.setFieldKeyValue(field, "isFormElement", true);
|
|
3652
|
+
field = this.setMissingFieldKeyValue(field, "properties", {});
|
|
3653
|
+
field.properties = this.setMissingFieldKeyValue(field.properties, "altText", "");
|
|
3654
|
+
field.properties = this.setMissingFieldKeyValue(field.properties, "html", {});
|
|
3655
|
+
field.properties.html = this.setMissingFieldKeyValue(field.properties.html, "before", "");
|
|
3656
|
+
field.properties.html = this.setMissingFieldKeyValue(field.properties.html, "after", "");
|
|
3657
|
+
field.properties = this.setMissingFieldKeyValue(field.properties, "imageType", "url");
|
|
3658
|
+
field.properties = this.setMissingFieldKeyValue(field.properties, "loadingType", "auto");
|
|
3659
|
+
field.properties = this.setMissingFieldKeyValue(field.properties, "styles", "");
|
|
3660
|
+
field.properties = this.setMissingFieldKeyValue(field.properties, "class", "");
|
|
3661
|
+
field = this.setFieldKeyValue(field, "hidden", false);
|
|
3662
|
+
return field;
|
|
3663
|
+
};
|
|
3643
3664
|
const formatFieldTypeDate = (field) => {
|
|
3644
3665
|
field = this.setFieldKeyValue(field, "isFormElement", true);
|
|
3645
3666
|
if (checkObjectKeyExists(field, "min")) {
|
|
@@ -3798,6 +3819,9 @@ class Converter {
|
|
|
3798
3819
|
case EFieldType.NUMBER:
|
|
3799
3820
|
field = formatFieldTypeNumber(field);
|
|
3800
3821
|
break;
|
|
3822
|
+
case EFieldType.PREVIEW_IMAGE:
|
|
3823
|
+
field = formatFieldTypePreviewImage(field);
|
|
3824
|
+
break;
|
|
3801
3825
|
case EFieldType.DATE:
|
|
3802
3826
|
field = formatFieldTypeDate(field);
|
|
3803
3827
|
break;
|
|
@@ -3839,6 +3863,7 @@ class Converter {
|
|
|
3839
3863
|
return object;
|
|
3840
3864
|
};
|
|
3841
3865
|
const formatFieldKeys = (field) => {
|
|
3866
|
+
field = setMissingKeyValue(field, "disabled", false);
|
|
3842
3867
|
if (checkObjectKeyExists(field, "connectedTo")) {
|
|
3843
3868
|
if (typeof field["connectedTo"] === "string") {
|
|
3844
3869
|
field["connectedElements"] = [
|
|
@@ -3929,6 +3954,11 @@ class Converter {
|
|
|
3929
3954
|
case EFieldType.CHECKBOX:
|
|
3930
3955
|
delete field.validators.min;
|
|
3931
3956
|
delete field.validators.max;
|
|
3957
|
+
case EFieldType.PREVIEW_IMAGE:
|
|
3958
|
+
delete field.validators.min;
|
|
3959
|
+
delete field.validators.max;
|
|
3960
|
+
delete field.validators.minLength;
|
|
3961
|
+
delete field.validators.maxLength;
|
|
3932
3962
|
break;
|
|
3933
3963
|
default:
|
|
3934
3964
|
break;
|
|
@@ -5393,6 +5423,18 @@ class KwikIDFormViewComponent {
|
|
|
5393
5423
|
this.fieldReset(action.props.fieldKey);
|
|
5394
5424
|
break;
|
|
5395
5425
|
case EActionKey.FIELD_ERROR_SHOW:
|
|
5426
|
+
if (checkObjectKeyExists(action.props.message, "source")) {
|
|
5427
|
+
const fieldErrorShow_Source = new Source(object);
|
|
5428
|
+
let fieldErrorShowSourceValue = yield fieldErrorShow_Source.getValueFromSource(action.props.message.source);
|
|
5429
|
+
if (typeof fieldErrorShowSourceValue == "string" ||
|
|
5430
|
+
typeof fieldErrorShowSourceValue == "number") {
|
|
5431
|
+
fieldErrorShowSourceValue = String(fieldErrorShowSourceValue);
|
|
5432
|
+
}
|
|
5433
|
+
else {
|
|
5434
|
+
fieldErrorShowSourceValue = "";
|
|
5435
|
+
}
|
|
5436
|
+
action = setValueToObjectPath(action, "props.message.message", fieldErrorShowSourceValue);
|
|
5437
|
+
}
|
|
5396
5438
|
this.fieldErrorShow(action.props.fieldKey, action.props.message);
|
|
5397
5439
|
break;
|
|
5398
5440
|
case EActionKey.FIELD_ERROR_HIDE:
|
|
@@ -5499,7 +5541,7 @@ class KwikIDFormViewComponent {
|
|
|
5499
5541
|
}
|
|
5500
5542
|
}
|
|
5501
5543
|
/** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormViewComponent, deps: [{ token: TuiPushService }, { token: TuiAlertService }, { token: KwikIDFormViewService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5502
|
-
/** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", isMobileView: "isMobileView", allFormsData: "allFormsData" }, outputs: { onClickViewForms: "onClickViewForms", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall" }, providers: [KwikIDFormViewService], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"kwikid-form-container\"\n *ngIf=\"!loading\"\n>\n <div\n id=\"uf-form-fields-header-container\"\n *ngIf=\"\n !formConfig.properties.header.title.hidden ||\n !formConfig.properties.header.steps.hidden\n \"\n >\n <div\n id=\"uf-form-fields-title\"\n *ngIf=\"!formConfig.properties.header.title.hidden\"\n >{{ formConfig.properties.header.title.label }}</div\n >\n <div\n id=\"uf-form-fields-steps\"\n *ngIf=\"!formConfig.properties.header.steps.hidden\"\n >Step {{ formConfig.sequenceNo }} of {{ formConfig.formsListLength }}</div\n >\n <hr\n *ngIf=\"\n !formConfig.properties.header.title.hidden &&\n !formConfig.properties.header.steps.hidden\n \"\n />\n </div>\n <form\n class=\"kwikid-form show\"\n [formGroup]=\"formGroup\"\n >\n <ng-container\n *ngFor=\"\n let field of formFields;\n let i = index;\n trackBy: getUniqueIdentifier\n \"\n >\n <ng-container [ngSwitch]=\"field.type\">\n <!-- HTML Content -->\n <ng-container *ngSwitchCase=\"'html'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <div [innerHtml]=\"field.html | safeHtml\"></div>\n </div>\n </ng-container>\n <!-- Form Title -->\n <ng-container *ngSwitchCase=\"'title'\">\n <div\n class=\"title\"\n [class.hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <div>\n {{ field.label }}\n </div>\n <kwikui-button\n *ngIf=\"field?.reset\"\n appearance=\"whiteblock\"\n size=\"s\"\n label=\"Reset\"\n (onClick)=\"handleOnClickResetFormFields($event, field)\"\n ></kwikui-button>\n </div>\n </ng-container>\n <!-- Input Text -->\n <ng-container *ngSwitchCase=\"'text'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input\n [case]=\"field?.properties?.case\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field.label\"\n [placeholder]=\"field?.properties?.placeholder\"\n [type]=\"'text'\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Checkbox -->\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-checkbox-block\n [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.properties?.placeholder\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [size]=\"field?.properties?.size ?? 'l'\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-checkbox-block>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Number -->\n <ng-container *ngSwitchCase=\"'number'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-number\n [decimal]=\"field?.properties?.decimal\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [max]=\"field?.properties?.max\"\n [min]=\"field?.properties?.min\"\n [placeholder]=\"field?.properties?.placeholder\"\n [postfix]=\"field?.properties?.postfix ?? ''\"\n [precision]=\"field?.properties?.precision\"\n [prefix]=\"field?.properties?.prefix ?? ''\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-number>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Date -->\n <ng-container *ngSwitchCase=\"'date'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-date\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field.label\"\n [min]=\"field?.properties?.min\"\n [minCalculatedFromToday]=\"\n field?.properties?.minCalculatedFromToday\n \"\n [max]=\"field?.properties?.max\"\n [maxCalculatedFromToday]=\"\n field?.properties?.maxCalculatedFromToday\n \"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-date>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Phone -->\n <ng-container *ngSwitchCase=\"'phone'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-phone\n [countryCode]=\"field?.properties?.countryCode\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [phoneMaskAfterCountryCode]=\"\n field?.properties?.phoneMaskAfterCountryCode\n \"\n [removeCountryCodeFromValue]=\"\n field?.properties?.removeCountryCodeFromValue\n \"\n [placeholder]=\"field?.properties?.placeholder\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-phone>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Radio -->\n <ng-container *ngSwitchCase=\"'radio'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <label\n [tuiLabel]=\"labelTemplate\"\n style=\"min-height: auto; padding: 0px 0.5rem\"\n >\n <kwikui-radio-list\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [items]=\"field?.options\"\n [label]=\"field?.label\"\n [orientation]=\"field?.properties?.orientation\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [size]=\"field?.properties?.size\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-radio-list>\n </label>\n <ng-template #labelTemplate>\n <p\n class=\"tui-space_bottom-2\"\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <b>\n {{ field.label }}\n <span *ngIf=\"field.validators?.required\"></span>\n </b>\n </p>\n </ng-template>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Dropdown -->\n <ng-container *ngSwitchCase=\"'dropdown-with-search'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-select-combobox\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field.label\"\n [options]=\"field.options\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-select-combobox>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Slider -->\n <ng-container *ngSwitchCase=\"'slider'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-slider\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field.label\"\n [max]=\"field?.properties?.max\"\n [min]=\"field?.properties?.min\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [quantum]=\"field?.properties?.quantum\"\n [size]=\"field?.properties?.size\"\n [steps]=\"field?.properties?.steps\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-slider>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- API Call -->\n <ng-container *ngSwitchCase=\"'api-call'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-button-api-call\n [apiStatus]=\"field?.api?.status?.value\"\n [class]=\"field?.class\"\n [disabled]=\"field?.disabled\"\n [id]=\"field.key\"\n [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\n [showLoader]=\"field?.disabled === 'loading'\"\n shape=\"null\"\n size=\"m\"\n styles=\"width: fit-content\"\n (onClick)=\"handleOnClickApiCall($event)\"\n ></kwikui-button-api-call>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Mobile OTP -->\n <ng-container *ngSwitchCase=\"'otp'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-otp\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [mask]=\"field?.properties?.mask\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-otp>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Aadhaar Number -->\n <ng-container *ngSwitchCase=\"'aadhaar-number'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-aadhaar\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [placeholder]=\"field?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-aadhaar>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </form>\n <div class=\"kwikid-form-buttons\">\n <kwikui-button\n *ngIf=\"\n !formConfig.properties.footer.viewFormsButton.hidden && isMobileView\n \"\n [disabled]=\"viewFormsButton.disabled\"\n id=\"\"\n label=\"{{ formConfig.properties.footer.viewFormsButton.label }}\"\n [showLoader]=\"viewFormsButton.showLoader\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"secondary\"\n icon=\"\"\n iconRight=\"\"\n [shape]=\"null\"\n size=\"m\"\n styles=\"width: 100%\"\n (onClick)=\"handleOnClickViewForms($event)\"\n ></kwikui-button>\n <kwikui-button\n *ngIf=\"!formConfig.properties.footer.saveButton.hidden\"\n [disabled]=\"saveFormButton.disabled\"\n id=\"\"\n label=\"{{ formConfig.properties.footer.saveButton.label }}\"\n [showLoader]=\"saveFormButton.showLoader\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"primary\"\n icon=\"\"\n iconRight=\"\"\n [shape]=\"null\"\n size=\"m\"\n styles=\"width: 100%\"\n (onClick)=\"handleOnClickSaveForm($event)\"\n ></kwikui-button>\n </div>\n</div>\n<div\n class=\"kwikid-form-container-loading\"\n *ngIf=\"loading\"\n>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n ></div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n ></div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n ></div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n ></div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n ></div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n ></div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n ></div>\n</div>\n<tui-push\n id=\"field-error-notification\"\n *tuiPush=\"showErrorNotification\"\n heading=\"Missing/Incorrect Fields!\"\n type=\"Error\"\n (close)=\"toggleErrorNotification(false)\"\n>\n <tui-svg\n src=\"tuiIconXCircle\"\n style=\"color: #fff !important\"\n >\n </tui-svg>\n</tui-push>\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}.kwikid-form-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}.kwikid-form.show{width:100%;height:100%;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-row-gap:1rem;row-gap:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-column-gap:10px;column-gap:10px}.kwikid-form-buttons *{flex-grow:1}#uf-form-fields-header-container{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start;grid-row-gap:.5rem;row-gap:.5rem;padding:1rem}#uf-form-fields-header-container hr{width:100%}#uf-form-fields-title{color:#000;font-size:1.75em;font-weight:bold}#uf-form-fields-steps{color:var(--color-on-secondary-container);font-size:1em}.title{border-left:.25rem solid var(--tui-primary);padding:.75rem;font-size:1.4em;font-weight:bold;background-color:var(--tui-secondary);display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-gap:.5rem;gap:.5rem}.title:not(:first-child){margin-top:.5rem}.title.hidden{display:none}.large-wrapper{width:100%;height:60px}.large-wrapper:first-child{margin-bottom:auto}.large-wrapper:last-child{margin-top:auto}.kwikid-form-container-loading{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;grid-row-gap:1rem;row-gap:1rem;padding:1rem}#field-error-notification{background-color:var(--tui-error-fill);color:#fff!important}#field-error-notification .t-top{color:#fff!important}#field-error-notification .t-close{color:#fff!important}\n"], components: [{ type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i1.KwikUICheckboxBlockComponent, selector: "kwikui-checkbox-block", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "contentAlign", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "prefix", "postfix", "precision", "decimal", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "minCalculatedFromToday", "max", "maxCalculatedFromToday", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "countryCode", "phoneMaskAfterCountryCode", "removeCountryCodeFromValue", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i1.KwikUIRadioListComponent, selector: "kwikui-radio-list", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "orientation", "items", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputSliderComponent, selector: "kwikui-input-slider", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "size", "min", "max", "steps", "quantum", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i1.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i4$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4$1.TuiPushDirective, selector: "tui-push" }], pipes: { "safeHtml": SafeHtmlPipe$1 } });
|
|
5544
|
+
/** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", isMobileView: "isMobileView", allFormsData: "allFormsData" }, outputs: { onClickViewForms: "onClickViewForms", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall" }, providers: [KwikIDFormViewService], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"kwikid-form-container\"\n *ngIf=\"!loading\"\n>\n <div\n id=\"uf-form-fields-header-container\"\n *ngIf=\"\n !formConfig.properties.header.title.hidden ||\n !formConfig.properties.header.steps.hidden\n \"\n >\n <div\n id=\"uf-form-fields-title\"\n *ngIf=\"!formConfig.properties.header.title.hidden\"\n >{{ formConfig.properties.header.title.label }}</div\n >\n <div\n id=\"uf-form-fields-steps\"\n *ngIf=\"!formConfig.properties.header.steps.hidden\"\n >Step {{ formConfig.sequenceNo }} of {{ formConfig.formsListLength }}</div\n >\n <hr\n *ngIf=\"\n !formConfig.properties.header.title.hidden &&\n !formConfig.properties.header.steps.hidden\n \"\n />\n </div>\n <form\n class=\"kwikid-form show\"\n [formGroup]=\"formGroup\"\n >\n <ng-container\n *ngFor=\"\n let field of formFields;\n let i = index;\n trackBy: getUniqueIdentifier\n \"\n >\n <ng-container [ngSwitch]=\"field.type\">\n <!-- HTML Content -->\n <ng-container *ngSwitchCase=\"'html'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <div [innerHtml]=\"field.html | safeHtml\"></div>\n </div>\n </ng-container>\n <!-- Form Title -->\n <ng-container *ngSwitchCase=\"'title'\">\n <div\n class=\"title\"\n [class.hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <div>\n {{ field.label }}\n </div>\n <kwikui-button\n *ngIf=\"field?.reset\"\n appearance=\"whiteblock\"\n size=\"s\"\n label=\"Reset\"\n (onClick)=\"handleOnClickResetFormFields($event, field)\"\n ></kwikui-button>\n </div>\n </ng-container>\n <!-- Input Text -->\n <ng-container *ngSwitchCase=\"'text'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input\n [case]=\"field?.properties?.case\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field.label\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [type]=\"'text'\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Checkbox -->\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-checkbox-block\n [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.properties?.placeholder\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [size]=\"field?.properties?.size ?? 'l'\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-checkbox-block>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Number -->\n <ng-container *ngSwitchCase=\"'number'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-number\n [decimal]=\"field?.properties?.decimal\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [max]=\"field?.properties?.max\"\n [min]=\"field?.properties?.min\"\n [placeholder]=\"field?.properties?.placeholder\"\n [postfix]=\"field?.properties?.postfix ?? ''\"\n [precision]=\"field?.properties?.precision\"\n [prefix]=\"field?.properties?.prefix ?? ''\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-number>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Date -->\n <ng-container *ngSwitchCase=\"'date'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-date\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field.label\"\n [min]=\"field?.properties?.min\"\n [minCalculatedFromToday]=\"\n field?.properties?.minCalculatedFromToday\n \"\n [max]=\"field?.properties?.max\"\n [maxCalculatedFromToday]=\"\n field?.properties?.maxCalculatedFromToday\n \"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-date>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Phone -->\n <ng-container *ngSwitchCase=\"'phone'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-phone\n [countryCode]=\"field?.properties?.countryCode\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [phoneMaskAfterCountryCode]=\"\n field?.properties?.phoneMaskAfterCountryCode\n \"\n [removeCountryCodeFromValue]=\"\n field?.properties?.removeCountryCodeFromValue\n \"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-phone>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Radio -->\n <ng-container *ngSwitchCase=\"'radio'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <label\n [tuiLabel]=\"labelTemplate\"\n style=\"min-height: auto; padding: 0px 0.5rem\"\n >\n <kwikui-radio-list\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [items]=\"field?.options\"\n [label]=\"field?.label\"\n [orientation]=\"field?.properties?.orientation\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [size]=\"field?.properties?.size\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-radio-list>\n </label>\n <ng-template #labelTemplate>\n <p\n class=\"tui-space_bottom-2\"\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <b>\n {{ field.label }}\n <span *ngIf=\"field.validators?.required\"></span>\n </b>\n </p>\n </ng-template>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Dropdown -->\n <ng-container *ngSwitchCase=\"'dropdown-with-search'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-select-combobox\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field.label\"\n [options]=\"field.options\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-select-combobox>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Slider -->\n <ng-container *ngSwitchCase=\"'slider'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-slider\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field.label\"\n [max]=\"field?.properties?.max\"\n [min]=\"field?.properties?.min\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [quantum]=\"field?.properties?.quantum\"\n [size]=\"field?.properties?.size\"\n [steps]=\"field?.properties?.steps\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-slider>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- API Call -->\n <ng-container *ngSwitchCase=\"'api-call'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-button-api-call\n [apiStatus]=\"field?.api?.status?.value\"\n [class]=\"field?.class\"\n [disabled]=\"field?.disabled\"\n [id]=\"field.key\"\n [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\n [showLoader]=\"field?.disabled === 'loading'\"\n shape=\"null\"\n size=\"m\"\n styles=\"width: fit-content\"\n (onClick)=\"handleOnClickApiCall($event)\"\n ></kwikui-button-api-call>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Mobile OTP -->\n <ng-container *ngSwitchCase=\"'otp'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-otp\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [mask]=\"field?.properties?.mask\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-otp>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Aadhaar Number -->\n <ng-container *ngSwitchCase=\"'aadhaar-number'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-aadhaar\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [placeholder]=\"field?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-aadhaar>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Preview Image -->\n <ng-container *ngSwitchCase=\"'preview-image'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-preview-image\n [altText]=\"field?.properties?.altText\"\n [html]=\"field?.properties?.html\"\n [id]=\"field.key\"\n [imageSrc]=\"field?.default?.value?.value\"\n [imageType]=\"field?.properties?.imageType\"\n [loadingType]=\"field?.properties?.loadingType\"\n [styles]=\"field?.properties?.styles\"\n [class]=\"field?.properties?.class\"\n ></kwikui-preview-image>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </form>\n <div class=\"kwikid-form-buttons\">\n <kwikui-button\n *ngIf=\"\n !formConfig.properties.footer.viewFormsButton.hidden && isMobileView\n \"\n [disabled]=\"viewFormsButton.disabled\"\n id=\"\"\n label=\"{{ formConfig.properties.footer.viewFormsButton.label }}\"\n [showLoader]=\"viewFormsButton.showLoader\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"secondary\"\n icon=\"\"\n iconRight=\"\"\n [shape]=\"null\"\n size=\"m\"\n styles=\"width: 100%\"\n (onClick)=\"handleOnClickViewForms($event)\"\n ></kwikui-button>\n <kwikui-button\n *ngIf=\"!formConfig.properties.footer.saveButton.hidden\"\n [disabled]=\"saveFormButton.disabled\"\n id=\"\"\n label=\"{{ formConfig.properties.footer.saveButton.label }}\"\n [showLoader]=\"saveFormButton.showLoader\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"primary\"\n icon=\"\"\n iconRight=\"\"\n [shape]=\"null\"\n size=\"m\"\n styles=\"width: 100%\"\n (onClick)=\"handleOnClickSaveForm($event)\"\n ></kwikui-button>\n </div>\n</div>\n<div\n class=\"kwikid-form-container-loading\"\n *ngIf=\"loading\"\n>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n</div>\n<tui-push\n id=\"field-error-notification\"\n *tuiPush=\"showErrorNotification\"\n heading=\"Missing/Incorrect Fields!\"\n type=\"Error\"\n (close)=\"toggleErrorNotification(false)\"\n>\n <tui-svg\n src=\"tuiIconXCircle\"\n style=\"color: #fff !important\"\n >\n </tui-svg>\n</tui-push>\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}.kwikid-form-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}.kwikid-form.show{width:100%;height:100%;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-row-gap:1rem;row-gap:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-column-gap:10px;column-gap:10px}.kwikid-form-buttons *{flex-grow:1}#uf-form-fields-header-container{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start;grid-row-gap:.5rem;row-gap:.5rem;padding:1rem}#uf-form-fields-header-container hr{width:100%}#uf-form-fields-title{color:#000;font-size:1.75em;font-weight:bold}#uf-form-fields-steps{color:var(--color-on-secondary-container);font-size:1em}.title{border-left:.25rem solid var(--tui-primary);padding:.75rem;font-size:1.4em;font-weight:bold;background-color:var(--tui-secondary);display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-gap:.5rem;gap:.5rem}.title:not(:first-child){margin-top:.5rem}.title.hidden{display:none}.large-wrapper{width:100%;height:60px}.large-wrapper:first-child{margin-bottom:auto}.large-wrapper:last-child{margin-top:auto}.kwikid-form-container-loading{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;grid-row-gap:1rem;row-gap:1rem;padding:1rem}#field-error-notification{background-color:var(--tui-error-fill);color:#fff!important}#field-error-notification .t-top{color:#fff!important}#field-error-notification .t-close{color:#fff!important}\n"], components: [{ type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i1.KwikUICheckboxBlockComponent, selector: "kwikui-checkbox-block", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "contentAlign", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "prefix", "postfix", "precision", "decimal", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "minCalculatedFromToday", "max", "maxCalculatedFromToday", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "countryCode", "phoneMaskAfterCountryCode", "removeCountryCodeFromValue", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i1.KwikUIRadioListComponent, selector: "kwikui-radio-list", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "orientation", "items", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputSliderComponent, selector: "kwikui-input-slider", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "size", "min", "max", "steps", "quantum", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i1.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIPreviewImageComponent, selector: "kwikui-preview-image", inputs: ["id", "imageSrc", "altText", "imageType", "styles", "class", "loadingType", "html"], outputs: ["onClick"] }, { type: i4$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4$1.TuiPushDirective, selector: "tui-push" }], pipes: { "safeHtml": SafeHtmlPipe$1 } });
|
|
5503
5545
|
__decorate([
|
|
5504
5546
|
logMethod
|
|
5505
5547
|
], KwikIDFormViewComponent.prototype, "ngOnInit", null);
|