kwikid-components
Version:
KwikID's Components Library
763 lines (750 loc) • 274 kB
JavaScript
import { __decorate, __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { Component, Input, EventEmitter, Output, ChangeDetectionStrategy, Inject, Injectable, ViewChild, ElementRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import * as i6 from '@taiga-ui/core';
import { TuiAlertService, TuiDialogService, TuiRootModule, TuiDialogModule, TuiButtonModule, TuiLoaderModule, TuiSvgModule } from '@taiga-ui/core';
import { logMethod, mergeObjects, isEmptyValue, isObject, isNotEmptyValue, checkObjectPathExists, setMissingKeyValue, encryptWithAES, decryptWithAES, isNotEmptyArray, checkObjectKeyExists, Source, setValueToObjectPath, RuleEngine } from 'kwikid-toolkit';
import * as i2 from 'kwikui';
import { KwikUIPipeModule, KwikUIImageModule, KwikUIButtonModule, KwikUICheckboxModule, KwikUIAnimationPlayerModule, KwikUILoaderModule, KwikUIProgressBarModule, KwikUIStepperModule } from 'kwikui';
import * as i5 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from 'kwikid-forms';
import { KwikIDFormViewModule } from 'kwikid-forms';
import axios from 'axios';
import { Observable } from 'rxjs';
import { v4 } from 'uuid';
import * as i6$1 from '@taiga-ui/addon-preview';
import { TuiPreviewDialogService, TuiPreviewActionModule, TuiPreviewModule } from '@taiga-ui/addon-preview';
import * as i2$1 from 'kwikid-camera';
import { KwikIDCameraModule } from 'kwikid-camera';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TuiPushModule, TuiStepperModule } from '@taiga-ui/kit';
const ERROR_CONFIG = {
clientName: "KwikID",
messages: [],
headerConfig: {
title: "Error Occurred"
},
footerConfig: {
showPowerBy: true,
label: "Powered By",
logo: "https://kwikid.s3.ap-south-1.amazonaws.com/CONFIG/USER/unity_dev/assets/logo/think360_logo.png"
},
scheduleLaterConfig: {
showScheduleLater: true,
buttonLabel: "Schedule Later",
orLabel: "OR"
},
startButtonLabel: "Start"
};
class KwikIDPageHeaderComponent {
constructor() {
this.config = undefined;
}
ngOnInit() { }
}
/** @nocollapse */ KwikIDPageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikIDPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDPageHeaderComponent, selector: "kwikid-components-page-header", inputs: { config: "config" }, ngImport: i0, template: "<header>\n <kwikui-image\n *ngIf=\"config?.showClientLogo\"\n [imageSrc]=\"config?.clientLogo\"\n styles=\"max-height: 100px;\"\n altText=\"Logo\"\n imageType=\"url\"\n ></kwikui-image>\n\n <div\n id=\"client-name\"\n *ngIf=\"!config?.hideClientName\"\n >{{ config?.clientName }}</div\n >\n\n <div\n id=\"title\"\n *ngIf=\"config?.title\"\n >{{ config?.title }}</div\n >\n</header>\n", styles: ["header{display:flex;flex-direction:column;align-items:center}header>*:not(:last-child){margin-bottom:1.25rem}header #client-name{font-size:1.7rem;font-weight:600;text-align:center}header #title{font-size:1.35rem;font-weight:500;text-align:center}\n"], components: [{ type: i2.KwikUIImageComponent, selector: "kwikui-image", inputs: ["altText", "class", "html", "id", "imageSrc", "imageType", "loadingType", "styles"], outputs: ["onClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDPageHeaderComponent, decorators: [{
type: Component,
args: [{
selector: "kwikid-components-page-header",
templateUrl: "./page-header.component.html",
styleUrls: ["./page-header.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
type: Input
}] } });
class KwikIDScheduleLaterButtonComponent {
constructor() {
this.config = undefined;
this.onClickScheduleLater = new EventEmitter();
}
ngOnInit() { }
handleOnClickScheduleLater() {
this.onClickScheduleLater.emit("Schedule Later");
}
}
/** @nocollapse */ KwikIDScheduleLaterButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDScheduleLaterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikIDScheduleLaterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDScheduleLaterButtonComponent, selector: "kwikid-schedule-later-button", inputs: { config: "config" }, outputs: { onClickScheduleLater: "onClickScheduleLater" }, ngImport: i0, template: "<div\n id=\"schedule-later\"\n *ngIf=\"config?.showScheduleLater\"\n>\n <div\n id=\"or\"\n *ngIf=\"!config?.hideOr\"\n >\n <div id=\"left\"></div>\n <span id=\"or-label\">{{ config?.orLabel }}</span>\n <div id=\"right\"></div\n ></div>\n\n <kwikui-button\n appearance=\"primary\"\n [label]=\"config?.buttonLabel\"\n size=\"m\"\n styles=\"width: 100%;\"\n (onClick)=\"handleOnClickScheduleLater()\"\n ></kwikui-button>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}#schedule-later{width:100%}#schedule-later #or{position:relative;display:flex}#schedule-later #or #left,#schedule-later #or #right{height:1px;width:44%;margin:.6rem 0 1.5rem;border-top:2px solid #d3d3d3}#schedule-later #or #or-label{width:12%;text-align:center;font-weight:600;padding:0 .5rem}\n"], components: [{ type: i2.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
__decorate([
logMethod
], KwikIDScheduleLaterButtonComponent.prototype, "handleOnClickScheduleLater", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDScheduleLaterButtonComponent, decorators: [{
type: Component,
args: [{
selector: "kwikid-schedule-later-button",
templateUrl: "./schedule-later-button.component.html",
styleUrls: ["./schedule-later-button.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
type: Input
}], onClickScheduleLater: [{
type: Output
}], handleOnClickScheduleLater: [] } });
class KwikIDPageFooterComponent {
constructor() {
this.config = undefined;
}
ngOnInit() { }
}
/** @nocollapse */ KwikIDPageFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDPageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikIDPageFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDPageFooterComponent, selector: "kwikid-components-page-footer", inputs: { config: "config" }, ngImport: i0, template: "<footer *ngIf=\"config?.showPowerBy\">\n {{ config?.label }}\n <img\n alt=\"logo\"\n id=\"logo\"\n src=\"{{ config?.logo }}\"\n />\n</footer>\n", styles: ["footer{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:.6rem}footer #logo{width:55px}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDPageFooterComponent, decorators: [{
type: Component,
args: [{
selector: "kwikid-components-page-footer",
templateUrl: "./page-footer.component.html",
styleUrls: ["./page-footer.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
type: Input
}] } });
class KwikIDErrorComponent {
constructor(alerts) {
this.alerts = alerts;
this.config = ERROR_CONFIG;
this.headerConfig = undefined;
this.footerConfig = undefined;
this.scheduleLaterConfig = undefined;
this.onClickScheduleLater = new EventEmitter();
}
ngOnInit() {
this.initErrorConfig();
}
initErrorConfig() {
var _a, _b;
this.config = mergeObjects(ERROR_CONFIG, this.config);
this.headerConfig = (_a = this.config) === null || _a === void 0 ? void 0 : _a.headerConfig;
this.footerConfig = (_b = this.config) === null || _b === void 0 ? void 0 : _b.footerConfig;
this.scheduleLaterConfig = this.config.scheduleLaterConfig;
}
handleOnClickCopyLink(message) {
this.alerts.open("Link Copied!").subscribe();
navigator.clipboard.writeText(message);
}
handleOnClickScheduleLater() {
this.onClickScheduleLater.emit("Schedule Later");
}
}
/** @nocollapse */ KwikIDErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDErrorComponent, deps: [{ token: TuiAlertService }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikIDErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDErrorComponent, selector: "kwikid-components-error", inputs: { config: "config" }, outputs: { onClickScheduleLater: "onClickScheduleLater" }, ngImport: i0, template: "<div class=\"container\">\n <kwikid-components-page-header [config]=\"headerConfig\">\n </kwikid-components-page-header>\n <main>\n <div\n *ngIf=\"config?.html?.before\"\n [innerHtml]=\"config?.html?.before | kwikuiSafeHtml\"\n >\n </div>\n\n <kwikui-image\n *ngIf=\"config?.image\"\n [imageSrc]=\"config?.image\"\n styles=\"padding: 1rem; max-height: 225px;\"\n altText=\"Error\"\n imageType=\"url\"\n ></kwikui-image>\n\n <div\n *ngIf=\"config?.html?.middle\"\n [innerHtml]=\"config?.html?.middle | kwikuiSafeHtml\"\n >\n </div>\n\n <ul *ngIf=\"config.messages && config.messages.length !== 0\">\n <li *ngFor=\"let message of config.messages; let i = index\">\n <div>\n <div>{{ i + 1 }}.</div>\n <div [innerHtml]=\"message.title | kwikuiSafeHtml\"> </div>\n </div>\n <div\n *ngIf=\"message.type === 'link'\"\n class=\"link\"\n (click)=\"handleOnClickCopyLink(message.link)\"\n >{{ message.link }}</div\n >\n </li>\n </ul>\n\n <kwikid-schedule-later-button\n [config]=\"scheduleLaterConfig\"\n (onClickScheduleLater)=\"handleOnClickScheduleLater()\"\n >\n </kwikid-schedule-later-button>\n\n <div\n *ngIf=\"config?.html?.after\"\n [innerHtml]=\"config?.html?.after | kwikuiSafeHtml\"\n >\n </div>\n </main>\n\n <kwikid-components-page-footer [config]=\"footerConfig\">\n </kwikid-components-page-footer>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%}.container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow:auto}.container>*:not(:last-child){margin-bottom:1.5rem}.container main{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:center;padding:0 1rem}.container main>*:not(:last-child){margin-bottom:1rem}.container main ul{list-style:none;padding-left:0;font-size:1rem;width:100%}.container main ul div{position:relative}.container main li{position:relative;padding:.6rem;margin-bottom:.5rem;white-space:pre-line;background-color:#99999921;border-radius:.5rem}.container main li div{display:flex;flex-direction:row}.container main li div>*:not(:last-child){margin-right:.4rem}.container main li .link{cursor:pointer;margin-left:1rem;text-decoration:underline;color:var(--tui-link)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:gray;background-clip:padding-box}\n"], components: [{ type: KwikIDPageHeaderComponent, selector: "kwikid-components-page-header", inputs: ["config"] }, { type: i2.KwikUIImageComponent, selector: "kwikui-image", inputs: ["altText", "class", "html", "id", "imageSrc", "imageType", "loadingType", "styles"], outputs: ["onClick"] }, { type: KwikIDScheduleLaterButtonComponent, selector: "kwikid-schedule-later-button", inputs: ["config"], outputs: ["onClickScheduleLater"] }, { type: KwikIDPageFooterComponent, selector: "kwikid-components-page-footer", inputs: ["config"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "kwikuiSafeHtml": i2.KwikUISafeHtmlPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
__decorate([
logMethod
], KwikIDErrorComponent.prototype, "initErrorConfig", null);
__decorate([
logMethod
], KwikIDErrorComponent.prototype, "handleOnClickCopyLink", null);
__decorate([
logMethod
], KwikIDErrorComponent.prototype, "handleOnClickScheduleLater", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDErrorComponent, decorators: [{
type: Component,
args: [{
selector: "kwikid-components-error",
templateUrl: "./error.component.html",
styleUrls: ["./error.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: function () { return [{ type: i6.TuiAlertService, decorators: [{
type: Inject,
args: [TuiAlertService]
}] }]; }, propDecorators: { config: [{
type: Input
}], onClickScheduleLater: [{
type: Output
}], initErrorConfig: [], handleOnClickCopyLink: [], handleOnClickScheduleLater: [] } });
const INSTRUCTIONS_CONFIG = {
consents: [],
instructions: [],
footerConfig: {
showPowerBy: true,
label: "Powered By",
logo: "https://kwikid.s3.ap-south-1.amazonaws.com/CONFIG/USER/unity_dev/assets/logo/think360_logo.png"
},
scheduleLaterConfig: {
showScheduleLater: true,
buttonLabel: "Schedule Later",
orLabel: "OR"
},
startButtonLabel: "Start"
};
class KwikIDInstructionComponent {
constructor() {
this.config = INSTRUCTIONS_CONFIG;
this.headerConfig = undefined;
this.footerConfig = undefined;
this.scheduleLaterConfig = undefined;
this.onClickStart = new EventEmitter();
this.onClickScheduleLater = new EventEmitter();
}
ngOnInit() {
this.initInstructionsConfig();
}
initInstructionsConfig() {
var _a, _b, _c, _d;
this.config = mergeObjects(INSTRUCTIONS_CONFIG, this.config);
this.headerConfig = (_a = this.config) === null || _a === void 0 ? void 0 : _a.headerConfig;
this.footerConfig = (_b = this.config) === null || _b === void 0 ? void 0 : _b.footerConfig;
this.scheduleLaterConfig = this.config.scheduleLaterConfig;
const formConfig = {
title: "Instructions",
key: "INSTRUCTIONS",
fields: [],
properties: {
header: {
logo: {
hidden: true
},
backButton: {
hidden: true
},
title: {
hidden: true
},
steps: {
hidden: true
}
},
main: {
styles: ""
},
footer: {
viewFormsButton: {
hidden: true
},
saveButton: {
hidden: false,
label: this.config.startButtonLabel
}
}
}
};
if (this.config &&
this.config.consents &&
this.config.consents.length !== 0) {
let variant = "block";
if (this.config.consents.length > 1) {
variant = "labeled";
}
this.config.consents.forEach((item, i) => {
const field = this.initInstructionConsentsConfig(item, i, variant);
formConfig.fields.push(field);
});
}
this.formConfig = formConfig;
this.animation = {
path: (_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.animation) !== null && _d !== void 0 ? _d : "assets/instructions.json"
};
}
initInstructionConsentsConfig(item, i, variant) {
var _a, _b;
return {
label: `Consent ${i + 1}`,
key: `consent_${i + 1}`,
type: "checkbox",
default: {
value: {
sources: [
{
validation: {
is_valid: false,
triggers: ["ON_INIT"],
rules: [],
actions: [
{
id: "1",
key: "SET_FIELD_DEFAULT_VALUE",
condition: "true",
props: {
value: {
source: {
key: "PREDEFINED",
props: {
predefinedValue: (_a = item === null || item === void 0 ? void 0 : item.checked) !== null && _a !== void 0 ? _a : true
}
}
}
}
}
]
}
}
]
}
},
validators: {
required: (_b = !(item === null || item === void 0 ? void 0 : item.isOptional)) !== null && _b !== void 0 ? _b : true
},
validation: {
is_valid: false,
triggers: ["ON_CHANGE"],
rules: [
{
id: "1",
key: "VALUE_CHECK",
props: {
value: {
source: {
key: "OBJECT",
props: {
object: {
key: "FORM_DATA",
path: `$.consent_${i + 1}`
}
}
}
},
pattern: {
key: "IS_TRUE"
}
}
}
],
actions: [
{
key: "FIELD_ERROR_HIDE",
condition: "1",
props: {
fieldKey: `consent_${i + 1}`,
message: {
type: "error",
message: ""
}
}
}
]
},
properties: {
placeholder: item.content,
variant,
containerStyles: ""
}
};
}
handleOnClickStart() {
this.onClickStart.emit("Start");
}
handleOnClickScheduleLater() {
this.onClickScheduleLater.emit("Schedule Later");
}
}
/** @nocollapse */ KwikIDInstructionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDInstructionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikIDInstructionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDInstructionComponent, selector: "kwikid-components-instruction", inputs: { config: "config" }, outputs: { onClickStart: "onClickStart", onClickScheduleLater: "onClickScheduleLater" }, ngImport: i0, template: "<div class=\"container\">\n <kwikid-components-page-header [config]=\"headerConfig\">\n </kwikid-components-page-header>\n <main>\n <kwikui-animation-player\n *ngIf=\"config?.showAnimation\"\n [config]=\"animation\"\n id=\"animation\"\n ></kwikui-animation-player>\n\n <div\n *ngIf=\"config?.html?.before\"\n [innerHtml]=\"config?.html?.before | kwikuiSafeHtml\"\n >\n </div>\n\n <ul *ngIf=\"config.instructions && config.instructions.length !== 0\">\n <div *ngFor=\"let instruction of config.instructions\">\n <ng-container\n *ngIf=\"instruction?.text\"\n [ngSwitch]=\"instruction.type\"\n >\n <div *ngSwitchCase=\"'title'\">{{ instruction.text }}</div>\n <div *ngSwitchCase=\"'list-title'\">{{ instruction.text }}</div>\n <li *ngSwitchCase=\"'list-item'\">{{ instruction.text }}</li>\n </ng-container>\n <li\n *ngIf=\"!instruction?.text\"\n [innerHtml]=\"instruction | kwikuiSafeHtml\"\n >\n </li>\n </div>\n </ul>\n\n <div\n *ngIf=\"config?.html?.after\"\n [innerHtml]=\"config?.html?.after | kwikuiSafeHtml\"\n >\n </div>\n\n <div id=\"checklist\">\n <div>\n <kwikid-form-view\n [formConfig]=\"formConfig\"\n [allFormsData]=\"{}\"\n (onClickSaveForm)=\"handleOnClickStart()\"\n ></kwikid-form-view\n ></div>\n </div>\n\n <kwikid-schedule-later-button\n [config]=\"scheduleLaterConfig\"\n (onClickScheduleLater)=\"handleOnClickScheduleLater()\"\n >\n </kwikid-schedule-later-button>\n </main>\n\n <kwikid-components-page-footer\n *ngIf=\"footerConfig.show\"\n [config]=\"footerConfig\"\n >\n </kwikid-components-page-footer>\n</div>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%}.container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow:auto}.container>*:not(:last-child){margin-bottom:1rem}.container main{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:center;padding:0 1rem}.container main>*:not(:last-child){margin-bottom:1rem}.container main #animation{max-width:320px;margin:auto}.container main ul{list-style:none;padding-left:0;font-size:1rem;width:100%}.container main ul div{position:relative;margin-bottom:.5rem}.container main li{position:relative;padding-left:1.5em;margin-bottom:.5rem;white-space:pre-line}.container main li:before{content:\"\\2713\";position:absolute;left:0;width:1em;height:1em}.container main #checklist{width:100%}.container main #checklist div{margin:-1rem}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: KwikIDPageHeaderComponent, selector: "kwikid-components-page-header", inputs: ["config"] }, { type: i2.KwikUIAnimationPlayerComponent, selector: "kwikui-animation-player", inputs: ["config", "id", "player"] }, { 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: KwikIDScheduleLaterButtonComponent, selector: "kwikid-schedule-later-button", inputs: ["config"], outputs: ["onClickScheduleLater"] }, { type: KwikIDPageFooterComponent, selector: "kwikid-components-page-footer", inputs: ["config"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "kwikuiSafeHtml": i2.KwikUISafeHtmlPipe } });
__decorate([
logMethod
], KwikIDInstructionComponent.prototype, "initInstructionsConfig", null);
__decorate([
logMethod
], KwikIDInstructionComponent.prototype, "initInstructionConsentsConfig", null);
__decorate([
logMethod
], KwikIDInstructionComponent.prototype, "handleOnClickStart", null);
__decorate([
logMethod
], KwikIDInstructionComponent.prototype, "handleOnClickScheduleLater", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDInstructionComponent, decorators: [{
type: Component,
args: [{
selector: "kwikid-components-instruction",
templateUrl: "./instruction.component.html",
styleUrls: ["./instruction.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
type: Input
}], onClickStart: [{
type: Output
}], onClickScheduleLater: [{
type: Output
}], initInstructionsConfig: [], initInstructionConsentsConfig: [], handleOnClickStart: [], handleOnClickScheduleLater: [] } });
const NO_AGENT_CONFIG = {
button: "Retry",
image: "assets/no_agent.svg",
footerConfig: {
showPowerBy: true,
label: "Powered By",
logo: "https://kwikid.s3.ap-south-1.amazonaws.com/CONFIG/USER/unity_dev/assets/logo/think360_logo.png"
},
scheduleLaterConfig: {
showScheduleLater: true,
buttonLabel: "Schedule Later",
orLabel: "OR"
},
subtitle: "Currently no agent is available, you can try again after sometime.",
title: "No Agent Available"
};
class KwikIDNoAgentComponent {
constructor() {
this.config = NO_AGENT_CONFIG;
this.headerConfig = undefined;
this.footerConfig = undefined;
this.scheduleLaterConfig = undefined;
this.onClickButton = new EventEmitter();
this.onClickScheduleLater = new EventEmitter();
}
ngOnInit() {
this.initNoAgentConfig();
}
initNoAgentConfig() {
var _a, _b;
this.config = mergeObjects(NO_AGENT_CONFIG, this.config);
this.headerConfig = (_a = this.config) === null || _a === void 0 ? void 0 : _a.headerConfig;
this.footerConfig = (_b = this.config) === null || _b === void 0 ? void 0 : _b.footerConfig;
this.scheduleLaterConfig = this.config.scheduleLaterConfig;
}
handleOnClickRedirect(link) {
window.location.replace(link);
}
handleOnClickButton(e) {
this.onClickButton.emit(e);
}
handleOnClickScheduleLater() {
this.onClickScheduleLater.emit("Schedule Later");
}
}
/** @nocollapse */ KwikIDNoAgentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDNoAgentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikIDNoAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDNoAgentComponent, selector: "kwikid-components-no-agent", inputs: { config: "config" }, outputs: { onClickButton: "onClickButton", onClickScheduleLater: "onClickScheduleLater" }, ngImport: i0, template: "<div class=\"container\">\n <kwikid-components-page-header [config]=\"headerConfig\">\n </kwikid-components-page-header>\n\n <main>\n <div\n *ngIf=\"config?.html?.before\"\n [innerHtml]=\"config?.html?.before | kwikuiSafeHtml\"\n >\n </div>\n\n <kwikui-image\n *ngIf=\"config?.image\"\n [imageSrc]=\"config.image\"\n styles=\"padding:0.5rem; max-height: 300px;\"\n imageType=\"url\"\n ></kwikui-image>\n\n <div\n *ngIf=\"config?.redirect\"\n id=\"redirect\"\n >\n <div id=\"redirect-message\">{{ config?.redirect?.msg ?? \"\" }}</div>\n\n <kwikui-button\n appearance=\"primary\"\n [label]=\"config?.redirect?.linkTitle\"\n size=\"m\"\n styles=\"width: 100%;\"\n (onClick)=\"handleOnClickRedirect(config?.redirect?.link)\"\n ></kwikui-button>\n </div>\n\n <div\n id=\"button\"\n *ngIf=\"config?.button\"\n ><div\n *ngIf=\"config?.redirect\"\n id=\"or\"\n ><span id=\"or-label\">{{ config?.orLabel }}</span></div\n >\n <kwikui-button\n appearance=\"primary\"\n [label]=\"config?.buttonLabel\"\n size=\"m\"\n styles=\"width: 100%;\"\n (onClick)=\"handleOnClickButton(config?.button)\"\n ></kwikui-button\n ></div>\n\n <kwikid-schedule-later-button\n [config]=\"scheduleLaterConfig\"\n (onClickScheduleLater)=\"handleOnClickScheduleLater()\"\n >\n </kwikid-schedule-later-button>\n\n <div\n *ngIf=\"config?.html?.after\"\n [innerHtml]=\"config?.html?.after | kwikuiSafeHtml\"\n >\n </div>\n </main>\n\n <kwikid-components-page-footer [config]=\"footerConfig\">\n </kwikid-components-page-footer>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%}.container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow:auto}.container>*:not(:last-child){margin-bottom:1rem}.container header{display:flex;flex-direction:column;align-items:center}.container header #client-name{margin-top:.5rem;font-size:1.7rem;font-weight:bold}.container main{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:center;padding:0 1rem}.container main>*:not(:last-child){margin-bottom:1rem}.container main #redirect{text-align:center;font-size:.9rem;width:100%}.container main #redirect #redirect-message{padding:.6rem;border-radius:.5rem;background-color:#99999931}.container main #redirect>*:not(:last-child){margin-bottom:1rem}.container main #button{width:100%}.container main #button #or{border-top:2px solid #d3d3d3;position:relative;margin:.5rem 0 1.5rem}.container main #button #or #or-label{position:absolute;top:50%;left:50%;font-weight:600;background-color:#fff;transform:translate(-50%,-50%);padding:0 .5rem}.container main #schedule-later{width:100%}.container main #schedule-later #or{border-top:2px solid #d3d3d3;position:relative;margin:.5rem 0 1.5rem}.container main #schedule-later #or #or-label{position:absolute;top:50%;left:50%;font-weight:600;background-color:#fff;transform:translate(-50%,-50%);padding:0 .5rem}.container footer{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:.55rem}.container footer #logo{width:50px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: KwikIDPageHeaderComponent, selector: "kwikid-components-page-header", inputs: ["config"] }, { type: i2.KwikUIImageComponent, selector: "kwikui-image", inputs: ["altText", "class", "html", "id", "imageSrc", "imageType", "loadingType", "styles"], outputs: ["onClick"] }, { type: i2.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: KwikIDScheduleLaterButtonComponent, selector: "kwikid-schedule-later-button", inputs: ["config"], outputs: ["onClickScheduleLater"] }, { type: KwikIDPageFooterComponent, selector: "kwikid-components-page-footer", inputs: ["config"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "kwikuiSafeHtml": i2.KwikUISafeHtmlPipe } });
__decorate([
logMethod
], KwikIDNoAgentComponent.prototype, "initNoAgentConfig", null);
__decorate([
logMethod
], KwikIDNoAgentComponent.prototype, "handleOnClickRedirect", null);
__decorate([
logMethod
], KwikIDNoAgentComponent.prototype, "handleOnClickButton", null);
__decorate([
logMethod
], KwikIDNoAgentComponent.prototype, "handleOnClickScheduleLater", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDNoAgentComponent, decorators: [{
type: Component,
args: [{
selector: "kwikid-components-no-agent",
templateUrl: "./no-agent.component.html",
styleUrls: ["./no-agent.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
type: Input
}], onClickButton: [{
type: Output
}], onClickScheduleLater: [{
type: Output
}], initNoAgentConfig: [], handleOnClickRedirect: [], handleOnClickButton: [], handleOnClickScheduleLater: [] } });
const RESULT_CONFIG = {
footerConfig: {
showPowerBy: true,
label: "Powered By",
logo: "https://kwikid.s3.ap-south-1.amazonaws.com/CONFIG/USER/unity_dev/assets/logo/think360_logo.png"
},
scheduleLaterConfig: {
showScheduleLater: false,
buttonLabel: "Schedule Later",
orLabel: "OR"
},
title: "Your Result"
};
class KwikIDResultComponent {
constructor() {
this.config = RESULT_CONFIG;
this.headerConfig = undefined;
this.footerConfig = undefined;
this.scheduleLaterConfig = undefined;
this.animation = undefined;
this.image = undefined;
this.onClickScheduleLater = new EventEmitter();
}
ngOnInit() {
this.initResultConfig();
}
initResultConfig() {
var _a, _b, _c;
this.config = mergeObjects(RESULT_CONFIG, this.config);
this.setResultImage((_a = this.config) === null || _a === void 0 ? void 0 : _a.resultImage);
this.headerConfig = (_b = this.config) === null || _b === void 0 ? void 0 : _b.headerConfig;
this.footerConfig = (_c = this.config) === null || _c === void 0 ? void 0 : _c.footerConfig;
this.scheduleLaterConfig = this.config.scheduleLaterConfig;
}
setResultImage(path) {
if (isEmptyValue(path)) {
return;
}
const lowerCasePath = path;
if (isObject(path)) {
this.animation = path;
}
else if (lowerCasePath.endsWith(".json")) {
this.animation = {
path
};
}
else {
this.image = path;
}
}
handleOnClickRedirect(link) {
window.location.replace(link);
}
handleOnClickScheduleLater() {
this.onClickScheduleLater.emit("Schedule Later");
}
}
/** @nocollapse */ KwikIDResultComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ KwikIDResultComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDResultComponent, selector: "kwikid-components-result", inputs: { config: "config" }, outputs: { onClickScheduleLater: "onClickScheduleLater" }, ngImport: i0, template: "<div class=\"container\">\n <kwikid-components-page-header [config]=\"headerConfig\">\n </kwikid-components-page-header>\n\n <main>\n <div\n *ngIf=\"config?.html?.before\"\n [innerHtml]=\"config?.html?.before | kwikuiSafeHtml\"\n >\n </div>\n\n <kwikui-image\n *ngIf=\"image\"\n [imageSrc]=\"image\"\n styles=\"padding: 1rem; max-height: 200px;\"\n altText=\"Result Image\"\n imageType=\"url\"\n ></kwikui-image>\n\n <div\n *ngIf=\"animation\"\n id=\"animation\"\n >\n <kwikui-animation-player [config]=\"animation\"></kwikui-animation-player>\n </div>\n\n <div\n *ngIf=\"config?.html?.middle\"\n [innerHtml]=\"config?.html?.middle | kwikuiSafeHtml\"\n >\n </div>\n\n <div\n *ngIf=\"config?.resultMessage\"\n id=\"result-message\"\n [innerHtml]=\"config?.resultMessage | kwikuiSafeHtml\"\n >\n </div>\n\n <div\n *ngIf=\"config?.redirect\"\n id=\"redirect\"\n >\n <div id=\"redirect-message\">{{ config?.redirect?.msg ?? \"\" }}</div>\n\n <kwikui-button\n appearance=\"primary\"\n [label]=\"config?.redirect?.linkTitle\"\n size=\"m\"\n styles=\"width: 100%;\"\n (onClick)=\"handleOnClickRedirect(config?.redirect?.link)\"\n ></kwikui-button>\n </div>\n\n <kwikid-schedule-later-button\n *ngIf=\"scheduleLaterConfig.showScheduleLater\"\n [config]=\"scheduleLaterConfig\"\n (onClickScheduleLater)=\"handleOnClickScheduleLater()\"\n >\n </kwikid-schedule-later-button>\n\n <div\n *ngIf=\"config?.html?.after\"\n [innerHtml]=\"config?.html?.after | kwikuiSafeHtml\"\n >\n </div>\n </main>\n\n <kwikid-components-page-footer [config]=\"footerConfig\">\n </kwikid-components-page-footer>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%}.container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow:auto}.container>*:not(:last-child){margin-bottom:1rem}.container main{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:center;padding:0 1rem}.container main>*:not(:last-child){margin-bottom:1rem}.container main #animation{padding:.5rem 0;max-width:300px;margin:auto}.container main #result-message{text-align:center;padding:.6rem 0;font-size:1rem;white-space:pre-line;border-radius:.5rem}.container main #redirect{text-align:center;font-size:.9rem;width:100%}.container main #redirect #redirect-message{padding:.6rem;border-radius:.5rem;background-color:#99999931}.container main #redirect>*{margin-bottom:1rem}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: KwikIDPageHeaderComponent, selector: "kwikid-components-page-header", inputs: ["config"] }, { type: i2.KwikUIImageComponent, selector: "kwikui-image", inputs: ["altText", "class", "html", "id", "imageSrc", "imageType", "loadingType", "styles"], outputs: ["onClick"] }, { type: i2.KwikUIAnimationPlayerComponent, selector: "kwikui-animation-player", inputs: ["config", "id", "player"] }, { type: i2.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: KwikIDScheduleLaterButtonComponent, selector: "kwikid-schedule-later-button", inputs: ["config"], outputs: ["onClickScheduleLater"] }, { type: KwikIDPageFooterComponent, selector: "kwikid-components-page-footer", inputs: ["config"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "kwikuiSafeHtml": i2.KwikUISafeHtmlPipe } });
__decorate([
logMethod
], KwikIDResultComponent.prototype, "initResultConfig", null);
__decorate([
logMethod
], KwikIDResultComponent.prototype, "setResultImage", null);
__decorate([
logMethod
], KwikIDResultComponent.prototype, "handleOnClickRedirect", null);
__decorate([
logMethod
], KwikIDResultComponent.prototype, "handleOnClickScheduleLater", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDResultComponent, decorators: [{
type: Component,
args: [{
selector: "kwikid-components-result",
templateUrl: "./result.component.html",
styleUrls: ["./result.component.scss"]
}]
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
type: Input
}], onClickScheduleLater: [{
type: Output
}], initResultConfig: [], setResultImage: [], handleOnClickRedirect: [], handleOnClickScheduleLater: [] } });
const LOGIN_PAGE_CONFIG = {
footerConfig: {
showPowerBy: true,
label: "Powered By",
logo: "https://kwikid.s3.ap-south-1.amazonaws.com/CONFIG/USER/unity_dev/assets/logo/think360_logo.png"
},
subtitle: "Currently no agent is available, you can try again after sometime.",
title: "No Agent Available"
};
const LOGIN_FORM_CONFIG = {
title: "Login",
key: "LOGIN",
fields: [],
properties: {
header: {
logo: {
hidden: true
},
backButton: {
hidden: true
},
title: {
hidden: true
},
steps: {
hidden: true
}
},
main: {
styles: ""
},
footer: {
viewFormsButton: {
hidden: true
},
saveButton: {
hidden: false,
label: "Submit"
}
}
}
};
const LOGIN_FORM_FIELDS = {
USER_ID_FIELD: {
label: `User ID`,
key: `user_id`,
type: "text",
default: {},
disabled: false,
validators: {
required: true
},
properties: {
placeholder: "Please enter your User ID",
containerStyles: "margin-bottom: -0.5rem;"
}
},
MOBILE_FIELD: {
label: `Mobile Number`,
key: `mobile`,
type: "phone",
default: {},
disabled: false,
validators: {
required: true,
minLength: 10
},
properties: {
countryCode: "",
prefix: "",
postfix: "",
removeCountryCodeFromValue: true,
phoneMaskAfterCountryCode: "##########",
placeholder: "Please enter your Mobile Number",
containerStyles: "margin-bottom: -0.5rem;"
}
},
TNC_FIELD: {
label: `TnC`,
key: `tnc`,
type: "checkbox",
validators: {
required: true
},
properties: {
placeholder: "<span style=\"font-size:14px\">I Agree to all Terms and Conditions</span>",
containerStyles: "margin: 1.5rem 0 -0.5rem; font-size:14px"
}
},
OTP_FIELD: {
label: ``,
key: `otp`,
type: "otp",
messages: [],
properties: {
mask: "# # # #",
hidePlaceholder: false,
placeholder: "Please enter your OTP",
mode: "multiple",
otpLength: 4,
containerStyles: "margin: 0 -0.5rem 2rem -0.5rem; text-align:center; display:flex; align-items:center; flex-direction:column; gap: 0.5rem"
}
},
RESEND_OTP_FIELD: {
label: `Resend OTP`,
key: `resend_otp`,
type: "button",
disabled: false,
properties: {
appearance: "accent",
size: "s",
containerStyles: "display:flex; justify-content:center"
}
},
USERNAME_FIELD: {
label: `Username`,
key: `username`,
type: "text",
validators: {
required: true
},
properties: {
placeholder: "Please enter your username",
containerStyles: ""
}
},
PASSWORD_FIELD: {
label: `Password`,
key: `password`,
type: "password",
validators: {
required: true
},
properties: {
placeholder: "Please enter your password",
containerStyles: "margin-bottom: -0.5rem"
}
},
OLD_PASSWORD_FIELD: {
label: `Old Password`,
key: `old_password`,
type: "password",
validators: {
required: true
},
properties: {
placeholder: "Please enter your Old Password"
}
},
NEW_PASSWORD_FIELD: {
label: `New Password`,
key: `new_password`,
type: "password",
validators: {
required: true
},
properties: {
placeholder: "Please enter your New Password"
}
},
REPEAT_PASSWORD_FIELD: {
label: `Repeat New Password`,
key: `repeat_password`,
type: "password",
validators: {
required: true
},
properties: {
placeholder: "Please enter your Repeat Password"
}
}
};
// Function to set privacy policy with default display text if not specified.
const setPrivacyPolicy = (privacyPolicy) => {
var _a;
let policy;
// Checks if the privacyPolicy object contains a non-empty value.
if (isNotEmptyValue(privacyPolicy)) {
policy = privacyPolicy;
// Sets default display text for the policy if none exists.
policy.displayText = (_a = privacyPolicy === null || privacyPolicy === void 0 ? void 0 : privacyPolicy.displayText) !== null && _a !== void 0 ? _a : "Privacy Policy";
}
return policy;
};
// Function to configure the side panel based on provided settings.
const setSidePanelConfig = (sidePanel) => {
// Check if sidePanel object contains a non-empty value.
if (isNotEmptyValue(sidePanel)) {
if (sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.html) {
// Return configuration for HTML content if specified.
return {
html: sidePanel.html
};
}
if (sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.image) {
// Return configuration for image if specified.
return {
image: sidePanel.image
};
}
if (sidePanel === null || sidePanel === void 0 ? void 0 : sidePanel.animation) {
// Return configuration for animation if specified.
return {
animation: sidePanel.animation
};
}
}
};
// Function to configure form types and fields based on the provided configuration and data.
const setFormTypeAndFormFields = (config, data) => {
var _a, _b, _c, _d;
const formConfig = LOGIN_FORM_CONFIG;
let formTitle;
// Access specific configurations for login form.
const customFormConfig = config === null || config === void 0 ? void 0 : config.loginConfig;
const isOtpFlow = (_a = config === null || config === void 0 ? void 0 : config.utilityFlags) === null || _a === void 0 ? void 0 : _a.isOtpFlow;
const formType = config === null || config === void 0 ? void 0 : config.formType;
const buttonLabels = (_b = config === null || config === void 0 ? void 0 : config.displaySettings) === null || _b === void 0 ? void 0 : _b.buttonLabels;
let specificFormConfig;
// Configure fields and title for Mobile Login.
if (formType.includes("Mobile")) {
formTitle = setFormTitle(customFormConfig === null || customFormConfig === void 0 ? void 0 : customFormConfig.mobileLogin, "Mobile Login");
const fields = [LOGIN_FORM_FIELDS.MOBILE_FIELD];
formConfig.fields = setFormFields(customFormConfig === null || customFormConfig === void 0 ? void 0 : customFormConfig.mobileLogin, fields);
// Add Terms and Conditions Field based on Config
if (config === null || config === void 0 ? void 0 : config.tncOnStart) {
const tncField = setTncCheckbox(config);
formConfig.fields.push(tncField);
}
specificFormConfig = customFormConfig === null || customFormConfig === void 0 ? void 0 : customFormConfig.mobileLogin;
}
// Configure fields and title for User Login.
else if (formType.includes("User")) {
formTitle = setFormTitle(customFormConfig === null |