kwikid-forms
Version:
KwikID's JSON Configuration based Forms Renderer and Builder
1,117 lines (1,110 loc) • 525 kB
JavaScript
import { __decorate, __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ChangeDetectionStrategy, Pipe, Inject, ViewChild, ViewChildren, HostListener, NgModule } from '@angular/core';
import { checkObjectKeyExists, setValueToObjectPath, isEmptyValue, getObjectDeepCopy, logMethod, isNotEmptyValue, setMissingKeyValue, isObject, mergeObjects, checkObjectPathExists, getObjectValueFromPath, getObjectFromLocalStorage, encryptWithAES, decryptWithAES, Rule, Condition, Action, Source, hasWhitespacesOnly, PATTERNS, RuleEngine, mergeObjectsDeep, ESourceKey, isNotEmptyString, removeKeyFromObjectPath, replaceString, isUndefined, isNull, isEmptyString } from 'kwikid-toolkit';
import * as i3 from 'kwikui';
import { KwikUIModule, KwikUIPipeModule, KwikUIInputEmailModule } from 'kwikui';
import * as i3$1 from '@angular/forms';
import { FormGroup, FormControl, Validators, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i5 from '@taiga-ui/core';
import { TuiNotification, TuiAlertService, TuiDialogService, TuiSvgModule, TuiLabelModule, TuiButtonModule, TuiDialogModule, TuiLoaderModule } from '@taiga-ui/core';
import * as i3$2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { trigger, transition, style, animate } from '@angular/animations';
import _ from 'lodash';
import { TuiDay, TuiTime } from '@taiga-ui/cdk';
import * as i7 from '@taiga-ui/addon-preview';
import { TuiPreviewDialogService, TuiPreviewModule, TuiPreviewActionModule } from '@taiga-ui/addon-preview';
import * as i6 from '@taiga-ui/kit';
import { TuiPushService, TuiPushModule } from '@taiga-ui/kit';
import { pairwise } from 'rxjs/operators';
import { v4 } from 'uuid';
import axios from 'axios';
import { Observable } from 'rxjs';
import * as i4 from 'kwikid-camera';
import { KwikIDCameraModule, KwikUIInputCameraModule } from 'kwikid-camera';
import * as i1 from '@angular/platform-browser';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { HttpClientModule } from '@angular/common/http';
function convertFormListConfig(formsList) {
const convertFormListConfigTypeForm = (form) => {
if (checkObjectKeyExists(form, "formContent")) {
if (checkObjectKeyExists(form.formContent, "url")) {
form = setValueToObjectPath(form, "props.url", form.formContent.url);
delete form.formContent.url;
}
if (checkObjectKeyExists(form.formContent, "path")) {
form = setValueToObjectPath(form, "props.path", form.formContent.path);
delete form.formContent.path;
}
}
if (isEmptyValue(form.formContent)) {
delete form.formContent;
}
if (checkObjectKeyExists(form, "title")) {
form = setValueToObjectPath(form, "props.title", form.title);
delete form.title;
}
if (!checkObjectKeyExists(form, "hidden")) {
form.hidden = false;
}
if (!checkObjectKeyExists(form, "disabled")) {
form.disabled = false;
}
if (!checkObjectKeyExists(form, "required")) {
form.required = true;
}
if (!checkObjectKeyExists(form, "dependentOn")) {
form.dependentOn = [];
}
return form;
};
const convertFormListConfigTypeHtml = (form) => {
if (form.type === "html") {
form.type = "HTML";
}
if (checkObjectKeyExists(form, "htmlContent")) {
if (!checkObjectKeyExists(form, "props")) {
form.props = {
htmlContent: form.htmlContent
};
}
delete form.htmlContent;
}
else if (!checkObjectKeyExists(form, "props")) {
form.props = {
htmlContent: ""
};
}
if (checkObjectKeyExists(form, "title")) {
form = setValueToObjectPath(form, "props.title", form.title);
delete form.title;
}
if (!checkObjectKeyExists(form, "hidden")) {
form.hidden = false;
}
return form;
};
return formsList.map((form) => {
if (!checkObjectKeyExists(form, "type")) {
form.type = "FORM";
}
if (checkObjectKeyExists(form, "type")) {
if (form.type === "FORM") {
form = convertFormListConfigTypeForm(form);
}
if (form.type === "HTML" || form.type === "html") {
form = convertFormListConfigTypeHtml(form);
}
}
return form;
});
}
class KwikIDBuilderFormsListComponent {
constructor() {
this.activeFormConfig = {};
this.formsList = [];
this.onClickSetActiveForm = new EventEmitter();
this.getFormsList = new EventEmitter();
this.selectedForm = "";
this.addForm = new FormGroup({
key: new FormControl("", Validators.required),
title: new FormControl("", Validators.required)
});
}
setSelectedForm(selectedForm) {
this.selectedForm = selectedForm;
}
ngOnChanges(changes) {
const verifyChange = (key) => {
return checkObjectKeyExists(changes, key) && !changes[key].firstChange;
};
if (verifyChange("activeFormConfig")) {
this.activeFormConfig = changes.activeFormConfig.currentValue;
}
if (verifyChange("formsList")) {
this.formsList = changes.formsList.currentValue;
}
}
handleOnClickSetActiveForm(selectedForm) {
if (this.selectedForm !== selectedForm) {
this.selectedForm = selectedForm;
this.onClickSetActiveForm.emit(selectedForm);
}
}
handleOnClickAddForm() {
if (this.addForm.invalid) {
alert("Please fill all the fields");
}
else {
if (isEmptyValue(this.activeFormConfig)) {
this.activeFormConfig = {
key: this.addForm.value.key.toUpperCase(),
title: this.addForm.value.title,
type: "FORM"
};
}
const newForm = {
key: this.addForm.value.key.toUpperCase(),
title: this.addForm.value.title,
type: "FORM",
fields: [],
required: true
};
this.formsList.push(newForm);
this.formsList = getObjectDeepCopy(convertFormListConfig(this.formsList));
this.addForm.reset();
this.getFormsList.emit({ formsList: this.formsList });
}
}
}
/** @nocollapse */ KwikIDBuilderFormsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDBuilderFormsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikIDBuilderFormsListComponent.ɵcmp = i0.ɵɵ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, 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;appearance:auto!important}input[type=checkbox]{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: i3.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i5.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "kwikuiSafeHtml": i3.KwikUISafeHtmlPipe } });
__decorate([
logMethod
], KwikIDBuilderFormsListComponent.prototype, "ngOnChanges", null);
__decorate([
logMethod
], KwikIDBuilderFormsListComponent.prototype, "handleOnClickSetActiveForm", null);
__decorate([
logMethod
], KwikIDBuilderFormsListComponent.prototype, "handleOnClickAddForm", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDBuilderFormsListComponent, decorators: [{
type: Component,
args: [{
selector: "kwikid-builder-forms-list",
templateUrl: "./builder-forms-list.component.html",
styleUrls: ["../shared.scss", "./builder-forms-list.component.scss"]
}]
}], propDecorators: { activeFormConfig: [{
type: Input
}], formsList: [{
type: Input
}], onClickSetActiveForm: [{
type: Output
}], getFormsList: [{
type: Output
}], ngOnChanges: [], handleOnClickSetActiveForm: [], handleOnClickAddForm: [] } });
var EFieldType;
(function (EFieldType) {
EFieldType["HTML"] = "html";
EFieldType["TITLE"] = "title";
EFieldType["TEXT"] = "text";
EFieldType["BUTTON"] = "button";
EFieldType["TEXTAREA"] = "textarea";
EFieldType["CHECKBOX"] = "checkbox";
EFieldType["NUMBER"] = "number";
EFieldType["DATE"] = "date";
EFieldType["TIME"] = "time";
EFieldType["IMAGE"] = "image";
EFieldType["PREVIEW_IMAGE"] = "preview-image";
EFieldType["PHONE"] = "phone";
EFieldType["RADIO"] = "radio";
EFieldType["SELECT"] = "select";
EFieldType["DROPDOWN_WITH_SEARCH"] = "dropdown-with-search";
EFieldType["API_CALL"] = "api-call";
EFieldType["API"] = "api";
EFieldType["OTP"] = "otp";
EFieldType["AADHAAR_NUMBER"] = "aadhaar-number";
EFieldType["SLIDER"] = "slider";
EFieldType["FILE"] = "file";
EFieldType["PASSWORD"] = "password";
EFieldType["EMAIL"] = "email";
EFieldType["CAPTURE"] = "capture";
EFieldType["RECORD"] = "record";
EFieldType["STAR_RATING"] = "star-rating";
EFieldType["LIVE_LOCATION"] = "live-location";
EFieldType["DATA_HOLDER"] = "data-holder";
EFieldType["CURRENCY"] = "currency";
})(EFieldType || (EFieldType = {}));
const FIELD_PROPERTIES = {
button: {
appearance: "primary",
class: "",
containerStyles: "",
icon: "",
iconRight: "",
loading: false,
shape: null,
size: "m",
styles: "margin: 0rem auto; width: 100%;"
},
text: {
case: "default",
containerStyles: "",
postfix: "",
prefix: ""
},
currency: {
containerStyles: "",
postfix: "",
prefix: "",
currencyType: "INR"
},
email: {
case: "default",
containerStyles: "",
postfix: "",
prefix: ""
},
password: {
containerStyles: "",
hintContent: "",
postfix: "",
prefix: ""
},
"aadhaar-number": {
containerStyles: "",
mask: "# # # # - # # # # - # # # #"
},
number: {
containerStyles: "",
decimal: "never",
max: Infinity,
min: -Infinity,
placeholder: "",
postfix: "",
precision: 2,
prefix: ""
},
phone: {
containerStyles: "",
countryCode: "+91",
phoneMaskAfterCountryCode: "####-######",
placeholder: "",
postfix: "",
prefix: "",
removeCountryCodeFromValue: true
},
html: {
containerStyles: ""
},
checkbox: {
containerStyles: ""
},
textarea: {
containerStyles: ""
},
title: {
containerStyles: ""
},
image: {
after: "",
altText: "",
before: "",
class: "",
containerStyles: "",
html: {},
imageType: "url",
loadingType: "auto",
styles: ""
},
date: {
containerStyles: "",
maxCalculatedFromToday: {
year: 0,
month: 0,
day: 0
},
minCalculatedFromToday: {
year: new Date().getFullYear(),
month: new Date().getMonth(),
day: new Date().getDate()
},
placeholder: "",
postfix: "",
prefix: ""
},
time: {
containerStyles: "",
items: undefined,
mode: "HH:MM",
placeholder: "",
postfix: "",
prefix: ""
},
radio: {
containerStyles: "",
orientation: "vertical",
size: "m"
},
slider: {
containerStyles: "",
max: 100,
min: 0,
postfix: "",
prefix: "",
quantum: 1,
size: "l",
steps: 0
},
api: {
containerStyles: "",
shape: null,
size: "m"
},
otp: {
containerStyles: "",
mode: "multiple",
otpLength: 4,
placeholder: "",
size: "m"
},
file: {
accept: "",
containerStyles: "",
label: "drop a file or",
link: "click to upload",
maxFileSize: null,
multiple: false,
size: "m",
variant: "native",
uploadFileToServer: true
},
capture: {
buttonText: "Camera",
containerStyles: "",
icon: "tuiIconCameraLarge",
isCroppedImage: false,
isMaskedImage: false,
showMediaFiles: true,
uploadFileToServer: false,
features: {
ocr: {
isEnabled: false,
documentType: "",
documentSide: "",
isOcrFromServer: false
},
facematch: {
isEnabled: false,
isFacematchFromServer: false,
sources: []
},
liveliness: {
isEnabled: false,
isLivelinessFromServer: false
},
watermark: {
isEnabled: false,
isWatermarkFromServer: false,
sources: []
}
},
cameraConfig: {
header: {
title: "Camera",
isBack: false,
isExpand: true,
isClose: true
},
footer: {
isUpload: true,
isFlip: false,
isSwitch: true
},
others: {
isFrontCamera: false,
flipHorizontal: false,
mask: {
shape: ""
},
preview: {
show: false,
header: {
isBack: false,
isClose: false
}
}
}
}
},
record: {
containerStyles: "",
buttonText: "Record",
icon: "tuiIconVideoLarge",
showMediaFiles: true,
uploadFileToServer: false,
cameraConfig: {
header: {
title: "Record",
isBack: false,
isExpand: true,
isClose: true
},
footer: {
isUpload: true,
isFlip: false,
isSwitch: true
},
others: {
isFrontCamera: false,
flipHorizontal: false,
minRecordingTimeInSeconds: 0,
maxRecordingTimeInSeconds: 30,
preview: {
show: false,
header: {
isBack: false,
isClose: false
}
}
}
}
},
select: {
containerStyles: "",
searchable: true
},
"dropdown-with-search": {
searchable: true,
containerStyles: ""
},
"star-rating": {
color: "var(--tui-primary)",
containerStyles: "",
icon: `<svg xml:space="preserve" width="48px" viewBox="0 0 48 48" version="1.1" id="_x3C_Layer_x3E_" height="48px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g id="star_x2C__favorite"><path id="XMLID_2_" fill="transparent" stroke-width="3" stroke="var(--tui-rating-color)" d="M 23.3 38.6 l -10.9 5.7 c -1.2 0.6 -2.5 -0.4 -2.3 -1.6 l 2.1 -12.1 c 0.1 -0.5 -0.1 -1 -0.4 -1.4 l -8.8 -8.6 c -0.9 -0.9 -0.4 -2.5 0.9 -2.6 l 12.2 -1.8 c 0.5 -0.1 1 -0.4 1.2 -0.8 l 5.5 -11 c 0.6 -1.2 2.2 -1.2 2.8 0 l 5.5 11 c 0.2 0.5 0.7 0.8 1.2 0.8 l 12.2 1.8 c 1.3 0.2 1.8 1.8 0.9 2.6 l -8.8 8.6 c -0.4 0.4 -0.5 0.9 -0.4 1.4 l 2.1 12.1 c 0.2 1.3 -1.1 2.2 -2.3 1.6 l -10.9 -5.7 C 24.3 38.4 23.7 38.4 23.3 38.6 z"></path></g></svg>`,
iconMarked: `<svg xml:space="preserve" width="48px" viewBox="0 0 48 48" version="1.1" id="_x3C_Layer_x3E_" height="48px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g id="star_x2C__favorite"><path id="XMLID_2_" fill="var(--tui-rating-color)" stroke="var(--tui-rating-color)" stroke-width="3" d="M 23.3 38.6 l -10.9 5.7 c -1.2 0.6 -2.5 -0.4 -2.3 -1.6 l 2.1 -12.1 c 0.1 -0.5 -0.1 -1 -0.4 -1.4 l -8.8 -8.6 c -0.9 -0.9 -0.4 -2.5 0.9 -2.6 l 12.2 -1.8 c 0.5 -0.1 1 -0.4 1.2 -0.8 l 5.5 -11 c 0.6 -1.2 2.2 -1.2 2.8 0 l 5.5 11 c 0.2 0.5 0.7 0.8 1.2 0.8 l 12.2 1.8 c 1.3 0.2 1.8 1.8 0.9 2.6 l -8.8 8.6 c -0.4 0.4 -0.5 0.9 -0.4 1.4 l 2.1 12.1 c 0.2 1.3 -1.1 2.2 -2.3 1.6 l -10.9 -5.7 C 24.3 38.4 23.7 38.4 23.3 38.6 z"></path></g></svg>`,
max: 10,
min: 0,
placeholder: "",
size: "m"
},
"live-location": {
isGetLocationFromLatLong: true,
isShowLatLongCaptureTimestamp: true,
color: "var(--tui-primary)",
containerStyles: "",
placeholder: "",
size: "m",
styles: "",
shape: "curved"
}
};
const getFormFieldByKey = (fields, key) => {
return fields.find((field) => field.key === key);
};
const getFormFieldIndexByKey = (fields, key) => {
const fieldIndex = fields.findIndex((_) => {
return key === _.key;
});
return fieldIndex;
};
const highlightFormFieldError = (field, error) => {
field.invalid = error;
field.focus = error;
return field;
};
const appendHtmlMessage = (field, message) => {
if (checkObjectKeyExists(field, "html")) {
if (isNotEmptyValue(field.html)) {
const html = field.html.replace("{{message}}", message.message);
field.html = html;
}
}
return field;
};
const appendFormFieldMessage = (field, message) => {
const hasDuplicateMessage = (messages, message) => {
return messages.some((fieldMessage) => {
return (fieldMessage.type === message.type &&
fieldMessage.message === message.message);
});
};
field.messages = [];
if (checkObjectKeyExists(field, "messages")) {
if (!hasDuplicateMessage(field.messages, message)) {
field.messages.push({
type: message.type,
message: message.message
});
}
}
else {
field.messages = [{ type: message.type, message: message.message }];
}
return field;
};
const filterDuplicatesMediaFiles = (array) => {
const uniqueFiles = new Set();
return array.filter((mediaFile) => {
if (!uniqueFiles.has(mediaFile)) {
uniqueFiles.add(mediaFile);
return true;
}
return false;
});
};
const filterDuplicatesFiles = (array) => {
const uniqueFiles = new Set();
return array.filter((file) => {
const fileKey = `${file.name}-${file.size}`;
if (!uniqueFiles.has(fileKey)) {
uniqueFiles.add(fileKey);
return true;
}
return false;
});
};
const removeFormFieldMessage = (field, message) => {
if (isNotEmptyValue(field === null || field === void 0 ? void 0 : field.messages)) {
field.messages = field.messages.filter((fieldMessage) => {
return fieldMessage.type !== message.type;
});
}
else {
field.messages = [];
}
return field;
};
const setApiTimerMessage = (field, timer = {}) => {
if (checkObjectKeyExists(field, "api")) {
field.api.timer = timer;
}
else {
setMissingKeyValue(field, "api", { timer });
}
return field;
};
function showFormFieldError(fields, errors, key, error) {
const fieldIndex = fields.findIndex((field) => {
return field.key === key;
});
const setErrorMessages = (field, errors) => {
const getErrorMessage = (fieldLabel, errorType) => {
let errorMessage = "";
switch (errorType) {
case "required":
errorMessage = `${fieldLabel} is required!`;
break;
case "email":
errorMessage = `${fieldLabel} has wrong email format!`;
break;
case "min":
errorMessage = `${fieldLabel} has wrong value! Minimum value: ${field.validators.min}`;
break;
case "minlength":
errorMessage = `${fieldLabel} has wrong length! Required minimum length: ${field.validators.minLength}`;
break;
case "max":
errorMessage = `${fieldLabel} has wrong value! Maximum value: ${field.validators.maxLength}`;
break;
case "maxlength":
errorMessage = `${fieldLabel} has wrong length! Required maximum length: ${field.validators.maxLength}`;
break;
case "areEqual":
errorMessage = `${fieldLabel} must be equal!`;
break;
case "pattern":
errorMessage = `${fieldLabel} is in incorrect format!`;
break;
case "onlyWhitespaces":
errorMessage = `${fieldLabel} can't contain only empty spaces!`;
break;
default:
errorMessage = `${fieldLabel}: ${errorType}`;
break;
}
return errorMessage;
};
Object.keys(errors).forEach((error) => {
field = appendFormFieldMessage(field, {
type: "error",
message: getErrorMessage(field.label, error)
});
});
return field;
};
if (error) {
fields[fieldIndex] = setErrorMessages(fields[fieldIndex], errors);
}
else {
fields[fieldIndex].messages = [];
}
fields[fieldIndex] = highlightFormFieldError(fields[fieldIndex], error);
return fields;
}
const convertFormFieldTypeDateToKwikUIFormat = (date) => {
const splitDate = date.split("-");
const tuiDay = new TuiDay(Number(splitDate[2]), // Year
Number(splitDate[1]) - 1, // Month, Why '-1' => Because Taiga-UI Required It, So...
Number(splitDate[0]) // Day
);
return tuiDay;
};
const convertFormFieldTypeTimeToKwikUIFormat = (time) => {
const timeParts = time.split(/[.:]/);
let hours = 0;
let minutes = 0;
let seconds = 0;
let milliseconds = 0;
if (timeParts.length >= 2) {
hours = parseInt(timeParts[0], 10);
minutes = parseInt(timeParts[1], 10);
if (timeParts.length >= 3) {
seconds = parseInt(timeParts[2], 10);
if (timeParts.length === 4) {
milliseconds = parseInt(timeParts[3], 10);
}
}
}
const tuiTime = new TuiTime(hours, minutes, seconds, milliseconds);
return tuiTime;
};
const convertFormFieldTypeDateToStandardFormat = (date) => {
const { day, month, year } = date;
const formattedDate = `${day.toString().padStart(2, "0")}-${(month + 1)
.toString()
.padStart(2, "0")}-${year}`;
return formattedDate;
};
const convertFormFieldTypeTimeToStandardFormat = (time) => {
const hour = time.hours;
const { seconds, minutes } = time;
const milliseconds = time.ms;
const formattedDate = `${hour.toString().padStart(2, "0")}:${minutes
.toString()
.padStart(2, "0")}${seconds > 0 ? `:${seconds.toString().padStart(2, "0")}` : ""}${seconds > 0 && milliseconds > 0
? `:${milliseconds.toString().padStart(2, "0")}`
: ""}`;
return formattedDate;
};
const convertFormFieldValueToStandardFormat = (field, value) => {
let convertedValue = value;
if (isNotEmptyValue(value)) {
switch (field.type) {
case EFieldType.DATE:
if (typeof value !== "string") {
convertedValue = convertFormFieldTypeDateToStandardFormat(value);
}
break;
case EFieldType.TIME:
if (typeof value !== "string") {
convertedValue = convertFormFieldTypeTimeToStandardFormat(value);
}
break;
case EFieldType.RADIO:
convertedValue = value.label;
break;
case EFieldType.SELECT:
if (Array.isArray(field.options)) {
const foundItem = field.options.find((item) => {
return isObject(item) && item.title === value;
});
if (foundItem) {
convertedValue = foundItem.value;
}
}
break;
case EFieldType.PHONE: {
const phoneField = field;
if (phoneField.properties.removeCountryCodeFromValue) {
convertedValue = value
.toString()
.replace(phoneField.properties.countryCode, "");
}
break;
}
case EFieldType.CAPTURE:
if (Array.isArray(value) && isNotEmptyValue(value[0])) {
convertedValue = value[0];
}
else if (typeof value !== "string" ||
(typeof value === "string" && isEmptyValue(value))) {
convertedValue = "";
}
break;
case EFieldType.RECORD:
if (Array.isArray(value) && isNotEmptyValue(value[0])) {
convertedValue = value[0];
}
else if (typeof value !== "string" ||
(typeof value === "string" && isEmptyValue(value))) {
convertedValue = "";
}
break;
default:
break;
}
}
else {
convertedValue = "";
}
return convertedValue;
};
const convertFormFieldEmptyValueToKwikUIFormat = (field) => {
const fieldType = field.type;
let value;
switch (fieldType) {
case EFieldType.CHECKBOX:
value = false;
break;
case EFieldType.NUMBER:
value = null;
break;
case EFieldType.DATE:
value = null;
break;
case EFieldType.FILE:
value = [];
break;
case EFieldType.CAPTURE:
value = [];
break;
case EFieldType.RECORD:
value = [];
break;
case EFieldType.SELECT:
value = null;
break;
case EFieldType.DROPDOWN_WITH_SEARCH:
value = null;
break;
default:
value = "";
break;
}
return value;
};
const convertFormFieldValueToKwikUIFormat = (field, value) => {
let convertedValue = value;
if (isNotEmptyValue(value)) {
switch (field.type) {
case EFieldType.RADIO:
if (!checkObjectKeyExists(value, "label")) {
const radioField = field;
const convertedLabelValue = radioField.options.find((item) => {
return item.label === value;
});
convertedValue = convertedLabelValue;
}
break;
case EFieldType.SELECT:
if (Array.isArray(field.options)) {
const foundItem = field.options.find((item) => {
return isObject(item) && item.value === value;
});
if (foundItem) {
convertedValue = foundItem.title;
}
}
break;
case EFieldType.DATE:
convertedValue = convertFormFieldTypeDateToKwikUIFormat(value);
break;
case EFieldType.TIME:
convertedValue = convertFormFieldTypeTimeToKwikUIFormat(value);
break;
case EFieldType.FILE:
convertedValue = value;
break;
case EFieldType.CAPTURE:
if (Array.isArray(value)) {
convertedValue = value.filter((item) => {
return (typeof item === "string" ||
(isObject(item) && checkObjectKeyExists(item, "image")));
});
}
else if (typeof value === "string") {
convertedValue = [value];
}
else if (isObject(value) && checkObjectKeyExists(value, "image")) {
convertedValue = [value];
}
else {
convertedValue = [];
}
break;
case EFieldType.RECORD:
if (Array.isArray(value)) {
convertedValue = value.filter((item) => {
return (typeof item === "string" ||
(isObject(item) && checkObjectKeyExists(item, "video")));
});
}
else if (typeof value === "string") {
convertedValue = [value];
}
else if (isObject(value) && checkObjectKeyExists(value, "video")) {
convertedValue = [value];
}
else {
convertedValue = [];
}
break;
default:
break;
}
}
else {
convertedValue = convertFormFieldEmptyValueToKwikUIFormat(field);
}
return convertedValue;
};
const getFormFields = (formConfig) => {
let fields = [];
if (checkObjectKeyExists(formConfig, "multiForm")) {
fields = formConfig.multiForm.fields;
}
else if (checkObjectKeyExists(formConfig, "fields")) {
fields = formConfig.fields;
}
return fields;
};
const setMissingFieldKeyValue = (field, key, value) => {
if (!checkObjectKeyExists(field, key)) {
field[key] = value;
}
return field;
};
const setFieldKeyValue = (field, key, value) => {
field[key] = value;
return field;
};
const setFieldKeyHidden = (field) => {
return setMissingFieldKeyValue(field, "hidden", false);
};
const setFieldKeyDisabled = (field) => {
return setMissingFieldKeyValue(field, "disabled", true);
};
const setFieldAsFormElement = (field, value) => {
return setFieldKeyValue(field, "isFormElement", value);
};
const getMinDate = (field) => {
if (checkObjectKeyExists(field, "min")) {
/**
* This is to handler old version of config.
* Please don't add "min" at field level, add it insider field.properties only.
*/
return convertFormFieldTypeDateToKwikUIFormat(field.min);
}
return {};
};
const getMaxDate = (field) => {
if (checkObjectKeyExists(field, "max")) {
/**
* This is to handler old version of config.
* Please don't add "max" at field level, add it insider field.properties only.
*/
return convertFormFieldTypeDateToKwikUIFormat(field.max);
}
return {};
};
const updateLanguage = (object, language) => {
if (isObject(object)) {
if (language && checkObjectKeyExists(object, language)) {
object = object[language];
}
else {
object = object.en;
}
}
return object;
};
const getLanguage = () => {
var _a, _b, _c, _d, _e, _f;
return ((_f = (_e = (_d = (_c = (_b = (_a = localStorage.getItem("lng")) !== null && _a !== void 0 ? _a : localStorage.getItem("lang")) !== null && _b !== void 0 ? _b : localStorage.getItem("Lang")) !== null && _c !== void 0 ? _c : localStorage.getItem("language")) !== null && _d !== void 0 ? _d : localStorage.getItem("currentLang")) !== null && _e !== void 0 ? _e : localStorage.getItem("selectedLang")) !== null && _f !== void 0 ? _f : "en");
};
class Converter {
updateFormConfigMiscellaneous(formConfig, args) {
if (checkObjectKeyExists(args, "formsListLength")) {
formConfig = setValueToObjectPath(formConfig, "formsListLength", args.formsListLength);
}
return formConfig;
}
updateFormConfigFromUserConfig(formConfig, userConfig) {
if (isNotEmptyValue(userConfig)) {
if (checkObjectKeyExists(userConfig, "theme")) {
if (checkObjectKeyExists(userConfig.theme, "clientLogo")) {
setValueToObjectPath(formConfig, "properties.header.logo.src", userConfig.theme.clientLogo);
}
}
}
return formConfig;
}
updateFormConfigProperties(formConfig) {
var _a, _b;
const formViewProperties = {
header: {
logo: {
src: "",
alt: "Logo",
hidden: false,
styles: ""
},
backButton: {
mode: "TABBED",
bypassConfirmation: false,
hidden: true
},
title: {
hidden: false,
label: (_b = (_a = formConfig === null || formConfig === void 0 ? void 0 : formConfig.title) !== null && _a !== void 0 ? _a : formConfig === null || formConfig === void 0 ? void 0 : formConfig.props.title) !== null && _b !== void 0 ? _b : "Form",
styles: ""
},
steps: {
hidden: false,
styles: ""
}
},
main: {
styles: ""
},
footer: {
viewFormsButton: {
bypassConfirmation: false,
hidden: false,
label: "View Forms"
},
saveButton: {
hidden: false,
label: "Save"
}
},
isUnsavedDataAlertEnabled: false
};
if (checkObjectKeyExists(formConfig, "properties")) {
formConfig.properties = getObjectDeepCopy(mergeObjects(formViewProperties, formConfig.properties));
}
else {
formConfig.properties = formViewProperties;
}
const language = getLanguage();
if (checkObjectPathExists(formConfig, "properties.header.title.label")) {
formConfig.properties.header.title.label = updateLanguage(formConfig.properties.header.title.label, language);
}
if (checkObjectPathExists(formConfig, "properties.footer.viewFormsButton.label")) {
formConfig.properties.footer.viewFormsButton.label = updateLanguage(formConfig.properties.footer.viewFormsButton.label, language);
}
if (checkObjectPathExists(formConfig, "properties.footer.saveButton.label")) {
formConfig.properties.footer.saveButton.label = updateLanguage(formConfig.properties.footer.saveButton.label, language);
}
return formConfig;
}
convertFormConfig(formConfig) {
const formatOnFieldType = (field) => {
const updateFormFieldProperties = (field) => {
if (checkObjectKeyExists(FIELD_PROPERTIES, field.type)) {
field.properties = mergeObjects(getObjectDeepCopy(FIELD_PROPERTIES[field.type]), field.properties);
}
return field;
};
const formatFieldTypeHtml = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, false);
return field;
};
const formatFieldTypeTitle = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, false);
return field;
};
const formatFieldTypeButton = (field) => {
field = setMissingFieldKeyValue(field, "hidden", false);
field = setFieldAsFormElement(field, false);
field = updateFormFieldProperties(field);
return field;
};
const formatFieldTypeText = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
field = updateFormFieldProperties(field);
return field;
};
const formatFieldTypePassword = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
field = updateFormFieldProperties(field);
return field;
};
const formatFieldTypeEmail = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
field = updateFormFieldProperties(field);
return field;
};
const formatFieldTypeStarRating = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
field = updateFormFieldProperties(field);
return field;
};
const formatFieldTypeCurrency = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
field = updateFormFieldProperties(field);
return field;
};
const formatFieldTypeTextarea = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
return field;
};
const formatFieldTypeCheckbox = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
return field;
};
const formatFieldTypeNumber = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
if (checkObjectKeyExists(field, "key")) {
if (field.key === "aadhaar_number") {
field = setFieldKeyValue(field, "type", "aadhaar_number");
}
if (field.key === "contact_number") {
field = setFieldKeyValue(field, "type", "phone");
}
if (field.type === "phone" || field.type === "number") {
field = updateFormFieldProperties(field);
}
}
return field;
};
const formatFieldTypeImage = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
field = updateFormFieldProperties(field);
return field;
};
const formatFieldTypeDate = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
field.properties = getObjectDeepCopy(mergeObjects(getObjectDeepCopy(FIELD_PROPERTIES[field.type]), {
max: getMaxDate(field),
min: getMinDate(field)
}, field.properties));
return field;
};
const formatFieldTypeTime = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
field = updateFormFieldProperties(field);
return field;
};
const formatFieldTypePhone = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
field = updateFormFieldProperties(field);
return field;
};
const formatFieldTypeRadio = (field) => {
field = setFieldKeyHidden(field);
field = setFieldAsFormElement(field, true);
field = updateFormFieldProperties(field);
field.options = field.options.map((x) => {
if (typeof x === "string" || typeof x === "number") {
return { label: x, disabled: false, description: "" };
}
if (checkObjectKeyExists(x, "label") &&
checkObjectKeyExists(x, "disabled") &&
checkObjectKeyExists(x, "description")) {
return x;
}
if (!checkObjectKeyExists(x, "disabled")) {
x = Object.assign(Object.assign({}, x), { disabled: false });
}
if (!checkObjectKeyExists(x, "description")) {
x = Object.assign(Object.assign({}, x), { description: false });
}
retu