kwikid-forms 0.5.10 → 0.5.11
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 +184 -149
- package/bundles/kwikid-forms.umd.js.map +1 -1
- package/esm2015/lib/builder/builder-form-editor/builder-form-editor.component.js +29 -22
- package/esm2015/lib/builder/builder-form-list/builder-forms-list.component.js +2 -3
- package/esm2015/lib/builder/builder.component.js +26 -12
- package/esm2015/lib/renderer/config-converter/config-converter.constants.js +7 -1
- package/esm2015/lib/renderer/config-converter/config-converter.js +35 -10
- package/esm2015/lib/renderer/form-view/definitions/form-view.fields.definition.js +1 -1
- package/esm2015/lib/renderer/form-view/form-view.component.js +25 -45
- package/esm2015/lib/renderer/form-view/form-view.module.js +4 -8
- package/esm2015/lib/renderer/form-view/helpers/form-view.fields.helper.js +7 -1
- package/esm2015/lib/renderer/renderer.component.js +31 -30
- package/fesm2015/kwikid-forms.js +150 -116
- package/fesm2015/kwikid-forms.js.map +1 -1
- package/lib/builder/builder-form-editor/builder-form-editor.component.d.ts +4 -4
- package/lib/builder/builder-form-list/builder-forms-list.component.d.ts +0 -1
- package/lib/builder/builder.component.d.ts +4 -2
- package/lib/renderer/config-converter/config-converter.constants.d.ts +6 -0
- package/lib/renderer/config-converter/config-converter.d.ts +1 -0
- package/lib/renderer/form-view/definitions/form-view.fields.definition.d.ts +1 -1
- package/lib/renderer/form-view/form-view.component.d.ts +4 -6
- package/lib/renderer/form-view/form-view.module.d.ts +1 -2
- package/lib/renderer/renderer.component.d.ts +4 -4
- package/package.json +2 -2
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('kwikid-toolkit'), require('
|
|
3
|
-
typeof define === 'function' && define.amd ? define('kwikid-forms', ['exports', '@angular/core', 'kwikid-toolkit', '@angular/forms', '
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["kwikid-forms"] = {}, global.ng.core, global["kwikid-toolkit"], global.
|
|
5
|
-
})(this, (function (exports, i0, kwikidToolkit,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('kwikid-toolkit'), require('kwikui'), require('@angular/forms'), require('@taiga-ui/core'), require('@angular/common'), require('@angular/animations'), require('lodash'), require('@taiga-ui/cdk'), require('@taiga-ui/addon-preview'), require('@taiga-ui/kit'), require('rxjs/operators'), require('uuid'), require('@angular/cdk/drag-drop'), require('@angular/common/http')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('kwikid-forms', ['exports', '@angular/core', 'kwikid-toolkit', 'kwikui', '@angular/forms', '@taiga-ui/core', '@angular/common', '@angular/animations', 'lodash', '@taiga-ui/cdk', '@taiga-ui/addon-preview', '@taiga-ui/kit', 'rxjs/operators', 'uuid', '@angular/cdk/drag-drop', '@angular/common/http'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["kwikid-forms"] = {}, global.ng.core, global["kwikid-toolkit"], global.kwikui, global.ng.forms, global["@taiga-ui/core"], global.ng.common, global.ng.animations, global.lodash, global["@taiga-ui/cdk"], global["@taiga-ui/addon-preview"], global["@taiga-ui/kit"], global.rxjs.operators, global.uuid, global.ng.cdk.dragDrop, global.ng.common.http));
|
|
5
|
+
})(this, (function (exports, i0, kwikidToolkit, i2, i3, i3$1, i3$2, animations, _, cdk, i5, i4, operators, uuid, dragDrop, http) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
@@ -25,12 +25,11 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
28
|
-
var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3);
|
|
29
28
|
var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
|
|
29
|
+
var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3);
|
|
30
30
|
var i3__namespace = /*#__PURE__*/_interopNamespace(i3$1);
|
|
31
31
|
var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
|
|
32
32
|
var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
|
|
33
|
-
var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
|
|
34
33
|
var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
|
|
35
34
|
var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
|
|
36
35
|
|
|
@@ -420,7 +419,7 @@
|
|
|
420
419
|
}
|
|
421
420
|
function __addDisposableResource(env, value, async) {
|
|
422
421
|
if (value !== null && value !== void 0) {
|
|
423
|
-
if (typeof value !== "object")
|
|
422
|
+
if (typeof value !== "object" && typeof value !== "function")
|
|
424
423
|
throw new TypeError("Object expected.");
|
|
425
424
|
var dispose;
|
|
426
425
|
if (async) {
|
|
@@ -581,7 +580,6 @@
|
|
|
581
580
|
this.formsList = [];
|
|
582
581
|
this.onClickSetActiveForm = new i0.EventEmitter();
|
|
583
582
|
this.getFormsList = new i0.EventEmitter();
|
|
584
|
-
this.loader = false;
|
|
585
583
|
this.selectedForm = "";
|
|
586
584
|
this.addForm = new i3.FormGroup({
|
|
587
585
|
key: new i3.FormControl("", i3.Validators.required),
|
|
@@ -638,7 +636,7 @@
|
|
|
638
636
|
return KwikIDBuilderFormsListComponent;
|
|
639
637
|
}());
|
|
640
638
|
/** @nocollapse */ KwikIDBuilderFormsListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDBuilderFormsListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
641
|
-
/** @nocollapse */ KwikIDBuilderFormsListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDBuilderFormsListComponent, selector: "kwikid-builder-forms-list", inputs: { activeFormConfig: "activeFormConfig", formsList: "formsList" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", getFormsList: "getFormsList" }, usesOnChanges: true, ngImport: i0__namespace, template: "<
|
|
639
|
+
/** @nocollapse */ KwikIDBuilderFormsListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDBuilderFormsListComponent, selector: "kwikid-builder-forms-list", inputs: { activeFormConfig: "activeFormConfig", formsList: "formsList" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", getFormsList: "getFormsList" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"container\">\n <form\n class=\"add-form-container\"\n [formGroup]=\"addForm\"\n >\n <input\n type=\"text\"\n formControlName=\"key\"\n placeholder=\"form key\"\n />\n <input\n type=\"text\"\n formControlName=\"title\"\n placeholder=\"form title\"\n />\n <kwikui-button\n size=\"s\"\n styles=\"width: 100%\"\n label=\"add form\"\n shape=\"rounded\"\n (click)=\"handleOnClickAddForm()\"\n ></kwikui-button>\n </form>\n <hr />\n <div class=\"forms-list\">\n <ng-container *ngIf=\"formsList.length > 0; else NoForms\">\n <ng-container *ngFor=\"let form of formsList\">\n <ng-container [ngSwitch]=\"form.type\">\n <!-- HTML Content -->\n <ng-container *ngSwitchCase=\"'HTML'\">\n <div [innerHtml]=\"form.props.htmlContent | kwikuiSafeHtml\"></div>\n </ng-container>\n <!-- Type FORM -->\n <ng-container *ngSwitchCase=\"'FORM'\">\n <ng-container\n [ngTemplateOutlet]=\"FORM_BUTTON\"\n [ngTemplateOutletContext]=\"{\n form: form,\n activeFormConfig: activeFormConfig\n }\"\n >\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-template #NoForms>\n <div class=\"no-form\">\n <div class=\"no-fields disclaimer\">\n <div class=\"icon\"><h1>+</h1></div>\n <div><p>Please add a new form to start</p></div>\n </div>\n </div>\n </ng-template>\n </div>\n <ng-container *ngIf=\"formsList.length > 0\">\n <hr />\n <div>\n <b>Total Forms: {{ formsList.length }}</b>\n </div>\n </ng-container>\n</div>\n\n<ng-template\n #FORM_BUTTON\n let-form=\"form\"\n let-activeFormConfig=\"activeFormConfig\"\n>\n <div\n [class]=\"'uf-section-item'\"\n [class.active]=\"\n activeFormConfig !== undefined && form.key === activeFormConfig.key\n \"\n (click)=\"handleOnClickSetActiveForm(form.key)\"\n >\n <div class=\"uf-form-section-card-title\">\n {{ form.props.title }} <span *ngIf=\"form?.required\">*</span>\n </div>\n <div class=\"uf-form-section-card-status\">\n <div class=\"uf-form-section-card-status-img edit\">\n <tui-svg src=\"tuiIconEdit\"></tui-svg>\n </div>\n </div>\n </div>\n</ng-template>\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}input[type=text],input[type=number]{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;-webkit-appearance:auto!important;appearance:auto!important}input[type=checkbox]{-webkit-appearance:auto!important;appearance:auto!important;width:1rem;height:1rem}select{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}textarea{overflow-wrap:anywhere;resize:none;unicode-bidi:embed;white-space:pre-wrap}button{display:inline-block;padding:8px 12px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:4px;border:none;cursor:pointer}button:hover{background-color:#0069d9}button:active{background-color:#0056b3}button:focus{outline:none}button.secondary{padding:7px 11px;border:1px solid #007bff;background-color:#fff;color:#007bff}button.secondary:hover{background-color:#b7daff}button.secondary:active{background-color:#b7daff}button.secondary:focus{outline:none}.field-container{display:flex}.field-container label{color:gray}.field-container.checkbox{flex-direction:row;align-items:center;justify-content:center;padding:8px 12px;margin:auto}.field-container.options,.field-container.number,.field-container.text{flex-direction:column}.disclaimer{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#121212;width:100%;height:100%}.disclaimer>*:not(:last-child){margin-bottom:1.5rem}.disclaimer .icon{width:3rem;height:3rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.disclaimer.no-form-selected h1{transform:scaleX(-1)}.disclaimer h1{font-size:5rem;font-weight:100}.disclaimer p{font-size:1rem}\n", ":host{all:unset;position:relative;height:100%}.container{width:100%;min-width:280px;max-width:400px;height:100%;display:flex;flex-direction:column;align-content:flex-start;justify-content:space-between;align-items:stretch;padding:1rem;border:1px solid #ccc}.container>*:not(:last-child){margin-bottom:1rem}.container .add-form-container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end}.container .add-form-container>*:not(:last-child){margin-bottom:1rem}.container .forms-list{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;flex-grow:1;overflow:auto;padding-right:.5rem}.container .forms-list>*:not(:last-child){margin-bottom:1rem}.container .forms-list .uf-section-item{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-content:center;padding:1rem;cursor:pointer;box-shadow:0 1px 3px -1px var(--tui-base-05);border-radius:.5rem;background-color:var(--tui-base-02);position:relative}.container .forms-list .uf-section-item>*:not(:last-child){margin-right:1rem}.container .forms-list .uf-section-item:hover{box-shadow:0 1px 3px -1px var(--tui-base-08)}.container .forms-list .uf-section-item .uf-form-section-card-title{font-size:1em;text-align:left;line-height:1.25em;font-weight:bold;white-space:nowrap}.container .forms-list .uf-section-item .uf-form-section-card-status{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.container .forms-list .uf-section-item .uf-form-section-card-status .uf-form-section-card-status-img{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;border-radius:100%;color:#fff;font-weight:bold}.container .forms-list .uf-section-item .uf-form-section-card-status .uf-form-section-card-status-img.edit{background-color:var(--tui-error-fill);padding:.25rem;border-radius:50%;color:#fff}.container .forms-list .form-item{background-color:#ccc3;border:1px solid gray;color:gray;cursor:pointer;display:inline-block;padding:12px 6px;text-decoration:none}.container .forms-list .form-item.active{background-color:#007bff0f;border:1px solid #007bff;color:#007bff}.container .forms-list .form-item.active span{transform:scaleX(-1)}.container .forms-list .no-form{height:100%;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;text-align:center}\n"], components: [{ type: i2__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i3__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace$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]" }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3__namespace$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "kwikuiSafeHtml": i2__namespace.KwikUISafeHtmlPipe } });
|
|
642
640
|
__decorate([
|
|
643
641
|
kwikidToolkit.logMethod
|
|
644
642
|
], KwikIDBuilderFormsListComponent.prototype, "ngOnChanges", null);
|
|
@@ -759,6 +757,12 @@
|
|
|
759
757
|
link: "click to upload",
|
|
760
758
|
size: "m",
|
|
761
759
|
maxFileSize: 1000000
|
|
760
|
+
},
|
|
761
|
+
select: {
|
|
762
|
+
searchable: true
|
|
763
|
+
},
|
|
764
|
+
"dropdown-with-search": {
|
|
765
|
+
searchable: true
|
|
762
766
|
}
|
|
763
767
|
};
|
|
764
768
|
|
|
@@ -962,6 +966,12 @@
|
|
|
962
966
|
case EFieldType.FILE:
|
|
963
967
|
value = [];
|
|
964
968
|
break;
|
|
969
|
+
case EFieldType.SELECT:
|
|
970
|
+
value = null;
|
|
971
|
+
break;
|
|
972
|
+
case EFieldType.DROPDOWN_WITH_SEARCH:
|
|
973
|
+
value = null;
|
|
974
|
+
break;
|
|
965
975
|
default:
|
|
966
976
|
value = "";
|
|
967
977
|
break;
|
|
@@ -1024,10 +1034,25 @@
|
|
|
1024
1034
|
}
|
|
1025
1035
|
return formConfig;
|
|
1026
1036
|
};
|
|
1037
|
+
Converter.prototype.updateFormConfigFromUserConfig = function (formConfig, userConfig) {
|
|
1038
|
+
if (kwikidToolkit.isNotEmptyValue(userConfig)) {
|
|
1039
|
+
if (kwikidToolkit.checkObjectKeyExists(userConfig, "theme")) {
|
|
1040
|
+
if (kwikidToolkit.checkObjectKeyExists(userConfig.theme, "clientLogo")) {
|
|
1041
|
+
kwikidToolkit.setValueToObjectPath(formConfig, "properties.header.logo.src", userConfig.theme.clientLogo);
|
|
1042
|
+
}
|
|
1043
|
+
}
|
|
1044
|
+
}
|
|
1045
|
+
return formConfig;
|
|
1046
|
+
};
|
|
1027
1047
|
Converter.prototype.updateFormConfigProperties = function (formConfig) {
|
|
1028
1048
|
var _a, _b;
|
|
1029
1049
|
var formViewProperties = {
|
|
1030
1050
|
header: {
|
|
1051
|
+
logo: {
|
|
1052
|
+
src: "",
|
|
1053
|
+
alt: "Logo",
|
|
1054
|
+
hidden: false
|
|
1055
|
+
},
|
|
1031
1056
|
backButton: {
|
|
1032
1057
|
mode: "TABBED",
|
|
1033
1058
|
bypassConfirmation: false,
|
|
@@ -1065,6 +1090,12 @@
|
|
|
1065
1090
|
Converter.prototype.convertFormConfig = function (formConfig) {
|
|
1066
1091
|
var e_1, _f;
|
|
1067
1092
|
var formatOnFieldType = function (field) {
|
|
1093
|
+
var updateFormFieldProperties = function (field) {
|
|
1094
|
+
if (kwikidToolkit.checkObjectKeyExists(FIELD_PROPERTIES, field.type)) {
|
|
1095
|
+
field.properties = kwikidToolkit.mergeObjects(kwikidToolkit.getObjectDeepCopy(FIELD_PROPERTIES[field.type]), field.properties);
|
|
1096
|
+
}
|
|
1097
|
+
return field;
|
|
1098
|
+
};
|
|
1068
1099
|
var formatFieldTypeHtml = function (field) {
|
|
1069
1100
|
field = setFieldKeyHidden(field);
|
|
1070
1101
|
field = setFieldAsFormElement(field, false);
|
|
@@ -1078,7 +1109,7 @@
|
|
|
1078
1109
|
var formatFieldTypeText = function (field) {
|
|
1079
1110
|
field = setFieldKeyHidden(field);
|
|
1080
1111
|
field = setFieldAsFormElement(field, true);
|
|
1081
|
-
field
|
|
1112
|
+
field = updateFormFieldProperties(field);
|
|
1082
1113
|
return field;
|
|
1083
1114
|
};
|
|
1084
1115
|
var formatFieldTypeTextarea = function (field) {
|
|
@@ -1102,7 +1133,7 @@
|
|
|
1102
1133
|
field = setFieldKeyValue(field, "type", "phone");
|
|
1103
1134
|
}
|
|
1104
1135
|
if (field.type === "phone" || field.type === "number") {
|
|
1105
|
-
field
|
|
1136
|
+
field = updateFormFieldProperties(field);
|
|
1106
1137
|
}
|
|
1107
1138
|
}
|
|
1108
1139
|
return field;
|
|
@@ -1110,13 +1141,13 @@
|
|
|
1110
1141
|
var formatFieldTypeImage = function (field) {
|
|
1111
1142
|
field = setFieldKeyHidden(field);
|
|
1112
1143
|
field = setFieldAsFormElement(field, true);
|
|
1113
|
-
field
|
|
1144
|
+
field = updateFormFieldProperties(field);
|
|
1114
1145
|
return field;
|
|
1115
1146
|
};
|
|
1116
1147
|
var formatFieldTypeDate = function (field) {
|
|
1117
1148
|
field = setFieldKeyHidden(field);
|
|
1118
1149
|
field = setFieldAsFormElement(field, true);
|
|
1119
|
-
field.properties = kwikidToolkit.getObjectDeepCopy(kwikidToolkit.mergeObjects(FIELD_PROPERTIES[field.type], {
|
|
1150
|
+
field.properties = kwikidToolkit.getObjectDeepCopy(kwikidToolkit.mergeObjects(kwikidToolkit.getObjectDeepCopy(FIELD_PROPERTIES[field.type]), {
|
|
1120
1151
|
max: getMaxDate(field),
|
|
1121
1152
|
min: getMinDate(field)
|
|
1122
1153
|
}, field.properties));
|
|
@@ -1130,7 +1161,7 @@
|
|
|
1130
1161
|
var formatFieldTypeRadio = function (field) {
|
|
1131
1162
|
field = setFieldKeyHidden(field);
|
|
1132
1163
|
field = setFieldAsFormElement(field, true);
|
|
1133
|
-
field
|
|
1164
|
+
field = updateFormFieldProperties(field);
|
|
1134
1165
|
field.options = field.options.map(function (x) {
|
|
1135
1166
|
if (typeof x === "string" || typeof x === "number") {
|
|
1136
1167
|
return { label: x, disabled: false, description: "" };
|
|
@@ -1155,17 +1186,18 @@
|
|
|
1155
1186
|
var formatFieldTypeSlider = function (field) {
|
|
1156
1187
|
field = setFieldKeyHidden(field);
|
|
1157
1188
|
field = setFieldAsFormElement(field, true);
|
|
1158
|
-
field
|
|
1189
|
+
field = updateFormFieldProperties(field);
|
|
1159
1190
|
return field;
|
|
1160
1191
|
};
|
|
1161
1192
|
var formatFieldTypeSelect = function (field) {
|
|
1162
1193
|
field = setFieldKeyHidden(field);
|
|
1163
1194
|
field = setFieldAsFormElement(field, true);
|
|
1195
|
+
field = updateFormFieldProperties(field);
|
|
1164
1196
|
return field;
|
|
1165
1197
|
};
|
|
1166
1198
|
var formatFieldTypeApi = function (field) {
|
|
1167
1199
|
field = setFieldAsFormElement(field, true);
|
|
1168
|
-
field
|
|
1200
|
+
field = updateFormFieldProperties(field);
|
|
1169
1201
|
if (!kwikidToolkit.checkObjectKeyExists(field, "showLoader")) {
|
|
1170
1202
|
field = setFieldKeyValue(field, "showLoader", false);
|
|
1171
1203
|
}
|
|
@@ -1211,7 +1243,7 @@
|
|
|
1211
1243
|
var _a, _b;
|
|
1212
1244
|
field = setFieldKeyHidden(field);
|
|
1213
1245
|
field = setFieldAsFormElement(field, true);
|
|
1214
|
-
field.properties = kwikidToolkit.getObjectDeepCopy(kwikidToolkit.mergeObjects(FIELD_PROPERTIES[field.type], {
|
|
1246
|
+
field.properties = kwikidToolkit.getObjectDeepCopy(kwikidToolkit.mergeObjects(kwikidToolkit.getObjectDeepCopy(FIELD_PROPERTIES[field.type]), {
|
|
1215
1247
|
mask: new Array((_b = (_a = field === null || field === void 0 ? void 0 : field.properties) === null || _a === void 0 ? void 0 : _a.otpLength) !== null && _b !== void 0 ? _b : 4)
|
|
1216
1248
|
.fill("#")
|
|
1217
1249
|
.join(" ")
|
|
@@ -1226,7 +1258,7 @@
|
|
|
1226
1258
|
var formatFieldTypeFile = function (field) {
|
|
1227
1259
|
field = setFieldKeyHidden(field);
|
|
1228
1260
|
field = setFieldAsFormElement(field, true);
|
|
1229
|
-
field
|
|
1261
|
+
field = updateFormFieldProperties(field);
|
|
1230
1262
|
return field;
|
|
1231
1263
|
};
|
|
1232
1264
|
switch (field.type) {
|
|
@@ -1532,6 +1564,9 @@
|
|
|
1532
1564
|
__decorate([
|
|
1533
1565
|
kwikidToolkit.logMethod
|
|
1534
1566
|
], Converter.prototype, "updateFormConfigMiscellaneous", null);
|
|
1567
|
+
__decorate([
|
|
1568
|
+
kwikidToolkit.logMethod
|
|
1569
|
+
], Converter.prototype, "updateFormConfigFromUserConfig", null);
|
|
1535
1570
|
__decorate([
|
|
1536
1571
|
kwikidToolkit.logMethod
|
|
1537
1572
|
], Converter.prototype, "updateFormConfigProperties", null);
|
|
@@ -1809,7 +1844,8 @@
|
|
|
1809
1844
|
], KwikIDFormBuilderFormEditorService.prototype, "copyToClipboard", null);
|
|
1810
1845
|
|
|
1811
1846
|
var KwikIDBuilderFormEditorComponent = /** @class */ (function () {
|
|
1812
|
-
function KwikIDBuilderFormEditorComponent(kwikidBuilderFormEditorService) {
|
|
1847
|
+
function KwikIDBuilderFormEditorComponent(loaderService, kwikidBuilderFormEditorService) {
|
|
1848
|
+
this.loaderService = loaderService;
|
|
1813
1849
|
this.kwikidBuilderFormEditorService = kwikidBuilderFormEditorService;
|
|
1814
1850
|
/**
|
|
1815
1851
|
* Components Inputs
|
|
@@ -1843,8 +1879,6 @@
|
|
|
1843
1879
|
this.formGroup = new i3.FormGroup({});
|
|
1844
1880
|
// Form Saved State
|
|
1845
1881
|
this.savedConfig = false;
|
|
1846
|
-
// Loader
|
|
1847
|
-
this.loader = false;
|
|
1848
1882
|
// Dialog
|
|
1849
1883
|
this.dialogOpen = false;
|
|
1850
1884
|
this.dialogError = false;
|
|
@@ -1856,12 +1890,6 @@
|
|
|
1856
1890
|
KwikIDBuilderFormEditorComponent.prototype.markUnsaved = function () {
|
|
1857
1891
|
this.savedConfig = false;
|
|
1858
1892
|
};
|
|
1859
|
-
KwikIDBuilderFormEditorComponent.prototype.startLoader = function () {
|
|
1860
|
-
this.loader = true;
|
|
1861
|
-
};
|
|
1862
|
-
KwikIDBuilderFormEditorComponent.prototype.stopLoader = function () {
|
|
1863
|
-
this.loader = false;
|
|
1864
|
-
};
|
|
1865
1893
|
KwikIDBuilderFormEditorComponent.prototype.showDialog = function () {
|
|
1866
1894
|
this.dialogOpen = true;
|
|
1867
1895
|
};
|
|
@@ -1890,7 +1918,7 @@
|
|
|
1890
1918
|
}
|
|
1891
1919
|
};
|
|
1892
1920
|
KwikIDBuilderFormEditorComponent.prototype.initFormEditor = function (activeFormConfig) {
|
|
1893
|
-
this.
|
|
1921
|
+
this.toggleLoader(true);
|
|
1894
1922
|
this.activeFormConfig_Fields = kwikidToolkit.getObjectDeepCopy(activeFormConfig.fields);
|
|
1895
1923
|
this.activeFormConfig_NoFields = kwikidToolkit.getObjectDeepCopy(activeFormConfig);
|
|
1896
1924
|
delete this.activeFormConfig_NoFields.fields;
|
|
@@ -1905,7 +1933,7 @@
|
|
|
1905
1933
|
};
|
|
1906
1934
|
});
|
|
1907
1935
|
this.formGroup = this.kwikidBuilderFormEditorService.createNestedFormGroup(this.rows);
|
|
1908
|
-
this.
|
|
1936
|
+
this.toggleLoader(false);
|
|
1909
1937
|
};
|
|
1910
1938
|
/**
|
|
1911
1939
|
* General Editor Common Methods
|
|
@@ -1943,7 +1971,7 @@
|
|
|
1943
1971
|
*/
|
|
1944
1972
|
KwikIDBuilderFormEditorComponent.prototype.handleOnClickAddField = function () {
|
|
1945
1973
|
this.markUnsaved();
|
|
1946
|
-
this.
|
|
1974
|
+
this.toggleLoader(true);
|
|
1947
1975
|
var newIndex = this.rows.length;
|
|
1948
1976
|
var fieldConfig = kwikidToolkit.getObjectDeepCopy(kwikidToolkit.mergeObjects(FIELD_CONFIG.text, {
|
|
1949
1977
|
key: String(newIndex)
|
|
@@ -1951,7 +1979,7 @@
|
|
|
1951
1979
|
this.rows[newIndex] = fieldConfig;
|
|
1952
1980
|
var formControl = new i3.FormControl(fieldConfig);
|
|
1953
1981
|
this.formGroup.addControl(String(newIndex), formControl);
|
|
1954
|
-
this.
|
|
1982
|
+
this.toggleLoader(false);
|
|
1955
1983
|
};
|
|
1956
1984
|
/**
|
|
1957
1985
|
* Methods to handle editing of field key-values
|
|
@@ -1982,10 +2010,10 @@
|
|
|
1982
2010
|
}
|
|
1983
2011
|
var newFieldConfig = kwikidToolkit.setValueToObjectPath(kwikidToolkit.getObjectDeepCopy(fieldConfig), finalPath, e.value.new);
|
|
1984
2012
|
if (finalPath.includes("type")) {
|
|
1985
|
-
this.
|
|
2013
|
+
this.toggleLoader(true);
|
|
1986
2014
|
newFieldConfig = kwikidToolkit.setValueToObjectPath(newFieldConfig, "validators", FIELD_VALIDATORS_CONFIG);
|
|
1987
2015
|
newFieldConfig = kwikidToolkit.setValueToObjectPath(newFieldConfig, "properties", FIELD_PROPERTIES_CONFIG[newFieldConfig.type]);
|
|
1988
|
-
this.
|
|
2016
|
+
this.toggleLoader(false);
|
|
1989
2017
|
}
|
|
1990
2018
|
this.rows = this.rows.map(function (row) {
|
|
1991
2019
|
if (row.key === fieldConfig.key) {
|
|
@@ -2054,6 +2082,17 @@
|
|
|
2054
2082
|
KwikIDBuilderFormEditorComponent.prototype.handleOnClickPreview = function () {
|
|
2055
2083
|
this.showDialog();
|
|
2056
2084
|
};
|
|
2085
|
+
KwikIDBuilderFormEditorComponent.prototype.toggleLoader = function (loader) {
|
|
2086
|
+
if (loader) {
|
|
2087
|
+
this.loaderService.show({
|
|
2088
|
+
fullscreen: true,
|
|
2089
|
+
loaderText: "Please wait"
|
|
2090
|
+
});
|
|
2091
|
+
}
|
|
2092
|
+
else {
|
|
2093
|
+
this.loaderService.hide();
|
|
2094
|
+
}
|
|
2095
|
+
};
|
|
2057
2096
|
KwikIDBuilderFormEditorComponent.prototype.closeJSONPopup = function () {
|
|
2058
2097
|
this.hideDialog();
|
|
2059
2098
|
this.showFieldConfigValidatorsConfigEditor = false;
|
|
@@ -2120,8 +2159,8 @@
|
|
|
2120
2159
|
};
|
|
2121
2160
|
return KwikIDBuilderFormEditorComponent;
|
|
2122
2161
|
}());
|
|
2123
|
-
/** @nocollapse */ KwikIDBuilderFormEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDBuilderFormEditorComponent, deps: [{ token: KwikIDFormBuilderFormEditorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2124
|
-
/** @nocollapse */ KwikIDBuilderFormEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDBuilderFormEditorComponent, selector: "kwikid-builder-form-editor", inputs: { activeFormConfig: "activeFormConfig" }, outputs: { onClickSaveActiveFormConfig: "onClickSaveActiveFormConfig" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!-- Component Loader -->\n<kwikui-loader\n [loaderText]=\"'Please wait'\"\n [showLoader]=\"loader\"\n [fullscreen]=\"true\"\n></kwikui-loader>\n\n<!-- Component Main View -->\n<div class=\"container\">\n <ng-container *ngIf=\"activeFormConfig; else noFormSelectedTemplate\">\n <header>\n <div>\n Editing Config of Form: <b>{{ activeFormConfig.props.title }}</b>\n </div>\n <div class=\"header-form-editor-btns\">\n <button (click)=\"handleOnClickPreview()\">preview</button>\n <div>Editor Type:</div>\n <select (change)=\"handleOnClickChangeActiveEditor($event.target.value)\">\n <option\n *ngFor=\"let option of editorTypeOptions\"\n [value]=\"option.key\"\n [selected]=\"option.key === activeEditorType\"\n >\n {{ option.label }}\n </option>\n </select>\n </div>\n </header>\n <main>\n <div\n class=\"form-config-fields\"\n *ngIf=\"activeEditorType == 'FIELDS'; else nonFieldsEditorTemplate\"\n >\n <ng-container *ngIf=\"rows.length <= 0\">\n <div class=\"no-fields disclaimer\">\n <div><p>Please add field to get started</p></div>\n <div class=\"icon\"><h1>+</h1></div>\n <button (click)=\"handleOnClickAddField()\">add field</button>\n </div>\n </ng-container>\n <table>\n <thead>\n <tr>\n <th *ngFor=\"let column of columns\">\n {{ column }}\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-container\n *ngFor=\"let row of rows; let i = index; trackBy: trackByFn\"\n >\n <tr>\n <ng-container *ngFor=\"let column of columns; let j = index\">\n <td>\n <div [class]=\"column\">\n <ng-container\n *ngIf=\"\n column !== 'delete' &&\n column !== 'validators' &&\n column !== 'properties' &&\n column !== 'type' &&\n column !== 'disabled'\n \"\n [ngTemplateOutlet]=\"getFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: i,\n fieldValue: row[column],\n fieldKey: column,\n parentPath: ''\n }\"\n ></ng-container>\n <ng-container *ngIf=\"column === 'type'\">\n <ng-container\n [ngTemplateOutlet]=\"optionFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: i,\n key: column,\n value: row[column],\n path: '',\n options: memoizedGetOptions(\n i,\n row[column],\n column,\n ''\n )\n }\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"column === 'disabled'\">\n <ng-container\n [ngTemplateOutlet]=\"booleanFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: i,\n key: column,\n value: row[column],\n path: '',\n options: memoizedGetOptions(\n i,\n row[column],\n column,\n ''\n )\n }\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"column === 'delete'\">\n <button\n (click)=\"\n handleOnClickDeleteField({\n index: i,\n key: row['key']\n })\n \"\n [disabled]=\"rows.length === 1\"\n >\n delete\n </button>\n </ng-container>\n <ng-container *ngIf=\"column === 'validators'\">\n <button\n (click)=\"\n handleOnClickEditValidators({\n index: i,\n key: row['key'],\n type: row['type']\n })\n \"\n >\n edit\n </button>\n </ng-container>\n <ng-container *ngIf=\"column === 'properties'\">\n <button\n (click)=\"\n handleOnClickEditProperties({\n index: i,\n key: row['key'],\n type: row['type']\n })\n \"\n >\n edit\n </button>\n </ng-container>\n </div>\n </td>\n </ng-container>\n </tr>\n </ng-container>\n </tbody>\n </table>\n <div class=\"add-field-btn-container\"> </div>\n </div>\n <ng-template #nonFieldsEditorTemplate>\n <div class=\"form-config-no-fields\">\n <pre\n contenteditable=\"true\"\n (keyup)=\"\n handleOnClickSaveActiveFormConfig_NoFields(\n $event.target.innerHTML\n )\n \"\n >\n {{ activeFormConfig_NoFields | json }}\n </pre>\n </div>\n </ng-template>\n </main>\n <footer>\n <button\n *ngIf=\"rows.length > 0\"\n (click)=\"handleOnClickAddField()\"\n >\n add field\n </button>\n <button\n (click)=\"handleOnClickSaveActiveFormConfig()\"\n [class.secondary]=\"!savedConfig\"\n >\n {{ savedConfig ? \"saved\" : \"unsaved\" }}\n </button>\n </footer>\n </ng-container>\n <ng-template #noFormSelectedTemplate>\n <div class=\"no-form-selected disclaimer\">\n <div class=\"icon\"><h1>➦</h1></div>\n <div><p>Please select a form to edit it's fields</p></div>\n </div>\n </ng-template>\n</div>\n\n<!-- Component Dialog -->\n<div\n class=\"modal\"\n [class.error]=\"dialogError === true\"\n *ngIf=\"\n dialogOpen ||\n showFieldConfigValidatorsConfigEditor ||\n showFieldConfigPropertiesConfigEditor\n \"\n [@panelInOut]\n>\n <div class=\"modal-box\">\n <div\n class=\"modal-content\"\n *ngIf=\"dialogOpen\"\n >\n <div class=\"modal-heading\">\n <div class=\"modal-title\">\n {{ activeFormConfig.props.title }}'s Config Preview\n </div>\n <div class=\"modal-actions\">\n <button (click)=\"downloadJSON()\">download</button>\n <button (click)=\"copyToClipboard()\">copy</button>\n <button (click)=\"closeJSONPopup()\">close</button>\n </div>\n </div>\n <div class=\"modal-body\">\n <pre>\n <code>{{ activeFormConfig | json }}</code>\n </pre>\n </div>\n </div>\n <div\n class=\"modal-content\"\n *ngIf=\"showFieldConfigValidatorsConfigEditor\"\n >\n <div class=\"modal-heading\">\n <div class=\"modal-title\">\n {{ activeFormConfig.props.title }}'s Validator Config Editor\n </div>\n <div class=\"modal-actions\">\n <button (click)=\"closeJSONPopup()\">close</button>\n </div>\n </div>\n <div class=\"modal-body\">\n <pre\n contenteditable=\"true\"\n (keyup)=\"\n handleOnInputFieldConfigValidatorsConfig($event.target.innerHTML)\n \"\n >\n {{ this.activeFieldConfigValidatorsConfig | json }}\n </pre>\n </div>\n </div>\n <div\n class=\"modal-content\"\n *ngIf=\"showFieldConfigPropertiesConfigEditor\"\n >\n <div class=\"modal-heading\">\n <div class=\"modal-title\">\n {{ activeFormConfig.props.title }}'s Properties Config Editor\n </div>\n <div class=\"modal-actions\">\n <button (click)=\"closeJSONPopup()\">close</button>\n </div>\n </div>\n <div class=\"modal-body\">\n <pre\n contenteditable=\"true\"\n (keyup)=\"\n handleOnInputFieldConfigPropertiesConfig($event.target.innerHTML)\n \"\n >\n {{ this.activeFieldConfigPropertiesConfig | json }}\n </pre>\n </div>\n </div>\n </div>\n</div>\n<!-- END -->\n\n<!-- Template for rendering different field types -->\n<!-- General Field Template -->\n<ng-template\n #getFieldTemplate\n let-index=\"index\"\n let-value=\"fieldValue\"\n let-key=\"fieldKey\"\n let-path=\"parentPath\"\n>\n <div>\n <ng-container\n [ngTemplateOutlet]=\"\n isObject(value) ? objectFieldTemplate : notObjectFieldTemplate\n \"\n [ngTemplateOutletContext]=\"{\n index: index,\n fieldValue: value,\n fieldKey: key,\n parentPath: path\n }\"\n >\n </ng-container>\n </div>\n</ng-template>\n\n<!-- Object Type Field Template -->\n<ng-template\n #objectFieldTemplate\n let-index=\"index\"\n let-value=\"fieldValue\"\n let-key=\"fieldKey\"\n let-path=\"parentPath\"\n>\n <ng-container *ngFor=\"let item of value | keyvalue\">\n <ng-container\n [ngTemplateOutlet]=\"getFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: index,\n fieldValue: item.value,\n fieldKey: item.key,\n parentPath: path === '' ? key : path + '.' + key\n }\"\n >\n </ng-container>\n </ng-container>\n</ng-template>\n\n<!-- Non Object Type Field Template -->\n<ng-template\n #notObjectFieldTemplate\n let-index=\"index\"\n let-value=\"fieldValue\"\n let-key=\"fieldKey\"\n let-path=\"parentPath\"\n>\n <div>\n <ng-container *ngIf=\"isOptions(index, value, key, path)\">\n <ng-container\n [ngTemplateOutlet]=\"optionFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: index,\n key: key,\n value: value,\n path: path,\n options: memoizedGetOptions(index, value, key, path)\n }\"\n ></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isOptions(index, value, key, path) && isString(value)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n textFieldTemplate;\n context: { index: index, key: key, value: value, path: path }\n \"\n ></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isOptions(index, value, key, path) && isNumber(value)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n numberFieldTemplate;\n context: { index: index, key: key, value: value, path: path }\n \"\n ></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Options Field Template -->\n<ng-template\n #optionFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n let-options=\"options\"\n>\n <div class=\"field-container options\">\n <select\n (change)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n >\n <option\n *ngFor=\"let option of options\"\n [value]=\"option\"\n [selected]=\"option === value\"\n >{{ option }}</option\n >\n </select>\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Boolean Field Template -->\n<ng-template\n #booleanFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n>\n <div class=\"field-container checkbox\">\n <input\n type=\"checkbox\"\n [checked]=\"value\"\n (change)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.checked }, path })\"\n />\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Text Field Template -->\n<ng-template\n #textFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n>\n <div class=\"field-container text\">\n <input\n placeholder=\"Enter {{ key }}\"\n type=\"text\"\n [value]=\"value\"\n (blur)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n />\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Number Field Template -->\n<ng-template\n #numberFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n>\n <div class=\"field-container number\">\n <input\n placeholder=\"Enter {{ key }}\"\n type=\"number\"\n [value]=\"value\"\n (blur)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n />\n </div>\n</ng-template>\n<!-- END -->\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}input[type=text],input[type=number]{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;-webkit-appearance:auto!important;appearance:auto!important}input[type=checkbox]{-webkit-appearance:auto!important;appearance:auto!important;width:1rem;height:1rem}select{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}textarea{overflow-wrap:anywhere;resize:none;unicode-bidi:embed;white-space:pre-wrap}button{display:inline-block;padding:8px 12px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:4px;border:none;cursor:pointer}button:hover{background-color:#0069d9}button:active{background-color:#0056b3}button:focus{outline:none}button.secondary{padding:7px 11px;border:1px solid #007bff;background-color:#fff;color:#007bff}button.secondary:hover{background-color:#b7daff}button.secondary:active{background-color:#b7daff}button.secondary:focus{outline:none}.field-container{display:flex}.field-container label{color:gray}.field-container.checkbox{flex-direction:row;align-items:center;justify-content:center;padding:8px 12px;margin:auto}.field-container.options,.field-container.number,.field-container.text{flex-direction:column}.disclaimer{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#121212;width:100%;height:100%}.disclaimer>*:not(:last-child){margin-bottom:1.5rem}.disclaimer .icon{width:3rem;height:3rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.disclaimer.no-form-selected h1{transform:scaleX(-1)}.disclaimer h1{font-size:5rem;font-weight:100}.disclaimer p{font-size:1rem}\n", ":host{all:unset;position:relative;width:100%;height:100%;overflow:auto}.container{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;height:100%;border:1px solid #ccc}.container header{padding:.5rem;display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;border-bottom:1px solid #ccc}.container header .header-form-editor-btns{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center}.container header .header-form-editor-btns>*:not(:last-child){margin-right:1rem}.container main{padding:.5rem;flex-grow:1;overflow:auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;white-space:nowrap;position:relative}.container main>*:not(:last-child){margin-right:1rem}.container main .no-fields{position:absolute;top:0;left:0;background:white}.container main .form-config-no-fields{overflow:auto;width:100%}.container main .form-config-fields{overflow:auto;width:100%}.container main .form-config-fields .add-field-btn-container{width:100%;text-align:center}.container main .validators,.container main .properties{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.container main .validators>*:not(:last-child),.container main .properties>*:not(:last-child){margin-bottom:.5rem}.container main .input-checkbox-container{display:flex;flex-direction:row}.container footer{padding:.5rem;display:flex;flex-direction:row;justify-content:flex-end;align-items:stretch;border-top:1px solid lightgray}.container footer>*:not(:last-child){margin-right:1rem}.modal{position:absolute;top:0;background-color:#0000004d;width:100%;height:100%;display:flex;justify-content:center;align-items:center;left:0;flex-direction:row}.modal.error{background-color:#ff00004d}.modal-box{width:75%;height:75%;margin:auto;background-color:#fff;border-radius:1rem;box-shadow:#64646f33 0 7px 29px}.modal-content{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;width:100%;height:100%}.modal-heading{padding:.5rem 1rem;width:100%;display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid lightgray;align-items:center}.modal-title{font-weight:bold;font-size:1rem}.modal-actions{display:flex;flex-direction:row;cursor:pointer}.modal-actions>*:not(:last-child){margin-right:1rem}.modal-body{overflow:auto}.modal-body pre{padding:1rem}pre{white-space:pre-wrap;overflow:auto}table{width:100%;border-collapse:collapse;margin-bottom:20px}table th,table td{padding:8px;text-align:left;border:1px solid #ccc;vertical-align:top}table th{background-color:#f2f2f2}table tr:nth-child(even){background-color:#f9f9f9}table tr:hover{background-color:#eaeaea}\n"], components: [{ type: i2__namespace.KwikUILoaderComponent, selector: "kwikui-loader", inputs: ["id", "loaderText", "showLoader", "fullscreen", "styles", "class"] }], directives: [{ type: i3__namespace$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "json": i3__namespace$2.JsonPipe, "keyvalue": i3__namespace$2.KeyValuePipe }, animations: [
|
|
2162
|
+
/** @nocollapse */ KwikIDBuilderFormEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDBuilderFormEditorComponent, deps: [{ token: i2__namespace.KwikUILoaderService }, { token: KwikIDFormBuilderFormEditorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2163
|
+
/** @nocollapse */ KwikIDBuilderFormEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDBuilderFormEditorComponent, selector: "kwikid-builder-form-editor", inputs: { activeFormConfig: "activeFormConfig" }, outputs: { onClickSaveActiveFormConfig: "onClickSaveActiveFormConfig" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!-- Component Loader -->\n<kwikui-loader\n></kwikui-loader>\n\n<!-- Component Main View -->\n<div class=\"container\">\n <ng-container *ngIf=\"activeFormConfig; else noFormSelectedTemplate\">\n <header>\n <div>\n Editing Config of Form: <b>{{ activeFormConfig.props.title }}</b>\n </div>\n <div class=\"header-form-editor-btns\">\n <button (click)=\"handleOnClickPreview()\">preview</button>\n <div>Editor Type:</div>\n <select (change)=\"handleOnClickChangeActiveEditor($event.target.value)\">\n <option\n *ngFor=\"let option of editorTypeOptions\"\n [value]=\"option.key\"\n [selected]=\"option.key === activeEditorType\"\n >\n {{ option.label }}\n </option>\n </select>\n </div>\n </header>\n <main>\n <div\n class=\"form-config-fields\"\n *ngIf=\"activeEditorType == 'FIELDS'; else nonFieldsEditorTemplate\"\n >\n <ng-container *ngIf=\"rows.length <= 0\">\n <div class=\"no-fields disclaimer\">\n <div><p>Please add field to get started</p></div>\n <div class=\"icon\"><h1>+</h1></div>\n <button (click)=\"handleOnClickAddField()\">add field</button>\n </div>\n </ng-container>\n <table>\n <thead>\n <tr>\n <th *ngFor=\"let column of columns\">\n {{ column }}\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-container\n *ngFor=\"let row of rows; let i = index; trackBy: trackByFn\"\n >\n <tr>\n <ng-container *ngFor=\"let column of columns; let j = index\">\n <td>\n <div [class]=\"column\">\n <ng-container\n *ngIf=\"\n column !== 'delete' &&\n column !== 'validators' &&\n column !== 'properties' &&\n column !== 'type' &&\n column !== 'disabled'\n \"\n [ngTemplateOutlet]=\"getFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: i,\n fieldValue: row[column],\n fieldKey: column,\n parentPath: ''\n }\"\n ></ng-container>\n <ng-container *ngIf=\"column === 'type'\">\n <ng-container\n [ngTemplateOutlet]=\"optionFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: i,\n key: column,\n value: row[column],\n path: '',\n options: memoizedGetOptions(\n i,\n row[column],\n column,\n ''\n )\n }\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"column === 'disabled'\">\n <ng-container\n [ngTemplateOutlet]=\"booleanFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: i,\n key: column,\n value: row[column],\n path: '',\n options: memoizedGetOptions(\n i,\n row[column],\n column,\n ''\n )\n }\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"column === 'delete'\">\n <button\n (click)=\"\n handleOnClickDeleteField({\n index: i,\n key: row['key']\n })\n \"\n [disabled]=\"rows.length === 1\"\n >\n delete\n </button>\n </ng-container>\n <ng-container *ngIf=\"column === 'validators'\">\n <button\n (click)=\"\n handleOnClickEditValidators({\n index: i,\n key: row['key'],\n type: row['type']\n })\n \"\n >\n edit\n </button>\n </ng-container>\n <ng-container *ngIf=\"column === 'properties'\">\n <button\n (click)=\"\n handleOnClickEditProperties({\n index: i,\n key: row['key'],\n type: row['type']\n })\n \"\n >\n edit\n </button>\n </ng-container>\n </div>\n </td>\n </ng-container>\n </tr>\n </ng-container>\n </tbody>\n </table>\n <div class=\"add-field-btn-container\"> </div>\n </div>\n <ng-template #nonFieldsEditorTemplate>\n <div class=\"form-config-no-fields\">\n <pre\n contenteditable=\"true\"\n (keyup)=\"\n handleOnClickSaveActiveFormConfig_NoFields(\n $event.target.innerHTML\n )\n \"\n >\n {{ activeFormConfig_NoFields | json }}\n </pre>\n </div>\n </ng-template>\n </main>\n <footer>\n <button\n *ngIf=\"rows.length > 0\"\n (click)=\"handleOnClickAddField()\"\n >\n add field\n </button>\n <button\n (click)=\"handleOnClickSaveActiveFormConfig()\"\n [class.secondary]=\"!savedConfig\"\n >\n {{ savedConfig ? \"saved\" : \"unsaved\" }}\n </button>\n </footer>\n </ng-container>\n <ng-template #noFormSelectedTemplate>\n <div class=\"no-form-selected disclaimer\">\n <div class=\"icon\"><h1>➦</h1></div>\n <div><p>Please select a form to edit it's fields</p></div>\n </div>\n </ng-template>\n</div>\n\n<!-- Component Dialog -->\n<div\n class=\"modal\"\n [class.error]=\"dialogError === true\"\n *ngIf=\"\n dialogOpen ||\n showFieldConfigValidatorsConfigEditor ||\n showFieldConfigPropertiesConfigEditor\n \"\n [@panelInOut]\n>\n <div class=\"modal-box\">\n <div\n class=\"modal-content\"\n *ngIf=\"dialogOpen\"\n >\n <div class=\"modal-heading\">\n <div class=\"modal-title\">\n {{ activeFormConfig.props.title }}'s Config Preview\n </div>\n <div class=\"modal-actions\">\n <button (click)=\"downloadJSON()\">download</button>\n <button (click)=\"copyToClipboard()\">copy</button>\n <button (click)=\"closeJSONPopup()\">close</button>\n </div>\n </div>\n <div class=\"modal-body\">\n <pre>\n <code>{{ activeFormConfig | json }}</code>\n </pre>\n </div>\n </div>\n <div\n class=\"modal-content\"\n *ngIf=\"showFieldConfigValidatorsConfigEditor\"\n >\n <div class=\"modal-heading\">\n <div class=\"modal-title\">\n {{ activeFormConfig.props.title }}'s Validator Config Editor\n </div>\n <div class=\"modal-actions\">\n <button (click)=\"closeJSONPopup()\">close</button>\n </div>\n </div>\n <div class=\"modal-body\">\n <pre\n contenteditable=\"true\"\n (keyup)=\"\n handleOnInputFieldConfigValidatorsConfig($event.target.innerHTML)\n \"\n >\n {{ this.activeFieldConfigValidatorsConfig | json }}\n </pre>\n </div>\n </div>\n <div\n class=\"modal-content\"\n *ngIf=\"showFieldConfigPropertiesConfigEditor\"\n >\n <div class=\"modal-heading\">\n <div class=\"modal-title\">\n {{ activeFormConfig.props.title }}'s Properties Config Editor\n </div>\n <div class=\"modal-actions\">\n <button (click)=\"closeJSONPopup()\">close</button>\n </div>\n </div>\n <div class=\"modal-body\">\n <pre\n contenteditable=\"true\"\n (keyup)=\"\n handleOnInputFieldConfigPropertiesConfig($event.target.innerHTML)\n \"\n >\n {{ this.activeFieldConfigPropertiesConfig | json }}\n </pre>\n </div>\n </div>\n </div>\n</div>\n<!-- END -->\n\n<!-- Template for rendering different field types -->\n<!-- General Field Template -->\n<ng-template\n #getFieldTemplate\n let-index=\"index\"\n let-value=\"fieldValue\"\n let-key=\"fieldKey\"\n let-path=\"parentPath\"\n>\n <div>\n <ng-container\n [ngTemplateOutlet]=\"\n isObject(value) ? objectFieldTemplate : notObjectFieldTemplate\n \"\n [ngTemplateOutletContext]=\"{\n index: index,\n fieldValue: value,\n fieldKey: key,\n parentPath: path\n }\"\n >\n </ng-container>\n </div>\n</ng-template>\n\n<!-- Object Type Field Template -->\n<ng-template\n #objectFieldTemplate\n let-index=\"index\"\n let-value=\"fieldValue\"\n let-key=\"fieldKey\"\n let-path=\"parentPath\"\n>\n <ng-container *ngFor=\"let item of value | keyvalue\">\n <ng-container\n [ngTemplateOutlet]=\"getFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: index,\n fieldValue: item.value,\n fieldKey: item.key,\n parentPath: path === '' ? key : path + '.' + key\n }\"\n >\n </ng-container>\n </ng-container>\n</ng-template>\n\n<!-- Non Object Type Field Template -->\n<ng-template\n #notObjectFieldTemplate\n let-index=\"index\"\n let-value=\"fieldValue\"\n let-key=\"fieldKey\"\n let-path=\"parentPath\"\n>\n <div>\n <ng-container *ngIf=\"isOptions(index, value, key, path)\">\n <ng-container\n [ngTemplateOutlet]=\"optionFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: index,\n key: key,\n value: value,\n path: path,\n options: memoizedGetOptions(index, value, key, path)\n }\"\n ></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isOptions(index, value, key, path) && isString(value)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n textFieldTemplate;\n context: { index: index, key: key, value: value, path: path }\n \"\n ></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isOptions(index, value, key, path) && isNumber(value)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n numberFieldTemplate;\n context: { index: index, key: key, value: value, path: path }\n \"\n ></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Options Field Template -->\n<ng-template\n #optionFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n let-options=\"options\"\n>\n <div class=\"field-container options\">\n <select\n (change)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n >\n <option\n *ngFor=\"let option of options\"\n [value]=\"option\"\n [selected]=\"option === value\"\n >{{ option }}</option\n >\n </select>\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Boolean Field Template -->\n<ng-template\n #booleanFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n>\n <div class=\"field-container checkbox\">\n <input\n type=\"checkbox\"\n [checked]=\"value\"\n (change)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.checked }, path })\"\n />\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Text Field Template -->\n<ng-template\n #textFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n>\n <div class=\"field-container text\">\n <input\n placeholder=\"Enter {{ key }}\"\n type=\"text\"\n [value]=\"value\"\n (blur)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n />\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Number Field Template -->\n<ng-template\n #numberFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n>\n <div class=\"field-container number\">\n <input\n placeholder=\"Enter {{ key }}\"\n type=\"number\"\n [value]=\"value\"\n (blur)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n />\n </div>\n</ng-template>\n<!-- END -->\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}input[type=text],input[type=number]{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;-webkit-appearance:auto!important;appearance:auto!important}input[type=checkbox]{-webkit-appearance:auto!important;appearance:auto!important;width:1rem;height:1rem}select{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}textarea{overflow-wrap:anywhere;resize:none;unicode-bidi:embed;white-space:pre-wrap}button{display:inline-block;padding:8px 12px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:4px;border:none;cursor:pointer}button:hover{background-color:#0069d9}button:active{background-color:#0056b3}button:focus{outline:none}button.secondary{padding:7px 11px;border:1px solid #007bff;background-color:#fff;color:#007bff}button.secondary:hover{background-color:#b7daff}button.secondary:active{background-color:#b7daff}button.secondary:focus{outline:none}.field-container{display:flex}.field-container label{color:gray}.field-container.checkbox{flex-direction:row;align-items:center;justify-content:center;padding:8px 12px;margin:auto}.field-container.options,.field-container.number,.field-container.text{flex-direction:column}.disclaimer{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#121212;width:100%;height:100%}.disclaimer>*:not(:last-child){margin-bottom:1.5rem}.disclaimer .icon{width:3rem;height:3rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.disclaimer.no-form-selected h1{transform:scaleX(-1)}.disclaimer h1{font-size:5rem;font-weight:100}.disclaimer p{font-size:1rem}\n", ":host{all:unset;position:relative;width:100%;height:100%;overflow:auto}.container{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;height:100%;border:1px solid #ccc}.container header{padding:.5rem;display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;border-bottom:1px solid #ccc}.container header .header-form-editor-btns{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center}.container header .header-form-editor-btns>*:not(:last-child){margin-right:1rem}.container main{padding:.5rem;flex-grow:1;overflow:auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;white-space:nowrap;position:relative}.container main>*:not(:last-child){margin-right:1rem}.container main .no-fields{position:absolute;top:0;left:0;background:white}.container main .form-config-no-fields{overflow:auto;width:100%}.container main .form-config-fields{overflow:auto;width:100%}.container main .form-config-fields .add-field-btn-container{width:100%;text-align:center}.container main .validators,.container main .properties{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.container main .validators>*:not(:last-child),.container main .properties>*:not(:last-child){margin-bottom:.5rem}.container main .input-checkbox-container{display:flex;flex-direction:row}.container footer{padding:.5rem;display:flex;flex-direction:row;justify-content:flex-end;align-items:stretch;border-top:1px solid lightgray}.container footer>*:not(:last-child){margin-right:1rem}.modal{position:absolute;top:0;background-color:#0000004d;width:100%;height:100%;display:flex;justify-content:center;align-items:center;left:0;flex-direction:row}.modal.error{background-color:#ff00004d}.modal-box{width:75%;height:75%;margin:auto;background-color:#fff;border-radius:1rem;box-shadow:#64646f33 0 7px 29px}.modal-content{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;width:100%;height:100%}.modal-heading{padding:.5rem 1rem;width:100%;display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid lightgray;align-items:center}.modal-title{font-weight:bold;font-size:1rem}.modal-actions{display:flex;flex-direction:row;cursor:pointer}.modal-actions>*:not(:last-child){margin-right:1rem}.modal-body{overflow:auto}.modal-body pre{padding:1rem}pre{white-space:pre-wrap;overflow:auto}table{width:100%;border-collapse:collapse;margin-bottom:20px}table th,table td{padding:8px;text-align:left;border:1px solid #ccc;vertical-align:top}table th{background-color:#f2f2f2}table tr:nth-child(even){background-color:#f9f9f9}table tr:hover{background-color:#eaeaea}\n"], components: [{ type: i2__namespace.KwikUILoaderComponent, selector: "kwikui-loader" }], directives: [{ type: i3__namespace$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "json": i3__namespace$2.JsonPipe, "keyvalue": i3__namespace$2.KeyValuePipe }, animations: [
|
|
2125
2164
|
animations.trigger("panelInOut", [
|
|
2126
2165
|
animations.transition(":enter", [
|
|
2127
2166
|
animations.style({ transform: "translateY(100%)" }),
|
|
@@ -2174,6 +2213,9 @@
|
|
|
2174
2213
|
__decorate([
|
|
2175
2214
|
kwikidToolkit.logMethod
|
|
2176
2215
|
], KwikIDBuilderFormEditorComponent.prototype, "handleOnClickPreview", null);
|
|
2216
|
+
__decorate([
|
|
2217
|
+
kwikidToolkit.logMethod
|
|
2218
|
+
], KwikIDBuilderFormEditorComponent.prototype, "toggleLoader", null);
|
|
2177
2219
|
__decorate([
|
|
2178
2220
|
kwikidToolkit.logMethod
|
|
2179
2221
|
], KwikIDBuilderFormEditorComponent.prototype, "closeJSONPopup", null);
|
|
@@ -2202,18 +2244,18 @@
|
|
|
2202
2244
|
])
|
|
2203
2245
|
]
|
|
2204
2246
|
}]
|
|
2205
|
-
}], ctorParameters: function () { return [{ type: KwikIDFormBuilderFormEditorService }]; }, propDecorators: { activeFormConfig: [{
|
|
2247
|
+
}], ctorParameters: function () { return [{ type: i2__namespace.KwikUILoaderService }, { type: KwikIDFormBuilderFormEditorService }]; }, propDecorators: { activeFormConfig: [{
|
|
2206
2248
|
type: i0.Input
|
|
2207
2249
|
}], onClickSaveActiveFormConfig: [{
|
|
2208
2250
|
type: i0.Output
|
|
2209
|
-
}], ngOnInit: [], ngOnChanges: [], initFormEditor: [], handleOnClickChangeActiveEditor: [], handleOnClickSaveActiveFormConfig: [], handleOnClickAddField: [], handleOnClickEditValidators: [], handleOnClickEditProperties: [], handleOnInput: [], handleOnInputFieldConfigValidatorsConfig: [], handleOnInputFieldConfigPropertiesConfig: [], handleOnClickDeleteField: [], handleOnClickSaveActiveFormConfig_NoFields: [], handleOnClickPreview: [], closeJSONPopup: [], copyToClipboard: [], downloadJSON: [] } });
|
|
2251
|
+
}], ngOnInit: [], ngOnChanges: [], initFormEditor: [], handleOnClickChangeActiveEditor: [], handleOnClickSaveActiveFormConfig: [], handleOnClickAddField: [], handleOnClickEditValidators: [], handleOnClickEditProperties: [], handleOnInput: [], handleOnInputFieldConfigValidatorsConfig: [], handleOnInputFieldConfigPropertiesConfig: [], handleOnClickDeleteField: [], handleOnClickSaveActiveFormConfig_NoFields: [], handleOnClickPreview: [], toggleLoader: [], closeJSONPopup: [], copyToClipboard: [], downloadJSON: [] } });
|
|
2210
2252
|
|
|
2211
2253
|
var KwikIDFormsBuilderComponent = /** @class */ (function () {
|
|
2212
|
-
function KwikIDFormsBuilderComponent() {
|
|
2254
|
+
function KwikIDFormsBuilderComponent(loaderService) {
|
|
2255
|
+
this.loaderService = loaderService;
|
|
2213
2256
|
this.userConfig = {};
|
|
2214
2257
|
this.formsList = [];
|
|
2215
2258
|
this.activeFormConfig = undefined;
|
|
2216
|
-
this.loader = false;
|
|
2217
2259
|
}
|
|
2218
2260
|
KwikIDFormsBuilderComponent.prototype.ngOnInit = function () {
|
|
2219
2261
|
var formStepKey = localStorage.getItem("formKey");
|
|
@@ -2257,7 +2299,7 @@
|
|
|
2257
2299
|
return __generator(this, function (_e) {
|
|
2258
2300
|
switch (_e.label) {
|
|
2259
2301
|
case 0:
|
|
2260
|
-
this.
|
|
2302
|
+
this.toggleLoader(true);
|
|
2261
2303
|
activeFormConfig = this.formsList.find(function (form) {
|
|
2262
2304
|
if (form.key === selectedFormKey) {
|
|
2263
2305
|
return form;
|
|
@@ -2331,7 +2373,7 @@
|
|
|
2331
2373
|
_e.label = 14;
|
|
2332
2374
|
case 14:
|
|
2333
2375
|
this.activeFormConfig = Object.assign(Object.assign({}, activeFormConfig), formConfig);
|
|
2334
|
-
this.
|
|
2376
|
+
this.toggleLoader(false);
|
|
2335
2377
|
return [2 /*return*/];
|
|
2336
2378
|
}
|
|
2337
2379
|
});
|
|
@@ -2349,10 +2391,21 @@
|
|
|
2349
2391
|
return form;
|
|
2350
2392
|
});
|
|
2351
2393
|
};
|
|
2394
|
+
KwikIDFormsBuilderComponent.prototype.toggleLoader = function (loader) {
|
|
2395
|
+
if (loader) {
|
|
2396
|
+
this.loaderService.show({
|
|
2397
|
+
fullscreen: true,
|
|
2398
|
+
loaderText: "Please wait"
|
|
2399
|
+
});
|
|
2400
|
+
}
|
|
2401
|
+
else {
|
|
2402
|
+
this.loaderService.hide();
|
|
2403
|
+
}
|
|
2404
|
+
};
|
|
2352
2405
|
return KwikIDFormsBuilderComponent;
|
|
2353
2406
|
}());
|
|
2354
|
-
/** @nocollapse */ KwikIDFormsBuilderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormsBuilderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2355
|
-
/** @nocollapse */ KwikIDFormsBuilderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsBuilderComponent, selector: "kwikid-forms-builder", inputs: { userConfig: "userConfig" }, ngImport: i0__namespace, template: "<div class=\"container\">\n <kwikid-builder-forms-list\n [activeFormConfig]=\"this.activeFormConfig\"\n [formsList]=\"this.formsList\"\n (getFormsList)=\"this.handleGetFormsList($event)\"\n (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\n ></kwikid-builder-forms-list>\n <kwikid-builder-form-editor\n [activeFormConfig]=\"activeFormConfig\"\n (onClickSaveActiveFormConfig)=\"\n this.handleOnClickSaveActiveFormConfig($event)\n \"\n ></kwikid-builder-form-editor>\n</div>\n\n<kwikui-loader\n
|
|
2407
|
+
/** @nocollapse */ KwikIDFormsBuilderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormsBuilderComponent, deps: [{ token: i2__namespace.KwikUILoaderService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2408
|
+
/** @nocollapse */ KwikIDFormsBuilderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsBuilderComponent, selector: "kwikid-forms-builder", inputs: { userConfig: "userConfig" }, ngImport: i0__namespace, template: "<div class=\"container\">\n <kwikid-builder-forms-list\n [activeFormConfig]=\"this.activeFormConfig\"\n [formsList]=\"this.formsList\"\n (getFormsList)=\"this.handleGetFormsList($event)\"\n (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\n ></kwikid-builder-forms-list>\n <kwikid-builder-form-editor\n [activeFormConfig]=\"activeFormConfig\"\n (onClickSaveActiveFormConfig)=\"\n this.handleOnClickSaveActiveFormConfig($event)\n \"\n ></kwikid-builder-form-editor>\n</div>\n\n<kwikui-loader\n></kwikui-loader>\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}input[type=text],input[type=number]{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;-webkit-appearance:auto!important;appearance:auto!important}input[type=checkbox]{-webkit-appearance:auto!important;appearance:auto!important;width:1rem;height:1rem}select{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}textarea{overflow-wrap:anywhere;resize:none;unicode-bidi:embed;white-space:pre-wrap}button{display:inline-block;padding:8px 12px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:4px;border:none;cursor:pointer}button:hover{background-color:#0069d9}button:active{background-color:#0056b3}button:focus{outline:none}button.secondary{padding:7px 11px;border:1px solid #007bff;background-color:#fff;color:#007bff}button.secondary:hover{background-color:#b7daff}button.secondary:active{background-color:#b7daff}button.secondary:focus{outline:none}.field-container{display:flex}.field-container label{color:gray}.field-container.checkbox{flex-direction:row;align-items:center;justify-content:center;padding:8px 12px;margin:auto}.field-container.options,.field-container.number,.field-container.text{flex-direction:column}.disclaimer{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#121212;width:100%;height:100%}.disclaimer>*:not(:last-child){margin-bottom:1.5rem}.disclaimer .icon{width:3rem;height:3rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.disclaimer.no-form-selected h1{transform:scaleX(-1)}.disclaimer h1{font-size:5rem;font-weight:100}.disclaimer p{font-size:1rem}\n", ":host{all:unset;position:relative;width:100%;height:100%}.container{width:100%;height:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;padding:1rem}.container>*:not(:last-child){margin-right:1rem}\n"], components: [{ type: KwikIDBuilderFormsListComponent, selector: "kwikid-builder-forms-list", inputs: ["activeFormConfig", "formsList"], outputs: ["onClickSetActiveForm", "getFormsList"] }, { type: KwikIDBuilderFormEditorComponent, selector: "kwikid-builder-form-editor", inputs: ["activeFormConfig"], outputs: ["onClickSaveActiveFormConfig"] }, { type: i2__namespace.KwikUILoaderComponent, selector: "kwikui-loader" }] });
|
|
2356
2409
|
__decorate([
|
|
2357
2410
|
kwikidToolkit.logMethod
|
|
2358
2411
|
], KwikIDFormsBuilderComponent.prototype, "fetchFormConfig", null);
|
|
@@ -2365,6 +2418,9 @@
|
|
|
2365
2418
|
__decorate([
|
|
2366
2419
|
kwikidToolkit.logMethod
|
|
2367
2420
|
], KwikIDFormsBuilderComponent.prototype, "handleOnClickSaveActiveFormConfig", null);
|
|
2421
|
+
__decorate([
|
|
2422
|
+
kwikidToolkit.logMethod
|
|
2423
|
+
], KwikIDFormsBuilderComponent.prototype, "toggleLoader", null);
|
|
2368
2424
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormsBuilderComponent, decorators: [{
|
|
2369
2425
|
type: i0.Component,
|
|
2370
2426
|
args: [{
|
|
@@ -2372,9 +2428,9 @@
|
|
|
2372
2428
|
templateUrl: "./builder.component.html",
|
|
2373
2429
|
styleUrls: ["./shared.scss", "./builder.component.scss"]
|
|
2374
2430
|
}]
|
|
2375
|
-
}], ctorParameters: function () { return []; }, propDecorators: { userConfig: [{
|
|
2431
|
+
}], ctorParameters: function () { return [{ type: i2__namespace.KwikUILoaderService }]; }, propDecorators: { userConfig: [{
|
|
2376
2432
|
type: i0.Input
|
|
2377
|
-
}], fetchFormConfig: [], handleGetFormsList: [], handleOnClickSetActiveForm: [], handleOnClickSaveActiveFormConfig: [] } });
|
|
2433
|
+
}], fetchFormConfig: [], handleGetFormsList: [], handleOnClickSetActiveForm: [], handleOnClickSaveActiveFormConfig: [], toggleLoader: [] } });
|
|
2378
2434
|
|
|
2379
2435
|
var EFormsListStatus;
|
|
2380
2436
|
(function (EFormsListStatus) {
|
|
@@ -3348,13 +3404,14 @@
|
|
|
3348
3404
|
], Tasks.prototype, "execute", null);
|
|
3349
3405
|
|
|
3350
3406
|
var KwikIDFormViewComponent = /** @class */ (function () {
|
|
3351
|
-
function KwikIDFormViewComponent(cd, formViewService, push, alert, previewDialogService, dialogService) {
|
|
3407
|
+
function KwikIDFormViewComponent(cd, formViewService, push, alert, previewDialogService, dialogService, loaderService) {
|
|
3352
3408
|
this.cd = cd;
|
|
3353
3409
|
this.formViewService = formViewService;
|
|
3354
3410
|
this.push = push;
|
|
3355
3411
|
this.alert = alert;
|
|
3356
3412
|
this.previewDialogService = previewDialogService;
|
|
3357
3413
|
this.dialogService = dialogService;
|
|
3414
|
+
this.loaderService = loaderService;
|
|
3358
3415
|
this.isMobileView = false;
|
|
3359
3416
|
this.popupFormCallback = undefined;
|
|
3360
3417
|
this.onClickGoBack = new i0.EventEmitter();
|
|
@@ -3385,7 +3442,6 @@
|
|
|
3385
3442
|
};
|
|
3386
3443
|
this.loading = true;
|
|
3387
3444
|
this.apiLoading = false;
|
|
3388
|
-
this.loaderType = "CENTER_SCREEN";
|
|
3389
3445
|
this.backButton = {
|
|
3390
3446
|
disabled: false,
|
|
3391
3447
|
showLoader: false
|
|
@@ -3410,7 +3466,6 @@
|
|
|
3410
3466
|
}
|
|
3411
3467
|
KwikIDFormViewComponent.prototype.ngOnInit = function () {
|
|
3412
3468
|
var _this = this;
|
|
3413
|
-
this.setLoaderType();
|
|
3414
3469
|
(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
3415
3470
|
var res;
|
|
3416
3471
|
return __generator(this, function (_h) {
|
|
@@ -3504,20 +3559,6 @@
|
|
|
3504
3559
|
}); })();
|
|
3505
3560
|
}
|
|
3506
3561
|
};
|
|
3507
|
-
KwikIDFormViewComponent.prototype.setLoaderType = function () {
|
|
3508
|
-
this.loaderType = "CENTER_SCREEN";
|
|
3509
|
-
if (kwikidToolkit.isNotEmptyValue(this.userConfig)) {
|
|
3510
|
-
if (kwikidToolkit.checkObjectKeyExists(this.userConfig, "utilityFlags")) {
|
|
3511
|
-
if (kwikidToolkit.checkObjectKeyExists(this.userConfig.utilityFlags, "loaderType")) {
|
|
3512
|
-
this.loaderType = this.userConfig.utilityFlags.loaderType;
|
|
3513
|
-
}
|
|
3514
|
-
}
|
|
3515
|
-
}
|
|
3516
|
-
if (this.loaderType !== "FULL_SCREEN" &&
|
|
3517
|
-
this.loaderType !== "CENTER_SCREEN") {
|
|
3518
|
-
this.loaderType = "CENTER_SCREEN";
|
|
3519
|
-
}
|
|
3520
|
-
};
|
|
3521
3562
|
KwikIDFormViewComponent.prototype.initFormConfig = function (formConfig) {
|
|
3522
3563
|
return __awaiter(this, void 0, void 0, function () {
|
|
3523
3564
|
var _h, _j, preTask, task, e_1_1, _k, _loop_1, this_1, _l, _m, field, _o, _p, field, validations, e_2_1;
|
|
@@ -4405,14 +4446,17 @@
|
|
|
4405
4446
|
api.request.headers.validation.is_valid);
|
|
4406
4447
|
};
|
|
4407
4448
|
KwikIDFormViewComponent.prototype.showApiLoader = function () {
|
|
4408
|
-
this.
|
|
4449
|
+
this.loaderService.show({
|
|
4450
|
+
fullscreen: true,
|
|
4451
|
+
loaderText: "Please wait"
|
|
4452
|
+
});
|
|
4409
4453
|
this.viewFormsButton["disabled"] = true;
|
|
4410
4454
|
this.viewFormsButton["showLoader"] = true;
|
|
4411
4455
|
this.saveFormButton["disabled"] = true;
|
|
4412
4456
|
this.saveFormButton["showLoader"] = true;
|
|
4413
4457
|
};
|
|
4414
4458
|
KwikIDFormViewComponent.prototype.hideApiLoader = function () {
|
|
4415
|
-
this.
|
|
4459
|
+
this.loaderService.hide();
|
|
4416
4460
|
this.viewFormsButton["disabled"] = false;
|
|
4417
4461
|
this.viewFormsButton["showLoader"] = false;
|
|
4418
4462
|
this.saveFormButton["disabled"] = false;
|
|
@@ -4523,25 +4567,25 @@
|
|
|
4523
4567
|
}
|
|
4524
4568
|
finally { if (e_14) throw e_14.error; }
|
|
4525
4569
|
}
|
|
4526
|
-
|
|
4527
|
-
|
|
4528
|
-
|
|
4529
|
-
|
|
4530
|
-
|
|
4531
|
-
|
|
4532
|
-
|
|
4533
|
-
firstFieldWithError = control.key;
|
|
4534
|
-
}
|
|
4535
|
-
this.formFields = showFormFieldError(this.formFields, this.formGroup.controls[control.key].errors, control.key, control.invalid);
|
|
4570
|
+
controls = new FormValidation().getFormFieldsInvalidControls(this.formGroup);
|
|
4571
|
+
firstFieldWithError = "";
|
|
4572
|
+
try {
|
|
4573
|
+
for (controls_1 = __values(controls), controls_1_1 = controls_1.next(); !controls_1_1.done; controls_1_1 = controls_1.next()) {
|
|
4574
|
+
control = controls_1_1.value;
|
|
4575
|
+
if (control.invalid && kwikidToolkit.isEmptyValue(firstFieldWithError)) {
|
|
4576
|
+
firstFieldWithError = control.key;
|
|
4536
4577
|
}
|
|
4578
|
+
this.formFields = showFormFieldError(this.formFields, this.formGroup.controls[control.key].errors, control.key, control.invalid);
|
|
4537
4579
|
}
|
|
4538
|
-
|
|
4539
|
-
|
|
4540
|
-
|
|
4541
|
-
|
|
4542
|
-
|
|
4543
|
-
finally { if (e_15) throw e_15.error; }
|
|
4580
|
+
}
|
|
4581
|
+
catch (e_15_1) { e_15 = { error: e_15_1 }; }
|
|
4582
|
+
finally {
|
|
4583
|
+
try {
|
|
4584
|
+
if (controls_1_1 && !controls_1_1.done && (_q = controls_1.return)) _q.call(controls_1);
|
|
4544
4585
|
}
|
|
4586
|
+
finally { if (e_15) throw e_15.error; }
|
|
4587
|
+
}
|
|
4588
|
+
if (kwikidToolkit.isNotEmptyValue(firstFieldWithError)) {
|
|
4545
4589
|
this.toggleErrorNotification(true);
|
|
4546
4590
|
setTimeout(function () {
|
|
4547
4591
|
_this.toggleErrorNotification(false);
|
|
@@ -5286,13 +5330,6 @@
|
|
|
5286
5330
|
type: "popup"
|
|
5287
5331
|
});
|
|
5288
5332
|
};
|
|
5289
|
-
// Hardcoded Fingerprint ID
|
|
5290
|
-
KwikIDFormViewComponent.prototype.handleGetKeyValueFingerprint = function (e) {
|
|
5291
|
-
this.handleGetKeyValue({ key: "fingerprint", value: e });
|
|
5292
|
-
};
|
|
5293
|
-
KwikIDFormViewComponent.prototype.handleGetScanningStatus = function (e) {
|
|
5294
|
-
console.log("Scanning Status", e);
|
|
5295
|
-
};
|
|
5296
5333
|
KwikIDFormViewComponent.prototype.showPopupForm = function (popupFormKey, popupType) {
|
|
5297
5334
|
if (popupType === void 0) { popupType = "DIALOG"; }
|
|
5298
5335
|
var popupFormConfig = this.formConfig.popupForms[popupFormKey];
|
|
@@ -5534,8 +5571,8 @@
|
|
|
5534
5571
|
};
|
|
5535
5572
|
return KwikIDFormViewComponent;
|
|
5536
5573
|
}());
|
|
5537
|
-
/** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormViewComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: KwikIDFormViewService }, { token:
|
|
5538
|
-
/** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", isMobileView: "isMobileView", allFormsData: "allFormsData", userConfig: "userConfig", apiCallResponse: "apiCallResponse", popupFormCallback: "popupFormCallback" }, outputs: { onClickGoBack: "onClickGoBack", onClickViewForms: "onClickViewForms", getUnsavedDataState: "getUnsavedDataState", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall", onActionShowPopupForm: "onActionShowPopupForm" }, providers: [KwikIDFormViewService], viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }, { propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, 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 !formConfig.properties?.header?.backButton?.hidden\n \"\n >\n <div id=\"uf-form-fields-header-main\">\n <div id=\"uf-form-fields-header-left\">\n <kwikui-button\n *ngIf=\"\n !formConfig.properties?.header.backButton.hidden && isMobileView\n \"\n [disabled]=\"backButton.disabled\"\n [showLoader]=\"backButton.showLoader\"\n appearance=\"mono\"\n icon=\"tuiIconArrowLeft\"\n shape=\"rounded\"\n (onClick)=\"\n handleOnClickGoBack(\n $event,\n formConfig.properties?.header.backButton.mode\n )\n \"\n ></kwikui-button>\n </div>\n <div id=\"uf-form-fields-header-right\">\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\n {{ formConfig.formsListLength }}</div\n >\n </div>\n </div>\n <hr\n *ngIf=\"\n !formConfig.properties?.header.title.hidden ||\n !formConfig.properties?.header.steps.hidden ||\n !formConfig.properties?.header.backButton.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 | kwikuiSafeHtml\"></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 <!-- Textarea -->\n <ng-container *ngSwitchCase=\"'textarea'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-textarea\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 [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-textarea>\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\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 [variant]=\"field?.properties?.variant ?? 'block'\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-checkbox>\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-input-radio\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-input-radio>\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=\"'select'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-select\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-input-select>\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'\">\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 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 [size]=\"field?.properties?.size\"\n [mode]=\"field?.properties?.mode\"\n [otpLength]=\"field?.properties?.otpLength\"\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=\"'image'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-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-image>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Fingerprint -->\n <ng-container *ngSwitchCase=\"'fingerprint'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n class=\"kwikid-fingerprint-container\"\n >\n <kwikid-fingerprint\n [config]=\"field?.config\"\n (getScanningStatus)=\"handleGetScanningStatus($event)\"\n (getKeyValue)=\"handleGetKeyValueFingerprint($event)\"\n ></kwikid-fingerprint>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- File Upload -->\n <ng-container *ngSwitchCase=\"'file'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <label\n [tuiLabel]=\"labelTemplate\"\n style=\"min-height: auto\"\n >\n <kwikui-input-files\n [id]=\"field?.key\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [styles]=\"field?.properties?.styles\"\n [class]=\"field?.properties?.class\"\n [multiple]=\"field?.properties?.multiple\"\n [accept]=\"field?.properties?.accept\"\n [files]=\"files[field.key]\"\n [setFileTypesToForm]=\"['NORMAL']\"\n [label]=\"field?.properties?.label\"\n [link]=\"field?.properties?.link\"\n [maxFileSize]=\"field?.properties?.maxFileSize\"\n [disabled]=\"field?.disabled\"\n [validators]=\"field?.validators\"\n (getRemovedFile)=\"handleRemovedFile($event)\"\n (getKeyValue)=\"handleGetKeyValueFile($event)\"\n ></kwikui-input-files>\n </label>\n <ng-template #labelTemplate>\n <p\n style=\"padding: 0px 0.25rem; margin-bottom: 0.25rem\"\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 </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 label=\"{{ formConfig.properties.footer.viewFormsButton.label }}\"\n [showLoader]=\"viewFormsButton.showLoader\"\n appearance=\"secondary\"\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 label=\"{{ formConfig.properties.footer.saveButton.label }}\"\n [showLoader]=\"saveFormButton.showLoader\"\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 *ngFor=\"let item of [].constructor(7); let i = index\"\n class=\"large-wrapper tui-skeleton tui-skeleton_rounded\"\n >\n </div>\n</div>\n\n<kwikui-loader\n [loaderText]=\"'Please wait'\"\n [showLoader]=\"apiLoading\"\n [fullscreen]=\"true\"\n></kwikui-loader>\n\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\n<ng-template\n #preview\n let-preview\n>\n <tui-preview\n [rotatable]=\"false\"\n [zoomable]=\"false\"\n class=\"preview-container\"\n >\n <tui-preview-title *ngIf=\"previewProperties.title !== ''\">{{\n previewProperties.title\n }}</tui-preview-title>\n\n <ng-container *ngIf=\"!previewProperties.unavailable\">\n <div\n *ngIf=\"previewProperties?.html?.before !== ''\"\n class=\"preview-html preview-html-before\"\n [style]=\"previewProperties?.html?.beforeStyles\"\n [innerHtml]=\"previewProperties.html.before | kwikuiSafeHtml\"\n ></div>\n\n <!-- Content within the iframe -->\n <div\n class=\"preview-iframe-content\"\n [style]=\"previewProperties?.iframe?.containerStyles\"\n *ngIf=\"previewProperties.iframe.src !== ''\"\n >\n <!-- Your HTML content here -->\n <iframe\n [src]=\"previewProperties.iframe.src | kwikuiSafeUrl\"\n frameborder=\"0\"\n allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen\n [title]=\"previewProperties.iframe.title\"\n class=\"preview-iframe\"\n scrolling=\"auto\"\n ></iframe>\n </div>\n\n <div\n *ngIf=\"previewProperties?.html?.after !== ''\"\n class=\"preview-html preview-html-after\"\n [style]=\"previewProperties?.html?.afterStyles\"\n [innerHtml]=\"previewProperties.html.after | kwikuiSafeHtml\"\n ></div>\n </ng-container>\n\n <ng-container *ngIf=\"previewProperties.unavailable\">\n <div class=\"preview-unavailable\">\n <tui-svg\n src=\"tuiIconFileLarge\"\n class=\"t-icon\"\n ></tui-svg>\n <div>Preview unavailable</div>\n </div>\n </ng-container>\n\n <button\n tuiIconButton\n tuiPreviewAction\n icon=\"tuiIconCloseLarge\"\n title=\"Close\"\n type=\"button\"\n (click)=\"preview.complete()\"\n ></button>\n </tui-preview>\n</ng-template>\n\n<ng-template\n #dialog\n let-dialog\n>\n <div class=\"preview-container\">\n <ng-container *ngIf=\"!previewProperties.unavailable\">\n <div\n *ngIf=\"previewProperties?.html?.before !== ''\"\n class=\"preview-html preview-html-before\"\n [style]=\"previewProperties?.html?.beforeStyles\"\n [innerHtml]=\"previewProperties.html.before | kwikuiSafeHtml\"\n ></div>\n\n <!-- Content within the iframe -->\n <div\n class=\"preview-iframe-content\"\n [style]=\"previewProperties?.iframe?.containerStyles\"\n *ngIf=\"previewProperties.iframe.src !== ''\"\n >\n <!-- Your HTML content here -->\n <iframe\n [src]=\"previewProperties.iframe.src | kwikuiSafeUrl\"\n frameborder=\"0\"\n allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen\n [title]=\"previewProperties.iframe.title\"\n class=\"preview-iframe\"\n scrolling=\"auto\"\n ></iframe>\n </div>\n\n <div\n *ngIf=\"previewProperties?.html?.after !== ''\"\n class=\"preview-html preview-html-after\"\n [style]=\"previewProperties?.html?.afterStyles\"\n [innerHtml]=\"previewProperties.html.after | kwikuiSafeHtml\"\n ></div>\n </ng-container>\n\n <ng-container *ngIf=\"previewProperties.unavailable\">\n <div class=\"preview-unavailable\">\n <tui-svg\n src=\"tuiIconFileLarge\"\n class=\"t-icon\"\n ></tui-svg>\n <div>Preview unavailable</div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n", styles: [".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}.kwikid-form.show>*:not(:last-child){margin-bottom:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.kwikid-form-buttons>*:not(:last-child){margin-right:1rem}.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;padding:1rem 1rem 0}#uf-form-fields-header-container>*:not(:last-child){margin-bottom:1rem}#uf-form-fields-header-container #uf-form-fields-header-main{display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;width:100%}#uf-form-fields-header-container #uf-form-fields-header-main>*:not(:last-child){margin-right:.25rem}#uf-form-fields-header-container #uf-form-fields-header-main #uf-form-fields-header-right{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start}#uf-form-fields-header-container #uf-form-fields-header-main #uf-form-fields-header-right>*:not(:last-child){margin-bottom:.5rem}#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:1rem}.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}.title>*:not(:last-child){margin-right:.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;padding:1rem}.kwikid-form-container-loading>* :not(:last-child){margin-bottom:1rem}.kwikid-fingerprint-container{box-shadow:0 .125rem .1875rem var(--tui-base-03);border-radius:var(--tui-radius-l);border:.5px solid var(--tui-base-03)}#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}.preview-container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;align-content:center;height:calc(100vh - 3rem)}.preview-container>*:not(:last-child){margin-bottom:1rem}.preview-container .preview-html{flex-grow:1}.preview-container .preview-iframe-content{height:100%;flex-grow:1}.preview-container .preview-iframe-content .preview-iframe{width:100%;height:100%}.preview-container .preview-unavailable{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#fff;font-size:1.2rem;top:50%;left:50%;width:100%;height:100vh}.preview-container .preview-unavailable>*:not(:last-child){margin-bottom:1rem}\n", "::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: i2__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i2__namespace.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i2__namespace.KwikUITextareaComponent, selector: "kwikui-textarea", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "size", "placeholder", "properties", "validators"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUICheckboxComponent, selector: "kwikui-checkbox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "contentAlign", "focus", "invalid", "disabled", "size", "validators", "properties", "variant"], outputs: ["getKeyValue"] }, { type: i2__namespace.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: i2__namespace.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "minCalculatedFromToday", "max", "maxCalculatedFromToday", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "countryCode", "phoneMaskAfterCountryCode", "removeCountryCodeFromValue", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3__namespace.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i2__namespace.KwikUIInputRadioComponent, selector: "kwikui-input-radio", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "orientation", "items", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputSelectComponent, selector: "kwikui-input-select", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.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: i2__namespace.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i2__namespace.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "size", "prefix", "postfix", "mode", "otpLength", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIImageComponent, selector: "kwikui-image", inputs: ["id", "imageSrc", "altText", "imageType", "styles", "class", "loadingType", "html"], outputs: ["onClick"] }, { type: i4__namespace.KwikIDFingerprintComponent, selector: "kwikid-fingerprint", inputs: ["config"], outputs: ["getKeyValue", "getScanningStatus"] }, { type: i2__namespace.KwikUIInputFilesComponent, selector: "kwikui-input-files", inputs: ["id", "formControlName", "formControl", "styles", "class", "multiple", "accept", "size", "label", "link", "icon", "maxFileSize", "disabled", "showAddedFiles", "setFileTypesToForm", "validators", "files"], outputs: ["getKeyValue", "getRemovedFile"] }, { type: i2__namespace.KwikUILoaderComponent, selector: "kwikui-loader", inputs: ["id", "loaderText", "showLoader", "fullscreen", "styles", "class"] }, { type: i5__namespace.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i6__namespace.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { type: i6__namespace.TuiPreviewTitleComponent, selector: "tui-preview-title" }, { type: i3__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i3__namespace$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5__namespace.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i5__namespace.TuiPushDirective, selector: "tui-push" }, { type: i6__namespace.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }], pipes: { "kwikuiSafeHtml": i2__namespace.KwikUISafeHtmlPipe, "kwikuiSafeUrl": i2__namespace.KwikUISafeUrlPipe } });
|
|
5574
|
+
/** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormViewComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: KwikIDFormViewService }, { token: i4.TuiPushService }, { token: i3$1.TuiAlertService }, { token: i5.TuiPreviewDialogService }, { token: i3$1.TuiDialogService }, { token: i2__namespace.KwikUILoaderService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
5575
|
+
/** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", isMobileView: "isMobileView", allFormsData: "allFormsData", userConfig: "userConfig", apiCallResponse: "apiCallResponse", popupFormCallback: "popupFormCallback" }, outputs: { onClickGoBack: "onClickGoBack", onClickViewForms: "onClickViewForms", getUnsavedDataState: "getUnsavedDataState", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall", onActionShowPopupForm: "onActionShowPopupForm" }, providers: [KwikIDFormViewService], viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }, { propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, 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 !formConfig.properties?.header?.backButton?.hidden\n \"\n >\n <img\n id=\"uf-header-logo\"\n *ngIf=\"!formConfig.properties?.header?.logo?.hidden && isMobileView\"\n [src]=\"formConfig.properties?.header?.logo?.src\"\n [alt]=\"formConfig.properties?.header?.logo?.alt\"\n />\n <div id=\"uf-form-fields-header-main\">\n <div id=\"uf-form-fields-header-left\">\n <kwikui-button\n *ngIf=\"\n !formConfig.properties?.header.backButton.hidden && isMobileView\n \"\n [disabled]=\"backButton.disabled\"\n [showLoader]=\"backButton.showLoader\"\n appearance=\"mono\"\n icon=\"tuiIconArrowLeft\"\n shape=\"rounded\"\n (onClick)=\"\n handleOnClickGoBack(\n $event,\n formConfig.properties?.header.backButton.mode\n )\n \"\n ></kwikui-button>\n </div>\n <div id=\"uf-form-fields-header-right\">\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\n {{ formConfig.formsListLength }}</div\n >\n </div>\n </div>\n <hr\n *ngIf=\"\n !formConfig.properties?.header.title.hidden ||\n !formConfig.properties?.header.steps.hidden ||\n !formConfig.properties?.header.backButton.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 | kwikuiSafeHtml\"></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 <!-- Textarea -->\n <ng-container *ngSwitchCase=\"'textarea'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-textarea\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 [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-textarea>\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\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 [variant]=\"field?.properties?.variant ?? 'block'\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-checkbox>\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-input-radio\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-input-radio>\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=\"'select'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-select\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 [searchable]=\"field?.properties?.searchable\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-select>\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'\">\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 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 [size]=\"field?.properties?.size\"\n [mode]=\"field?.properties?.mode\"\n [otpLength]=\"field?.properties?.otpLength\"\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=\"'image'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-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-image>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- File Upload -->\n <ng-container *ngSwitchCase=\"'file'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <label\n [tuiLabel]=\"labelTemplate\"\n style=\"min-height: auto\"\n >\n <kwikui-input-files\n [id]=\"field?.key\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [styles]=\"field?.properties?.styles\"\n [class]=\"field?.properties?.class\"\n [multiple]=\"field?.properties?.multiple\"\n [accept]=\"field?.properties?.accept\"\n [files]=\"files[field.key]\"\n [setFileTypesToForm]=\"['NORMAL']\"\n [label]=\"field?.properties?.label\"\n [link]=\"field?.properties?.link\"\n [maxFileSize]=\"field?.properties?.maxFileSize\"\n [disabled]=\"field?.disabled\"\n [validators]=\"field?.validators\"\n (getRemovedFile)=\"handleRemovedFile($event)\"\n (getKeyValue)=\"handleGetKeyValueFile($event)\"\n ></kwikui-input-files>\n </label>\n <ng-template #labelTemplate>\n <p\n style=\"padding: 0px 0.25rem; margin-bottom: 0.25rem\"\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 </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 label=\"{{ formConfig.properties.footer.viewFormsButton.label }}\"\n [showLoader]=\"viewFormsButton.showLoader\"\n appearance=\"secondary\"\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 label=\"{{ formConfig.properties.footer.saveButton.label }}\"\n [showLoader]=\"saveFormButton.showLoader\"\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 *ngFor=\"let item of [].constructor(7); let i = index\"\n class=\"large-wrapper tui-skeleton tui-skeleton_rounded\"\n >\n </div>\n</div>\n\n<kwikui-loader\n></kwikui-loader>\n\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\n<ng-template\n #preview\n let-preview\n>\n <tui-preview\n [rotatable]=\"false\"\n [zoomable]=\"false\"\n class=\"preview-container\"\n >\n <tui-preview-title *ngIf=\"previewProperties.title !== ''\">{{\n previewProperties.title\n }}</tui-preview-title>\n\n <ng-container *ngIf=\"!previewProperties.unavailable\">\n <div\n *ngIf=\"previewProperties?.html?.before !== ''\"\n class=\"preview-html preview-html-before\"\n [style]=\"previewProperties?.html?.beforeStyles\"\n [innerHtml]=\"previewProperties.html.before | kwikuiSafeHtml\"\n ></div>\n\n <!-- Content within the iframe -->\n <div\n class=\"preview-iframe-content\"\n [style]=\"previewProperties?.iframe?.containerStyles\"\n *ngIf=\"previewProperties.iframe.src !== ''\"\n >\n <!-- Your HTML content here -->\n <iframe\n [src]=\"previewProperties.iframe.src | kwikuiSafeUrl\"\n frameborder=\"0\"\n allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen\n [title]=\"previewProperties.iframe.title\"\n class=\"preview-iframe\"\n scrolling=\"auto\"\n ></iframe>\n </div>\n\n <div\n *ngIf=\"previewProperties?.html?.after !== ''\"\n class=\"preview-html preview-html-after\"\n [style]=\"previewProperties?.html?.afterStyles\"\n [innerHtml]=\"previewProperties.html.after | kwikuiSafeHtml\"\n ></div>\n </ng-container>\n\n <ng-container *ngIf=\"previewProperties.unavailable\">\n <div class=\"preview-unavailable\">\n <tui-svg\n src=\"tuiIconFileLarge\"\n class=\"t-icon\"\n ></tui-svg>\n <div>Preview unavailable</div>\n </div>\n </ng-container>\n\n <button\n tuiIconButton\n tuiPreviewAction\n icon=\"tuiIconCloseLarge\"\n title=\"Close\"\n type=\"button\"\n (click)=\"preview.complete()\"\n ></button>\n </tui-preview>\n</ng-template>\n\n<ng-template\n #dialog\n let-dialog\n>\n <div class=\"preview-container\">\n <ng-container *ngIf=\"!previewProperties.unavailable\">\n <div\n *ngIf=\"previewProperties?.html?.before !== ''\"\n class=\"preview-html preview-html-before\"\n [style]=\"previewProperties?.html?.beforeStyles\"\n [innerHtml]=\"previewProperties.html.before | kwikuiSafeHtml\"\n ></div>\n\n <!-- Content within the iframe -->\n <div\n class=\"preview-iframe-content\"\n [style]=\"previewProperties?.iframe?.containerStyles\"\n *ngIf=\"previewProperties.iframe.src !== ''\"\n >\n <!-- Your HTML content here -->\n <iframe\n [src]=\"previewProperties.iframe.src | kwikuiSafeUrl\"\n frameborder=\"0\"\n allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen\n [title]=\"previewProperties.iframe.title\"\n class=\"preview-iframe\"\n scrolling=\"auto\"\n ></iframe>\n </div>\n\n <div\n *ngIf=\"previewProperties?.html?.after !== ''\"\n class=\"preview-html preview-html-after\"\n [style]=\"previewProperties?.html?.afterStyles\"\n [innerHtml]=\"previewProperties.html.after | kwikuiSafeHtml\"\n ></div>\n </ng-container>\n\n <ng-container *ngIf=\"previewProperties.unavailable\">\n <div class=\"preview-unavailable\">\n <tui-svg\n src=\"tuiIconFileLarge\"\n class=\"t-icon\"\n ></tui-svg>\n <div>Preview unavailable</div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n", styles: [".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}.kwikid-form.show>*:not(:last-child){margin-bottom:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.kwikid-form-buttons>*:not(:last-child){margin-right:1rem}.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;padding:1rem 1rem 0}#uf-form-fields-header-container>*:not(:last-child){margin-bottom:.5rem}#uf-form-fields-header-container #uf-header-logo{width:-moz-fit-content;width:fit-content;height:50px}#uf-form-fields-header-container #uf-form-fields-header-main{display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;width:100%}#uf-form-fields-header-container #uf-form-fields-header-main>*:not(:last-child){margin-right:.25rem}#uf-form-fields-header-container #uf-form-fields-header-main #uf-form-fields-header-right{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start}#uf-form-fields-header-container #uf-form-fields-header-main #uf-form-fields-header-right>*{margin-bottom:.5rem}#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:1rem}.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}.title>*:not(:last-child){margin-right:.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;padding:1rem}.kwikid-form-container-loading>* :not(:last-child){margin-bottom: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}.preview-container{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;align-content:center;height:calc(100vh - 3rem)}.preview-container>*:not(:last-child){margin-bottom:1rem}.preview-container .preview-html{flex-grow:1}.preview-container .preview-iframe-content{height:100%;flex-grow:1}.preview-container .preview-iframe-content .preview-iframe{width:100%;height:100%}.preview-container .preview-unavailable{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#fff;font-size:1.2rem;top:50%;left:50%;width:100%;height:100vh}.preview-container .preview-unavailable>*:not(:last-child){margin-bottom:1rem}\n", "::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: i2__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i2__namespace.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i2__namespace.KwikUITextareaComponent, selector: "kwikui-textarea", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "size", "placeholder", "properties", "validators"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUICheckboxComponent, selector: "kwikui-checkbox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "contentAlign", "focus", "invalid", "disabled", "size", "validators", "properties", "variant"], outputs: ["getKeyValue"] }, { type: i2__namespace.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: i2__namespace.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "minCalculatedFromToday", "max", "maxCalculatedFromToday", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "countryCode", "phoneMaskAfterCountryCode", "removeCountryCodeFromValue", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3__namespace.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i2__namespace.KwikUIInputRadioComponent, selector: "kwikui-input-radio", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "orientation", "items", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputSelectComponent, selector: "kwikui-input-select", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "searchable", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.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: i2__namespace.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i2__namespace.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "size", "prefix", "postfix", "mode", "otpLength", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIImageComponent, selector: "kwikui-image", inputs: ["id", "imageSrc", "altText", "imageType", "styles", "class", "loadingType", "html"], outputs: ["onClick"] }, { type: i2__namespace.KwikUIInputFilesComponent, selector: "kwikui-input-files", inputs: ["id", "formControlName", "formControl", "styles", "class", "multiple", "accept", "size", "label", "link", "icon", "maxFileSize", "disabled", "showAddedFiles", "setFileTypesToForm", "validators", "files"], outputs: ["getKeyValue", "getRemovedFile"] }, { type: i2__namespace.KwikUILoaderComponent, selector: "kwikui-loader" }, { type: i4__namespace.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i5__namespace.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { type: i5__namespace.TuiPreviewTitleComponent, selector: "tui-preview-title" }, { type: i3__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i3__namespace$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4__namespace.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4__namespace.TuiPushDirective, selector: "tui-push" }, { type: i5__namespace.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }], pipes: { "kwikuiSafeHtml": i2__namespace.KwikUISafeHtmlPipe, "kwikuiSafeUrl": i2__namespace.KwikUISafeUrlPipe } });
|
|
5539
5576
|
__decorate([
|
|
5540
5577
|
kwikidToolkit.logMethod
|
|
5541
5578
|
], KwikIDFormViewComponent.prototype, "ngOnInit", null);
|
|
@@ -5737,19 +5774,19 @@
|
|
|
5737
5774
|
providers: [KwikIDFormViewService]
|
|
5738
5775
|
}]
|
|
5739
5776
|
}], ctorParameters: function () {
|
|
5740
|
-
return [{ type: i0__namespace.ChangeDetectorRef }, { type: KwikIDFormViewService }, { type:
|
|
5777
|
+
return [{ type: i0__namespace.ChangeDetectorRef }, { type: KwikIDFormViewService }, { type: i4__namespace.TuiPushService, decorators: [{
|
|
5741
5778
|
type: i0.Inject,
|
|
5742
|
-
args: [
|
|
5779
|
+
args: [i4.TuiPushService]
|
|
5743
5780
|
}] }, { type: i3__namespace.TuiAlertService, decorators: [{
|
|
5744
5781
|
type: i0.Inject,
|
|
5745
5782
|
args: [i3$1.TuiAlertService]
|
|
5746
|
-
}] }, { type:
|
|
5783
|
+
}] }, { type: i5__namespace.TuiPreviewDialogService, decorators: [{
|
|
5747
5784
|
type: i0.Inject,
|
|
5748
|
-
args: [
|
|
5785
|
+
args: [i5.TuiPreviewDialogService]
|
|
5749
5786
|
}] }, { type: i3__namespace.TuiDialogService, decorators: [{
|
|
5750
5787
|
type: i0.Inject,
|
|
5751
5788
|
args: [i3$1.TuiDialogService]
|
|
5752
|
-
}] }];
|
|
5789
|
+
}] }, { type: i2__namespace.KwikUILoaderService }];
|
|
5753
5790
|
}, propDecorators: { preview: [{
|
|
5754
5791
|
type: i0.ViewChild,
|
|
5755
5792
|
args: ["preview"]
|
|
@@ -6027,10 +6064,11 @@
|
|
|
6027
6064
|
};
|
|
6028
6065
|
|
|
6029
6066
|
var KwikIDFormsRendererComponent = /** @class */ (function () {
|
|
6030
|
-
function KwikIDFormsRendererComponent(hostElement, cdr, previewDialogService, dialogs) {
|
|
6067
|
+
function KwikIDFormsRendererComponent(hostElement, cdr, previewDialogService, loaderService, dialogs) {
|
|
6031
6068
|
this.hostElement = hostElement;
|
|
6032
6069
|
this.cdr = cdr;
|
|
6033
6070
|
this.previewDialogService = previewDialogService;
|
|
6071
|
+
this.loaderService = loaderService;
|
|
6034
6072
|
this.dialogs = dialogs;
|
|
6035
6073
|
this.formsData = {};
|
|
6036
6074
|
this.activeFormData = {};
|
|
@@ -6039,8 +6077,6 @@
|
|
|
6039
6077
|
this.getFormData = new i0.EventEmitter();
|
|
6040
6078
|
this.onClickApiCall = new i0.EventEmitter();
|
|
6041
6079
|
this.loading = false;
|
|
6042
|
-
this.loader = false;
|
|
6043
|
-
this.loaderType = "CENTER_SCREEN";
|
|
6044
6080
|
this.showErrorNotification = false;
|
|
6045
6081
|
this.activePopupFormData = {};
|
|
6046
6082
|
this.popupFormCallback = {};
|
|
@@ -6098,9 +6134,8 @@
|
|
|
6098
6134
|
};
|
|
6099
6135
|
KwikIDFormsRendererComponent.prototype.ngOnInit = function () {
|
|
6100
6136
|
var _a, _b, _c;
|
|
6101
|
-
this.
|
|
6137
|
+
this.toggleLoader(true);
|
|
6102
6138
|
this.loading = true;
|
|
6103
|
-
this.setLoaderType();
|
|
6104
6139
|
var formStepKey = (_c = (_b = (_a = this.stepConfig) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : undefined;
|
|
6105
6140
|
if (formStepKey !== undefined &&
|
|
6106
6141
|
kwikidToolkit.checkObjectKeyExists(this.userConfig.userFormFields, formStepKey)) {
|
|
@@ -6113,7 +6148,7 @@
|
|
|
6113
6148
|
throw new Error("userFormFields doesn't have a form defined with key: " + formStepKey);
|
|
6114
6149
|
}
|
|
6115
6150
|
this.initializeForms("ON_INIT");
|
|
6116
|
-
this.
|
|
6151
|
+
this.toggleLoader(false);
|
|
6117
6152
|
};
|
|
6118
6153
|
KwikIDFormsRendererComponent.prototype.ngOnChanges = function (changes) {
|
|
6119
6154
|
var verifyChange = function (prop) {
|
|
@@ -6121,7 +6156,7 @@
|
|
|
6121
6156
|
};
|
|
6122
6157
|
if (verifyChange("userConfig")) {
|
|
6123
6158
|
this.userConfig = changes.userConfig.currentValue;
|
|
6124
|
-
this.
|
|
6159
|
+
this.toggleLoader(false);
|
|
6125
6160
|
}
|
|
6126
6161
|
if (verifyChange("formsData")) {
|
|
6127
6162
|
this.formsData = changes.formsData.currentValue;
|
|
@@ -6129,19 +6164,18 @@
|
|
|
6129
6164
|
}
|
|
6130
6165
|
if (verifyChange("apiCallResponse")) {
|
|
6131
6166
|
this.apiCallResponse = changes.apiCallResponse.currentValue;
|
|
6132
|
-
this.
|
|
6167
|
+
this.toggleLoader(false);
|
|
6133
6168
|
}
|
|
6134
6169
|
};
|
|
6135
|
-
KwikIDFormsRendererComponent.prototype.
|
|
6136
|
-
|
|
6137
|
-
|
|
6138
|
-
|
|
6139
|
-
|
|
6140
|
-
}
|
|
6170
|
+
KwikIDFormsRendererComponent.prototype.toggleLoader = function (loader) {
|
|
6171
|
+
if (loader) {
|
|
6172
|
+
this.loaderService.show({
|
|
6173
|
+
fullscreen: true,
|
|
6174
|
+
loaderText: "Please wait"
|
|
6175
|
+
});
|
|
6141
6176
|
}
|
|
6142
|
-
|
|
6143
|
-
this.
|
|
6144
|
-
this.loaderType = "CENTER_SCREEN";
|
|
6177
|
+
else {
|
|
6178
|
+
this.loaderService.hide();
|
|
6145
6179
|
}
|
|
6146
6180
|
};
|
|
6147
6181
|
KwikIDFormsRendererComponent.prototype.fetchFormConfig = function (url) {
|
|
@@ -6165,7 +6199,7 @@
|
|
|
6165
6199
|
return __generator(this, function (_e) {
|
|
6166
6200
|
switch (_e.label) {
|
|
6167
6201
|
case 0:
|
|
6168
|
-
this.
|
|
6202
|
+
this.toggleLoader(true);
|
|
6169
6203
|
this.allFormsData = this.formsData;
|
|
6170
6204
|
return [4 /*yield*/, this.updateFormsList()];
|
|
6171
6205
|
case 1:
|
|
@@ -6194,8 +6228,8 @@
|
|
|
6194
6228
|
this.showFormFields = false;
|
|
6195
6229
|
_e.label = 9;
|
|
6196
6230
|
case 9:
|
|
6197
|
-
this.loader = false;
|
|
6198
6231
|
this.loading = false;
|
|
6232
|
+
this.toggleLoader(false);
|
|
6199
6233
|
_e.label = 10;
|
|
6200
6234
|
case 10: return [2 /*return*/];
|
|
6201
6235
|
}
|
|
@@ -6642,7 +6676,7 @@
|
|
|
6642
6676
|
switch (_e.label) {
|
|
6643
6677
|
case 0:
|
|
6644
6678
|
this.showForm = false;
|
|
6645
|
-
this.
|
|
6679
|
+
this.toggleLoader(true);
|
|
6646
6680
|
this.isUnsavedData = false;
|
|
6647
6681
|
activeFormConfig = this.formsList.find(function (form) {
|
|
6648
6682
|
if (form.key === selectedForm) {
|
|
@@ -6709,6 +6743,7 @@
|
|
|
6709
6743
|
}
|
|
6710
6744
|
_e.label = 11;
|
|
6711
6745
|
case 11:
|
|
6746
|
+
formConfig = new Converter().updateFormConfigFromUserConfig(formConfig, this.userConfig);
|
|
6712
6747
|
formConfig = new Converter().updateFormConfigMiscellaneous(formConfig, {
|
|
6713
6748
|
formsListLength: this.findFormsListLength(this.formsList)
|
|
6714
6749
|
});
|
|
@@ -6722,7 +6757,7 @@
|
|
|
6722
6757
|
this.showFormFields = true;
|
|
6723
6758
|
}
|
|
6724
6759
|
this.showForm = true;
|
|
6725
|
-
this.
|
|
6760
|
+
this.toggleLoader(false);
|
|
6726
6761
|
return [2 /*return*/];
|
|
6727
6762
|
}
|
|
6728
6763
|
});
|
|
@@ -6828,7 +6863,7 @@
|
|
|
6828
6863
|
switch (eventType) {
|
|
6829
6864
|
case "FORM":
|
|
6830
6865
|
this.isUnsavedData = false;
|
|
6831
|
-
this.
|
|
6866
|
+
this.toggleLoader(true);
|
|
6832
6867
|
this.getFormData.emit((_e = {},
|
|
6833
6868
|
_e[this.activeFormConfig.key] = {
|
|
6834
6869
|
formConfig: e["formConfig"],
|
|
@@ -6982,8 +7017,8 @@
|
|
|
6982
7017
|
};
|
|
6983
7018
|
return KwikIDFormsRendererComponent;
|
|
6984
7019
|
}());
|
|
6985
|
-
/** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormsRendererComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token:
|
|
6986
|
-
/** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { stepConfig: "stepConfig", userConfig: "userConfig", formsData: "formsData", activeFormData: "activeFormData", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div ngClass=\"kwikid-renderer\">\n <div\n ngClass=\"kwikid-layout-container\"\n *ngIf=\"!loading\"\n >\n <div\n ngClass=\"kwikid-sections-container\"\n *ngIf=\"showFormSections\"\n class=\"active\"\n [class.active]=\"showFormSections\"\n [class.mobile]=\"isMobileView\"\n >\n <kwikid-forms-list\n [showFormFields]=\"this.showFormFields\"\n [activeFormConfig]=\"this.activeFormConfig\"\n [userConfig]=\"this.userConfig\"\n [formsList]=\"this.formsList\"\n [stepConfig]=\"this.stepConfig\"\n [isUnsavedData]=\"this.isUnsavedData\"\n [formsListCompleted]=\"this.formsListCompleted\"\n [isMobileView]=\"this.isMobileView\"\n (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\n (onClickSubmitForms)=\"this.handleOnClickSubmitForms($event)\"\n ></kwikid-forms-list>\n </div>\n <div\n ngClass=\"kwikid-forms-container\"\n *ngIf=\"\n this.showForm &&\n this.showFormFields &&\n this.activeFormConfig !== undefined\n \"\n [class.active]=\"showFormFields\"\n [class.mobile]=\"isMobileView\"\n [@panelInOut]\n >\n <kwikid-form-view\n *ngIf=\"this.activeFormConfig.type === 'FORM'\"\n [formConfig]=\"this.activeFormConfig\"\n [allFormsData]=\"this.allFormsData\"\n [isMobileView]=\"this.isMobileView\"\n [userConfig]=\"this.userConfig\"\n [popupFormCallback]=\"this.popupFormCallback\"\n [apiCallResponse]=\"this.apiCallResponse\"\n (getUnsavedDataState)=\"handleGetUnsavedState($event)\"\n (onClickApiCall)=\"handleOnClickApiCall($event)\"\n (onActionShowPopupForm)=\"\n this.handleOnActionShowPopupForm($event, content)\n \"\n (onClickGoBack)=\"this.handleOnClickGoBack($event)\"\n (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\n (onClickSaveForm)=\"\n this.handleOnClickSaveForm($event, 'FORM', undefined)\n \"\n ></kwikid-form-view>\n </div>\n </div>\n</div>\n\n<kwikui-loader\n
|
|
7020
|
+
/** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormsRendererComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i5.TuiPreviewDialogService }, { token: i2__namespace.KwikUILoaderService }, { token: i3$1.TuiDialogService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
7021
|
+
/** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { stepConfig: "stepConfig", userConfig: "userConfig", formsData: "formsData", activeFormData: "activeFormData", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div ngClass=\"kwikid-renderer\">\n <div\n ngClass=\"kwikid-layout-container\"\n *ngIf=\"!loading\"\n >\n <div\n ngClass=\"kwikid-sections-container\"\n *ngIf=\"showFormSections\"\n class=\"active\"\n [class.active]=\"showFormSections\"\n [class.mobile]=\"isMobileView\"\n >\n <kwikid-forms-list\n [showFormFields]=\"this.showFormFields\"\n [activeFormConfig]=\"this.activeFormConfig\"\n [userConfig]=\"this.userConfig\"\n [formsList]=\"this.formsList\"\n [stepConfig]=\"this.stepConfig\"\n [isUnsavedData]=\"this.isUnsavedData\"\n [formsListCompleted]=\"this.formsListCompleted\"\n [isMobileView]=\"this.isMobileView\"\n (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\n (onClickSubmitForms)=\"this.handleOnClickSubmitForms($event)\"\n ></kwikid-forms-list>\n </div>\n <div\n ngClass=\"kwikid-forms-container\"\n *ngIf=\"\n this.showForm &&\n this.showFormFields &&\n this.activeFormConfig !== undefined\n \"\n [class.active]=\"showFormFields\"\n [class.mobile]=\"isMobileView\"\n [@panelInOut]\n >\n <kwikid-form-view\n *ngIf=\"this.activeFormConfig.type === 'FORM'\"\n [formConfig]=\"this.activeFormConfig\"\n [allFormsData]=\"this.allFormsData\"\n [isMobileView]=\"this.isMobileView\"\n [userConfig]=\"this.userConfig\"\n [popupFormCallback]=\"this.popupFormCallback\"\n [apiCallResponse]=\"this.apiCallResponse\"\n (getUnsavedDataState)=\"handleGetUnsavedState($event)\"\n (onClickApiCall)=\"handleOnClickApiCall($event)\"\n (onActionShowPopupForm)=\"\n this.handleOnActionShowPopupForm($event, content)\n \"\n (onClickGoBack)=\"this.handleOnClickGoBack($event)\"\n (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\n (onClickSaveForm)=\"\n this.handleOnClickSaveForm($event, 'FORM', undefined)\n \"\n ></kwikid-form-view>\n </div>\n </div>\n</div>\n\n<kwikui-loader\n></kwikui-loader>\n\n<tui-push\n id=\"error-notification\"\n *tuiPush=\"showErrorNotification\"\n heading=\"Please complete the required Forms!\"\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<ng-template\n #preview\n let-preview\n>\n <tui-preview\n [rotatable]=\"false\"\n [zoomable]=\"false\"\n class=\"preview-container\"\n *ngIf=\"popupFormConfig\"\n >\n <tui-preview-title *ngIf=\"previewProperties.title !== ''\">{{\n previewProperties.title\n }}</tui-preview-title>\n\n <div class=\"kwikid-form-view-popup-container\">\n <kwikid-form-view\n [formData]=\"activePopupFormData\"\n [formConfig]=\"popupFormConfig\"\n [allFormsData]=\"allFormsData\"\n [userConfig]=\"this.userConfig\"\n [isMobileView]=\"this.isMobileView\"\n [apiCallResponse]=\"this.apiCallResponse\"\n (getSavedState)=\"handleGetUnsavedState($event)\"\n (onClickApiCall)=\"handleOnClickApiCall($event)\"\n (onClickSaveForm)=\"\n this.handleOnClickSaveForm($event, 'POPUP_FORM', undefined)\n \"\n ></kwikid-form-view>\n </div>\n\n <button\n tuiIconButton\n tuiPreviewAction\n icon=\"tuiIconCloseLarge\"\n title=\"Close\"\n type=\"button\"\n (click)=\"preview.complete()\"\n ></button>\n </tui-preview>\n</ng-template>\n<ng-template\n #content\n let-context\n>\n <div class=\"kwikid-form-view-popup-container\">\n <kwikid-form-view\n [formData]=\"activePopupFormData\"\n [formConfig]=\"popupFormConfig\"\n [allFormsData]=\"allFormsData\"\n [userConfig]=\"this.userConfig\"\n [isMobileView]=\"this.isMobileView\"\n [apiCallResponse]=\"this.apiCallResponse\"\n (getSavedState)=\"handleGetUnsavedState($event)\"\n (onClickApiCall)=\"handleOnClickApiCall($event)\"\n (onClickSaveForm)=\"\n this.handleOnClickSaveForm($event, 'POPUP_FORM', context)\n \"\n ></kwikid-form-view>\n </div>\n</ng-template>\n", styles: [":host{position:relative;height:100%}.kwikid-root{width:100%;height:100%}.kwikid-renderer{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%}.kwikid-layout-container{display:flex;flex-direction:row;padding:0 1rem;height:100%;justify-content:center;align-items:stretch;background:var(--tui-secondary-active);position:relative}.kwikid-sections-container{display:block;width:100%;max-width:400px;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);margin:auto 1rem auto 0;box-shadow:0 0 12px -8px var(--tui-secondary)}.kwikid-sections-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}.kwikid-forms-container{display:block;width:100%;max-width:50%;margin:auto 0;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);box-shadow:0 0 12px -8px var(--tui-primary)}.kwikid-forms-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}@media screen and (max-width: 600px){.kwikid-layout-container{padding:0;background:transparent}.kwikid-sections-container{position:absolute;max-width:100%;bottom:-10000px;left:-10000px;opacity:0;padding:0;visibility:hidden}.kwikid-sections-container.active{visibility:visible}.kwikid-sections-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container{display:none;max-width:100%;height:100%;padding:0;border-radius:0;box-shadow:none}.kwikid-forms-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container.active{display:block}}#error-notification{background-color:var(--tui-error-fill);color:#fff!important}#error-notification .t-top{color:#fff!important}#error-notification .t-close{color:#fff!important}.preview-container{display:flex!important;flex-grow:1!important;flex-direction:column!important;align-content:center!important;justify-content:space-between!important;align-items:stretch!important}.preview-container .preview-iframe{width:100vw;height:100vh}.preview-container .preview-unavailable{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#fff;font-size:1.2rem;top:50%;left:50%;width:100%;height:100vh}.preview-container .preview-unavailable>*:not(:last-child){margin-bottom:1rem}.kwikid-form-view-popup-container{border-radius:1rem;background:var(--tui-base-01)}\n", "::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["showFormFields", "userConfig", "stepConfig", "activeFormConfig", "formsList", "formsListCompleted", "isMobileView", "isUnsavedData"], outputs: ["onClickSetActiveForm", "onClickHideFormsList", "onClickSubmitForms"] }, { type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["formConfig", "formData", "isMobileView", "allFormsData", "userConfig", "apiCallResponse", "popupFormCallback"], outputs: ["onClickGoBack", "onClickViewForms", "getUnsavedDataState", "onClickSaveForm", "onClickApiCall", "onActionShowPopupForm"] }, { type: i2__namespace.KwikUILoaderComponent, selector: "kwikui-loader" }, { type: i4__namespace.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i5__namespace.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { type: i5__namespace.TuiPreviewTitleComponent, selector: "tui-preview-title" }, { type: i3__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i3__namespace$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4__namespace.TuiPushDirective, selector: "tui-push" }, { type: i5__namespace.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }], animations: [
|
|
6987
7022
|
animations.trigger("panelInOut", [
|
|
6988
7023
|
animations.transition(":enter", [
|
|
6989
7024
|
animations.style({ transform: "translateY(100%)" }),
|
|
@@ -6994,6 +7029,9 @@
|
|
|
6994
7029
|
])
|
|
6995
7030
|
])
|
|
6996
7031
|
] });
|
|
7032
|
+
__decorate([
|
|
7033
|
+
kwikidToolkit.logMethod
|
|
7034
|
+
], KwikIDFormsRendererComponent.prototype, "toggleLoader", null);
|
|
6997
7035
|
__decorate([
|
|
6998
7036
|
kwikidToolkit.logMethod
|
|
6999
7037
|
], KwikIDFormsRendererComponent.prototype, "fetchFormConfig", null);
|
|
@@ -7073,10 +7111,10 @@
|
|
|
7073
7111
|
]
|
|
7074
7112
|
}]
|
|
7075
7113
|
}], ctorParameters: function () {
|
|
7076
|
-
return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type:
|
|
7114
|
+
return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i5__namespace.TuiPreviewDialogService, decorators: [{
|
|
7077
7115
|
type: i0.Inject,
|
|
7078
|
-
args: [
|
|
7079
|
-
}] }, { type: i3__namespace.TuiDialogService, decorators: [{
|
|
7116
|
+
args: [i5.TuiPreviewDialogService]
|
|
7117
|
+
}] }, { type: i2__namespace.KwikUILoaderService }, { type: i3__namespace.TuiDialogService, decorators: [{
|
|
7080
7118
|
type: i0.Inject,
|
|
7081
7119
|
args: [i3$1.TuiDialogService]
|
|
7082
7120
|
}] }];
|
|
@@ -7102,7 +7140,7 @@
|
|
|
7102
7140
|
type: i0.Output
|
|
7103
7141
|
}], onClickApiCall: [{
|
|
7104
7142
|
type: i0.Output
|
|
7105
|
-
}], fetchFormConfig: [], convertFormListConfig: [], assignSequenceNoToForm: [], findCompletedFormsList: [], markFormInFormsListAsCompleted: [], markFormInFormsListAsDisabled: [], filterAllFormsData: [], checkIfFormsStatusCompleted: [], findActiveFormConfig: [], updateFormsList: [], showPreview: [], formHide: [], formShow: [], findFormsListLength: [], handleOnClickSetActiveForm: [], handleGetUnsavedState: [], handleOnActionShowPopupForm: [], handleOnClickSaveForm: [], handleOnClickGoBack: [], handleOnClickSubmitForms: [] } });
|
|
7143
|
+
}], toggleLoader: [], fetchFormConfig: [], convertFormListConfig: [], assignSequenceNoToForm: [], findCompletedFormsList: [], markFormInFormsListAsCompleted: [], markFormInFormsListAsDisabled: [], filterAllFormsData: [], checkIfFormsStatusCompleted: [], findActiveFormConfig: [], updateFormsList: [], showPreview: [], formHide: [], formShow: [], findFormsListLength: [], handleOnClickSetActiveForm: [], handleGetUnsavedState: [], handleOnActionShowPopupForm: [], handleOnClickSaveForm: [], handleOnClickGoBack: [], handleOnClickSubmitForms: [] } });
|
|
7106
7144
|
|
|
7107
7145
|
var KwikIDBuilderFormEditorModule = /** @class */ (function () {
|
|
7108
7146
|
function KwikIDBuilderFormEditorModule() {
|
|
@@ -7224,29 +7262,27 @@
|
|
|
7224
7262
|
i3.FormsModule,
|
|
7225
7263
|
i3.ReactiveFormsModule,
|
|
7226
7264
|
i3$1.TuiLabelModule,
|
|
7227
|
-
|
|
7265
|
+
i4.TuiPushModule,
|
|
7228
7266
|
i3$1.TuiSvgModule,
|
|
7229
|
-
|
|
7267
|
+
i5.TuiPreviewModule,
|
|
7230
7268
|
i3$1.TuiButtonModule,
|
|
7231
|
-
|
|
7269
|
+
i5.TuiPreviewActionModule,
|
|
7232
7270
|
i3$1.TuiDialogModule,
|
|
7233
7271
|
i2.KwikUIPipeModule,
|
|
7234
|
-
i2.KwikUIModule,
|
|
7235
|
-
i4.KwikIDFingerprintModule], exports: [KwikIDFormViewComponent] });
|
|
7272
|
+
i2.KwikUIModule], exports: [KwikIDFormViewComponent] });
|
|
7236
7273
|
/** @nocollapse */ KwikIDFormViewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormViewModule, imports: [[
|
|
7237
7274
|
i3$2.CommonModule,
|
|
7238
7275
|
i3.FormsModule,
|
|
7239
7276
|
i3.ReactiveFormsModule,
|
|
7240
7277
|
i3$1.TuiLabelModule,
|
|
7241
|
-
|
|
7278
|
+
i4.TuiPushModule,
|
|
7242
7279
|
i3$1.TuiSvgModule,
|
|
7243
|
-
|
|
7280
|
+
i5.TuiPreviewModule,
|
|
7244
7281
|
i3$1.TuiButtonModule,
|
|
7245
|
-
|
|
7282
|
+
i5.TuiPreviewActionModule,
|
|
7246
7283
|
i3$1.TuiDialogModule,
|
|
7247
7284
|
i2.KwikUIPipeModule,
|
|
7248
|
-
i2.KwikUIModule
|
|
7249
|
-
i4.KwikIDFingerprintModule
|
|
7285
|
+
i2.KwikUIModule
|
|
7250
7286
|
]] });
|
|
7251
7287
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormViewModule, decorators: [{
|
|
7252
7288
|
type: i0.NgModule,
|
|
@@ -7257,15 +7293,14 @@
|
|
|
7257
7293
|
i3.FormsModule,
|
|
7258
7294
|
i3.ReactiveFormsModule,
|
|
7259
7295
|
i3$1.TuiLabelModule,
|
|
7260
|
-
|
|
7296
|
+
i4.TuiPushModule,
|
|
7261
7297
|
i3$1.TuiSvgModule,
|
|
7262
|
-
|
|
7298
|
+
i5.TuiPreviewModule,
|
|
7263
7299
|
i3$1.TuiButtonModule,
|
|
7264
|
-
|
|
7300
|
+
i5.TuiPreviewActionModule,
|
|
7265
7301
|
i3$1.TuiDialogModule,
|
|
7266
7302
|
i2.KwikUIPipeModule,
|
|
7267
|
-
i2.KwikUIModule
|
|
7268
|
-
i4.KwikIDFingerprintModule
|
|
7303
|
+
i2.KwikUIModule
|
|
7269
7304
|
],
|
|
7270
7305
|
exports: [KwikIDFormViewComponent]
|
|
7271
7306
|
}]
|
|
@@ -7319,11 +7354,11 @@
|
|
|
7319
7354
|
KwikIDFormsListModule,
|
|
7320
7355
|
i2.KwikUIModule,
|
|
7321
7356
|
i3$1.TuiLoaderModule,
|
|
7322
|
-
|
|
7323
|
-
|
|
7324
|
-
|
|
7357
|
+
i4.TuiPushModule,
|
|
7358
|
+
i5.TuiPreviewActionModule,
|
|
7359
|
+
i5.TuiPreviewModule,
|
|
7325
7360
|
i3$1.TuiButtonModule,
|
|
7326
|
-
|
|
7361
|
+
i5.TuiPreviewActionModule,
|
|
7327
7362
|
i3$1.TuiSvgModule], exports: [KwikIDFormsRendererComponent] });
|
|
7328
7363
|
/** @nocollapse */ KwikIDFormRendererModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormRendererModule, providers: [], imports: [[
|
|
7329
7364
|
i3$2.CommonModule,
|
|
@@ -7332,11 +7367,11 @@
|
|
|
7332
7367
|
KwikIDFormsListModule,
|
|
7333
7368
|
i2.KwikUIModule,
|
|
7334
7369
|
i3$1.TuiLoaderModule,
|
|
7335
|
-
|
|
7336
|
-
|
|
7337
|
-
|
|
7370
|
+
i4.TuiPushModule,
|
|
7371
|
+
i5.TuiPreviewActionModule,
|
|
7372
|
+
i5.TuiPreviewModule,
|
|
7338
7373
|
i3$1.TuiButtonModule,
|
|
7339
|
-
|
|
7374
|
+
i5.TuiPreviewActionModule,
|
|
7340
7375
|
i3$1.TuiSvgModule
|
|
7341
7376
|
]] });
|
|
7342
7377
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormRendererModule, decorators: [{
|
|
@@ -7350,11 +7385,11 @@
|
|
|
7350
7385
|
KwikIDFormsListModule,
|
|
7351
7386
|
i2.KwikUIModule,
|
|
7352
7387
|
i3$1.TuiLoaderModule,
|
|
7353
|
-
|
|
7354
|
-
|
|
7355
|
-
|
|
7388
|
+
i4.TuiPushModule,
|
|
7389
|
+
i5.TuiPreviewActionModule,
|
|
7390
|
+
i5.TuiPreviewModule,
|
|
7356
7391
|
i3$1.TuiButtonModule,
|
|
7357
|
-
|
|
7392
|
+
i5.TuiPreviewActionModule,
|
|
7358
7393
|
i3$1.TuiSvgModule
|
|
7359
7394
|
],
|
|
7360
7395
|
providers: [],
|