kwikid-forms 0.2.4 → 0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/kwikid-forms.umd.js +84 -32
- package/bundles/kwikid-forms.umd.js.map +1 -1
- package/esm2015/lib/builder/element-config-editor/editors/basic-element-config.editor.component.js +3 -4
- package/esm2015/lib/renderer/config-converter.helper.js +9 -9
- package/esm2015/lib/renderer/form-view/form-view.component.js +12 -4
- package/esm2015/lib/renderer/forms-list/forms-list.component.js +53 -5
- package/esm2015/lib/renderer/renderer.component.js +2 -2
- package/fesm2015/kwikid-forms.js +79 -25
- package/fesm2015/kwikid-forms.js.map +1 -1
- package/lib/renderer/forms-list/forms-list.component.d.ts +5 -1
- package/package.json +2 -2
package/fesm2015/kwikid-forms.js
CHANGED
|
@@ -5,10 +5,9 @@ import * as i0 from '@angular/core';
|
|
|
5
5
|
import { EventEmitter, Component, Input, Output, ViewEncapsulation, Pipe, Inject, HostListener, NgModule } from '@angular/core';
|
|
6
6
|
import * as i1 from '@angular/forms';
|
|
7
7
|
import { FormGroup, FormControl, FormArray, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
8
|
-
import { logMethod, setMissingKeyValue, getObjectFromLocalStorage, isNotEmptyValue, isEmptyValue, checkObjectKeyExists, setValueToObjectPath, Source, Rule, Condition, Action, PATTERNS, Validation, isUndefined, replaceString, getObjectValueFromPath, ESourceKey } from 'kwikid-toolkit';
|
|
8
|
+
import { logMethod, setMissingKeyValue, mergeObjects, getObjectFromLocalStorage, isNotEmptyValue, isEmptyValue, checkObjectKeyExists, setValueToObjectPath, Source, Rule, Condition, Action, PATTERNS, Validation, isUndefined, replaceString, getObjectValueFromPath, ESourceKey } from 'kwikid-toolkit';
|
|
9
9
|
import * as i2 from 'kwikui';
|
|
10
10
|
import { KwikUIButtonModule, KwikUIInputModule, KwikUIButtonIconModule, KwikUIModule } from 'kwikui';
|
|
11
|
-
import _ from 'lodash';
|
|
12
11
|
import * as i3 from '@angular/common';
|
|
13
12
|
import { CommonModule } from '@angular/common';
|
|
14
13
|
import * as i3$1 from '@taiga-ui/core';
|
|
@@ -590,7 +589,7 @@ class BasicElementConfigEditor {
|
|
|
590
589
|
basicElementCommonConfig.key = basicElementCommonConfig.key.replace(/\s/g, "_");
|
|
591
590
|
// Get Basic Element Config
|
|
592
591
|
const basicElementConfig = event.basicElementConfig;
|
|
593
|
-
this.elementConfig =
|
|
592
|
+
this.elementConfig = mergeObjects(this.elementConfig, basicElementCommonConfig, basicElementConfig);
|
|
594
593
|
this.updateElement.emit({ elementConfig: this.elementConfig });
|
|
595
594
|
}
|
|
596
595
|
handleOnSave() {
|
|
@@ -1611,7 +1610,7 @@ class Converter {
|
|
|
1611
1610
|
}
|
|
1612
1611
|
updateFormConfigProperties(formConfig) {
|
|
1613
1612
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
1614
|
-
const
|
|
1613
|
+
const formViewProperties = {
|
|
1615
1614
|
header: {
|
|
1616
1615
|
title: {
|
|
1617
1616
|
hidden: false,
|
|
@@ -1633,13 +1632,13 @@ class Converter {
|
|
|
1633
1632
|
}
|
|
1634
1633
|
};
|
|
1635
1634
|
if (checkObjectKeyExists(formConfig, "properties")) {
|
|
1636
|
-
const headerTitleHidden = (_c = (_b = (_a = formConfig.properties.header) === null || _a === void 0 ? void 0 : _a.title) === null || _b === void 0 ? void 0 : _b.hidden) !== null && _c !== void 0 ? _c :
|
|
1635
|
+
const headerTitleHidden = (_c = (_b = (_a = formConfig.properties.header) === null || _a === void 0 ? void 0 : _a.title) === null || _b === void 0 ? void 0 : _b.hidden) !== null && _c !== void 0 ? _c : formViewProperties.header.title.hidden;
|
|
1637
1636
|
const headerTitleLabel = (_f = (_e = (_d = formConfig.properties.header) === null || _d === void 0 ? void 0 : _d.title) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : formConfig.title;
|
|
1638
|
-
const headerStepsHidden = (_j = (_h = (_g = formConfig.properties.header) === null || _g === void 0 ? void 0 : _g.steps) === null || _h === void 0 ? void 0 : _h.hidden) !== null && _j !== void 0 ? _j :
|
|
1639
|
-
const viewFormsButtonHidden = (_m = (_l = (_k = formConfig.properties.footer) === null || _k === void 0 ? void 0 : _k.viewFormsButton) === null || _l === void 0 ? void 0 : _l.hidden) !== null && _m !== void 0 ? _m :
|
|
1640
|
-
const viewFormsButtonLabel = (_q = (_p = (_o = formConfig.properties.footer) === null || _o === void 0 ? void 0 : _o.viewFormsButton) === null || _p === void 0 ? void 0 : _p.label) !== null && _q !== void 0 ? _q :
|
|
1641
|
-
const saveButtonHidden = (_t = (_s = (_r = formConfig.properties.footer) === null || _r === void 0 ? void 0 : _r.saveButton) === null || _s === void 0 ? void 0 : _s.hidden) !== null && _t !== void 0 ? _t :
|
|
1642
|
-
const saveButtonLabel = (_w = (_v = (_u = formConfig.properties.footer) === null || _u === void 0 ? void 0 : _u.saveButton) === null || _v === void 0 ? void 0 : _v.label) !== null && _w !== void 0 ? _w :
|
|
1637
|
+
const headerStepsHidden = (_j = (_h = (_g = formConfig.properties.header) === null || _g === void 0 ? void 0 : _g.steps) === null || _h === void 0 ? void 0 : _h.hidden) !== null && _j !== void 0 ? _j : formViewProperties.header.steps.hidden;
|
|
1638
|
+
const viewFormsButtonHidden = (_m = (_l = (_k = formConfig.properties.footer) === null || _k === void 0 ? void 0 : _k.viewFormsButton) === null || _l === void 0 ? void 0 : _l.hidden) !== null && _m !== void 0 ? _m : formViewProperties.footer.viewFormsButton.hidden;
|
|
1639
|
+
const viewFormsButtonLabel = (_q = (_p = (_o = formConfig.properties.footer) === null || _o === void 0 ? void 0 : _o.viewFormsButton) === null || _p === void 0 ? void 0 : _p.label) !== null && _q !== void 0 ? _q : formViewProperties.footer.viewFormsButton.label;
|
|
1640
|
+
const saveButtonHidden = (_t = (_s = (_r = formConfig.properties.footer) === null || _r === void 0 ? void 0 : _r.saveButton) === null || _s === void 0 ? void 0 : _s.hidden) !== null && _t !== void 0 ? _t : formViewProperties.footer.saveButton.hidden;
|
|
1641
|
+
const saveButtonLabel = (_w = (_v = (_u = formConfig.properties.footer) === null || _u === void 0 ? void 0 : _u.saveButton) === null || _v === void 0 ? void 0 : _v.label) !== null && _w !== void 0 ? _w : formViewProperties.footer.saveButton.label;
|
|
1643
1642
|
formConfig.properties = {
|
|
1644
1643
|
header: {
|
|
1645
1644
|
title: {
|
|
@@ -1663,7 +1662,7 @@ class Converter {
|
|
|
1663
1662
|
};
|
|
1664
1663
|
}
|
|
1665
1664
|
else {
|
|
1666
|
-
formConfig.properties =
|
|
1665
|
+
formConfig.properties = formViewProperties;
|
|
1667
1666
|
}
|
|
1668
1667
|
return formConfig;
|
|
1669
1668
|
}
|
|
@@ -2230,6 +2229,13 @@ __decorate([
|
|
|
2230
2229
|
logMethod
|
|
2231
2230
|
], Converter.prototype, "convertFormConfig", null);
|
|
2232
2231
|
|
|
2232
|
+
var EFormsListStatus;
|
|
2233
|
+
(function (EFormsListStatus) {
|
|
2234
|
+
EFormsListStatus["COMPLETED"] = "completed";
|
|
2235
|
+
EFormsListStatus["EDITABLE"] = "editable";
|
|
2236
|
+
EFormsListStatus["LOCKED"] = "locked";
|
|
2237
|
+
})(EFormsListStatus || (EFormsListStatus = {}));
|
|
2238
|
+
|
|
2233
2239
|
var EActionKey;
|
|
2234
2240
|
(function (EActionKey) {
|
|
2235
2241
|
EActionKey["SET_VALUE"] = "SET_VALUE";
|
|
@@ -3026,9 +3032,16 @@ class KwikIDFormViewComponent {
|
|
|
3026
3032
|
return item.key;
|
|
3027
3033
|
}
|
|
3028
3034
|
handleOnClickViewForms(e) {
|
|
3029
|
-
this.
|
|
3030
|
-
|
|
3031
|
-
|
|
3035
|
+
if (this.formConfig.status === EFormsListStatus.COMPLETED) {
|
|
3036
|
+
this.onClickViewForms.emit({
|
|
3037
|
+
clicked: true
|
|
3038
|
+
});
|
|
3039
|
+
}
|
|
3040
|
+
else if (window.confirm("Your data will be lost if you leave this page! Continue?")) {
|
|
3041
|
+
this.onClickViewForms.emit({
|
|
3042
|
+
clicked: true
|
|
3043
|
+
});
|
|
3044
|
+
}
|
|
3032
3045
|
}
|
|
3033
3046
|
handleOnClickSaveForm(e) {
|
|
3034
3047
|
return __awaiter(this, void 0, void 0, function* () {
|
|
@@ -3558,6 +3571,7 @@ class KwikIDFormsListComponent {
|
|
|
3558
3571
|
constructor() {
|
|
3559
3572
|
this.showFormFields = {};
|
|
3560
3573
|
this.userConfig = {};
|
|
3574
|
+
this.stepConfig = {};
|
|
3561
3575
|
this.activeFormConfig = {};
|
|
3562
3576
|
this.formsList = [];
|
|
3563
3577
|
this.formsListCompleted = [];
|
|
@@ -3568,19 +3582,32 @@ class KwikIDFormsListComponent {
|
|
|
3568
3582
|
this.selectedForm = "";
|
|
3569
3583
|
this.formsListLength = 0;
|
|
3570
3584
|
this.isAllFormsCompleted = true;
|
|
3585
|
+
this.loading = false;
|
|
3586
|
+
}
|
|
3587
|
+
setSelectedForm(selected_form) {
|
|
3588
|
+
this.selectedForm = selected_form;
|
|
3571
3589
|
}
|
|
3572
3590
|
ngOnInit() {
|
|
3591
|
+
var _a, _b;
|
|
3592
|
+
this.loading = true;
|
|
3593
|
+
this.setSelectedForm((_b = (_a = this.activeFormConfig) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : "");
|
|
3594
|
+
this.stepConfig = this.formatStepConfig(this.stepConfig);
|
|
3573
3595
|
this.formsList = this.filterHiddenForms(this.formsList);
|
|
3574
3596
|
this.formsListLength = this.findFormsListLength(this.formsList);
|
|
3575
3597
|
this.isAllFormsCompleted = this.checkIsAllFormsCompleted(this.formsList);
|
|
3598
|
+
this.loading = false;
|
|
3576
3599
|
}
|
|
3577
3600
|
ngOnChanges(changes) {
|
|
3601
|
+
var _a, _b;
|
|
3578
3602
|
const verifyChange = (key) => {
|
|
3579
3603
|
return checkObjectKeyExists(changes, key) && !changes[key].firstChange;
|
|
3580
3604
|
};
|
|
3581
3605
|
if (verifyChange("showFormFields")) {
|
|
3582
3606
|
this.showFormFields = changes.showFormFields.currentValue;
|
|
3583
3607
|
}
|
|
3608
|
+
if (verifyChange("stepConfig")) {
|
|
3609
|
+
this.stepConfig = changes.stepConfig.currentValue;
|
|
3610
|
+
}
|
|
3584
3611
|
if (verifyChange("formsList")) {
|
|
3585
3612
|
this.formsList = this.filterHiddenForms(this.formsList);
|
|
3586
3613
|
this.formsListLength = this.findFormsListLength(this.formsList);
|
|
@@ -3588,8 +3615,35 @@ class KwikIDFormsListComponent {
|
|
|
3588
3615
|
}
|
|
3589
3616
|
if (verifyChange("isMobileView")) {
|
|
3590
3617
|
this.isMobileView = changes.isMobileView.currentValue;
|
|
3618
|
+
if (!this.isMobileView) {
|
|
3619
|
+
this.setSelectedForm("");
|
|
3620
|
+
}
|
|
3621
|
+
}
|
|
3622
|
+
if (verifyChange("activeFormConfig")) {
|
|
3623
|
+
this.activeFormConfig = changes.activeFormConfig.currentValue;
|
|
3624
|
+
this.setSelectedForm((_b = (_a = this.activeFormConfig) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : "");
|
|
3591
3625
|
}
|
|
3592
3626
|
}
|
|
3627
|
+
formatStepConfig(stepConfig) {
|
|
3628
|
+
let stepConfigProperties = {
|
|
3629
|
+
formListProperties: {
|
|
3630
|
+
footer: {
|
|
3631
|
+
submitFormButton: {
|
|
3632
|
+
hidden: false,
|
|
3633
|
+
label: "Submit"
|
|
3634
|
+
}
|
|
3635
|
+
}
|
|
3636
|
+
}
|
|
3637
|
+
};
|
|
3638
|
+
if (checkObjectKeyExists(stepConfig, "props")) {
|
|
3639
|
+
stepConfigProperties = mergeObjects(stepConfigProperties, stepConfig.props);
|
|
3640
|
+
stepConfig = setValueToObjectPath(stepConfig, "props", stepConfigProperties);
|
|
3641
|
+
}
|
|
3642
|
+
else {
|
|
3643
|
+
stepConfig = setValueToObjectPath(stepConfig, "props", stepConfigProperties);
|
|
3644
|
+
}
|
|
3645
|
+
return stepConfig;
|
|
3646
|
+
}
|
|
3593
3647
|
filterHiddenForms(formsList) {
|
|
3594
3648
|
return formsList.filter((form) => {
|
|
3595
3649
|
if (checkObjectKeyExists(form, "hidden")) {
|
|
@@ -3633,7 +3687,9 @@ class KwikIDFormsListComponent {
|
|
|
3633
3687
|
return isAllFormsCompleted;
|
|
3634
3688
|
}
|
|
3635
3689
|
handleOnClickSetActiveForm(selectedForm) {
|
|
3636
|
-
|
|
3690
|
+
console.log(this.isMobileView, this.selectedForm);
|
|
3691
|
+
if (this.isMobileView ||
|
|
3692
|
+
(!this.isMobileView && this.selectedForm !== selectedForm) ||
|
|
3637
3693
|
(this.isAllFormsCompleted && !this.showFormFields)) {
|
|
3638
3694
|
this.selectedForm = selectedForm;
|
|
3639
3695
|
this.onClickSetActiveForm.emit(selectedForm);
|
|
@@ -3644,10 +3700,13 @@ class KwikIDFormsListComponent {
|
|
|
3644
3700
|
}
|
|
3645
3701
|
}
|
|
3646
3702
|
/** @nocollapse */ KwikIDFormsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3647
|
-
/** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: { showFormFields: "showFormFields", userConfig: "userConfig", activeFormConfig: "activeFormConfig", formsList: "formsList", formsListCompleted: "formsListCompleted", isMobileView: "isMobileView" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", onClickHideFormsList: "onClickHideFormsList", onClickSubmitForms: "onClickSubmitForms" }, usesOnChanges: true, ngImport: i0, template: "<div
|
|
3703
|
+
/** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: { showFormFields: "showFormFields", userConfig: "userConfig", stepConfig: "stepConfig", activeFormConfig: "activeFormConfig", formsList: "formsList", formsListCompleted: "formsListCompleted", isMobileView: "isMobileView" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", onClickHideFormsList: "onClickHideFormsList", onClickSubmitForms: "onClickSubmitForms" }, usesOnChanges: true, ngImport: i0, template: "<div\n id=\"sidebar-container\"\n *ngIf=\"!loading\"\n>\n <div id=\"sidebar\">\n <div ngClass=\"kwikid-form-header\">\n <div id=\"uf-header\">\n <div id=\"uf-header-logo-container\">\n <img\n id=\"uf-header-logo\"\n src=\"{{ this.userConfig.theme.clientLogo }}\"\n [ngClass]=\"'large-icon'\"\n />\n </div>\n </div>\n <hr />\n </div>\n <div id=\"uf-progress\">\n <div id=\"uf-progress-steps\">\n {{ this.formsListCompleted.length }} / {{ this.formsListLength }} Steps\n Completed\n </div>\n <kwikui-progress-segmented\n [max]=\"this.formsListLength\"\n size=\"m\"\n [value]=\"this.formsListCompleted.length\"\n ></kwikui-progress-segmented>\n </div>\n <div id=\"uf-sections-container\">\n <ng-container *ngFor=\"let form of formsList; let i = index\">\n <ng-container [ngSwitch]=\"form.type\">\n <!-- HTML Content -->\n <ng-container *ngSwitchCase=\"'html'\">\n <div [innerHtml]=\"form.props.htmlContent | safeHtml\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'form'\">\n <div\n [class]=\"'uf-section-item'\"\n [class.completed]=\"form.status === 'completed' && !form.disabled\"\n [class.edit]=\"form.status === 'editable' && !form.disabled\"\n [class.locked]=\"form.status === 'locked' && form.disabled\"\n [class.active]=\"\n activeFormConfig !== undefined &&\n form.key === activeFormConfig.key\n \"\n (click)=\"\n form.status === 'locked' && form.disabled\n ? undefined\n : handleOnClickSetActiveForm(form.key)\n \"\n >\n <div class=\"uf-form-section-card-title\">\n {{ form.props.title }} <span *ngIf=\"form?.required\"\n >*</span\n >\n </div>\n <div class=\"uf-form-section-card-status\">\n <div\n *ngIf=\"form.status === 'completed' && !form.disabled\"\n class=\"uf-form-section-card-status-img completed\"\n >\n <tui-svg src=\"tuiIconCheckLarge\"></tui-svg>\n </div>\n <div\n *ngIf=\"form.status !== 'completed' && !form.disabled\"\n class=\"uf-form-section-card-status-img edit\"\n >\n <tui-svg src=\"tuiIconEdit\"></tui-svg>\n </div>\n <div\n *ngIf=\"form.status !== 'completed' && form.disabled\"\n class=\"uf-form-section-card-status-img locked\"\n >\n <tui-svg src=\"tuiIconLock\"></tui-svg>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n <div id=\"submit-sidebar-btn-container\">\n <kwikui-button\n *ngIf=\"\n !stepConfig.props.formListProperties.footer.submitFormButton.hidden\n \"\n [disabled]=\"false\"\n id=\"\"\n label=\"{{\n stepConfig.props.formListProperties.footer.submitFormButton.label\n }}\"\n [showLoader]=\"false\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"primary\"\n icon=\"\"\n iconRight=\"\"\n [shape]=\"null\"\n size=\"m\"\n styles=\"width: 100%\"\n (onClick)=\"handleOnSubmitForms($event)\"\n ></kwikui-button>\n </div>\n </div>\n</div>\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}#sidebar-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}#sidebar{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch}.uf-section-item{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-content:center;padding:1rem;grid-gap:1rem;gap:1rem;cursor:pointer;box-shadow:0 1px 3px -1px var(--tui-base-05);border-radius:.5rem;background-color:var(--tui-base-02);position:relative}.uf-section-item:hover{box-shadow:0 1px 3px -1px var(--tui-base-08)}#submit-sidebar-btn-container{width:100%;bottom:0px;z-index:1;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;gap:1rem}#submit-sidebar-btn-container *{flex-grow:1}#uf-sections-container{display:flex;flex-direction:column;height:100%;grid-row-gap:20px;row-gap:20px;padding:1rem;overflow-y:auto}.uf-form-section-card{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:10px;column-gap:10px;border:none;border-radius:8px;background-color:#e9e9e9;height:-moz-fit-content;height:fit-content;min-height:60px;padding:10px 15px;width:100%;max-width:350px;margin:0 auto}.uf-section-item.locked{-webkit-user-select:none;user-select:none;cursor:not-allowed}.uf-form-section-card .uf-form-section-card-title{font-size:1.2em;text-align:left;line-height:1.25em}.uf-form-section-card .uf-form-section-card-status{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.uf-form-section-card .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}.uf-form-section-card-status-img.completed{background-color:var(--tui-success-fill);padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-status-img.edit{background-color:var(--tui-error-fill);padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-status-img.locked{background-color:var(--tui-neutral-fill);padding:.25rem;border-radius:50%;color:#fff}#uf-progress{display:flex;padding:1rem;flex-direction:column;align-content:center;justify-content:center;align-items:stretch;grid-gap:.5rem;gap:.5rem}#uf-progress-steps{font-size:1em;text-align:right;color:#3d3d3d}.uf-form-section-card-title{font-size:1em;font-weight:bold;color:#000}@media screen and (max-width: 600px){#sidebar-container{max-width:unset}}.kwikid-form-header{height:70px;z-index:6}.kwikid-form-header hr{width:calc(100% - 1rem);margin-left:auto;margin-right:auto}#uf-header{display:flex;flex-direction:row;align-content:center;align-items:center;justify-content:flex-start;grid-column-gap:10px;column-gap:10px;padding:10px 20px;width:100%;max-width:calc(400px + 50vw + 2rem);margin:0 auto;height:70px;z-index:1}#uf-header #uf-header-goback-container{display:none}#uf-header #uf-header-goback-container:hover{border-radius:50%;background-color:#d3d3d3}#uf-header #uf-header-goback-container #uf-header-goback{width:100%;height:auto}#uf-header #uf-header-logo-container{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}#uf-header #uf-header-logo-container #uf-header-logo.small-icon{width:100%;height:50px}#uf-header #uf-header-logo-container #uf-header-logo.large-icon{width:100%;height:50px}#uf-header #uf-header-title-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;grid-row-gap:4px;row-gap:4px}#uf-header #uf-header-title-container #uf-header-title{font-size:1.4em;color:#121212}#uf-header #uf-header-title-container #uf-header-subtitle{font-size:1.2em;color:#121212}\n"], components: [{ type: i2.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["id", "value", "max", "size", "colors"] }, { type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "safeHtml": SafeHtmlPipe } });
|
|
3648
3704
|
__decorate([
|
|
3649
3705
|
logMethod
|
|
3650
3706
|
], KwikIDFormsListComponent.prototype, "ngOnChanges", null);
|
|
3707
|
+
__decorate([
|
|
3708
|
+
logMethod
|
|
3709
|
+
], KwikIDFormsListComponent.prototype, "formatStepConfig", null);
|
|
3651
3710
|
__decorate([
|
|
3652
3711
|
logMethod
|
|
3653
3712
|
], KwikIDFormsListComponent.prototype, "filterHiddenForms", null);
|
|
@@ -3674,6 +3733,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
3674
3733
|
type: Input
|
|
3675
3734
|
}], userConfig: [{
|
|
3676
3735
|
type: Input
|
|
3736
|
+
}], stepConfig: [{
|
|
3737
|
+
type: Input
|
|
3677
3738
|
}], activeFormConfig: [{
|
|
3678
3739
|
type: Input
|
|
3679
3740
|
}], formsList: [{
|
|
@@ -3688,14 +3749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
3688
3749
|
type: Output
|
|
3689
3750
|
}], onClickSubmitForms: [{
|
|
3690
3751
|
type: Output
|
|
3691
|
-
}], ngOnChanges: [], filterHiddenForms: [], findFormsListLength: [], checkIsAllFormsCompleted: [], handleOnClickSetActiveForm: [], handleOnSubmitForms: [] } });
|
|
3692
|
-
|
|
3693
|
-
var EFormsListStatus;
|
|
3694
|
-
(function (EFormsListStatus) {
|
|
3695
|
-
EFormsListStatus["COMPLETED"] = "completed";
|
|
3696
|
-
EFormsListStatus["EDITABLE"] = "editable";
|
|
3697
|
-
EFormsListStatus["LOCKED"] = "locked";
|
|
3698
|
-
})(EFormsListStatus || (EFormsListStatus = {}));
|
|
3752
|
+
}], ngOnChanges: [], formatStepConfig: [], filterHiddenForms: [], findFormsListLength: [], checkIsAllFormsCompleted: [], handleOnClickSetActiveForm: [], handleOnSubmitForms: [] } });
|
|
3699
3753
|
|
|
3700
3754
|
var ERendererActionKey;
|
|
3701
3755
|
(function (ERendererActionKey) {
|
|
@@ -4205,7 +4259,7 @@ class KwikIDFormsRendererComponent {
|
|
|
4205
4259
|
}
|
|
4206
4260
|
}
|
|
4207
4261
|
/** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormsRendererComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4208
|
-
/** @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", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, 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 [formsListCompleted]=\"this.formsListCompleted\"\n [isMobileView]=\"this.isMobileView\"\n (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\n (onClickSubmitForms)=\"this.handleOnClickSubmitForms($event)\"\n ></kwikid-forms-list>\n </div>\n <div\n ngClass=\"kwikid-forms-container\"\n *ngIf=\"\n this.showForm &&\n this.showFormFields &&\n this.activeFormConfig !== undefined\n \"\n [class.active]=\"showFormFields\"\n [class.mobile]=\"isMobileView\"\n [@panelInOut]\n >\n <kwikid-form-view\n [formConfig]=\"this.activeFormConfig\"\n [allFormsData]=\"this.allFormsData\"\n [isMobileView]=\"this.isMobileView\"\n (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\n (onClickSaveForm)=\"this.handleOnClickSaveForm($event)\"\n ></kwikid-form-view>\n </div>\n </div>\n</div>\n<div\n ngClass=\"kwikid-forms-renderer-loader\"\n *ngIf=\"loader\"\n>\n <span class=\"loader\"></span>\n</div>\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=\"tuiIconCancel\"\n style=\"color: #fff !important\"\n >\n </tui-svg>\n</tui-push>\n", styles: [":host{position:relative}.kwikid-root{width:100%;height:100%}.kwikid-renderer{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%}.kwikid-layout-container{display:flex;flex-direction:row;padding:0 1rem;height:100%;justify-content:center;align-items:stretch;background:var(--tui-secondary-active);position:relative}.kwikid-sections-container{display:block;width:100%;max-width:400px;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);margin:auto 1rem auto 0;box-shadow:0 0 12px -8px var(--tui-secondary)}.kwikid-sections-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}.kwikid-forms-container{display:block;width:100%;max-width:50%;margin:auto 0;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);box-shadow:0 0 12px -8px var(--tui-primary)}.kwikid-forms-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}@media screen and (max-width: 600px){.kwikid-layout-container{padding:0;background:transparent}.kwikid-sections-container{position:absolute;max-width:100%;bottom:-10000px;left:-10000px;opacity:0;padding:0;visibility:hidden}.kwikid-sections-container.active{visibility:visible}.kwikid-sections-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container{display:none;max-width:100%;height:100%;padding:0;border-radius:0;box-shadow:none}.kwikid-forms-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container.active{display:block}}.kwikid-forms-renderer-loader{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;z-index:100}.kwikid-forms-renderer-loader .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:#fff #fff transparent;box-sizing:border-box;animation:rotation 1s linear infinite}.kwikid-forms-renderer-loader .loader:after{content:\"\";box-sizing:border-box;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:3px solid;border-color:transparent var(--tui-primary) var(--tui-primary);width:24px;height:24px;border-radius:50%;animation:rotationBack .5s linear infinite;transform-origin:center center}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.kwikid-forms-renderer-loader .t-loader{display:none!important}#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}\n"], components: [{ type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["showFormFields", "userConfig", "activeFormConfig", "formsList", "formsListCompleted", "isMobileView"], outputs: ["onClickSetActiveForm", "onClickHideFormsList", "onClickSubmitForms"] }, { type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["formConfig", "formData", "isMobileView", "allFormsData"], outputs: ["onClickViewForms", "onClickSaveForm", "onClickApiCall"] }, { type: i4$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4$1.TuiPushDirective, selector: "tui-push" }], animations: [
|
|
4262
|
+
/** @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", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, 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 [formsListCompleted]=\"this.formsListCompleted\"\n [isMobileView]=\"this.isMobileView\"\n (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\n (onClickSubmitForms)=\"this.handleOnClickSubmitForms($event)\"\n ></kwikid-forms-list>\n </div>\n <div\n ngClass=\"kwikid-forms-container\"\n *ngIf=\"\n this.showForm &&\n this.showFormFields &&\n this.activeFormConfig !== undefined\n \"\n [class.active]=\"showFormFields\"\n [class.mobile]=\"isMobileView\"\n [@panelInOut]\n >\n <kwikid-form-view\n [formConfig]=\"this.activeFormConfig\"\n [allFormsData]=\"this.allFormsData\"\n [isMobileView]=\"this.isMobileView\"\n (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\n (onClickSaveForm)=\"this.handleOnClickSaveForm($event)\"\n ></kwikid-form-view>\n </div>\n </div>\n</div>\n<div\n ngClass=\"kwikid-forms-renderer-loader\"\n *ngIf=\"loader\"\n>\n <span class=\"loader\"></span>\n</div>\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=\"tuiIconCancel\"\n style=\"color: #fff !important\"\n >\n </tui-svg>\n</tui-push>\n", styles: [":host{position:relative}.kwikid-root{width:100%;height:100%}.kwikid-renderer{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%}.kwikid-layout-container{display:flex;flex-direction:row;padding:0 1rem;height:100%;justify-content:center;align-items:stretch;background:var(--tui-secondary-active);position:relative}.kwikid-sections-container{display:block;width:100%;max-width:400px;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);margin:auto 1rem auto 0;box-shadow:0 0 12px -8px var(--tui-secondary)}.kwikid-sections-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}.kwikid-forms-container{display:block;width:100%;max-width:50%;margin:auto 0;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);box-shadow:0 0 12px -8px var(--tui-primary)}.kwikid-forms-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}@media screen and (max-width: 600px){.kwikid-layout-container{padding:0;background:transparent}.kwikid-sections-container{position:absolute;max-width:100%;bottom:-10000px;left:-10000px;opacity:0;padding:0;visibility:hidden}.kwikid-sections-container.active{visibility:visible}.kwikid-sections-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container{display:none;max-width:100%;height:100%;padding:0;border-radius:0;box-shadow:none}.kwikid-forms-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container.active{display:block}}.kwikid-forms-renderer-loader{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;z-index:100}.kwikid-forms-renderer-loader .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:#fff #fff transparent;box-sizing:border-box;animation:rotation 1s linear infinite}.kwikid-forms-renderer-loader .loader:after{content:\"\";box-sizing:border-box;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:3px solid;border-color:transparent var(--tui-primary) var(--tui-primary);width:24px;height:24px;border-radius:50%;animation:rotationBack .5s linear infinite;transform-origin:center center}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.kwikid-forms-renderer-loader .t-loader{display:none!important}#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}\n"], components: [{ type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["showFormFields", "userConfig", "stepConfig", "activeFormConfig", "formsList", "formsListCompleted", "isMobileView"], outputs: ["onClickSetActiveForm", "onClickHideFormsList", "onClickSubmitForms"] }, { type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["formConfig", "formData", "isMobileView", "allFormsData"], outputs: ["onClickViewForms", "onClickSaveForm", "onClickApiCall"] }, { type: i4$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4$1.TuiPushDirective, selector: "tui-push" }], animations: [
|
|
4209
4263
|
trigger("panelInOut", [
|
|
4210
4264
|
transition(":enter", [
|
|
4211
4265
|
style({ transform: "translateY(100%)" }),
|