kwikid-forms
Version:
KwikID's JSON Configuration based Forms Renderer and Builder
880 lines • 145 kB
JavaScript
import { __awaiter, __decorate } from "tslib";
/* eslint-disable no-unused-vars */
/* eslint-disable @typescript-eslint/no-unused-vars */
import { animate, style, transition, trigger } from "@angular/animations";
import { Component, EventEmitter, HostListener, Inject, Input, Output, ViewChild } from "@angular/core";
import { TuiPreviewDialogService } from "@taiga-ui/addon-preview";
import { TuiDialogService } from "@taiga-ui/core";
import { Action, Condition, Rule, Source, checkObjectKeyExists, getObjectDeepCopy, isEmptyValue, isNotEmptyValue, logMethod, mergeObjects, setValueToObjectPath } from "kwikid-toolkit";
import { Converter } from "./config-converter/config-converter";
import { EActionKey } from "./form-view/definitions/form-view.actions.definition";
import { EFormViewGoBackMode } from "./form-view/definitions/form-view.commons.definition";
import { EFormsListStatus } from "./forms-list/forms-list.definitions";
import { ERendererActionKey } from "./renderer.actions.definitions";
import { EFormType, ELogEventType } from "./renderer.definitions";
import { formatEventLogs, getFormConfigByKey } from "./renderer.helper";
import * as i0 from "@angular/core";
import * as i1 from "kwikui";
import * as i2 from "./forms-list/forms-list.component";
import * as i3 from "./form-view/form-view.component";
import * as i4 from "@taiga-ui/kit";
import * as i5 from "@taiga-ui/core";
import * as i6 from "@taiga-ui/addon-preview";
import * as i7 from "@angular/common";
export class KwikIDFormsRendererComponent {
constructor(hostElement, cdr, previewDialogService, loaderService, dialogs) {
this.hostElement = hostElement;
this.cdr = cdr;
this.previewDialogService = previewDialogService;
this.loaderService = loaderService;
this.dialogs = dialogs;
this.formsData = {};
this.extraData = {};
this.activeFormData = {};
this.apiCallResponse = {};
this.buttonClickResponse = {};
this.onClickSubmit = new EventEmitter();
this.getFormData = new EventEmitter();
this.onClickApiCall = new EventEmitter();
this.onClickViewFile = new EventEmitter();
this.getLogs = new EventEmitter();
this.onClickFormFieldButton = new EventEmitter();
this.loading = false;
this.showErrorNotification = false;
this.activePopupFormData = {};
this.popupFormCallback = {};
this.allFormsData = {};
this.allFormsSubmitted = false;
this.formsList = [];
this.isMobileView = false;
this.previewProperties = {
html: {
before: "",
after: ""
},
iframe: {
src: "",
title: ""
},
popupFormKey: "",
title: "",
unavailable: false
};
this.popupFormConfig = {};
// display forms and list conditionally
this.showForm = false;
this.showFormFields = true;
this.showFormSections = true;
this.isUnsavedData = false;
}
// The final value should be provided to service, so that it can be used in all components
windowResizeWatcher() {
if (this.hostElement.nativeElement.offsetWidth < 600) {
if (this.showForm) {
this.showFormSections = false;
this.showFormFields = true;
}
else {
this.showFormSections = true;
this.showFormFields = false;
}
this.isMobileView = true;
}
else {
if (this.showForm) {
this.showFormSections = true;
this.showFormFields = true;
}
else {
this.showFormSections = true;
this.showFormFields = false;
}
this.isMobileView = false;
}
}
toggleErrorNotification(show) {
this.showErrorNotification = show;
}
ngOnInit() {
var _a, _b, _c;
this.toggleLoader(true);
this.loading = true;
const 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;
if (formStepKey !== undefined &&
checkObjectKeyExists(this.userConfig.userFormFields, formStepKey)) {
this.formsList = this.userConfig.userFormFields[formStepKey];
}
else if (Array.isArray(this.userConfig.userFormFields)) {
this.formsList = this.userConfig.userFormFields;
}
else {
throw new Error(`userFormFields doesn't have a form defined with key: ${formStepKey}`);
}
this.initializeForms("ON_INIT");
this.toggleLoader(false);
}
ngOnChanges(changes) {
const verifyChange = (prop) => {
return checkObjectKeyExists(changes, prop) && !changes[prop].firstChange;
};
if (verifyChange("userConfig")) {
this.userConfig = changes.userConfig.currentValue;
this.toggleLoader(false);
}
if (verifyChange("stepConfig")) {
this.stepConfig = changes.stepConfig.currentValue;
this.toggleLoader(false);
}
if (verifyChange("formsData")) {
this.formsData = changes.formsData.currentValue;
this.initializeForms("ON_CHANGE");
}
if (verifyChange("extraData")) {
this.extraData = changes.extraData.currentValue;
}
if (verifyChange("apiCallResponse")) {
this.apiCallResponse = changes.apiCallResponse.currentValue;
this.toggleLoader(false);
}
if (verifyChange("buttonClickResponse")) {
this.buttonClickResponse = changes.buttonClickResponse.currentValue;
this.toggleLoader(false);
}
}
triggerLogs(eventType, logs) {
this.getLogs.emit(formatEventLogs(eventType, this.stepConfig, logs));
}
toggleLoader(loader) {
if (loader) {
this.loaderService.show({
fullscreen: true,
loaderText: "Please wait"
});
}
else {
this.loaderService.hide();
}
}
fetchFormConfig(url) {
return __awaiter(this, void 0, void 0, function* () {
const response = yield fetch(url, { method: "GET" });
const data = yield response.json();
return data;
});
}
initializeForms(eventType) {
return __awaiter(this, void 0, void 0, function* () {
this.toggleLoader(true);
this.allFormsData = this.formsData;
yield this.updateFormsList();
if (eventType === "ON_CHANGE" &&
this.findFormsListLength(this.formsList) === 1) {
this.handleOnClickSubmitForms(null);
}
else {
this.handleResize(this.formsList);
if (isNotEmptyValue(this.activeFormConfig)) {
if (checkObjectKeyExists(this.activeFormConfig, "type")) {
if (this.activeFormConfig.type !== EFormType.HTML) {
yield this.handleOnClickSetActiveForm(this.activeFormConfig.key, undefined);
}
}
else {
yield this.handleOnClickSetActiveForm(this.activeFormConfig.key, undefined);
}
}
else {
this.showForm = false;
this.showFormFields = false;
}
this.loading = false;
this.toggleLoader(false);
}
});
}
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 = EFormType.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 === EFormType.FORM) {
form = convertFormListConfigTypeForm(form);
}
if (form.type === EFormType.HTML || form.type === "html") {
form = convertFormListConfigTypeHtml(form);
}
}
return form;
});
}
/**
* NOTE: To be deprecated.
* Why ? Will be directly assigned while executing 'chakra' for default form config.
* @param formsList any[]
* @param formsListCompleted string[]
* @returns any[]
*/
assignSequenceNoToForm(formsList) {
let sequenceNo = 1;
for (const form of formsList) {
if (checkObjectKeyExists(form, "hidden")) {
if (!form.hidden && form.type !== EFormType.HTML) {
form.sequenceNo = sequenceNo;
sequenceNo += 1;
}
else {
delete form.sequenceNo;
}
}
}
return formsList;
}
findCompletedFormsList(allFormsData) {
const formsListCompleted = [];
Object.keys(allFormsData).forEach((formKey) => {
formsListCompleted.push(formKey);
});
return formsListCompleted;
}
/**
* NOTE: To be deprecated. Why ? Will be replaced by 'chakra'.
* @param formsList any[]
* @param formsListCompleted string[]
* @returns any[]
*/
markFormInFormsListAsCompleted(formsList, formsListCompleted) {
for (let form of formsList) {
if (checkObjectKeyExists(form, "hidden")) {
if (!form.hidden && form.type !== EFormType.HTML) {
if (formsListCompleted.includes(form.key)) {
form = setValueToObjectPath(form, "status", "completed");
form = setValueToObjectPath(form, "disabled", false);
}
else if (checkObjectKeyExists(form, "dependentOn")) {
const isDependent = form.dependentOn.every((r) => formsListCompleted.includes(r));
if (isDependent) {
form = setValueToObjectPath(form, "status", "editable");
form = setValueToObjectPath(form, "disabled", false);
}
else {
form = setValueToObjectPath(form, "status", "locked");
form = setValueToObjectPath(form, "disabled", true);
}
}
else {
form = setValueToObjectPath(form, "dependentOn", []);
form = setValueToObjectPath(form, "status", "editable");
form = setValueToObjectPath(form, "disabled", false);
}
}
}
}
return formsList;
}
/**
* NOTE: To be deprecated. Why ? Will be replaced by 'chakra'.
* @param formsList any[]
* @param formsListCompleted string[]
* @returns any[]
*/
markFormInFormsListAsDisabled(formsList, formsListCompleted) {
for (let form of formsList) {
if (checkObjectKeyExists(form, "hidden")) {
if (!form.hidden && form.type !== EFormType.HTML) {
if (form.status !== "completed") {
if (checkObjectKeyExists(form, "dependentOn")) {
const isDependent = form.dependentOn.every((r) => formsListCompleted.includes(r));
if (isDependent) {
form = setValueToObjectPath(form, "status", "editable");
form = setValueToObjectPath(form, "disabled", false);
}
else {
form = setValueToObjectPath(form, "status", "locked");
form = setValueToObjectPath(form, "disabled", true);
}
}
else {
form = setValueToObjectPath(form, "dependentOn", []);
form = setValueToObjectPath(form, "status", "editable");
form = setValueToObjectPath(form, "disabled", false);
}
}
}
}
}
return formsList;
}
filterAllFormsData(allFormsData, formsList) {
let currentUserFormAllFormsData = {};
for (const form of formsList) {
if (checkObjectKeyExists(form, "hidden") &&
!form.hidden &&
form.type !== EFormType.HTML) {
if (checkObjectKeyExists(allFormsData, form.key)) {
currentUserFormAllFormsData = Object.assign(Object.assign({}, currentUserFormAllFormsData), { [form.key]: allFormsData[form.key] });
}
}
}
return currentUserFormAllFormsData;
}
checkIfFormsStatusCompleted(formsList, formsListCompleted) {
let allFormsCompleted = true;
for (const form of formsList) {
if (checkObjectKeyExists(form, "hidden")) {
if (!form.hidden && form.type !== EFormType.HTML) {
if (form.status !== "completed") {
allFormsCompleted = false;
break;
}
}
}
}
return allFormsCompleted;
}
findActiveFormConfig(formsList) {
return formsList.find((form) => {
return (checkObjectKeyExists(form, "hidden") &&
!form.hidden &&
form.type !== EFormType.HTML &&
form.status === "editable" &&
!form.disabled);
});
}
updateFormsList() {
return __awaiter(this, void 0, void 0, function* () {
this.formsList = this.convertFormListConfig(this.formsList);
for (const form of this.formsList) {
if (checkObjectKeyExists(form, "default") &&
isNotEmptyValue(form.default)) {
const { triggers, rules, actions } = form.default;
const rulesMapping = new Rule(rules, {
USER_CONFIG: this.userConfig,
FORMS_LIST: this.formsList,
ALL_FORMS_DATA: this.allFormsData,
EXTRA_DATA: this.extraData
}).mapping();
for (const action of actions) {
const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
if (conditionEvaluation) {
const actions = new Action(action, rulesMapping, {
FORMS_LIST: this.formsList,
ALL_FORMS_DATA: this.allFormsData,
EXTRA_DATA: this.extraData
}, this.takeAction.bind(this));
yield actions.execute();
}
}
}
else if (!checkObjectKeyExists(form, "hidden")) {
form.hidden = false;
}
}
this.formsList = this.assignSequenceNoToForm(this.formsList);
/**
* Below code identifies the allFormsData required for the current User Form.
* Why? Because allFormsData will actually contain the whole journey's all
* possible User Form steps. So, it is important to set the form data which
* this particular User Form only has to LOCAL METHOD Variable.
*/
const currentUserFormAllFormsData = this.filterAllFormsData(this.allFormsData, this.formsList);
this.formsListCompleted = this.findCompletedFormsList(currentUserFormAllFormsData);
this.formsList = this.markFormInFormsListAsCompleted(this.formsList, this.formsListCompleted);
this.formsList = this.markFormInFormsListAsDisabled(this.formsList, this.formsListCompleted);
this.formsList = getObjectDeepCopy(this.formsList);
this.activeFormConfig = this.findActiveFormConfig(this.formsList);
});
}
showPreview(previewProperties) {
this.previewProperties = mergeObjects(this.previewProperties, previewProperties);
if (isEmptyValue(this.previewProperties.iframe.src) &&
isEmptyValue(this.previewProperties.html.before) &&
isEmptyValue(this.previewProperties.html.after) &&
isEmptyValue(this.previewProperties.popupFormKey)) {
this.previewProperties.unavailable = true;
}
else {
if (isNotEmptyValue(this.previewProperties.popupFormKey)) {
if (checkObjectKeyExists(this.activeFormConfig, "popupForms")) {
this.popupFormConfig =
this.activeFormConfig.popupForms[this.previewProperties.popupFormKey];
}
else {
this.popupFormConfig = undefined;
}
}
this.previewProperties.unavailable = false;
}
this.previewDialogService.open(this.preview || "").subscribe();
}
formHide(formKey) {
let form = getFormConfigByKey(this.formsList, formKey);
form = setValueToObjectPath(form, "hidden", true);
}
formShow(formKey) {
let form = getFormConfigByKey(this.formsList, formKey);
form = setValueToObjectPath(form, "hidden", false);
}
takeAction(action, object) {
return __awaiter(this, void 0, void 0, function* () {
/**
* This below code is currently commented because not all actions need to be logged at backend.
* Will look later into where only specific actions needs to be logged or all.
* Currently logs are sent from withing the action's specific methods.
* Code -
this.triggerLogs(ELogEventType.FORM__ACTION_EXECUTE, {
action_key: action.key,
...(action.id && { action_id: action.id })
});
*/
switch (action.key) {
case ERendererActionKey.FORM_HIDE:
this.formHide(action.props.formKey);
break;
case ERendererActionKey.FORM_SHOW:
this.formShow(action.props.formKey);
break;
case EActionKey.SET_VALUE: {
const sources = new Source({
USER_CONFIG: this.userConfig,
ALL_FORMS_DATA: this.formsData,
EXTRA_DATA: this.extraData
});
const sourceValue = yield sources.getValueFromSource(action.props.value.source);
sources.setValueToSource(action.props.value.destination, sourceValue);
this.userConfig = sources.object.USER_CONFIG;
this.formsData = sources.object.ALL_FORMS_DATA;
this.extraData = sources.object.EXTRA_DATA;
break;
}
default:
break;
}
});
}
findFormsListLength(formsList) {
const updatedFormsList = formsList.filter((form) => {
if (checkObjectKeyExists(form, "type")) {
return (form.type !== EFormType.HTML &&
checkObjectKeyExists(form, "hidden") &&
!form.hidden);
}
return checkObjectKeyExists(form, "hidden") && !form.hidden;
});
return updatedFormsList.length;
}
/**
* Library Event Listeners
*/
/**
* FormList - Listens to event of opening the FormView of when any form is clicked in FormList
* @param selectedForm string
*/
handleOnClickSetActiveForm(selectedForm, triggerType) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
return __awaiter(this, void 0, void 0, function* () {
this.showForm = false;
this.toggleLoader(true);
this.isUnsavedData = false;
let activeFormConfig = this.formsList.find((form) => {
return form.key === selectedForm;
});
activeFormConfig = new Converter().updateFormConfigProperties(activeFormConfig);
let formConfig;
if (checkObjectKeyExists(activeFormConfig, "props")) {
if (checkObjectKeyExists(activeFormConfig.props, "url")) {
const formConfigFromUrl = yield this.fetchFormConfig(activeFormConfig.props.url);
formConfig = Object.assign(Object.assign({}, activeFormConfig), formConfigFromUrl);
}
else if (checkObjectKeyExists(activeFormConfig.props, "path") &&
checkObjectKeyExists(this.userConfig, "backend") &&
checkObjectKeyExists(this.userConfig.backend, "CONFIG_BASE_URL")) {
const url = `${(_b = (_a = this.userConfig) === null || _a === void 0 ? void 0 : _a.backend) === null || _b === void 0 ? void 0 : _b.CONFIG_BASE_URL}${activeFormConfig.props.path}`;
const formConfigFromPath = yield this.fetchFormConfig(url);
formConfig = Object.assign(Object.assign({}, activeFormConfig), formConfigFromPath);
}
else if (checkObjectKeyExists(activeFormConfig, "type") &&
activeFormConfig.type === EFormType.FORM) {
if (checkObjectKeyExists(activeFormConfig, "fields")) {
formConfig = activeFormConfig;
}
else {
console.error("No Direct URL, No Path with Base URL, No fields key found in Active Form's Config!");
}
}
else {
console.error(`No Direct URL, No Path with Base URL, No fields key found in Active Form's Config!`);
}
}
else if (checkObjectKeyExists(activeFormConfig.formContent, "url")) {
const formConfigFromUrl = yield this.fetchFormConfig(activeFormConfig.formContent.url);
formConfig = Object.assign(Object.assign({}, activeFormConfig), formConfigFromUrl);
}
else if (checkObjectKeyExists(activeFormConfig.formContent, "path") &&
checkObjectKeyExists(this.userConfig, "backend") &&
checkObjectKeyExists(this.userConfig.backend, "CONFIG_BASE_URL")) {
const url = `${(_d = (_c = this.userConfig) === null || _c === void 0 ? void 0 : _c.backend) === null || _d === void 0 ? void 0 : _d.CONFIG_BASE_URL}${activeFormConfig.props.path}`;
const formConfigFromPath = yield this.fetchFormConfig(url);
formConfig = Object.assign(Object.assign({}, activeFormConfig), formConfigFromPath);
}
else if (checkObjectKeyExists(activeFormConfig, "fields")) {
formConfig = activeFormConfig;
}
else {
console.error("No Direct URL, No Path with Base URL, No fields key found in Active Form's Config!");
}
formConfig = new Converter().updateFormConfigFromUserConfig(formConfig, this.userConfig);
formConfig = new Converter().updateFormConfigMiscellaneous(formConfig, {
formsListLength: this.findFormsListLength(this.formsList)
});
this.activeFormConfig = mergeObjects({}, activeFormConfig, formConfig);
switch (triggerType) {
case "BUTTON_CLICK":
this.triggerLogs(ELogEventType.FORM__FORM_OPEN_BUTTON_CLICK, {
form_key: this.activeFormConfig.key,
form_title: (_f = (_e = this.activeFormConfig) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : (_h = (_g = this.activeFormConfig) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.title
});
break;
default:
this.triggerLogs(ELogEventType.FORM__FORM_OPEN_AUTO, {
form_key: this.activeFormConfig.key,
form_title: (_k = (_j = this.activeFormConfig) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : (_m = (_l = this.activeFormConfig) === null || _l === void 0 ? void 0 : _l.props) === null || _m === void 0 ? void 0 : _m.title
});
break;
}
if (this.hostElement.nativeElement.offsetWidth < 600) {
this.showFormSections = false;
this.showFormFields = true;
}
else if (this.hostElement.nativeElement.offsetWidth >= 600) {
this.showFormSections = true;
this.showFormFields = true;
}
this.showForm = true;
this.toggleLoader(false);
});
}
/**
* FormView - Listens to event of executing an API call from within the FormView and emits (read as passes) the same event to the library consumer.
* @param e any
*/
handleGetUnsavedState(e) {
this.isUnsavedData = e;
}
handleOnClickApiCall(e) {
this.onClickApiCall.emit(e);
}
handleOnClickViewFile(e) {
this.onClickViewFile.emit(e);
}
handleOnClickFormFieldButton(e) {
this.onClickFormFieldButton.emit(e);
}
handleOnActionShowPopupForm(e, content) {
var _a;
if (checkObjectKeyExists(e, "activeFormData") &&
checkObjectKeyExists(e, "popupFormConfig")) {
const popupFormData = { [this.activeFormConfig.key]: e.activeFormData };
this.activePopupFormData = mergeObjects(this.allFormsData, popupFormData);
this.popupFormConfig = e.popupFormConfig;
const popupType = (_a = e === null || e === void 0 ? void 0 : e.popupType) !== null && _a !== void 0 ? _a : "DIALOG";
switch (popupType) {
case "DIALOG":
this.previewDialogRef = this.dialogs
.open(content, {
closeable: true,
dismissible: false,
size: "s",
required: true
})
.subscribe({
next: (data) => {
this.popupFormCallback = {
popupFormData: data.data,
popupFormConfig: data.formConfig,
activeFormConfig: this.activeFormConfig
};
this.activePopupFormData = {};
this.popupFormConfig = {};
this.previewDialogRef.complete();
},
error: () => {
this.popupFormCallback = {
popupFormData: {},
popupFormConfig: this.popupFormConfig,
activeFormConfig: this.activeFormConfig,
stopTaskExecution: true
};
this.activePopupFormData = {};
this.popupFormConfig = {};
console.info("Dialog error");
},
complete: () => {
console.info("Dialog closed");
}
});
break;
case "POPUP":
this.previewDialogRef = this.previewDialogService
.open(this.preview || "")
.subscribe({
next: (data) => {
this.popupFormCallback = {
popupFormData: data.data,
popupFormConfig: data.formConfig,
activeFormConfig: this.activeFormConfig
};
this.activePopupFormData = {};
this.popupFormConfig = {};
this.previewDialogRef.complete();
},
error: () => {
this.popupFormCallback = {
popupFormData: {},
popupFormConfig: this.popupFormConfig,
activeFormConfig: this.activeFormConfig,
stopTaskExecution: true
};
this.activePopupFormData = {};
this.popupFormConfig = {};
console.info("Preview error");
},
complete: () => {
console.info("Preview closed");
}
});
break;
default:
break;
}
}
}
/**
* FormView - Listens to event of getting the Active Form's Data when the Form is Saved and emits (read as passes) the same event to the library consumer.
* @param e any
*/
handleOnClickSaveForm(e, eventType, context) {
switch (eventType) {
case "FORM":
this.isUnsavedData = false;
this.toggleLoader(true);
this.getFormData.emit({
[this.activeFormConfig.key]: {
formConfig: e.formConfig,
data: e.data,
extendedData: e.extendedData
}
});
break;
case "POPUP_FORM":
this.previewDialogRef.next(e);
break;
default:
break;
}
}
/**
* FormView - Listens to event of showing the Forms List in Mobile View.
* @param e any
*/
handleOnClickViewForms(e) {
this.showFormSections = true;
this.showForm = false;
this.showFormFields = false;
}
/**
* Handles the event of going back to the previous form directly or by tabbing, without showing the form list in mobile view.
*
* Prerequisite: The current form can never be locked; it should either be in an editable or completed state.
*
* Logic:
* 1. For DIRECT mode, find the config of the previous form starting from the first form, such that the previous form is editable and its sequence number is one less than the current active form's sequence number.
* If no previous form is found or all forms have been completed, show the form list.
* 2. For TABBED mode, find the config of the previous form in the list, such that the previous form's sequence number is less than the current active form's sequence number and the form is editable.
* If no previous form is found, show the form list.
*
* @param {Object} e - The event object containing the mode to go back in.
* @param {string} e.mode - The mode of going back: DIRECT or TABBED.
* @returns {void}
*/
handleOnClickGoBack(e) {
switch (e.mode) {
case EFormViewGoBackMode.DIRECT:
if (this.activeFormConfig.sequenceNo === 1) {
this.showFormSections = true;
this.showForm = false;
this.showFormFields = false;
}
else if (this.checkIfFormsStatusCompleted(this.formsList, this.formsListCompleted)) {
this.showFormSections = true;
this.showForm = false;
this.showFormFields = false;
}
else {
const previousFormConfigDirect = this.formsList.find((form) => {
return (form.sequenceNo === this.activeFormConfig.sequenceNo - 1 &&
form.status !== EFormsListStatus.LOCKED);
});
if (previousFormConfigDirect) {
this.handleOnClickSetActiveForm(previousFormConfigDirect.key, undefined);
}
}
break;
case EFormViewGoBackMode.TABBED: {
const previousFormConfig = this.formsList.find((form) => {
return (form.sequenceNo < this.activeFormConfig.sequenceNo &&
form.status === EFormsListStatus.EDITABLE);
});
if (previousFormConfig) {
this.handleOnClickSetActiveForm(previousFormConfig.key, undefined);
}
else {
this.showFormSections = true;
this.showForm = false;
this.showFormFields = false;
}
break;
}
default:
break;
}
}
/**
* FormList - Listens to event of submitting all the forms and moving out of the library and also handles the validation of all the forms.
* @param e any
*/
handleOnClickSubmitForms(e) {
var _a, _b;
return __awaiter(this, void 0, void 0, function* () {
const formsList = JSON.parse(JSON.stringify(this.formsList));
let firstFormWithError = "";
for (const form of formsList) {
if (!form.hidden &&
form.type !== EFormType.HTML &&
form.required &&
form.status !== EFormsListStatus.COMPLETED) {
this.triggerLogs(ELogEventType.FORM__SUBMIT_FORM_BUTTON_CLICK_INVALID, {
form_key: form.key,
form_title: (_a = form === null || form === void 0 ? void 0 : form.title) !== null && _a !== void 0 ? _a : (_b = form === null || form === void 0 ? void 0 : form.props) === null || _b === void 0 ? void 0 : _b.title,
form_status: form.status
});
if (isEmptyValue(firstFormWithError)) {
firstFormWithError = form.key;
}
}
}
if (isNotEmptyValue(firstFormWithError)) {
this.toggleErrorNotification(true);
setTimeout(() => {
this.toggleErrorNotification(false);
}, 3000);
return;
}
this.onClickSubmit.emit(e);
});
}
handleGetLogs(event) {
this.getLogs.emit(event);
}
/**
* Miscellaneous Methods
*/
handleResize(formsList) {
if (this.hostElement.nativeElement.offsetWidth < 600) {
const isSingleForm = (formsList) => {
return formsList.length === 1;
};
if (!isSingleForm(formsList)) {
this.showFormSections = true;
this.showFormFields = false;
this.showForm = false;
}
else {
this.showFormSections = true;
this.showFormFields = false;
this.showForm = false;
}
this.isMobileView = true;
}
else {
this.isMobileView = false;
}
}
}
/** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormsRendererComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: TuiPreviewDialogService }, { token: i1.KwikUILoaderService }, { token: TuiDialogService }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { stepConfig: "stepConfig", userConfig: "userConfig", formsData: "formsData", extraData: "extraData", activeFormData: "activeFormData", apiCallResponse: "apiCallResponse", buttonClickResponse: "buttonClickResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall", onClickViewFile: "onClickViewFile", getLogs: "getLogs", onClickFormFieldButton: "onClickFormFieldButton" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }], usesOnChanges: true, ngImport: i0, 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 (getLogs)=\"handleGetLogs($event)\"\n (onClickSetActiveForm)=\"\n this.handleOnClickSetActiveForm($event, 'BUTTON_CLICK')\n \"\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 [extraData]=\"extraData\"\n [isMobileView]=\"this.isMobileView\"\n [userConfig]=\"this.userConfig\"\n [stepConfig]=\"this.stepConfig\"\n [popupFormCallback]=\"this.popupFormCallback\"\n [apiCallResponse]=\"this.apiCallResponse\"\n [buttonClickResponse]=\"this.buttonClickResponse\"\n (onClickFormFieldButton)=\"handleOnClickFormFieldButton($event)\"\n (getUnsavedDataState)=\"handleGetUnsavedState($event)\"\n (onClickApiCall)=\"handleOnClickApiCall($event)\"\n (onClickViewFile)=\"handleOnClickViewFile($event)\"\n (onActionShowPopupForm)=\"\n this.handleOnActionShowPopupForm($event, content)\n \"\n (onClickGoBack)=\"this.handleOnClickGoBack($event)\"\n (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\n (getLogs)=\"handleGetLogs($event)\"\n (onClickSaveForm)=\"\n this.handleOnClickSaveForm($event, 'FORM', undefined)\n \"\n ></kwikid-form-view>\n </div>\n </div>\n</div>\n\n<kwikui-loader></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 [extraData]=\"extraData\"\n [userConfig]=\"this.userConfig\"\n [stepConfig]=\"this.stepConfig\"\n [isMobileView]=\"this.isMobileView\"\n [apiCallResponse]=\"this.apiCallResponse\"\n [buttonClickResponse]=\"this.buttonClickResponse\"\n (onClickFormFieldButton)=\"handleOnClickFormFieldButton($event)\"\n (getSavedState)=\"handleGetUnsavedState($event)\"\n (onClickApiCall)=\"handleOnClickApiCall($event)\"\n (getLogs)=\"handleGetLogs($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 [extraData]=\"extraData\"\n [allFormsData]=\"allFormsData\"\n [userConfig]=\"this.userConfig\"\n [stepConfig]=\"this.stepConfig\"\n [isMobileView]=\"this.isMobileView\"\n [apiCallResponse]=\"this.apiCallResponse\"\n [buttonClickResponse]=\"this.buttonClickResponse\"\n (onClickFormFieldButton)=\"handleOnClickFormFieldButton($event)\"\n (getSavedState)=\"handleGetUnsavedState($event)\"\n (onClickApiCall)=\"handleOnClickApiCall($event)\"\n (getLogs)=\"handleGetLogs($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:min(50%,600px);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: i2.KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["showFormFields", "userConfig", "stepConfig", "activeFormConfig", "formsList", "formsListCompleted", "isMobileView", "isUnsavedData"], outputs: ["getLogs", "onClickSetActiveForm", "onClickHideFormsList", "onClickSubmitForms"] }, { type: i3.KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["allFormsData", "extraData", "apiCallResponse", "buttonClickResponse", "formConfig", "formData", "isMobileView", "popupFormCallback", "userConfig", "stepConfig"], outputs: ["getLogs", "getUnsavedDataState", "onActionShowPopupForm", "onClickApiCall", "onClickViewFile", "onClickFormFieldButton", "onClickGoBack", "onClickSaveForm", "onClickViewForms"] }, { type: i1.KwikUILoaderComponent, selector: "kwikui-loader" }, { type: i4.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "lines", "timestamp"], outputs: ["close"] }, { type: i5.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i6.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { type: i6.TuiPreviewTitleComponent, selector: "tui-preview-title" }, { type: i5.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4.TuiPushDirective, selector: "tui-push" }, { type: i6.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }], animations: [
trigger("panelInOut", [
transition(":enter", [
style({ transform: "translateY(100%)" }),
animate(150)
]),
transition(":leave", [
animate(100, style({ transform: "translateY(100%)" }))
])
])
] });
__decorate([
logMethod
], KwikIDFormsRendererComponent.prototype, "triggerLogs", null);
__decorate([
logMethod
], KwikIDFormsRendererComponent.prototype, "toggleLoader", null);
_