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
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/drag-drop'), require('@angular/core'), require('@angular/forms'), require('kwikid-toolkit'), require('kwikui'), require('
|
|
3
|
-
typeof define === 'function' && define.amd ? define('kwikid-forms', ['exports', '@angular/cdk/drag-drop', '@angular/core', '@angular/forms', 'kwikid-toolkit', 'kwikui', '
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["kwikid-forms"] = {}, global.ng.cdk.dragDrop, global.ng.core, global.ng.forms, global["kwikid-toolkit"], global.kwikui, global.
|
|
5
|
-
})(this, (function (exports, i4, i0, i1, kwikidToolkit, i2,
|
|
6
|
-
|
|
7
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/drag-drop'), require('@angular/core'), require('@angular/forms'), require('kwikid-toolkit'), require('kwikui'), require('@angular/common'), require('@taiga-ui/core'), require('@taiga-ui/kit'), require('rxjs/operators'), require('@taiga-ui/cdk'), require('@angular/platform-browser'), require('@angular/animations'), require('lodash/cloneDeep'), require('@angular/common/http')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define('kwikid-forms', ['exports', '@angular/cdk/drag-drop', '@angular/core', '@angular/forms', 'kwikid-toolkit', 'kwikui', '@angular/common', '@taiga-ui/core', '@taiga-ui/kit', 'rxjs/operators', '@taiga-ui/cdk', '@angular/platform-browser', '@angular/animations', 'lodash/cloneDeep', '@angular/common/http'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["kwikid-forms"] = {}, global.ng.cdk.dragDrop, global.ng.core, global.ng.forms, global["kwikid-toolkit"], global.kwikui, global.ng.common, global["@taiga-ui/core"], global["@taiga-ui/kit"], global.rxjs.operators, global["@taiga-ui/cdk"], global.ng.platformBrowser, global.ng.animations, global.cloneDeep, global.ng.common.http));
|
|
5
|
+
})(this, (function (exports, i4, i0, i1, kwikidToolkit, i2, i3, i3$1, i4$1, operators, cdk, i1$1, animations, cloneDeep, http) { 'use strict';
|
|
8
6
|
|
|
9
7
|
function _interopNamespace(e) {
|
|
10
8
|
if (e && e.__esModule) return e;
|
|
@@ -28,7 +26,6 @@
|
|
|
28
26
|
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
29
27
|
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
|
|
30
28
|
var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
|
|
31
|
-
var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
|
|
32
29
|
var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
|
|
33
30
|
var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
|
|
34
31
|
var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
|
|
@@ -791,7 +788,7 @@
|
|
|
791
788
|
basicElementCommonConfig.key = basicElementCommonConfig.key.replace(/\s/g, "_");
|
|
792
789
|
// Get Basic Element Config
|
|
793
790
|
var basicElementConfig = event.basicElementConfig;
|
|
794
|
-
this.elementConfig =
|
|
791
|
+
this.elementConfig = kwikidToolkit.mergeObjects(this.elementConfig, basicElementCommonConfig, basicElementConfig);
|
|
795
792
|
this.updateElement.emit({ elementConfig: this.elementConfig });
|
|
796
793
|
};
|
|
797
794
|
BasicElementConfigEditor.prototype.handleOnSave = function () {
|
|
@@ -1435,7 +1432,7 @@
|
|
|
1435
1432
|
};
|
|
1436
1433
|
Converter.prototype.updateFormConfigProperties = function (formConfig) {
|
|
1437
1434
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
1438
|
-
var
|
|
1435
|
+
var formViewProperties = {
|
|
1439
1436
|
header: {
|
|
1440
1437
|
title: {
|
|
1441
1438
|
hidden: false,
|
|
@@ -1457,13 +1454,13 @@
|
|
|
1457
1454
|
}
|
|
1458
1455
|
};
|
|
1459
1456
|
if (kwikidToolkit.checkObjectKeyExists(formConfig, "properties")) {
|
|
1460
|
-
var 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 :
|
|
1457
|
+
var 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;
|
|
1461
1458
|
var 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;
|
|
1462
|
-
var 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 :
|
|
1463
|
-
var 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 :
|
|
1464
|
-
var 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 :
|
|
1465
|
-
var 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 :
|
|
1466
|
-
var 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 :
|
|
1459
|
+
var 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;
|
|
1460
|
+
var 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;
|
|
1461
|
+
var 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;
|
|
1462
|
+
var 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;
|
|
1463
|
+
var 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;
|
|
1467
1464
|
formConfig.properties = {
|
|
1468
1465
|
header: {
|
|
1469
1466
|
title: {
|
|
@@ -1487,7 +1484,7 @@
|
|
|
1487
1484
|
};
|
|
1488
1485
|
}
|
|
1489
1486
|
else {
|
|
1490
|
-
formConfig.properties =
|
|
1487
|
+
formConfig.properties = formViewProperties;
|
|
1491
1488
|
}
|
|
1492
1489
|
return formConfig;
|
|
1493
1490
|
};
|
|
@@ -2067,6 +2064,13 @@
|
|
|
2067
2064
|
kwikidToolkit.logMethod
|
|
2068
2065
|
], Converter.prototype, "convertFormConfig", null);
|
|
2069
2066
|
|
|
2067
|
+
var EFormsListStatus;
|
|
2068
|
+
(function (EFormsListStatus) {
|
|
2069
|
+
EFormsListStatus["COMPLETED"] = "completed";
|
|
2070
|
+
EFormsListStatus["EDITABLE"] = "editable";
|
|
2071
|
+
EFormsListStatus["LOCKED"] = "locked";
|
|
2072
|
+
})(EFormsListStatus || (EFormsListStatus = {}));
|
|
2073
|
+
|
|
2070
2074
|
var EActionKey;
|
|
2071
2075
|
(function (EActionKey) {
|
|
2072
2076
|
EActionKey["SET_VALUE"] = "SET_VALUE";
|
|
@@ -3489,9 +3493,16 @@
|
|
|
3489
3493
|
return item.key;
|
|
3490
3494
|
};
|
|
3491
3495
|
KwikIDFormViewComponent.prototype.handleOnClickViewForms = function (e) {
|
|
3492
|
-
this.
|
|
3493
|
-
|
|
3494
|
-
|
|
3496
|
+
if (this.formConfig.status === EFormsListStatus.COMPLETED) {
|
|
3497
|
+
this.onClickViewForms.emit({
|
|
3498
|
+
clicked: true
|
|
3499
|
+
});
|
|
3500
|
+
}
|
|
3501
|
+
else if (window.confirm("Your data will be lost if you leave this page! Continue?")) {
|
|
3502
|
+
this.onClickViewForms.emit({
|
|
3503
|
+
clicked: true
|
|
3504
|
+
});
|
|
3505
|
+
}
|
|
3495
3506
|
};
|
|
3496
3507
|
KwikIDFormViewComponent.prototype.handleOnClickSaveForm = function (e) {
|
|
3497
3508
|
return __awaiter(this, void 0, void 0, function () {
|
|
@@ -4155,6 +4166,7 @@
|
|
|
4155
4166
|
function KwikIDFormsListComponent() {
|
|
4156
4167
|
this.showFormFields = {};
|
|
4157
4168
|
this.userConfig = {};
|
|
4169
|
+
this.stepConfig = {};
|
|
4158
4170
|
this.activeFormConfig = {};
|
|
4159
4171
|
this.formsList = [];
|
|
4160
4172
|
this.formsListCompleted = [];
|
|
@@ -4165,19 +4177,32 @@
|
|
|
4165
4177
|
this.selectedForm = "";
|
|
4166
4178
|
this.formsListLength = 0;
|
|
4167
4179
|
this.isAllFormsCompleted = true;
|
|
4180
|
+
this.loading = false;
|
|
4168
4181
|
}
|
|
4182
|
+
KwikIDFormsListComponent.prototype.setSelectedForm = function (selected_form) {
|
|
4183
|
+
this.selectedForm = selected_form;
|
|
4184
|
+
};
|
|
4169
4185
|
KwikIDFormsListComponent.prototype.ngOnInit = function () {
|
|
4186
|
+
var _a, _b;
|
|
4187
|
+
this.loading = true;
|
|
4188
|
+
this.setSelectedForm((_b = (_a = this.activeFormConfig) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : "");
|
|
4189
|
+
this.stepConfig = this.formatStepConfig(this.stepConfig);
|
|
4170
4190
|
this.formsList = this.filterHiddenForms(this.formsList);
|
|
4171
4191
|
this.formsListLength = this.findFormsListLength(this.formsList);
|
|
4172
4192
|
this.isAllFormsCompleted = this.checkIsAllFormsCompleted(this.formsList);
|
|
4193
|
+
this.loading = false;
|
|
4173
4194
|
};
|
|
4174
4195
|
KwikIDFormsListComponent.prototype.ngOnChanges = function (changes) {
|
|
4196
|
+
var _a, _b;
|
|
4175
4197
|
var verifyChange = function (key) {
|
|
4176
4198
|
return kwikidToolkit.checkObjectKeyExists(changes, key) && !changes[key].firstChange;
|
|
4177
4199
|
};
|
|
4178
4200
|
if (verifyChange("showFormFields")) {
|
|
4179
4201
|
this.showFormFields = changes.showFormFields.currentValue;
|
|
4180
4202
|
}
|
|
4203
|
+
if (verifyChange("stepConfig")) {
|
|
4204
|
+
this.stepConfig = changes.stepConfig.currentValue;
|
|
4205
|
+
}
|
|
4181
4206
|
if (verifyChange("formsList")) {
|
|
4182
4207
|
this.formsList = this.filterHiddenForms(this.formsList);
|
|
4183
4208
|
this.formsListLength = this.findFormsListLength(this.formsList);
|
|
@@ -4185,8 +4210,35 @@
|
|
|
4185
4210
|
}
|
|
4186
4211
|
if (verifyChange("isMobileView")) {
|
|
4187
4212
|
this.isMobileView = changes.isMobileView.currentValue;
|
|
4213
|
+
if (!this.isMobileView) {
|
|
4214
|
+
this.setSelectedForm("");
|
|
4215
|
+
}
|
|
4216
|
+
}
|
|
4217
|
+
if (verifyChange("activeFormConfig")) {
|
|
4218
|
+
this.activeFormConfig = changes.activeFormConfig.currentValue;
|
|
4219
|
+
this.setSelectedForm((_b = (_a = this.activeFormConfig) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : "");
|
|
4188
4220
|
}
|
|
4189
4221
|
};
|
|
4222
|
+
KwikIDFormsListComponent.prototype.formatStepConfig = function (stepConfig) {
|
|
4223
|
+
var stepConfigProperties = {
|
|
4224
|
+
formListProperties: {
|
|
4225
|
+
footer: {
|
|
4226
|
+
submitFormButton: {
|
|
4227
|
+
hidden: false,
|
|
4228
|
+
label: "Submit"
|
|
4229
|
+
}
|
|
4230
|
+
}
|
|
4231
|
+
}
|
|
4232
|
+
};
|
|
4233
|
+
if (kwikidToolkit.checkObjectKeyExists(stepConfig, "props")) {
|
|
4234
|
+
stepConfigProperties = kwikidToolkit.mergeObjects(stepConfigProperties, stepConfig.props);
|
|
4235
|
+
stepConfig = kwikidToolkit.setValueToObjectPath(stepConfig, "props", stepConfigProperties);
|
|
4236
|
+
}
|
|
4237
|
+
else {
|
|
4238
|
+
stepConfig = kwikidToolkit.setValueToObjectPath(stepConfig, "props", stepConfigProperties);
|
|
4239
|
+
}
|
|
4240
|
+
return stepConfig;
|
|
4241
|
+
};
|
|
4190
4242
|
KwikIDFormsListComponent.prototype.filterHiddenForms = function (formsList) {
|
|
4191
4243
|
return formsList.filter(function (form) {
|
|
4192
4244
|
if (kwikidToolkit.checkObjectKeyExists(form, "hidden")) {
|
|
@@ -4216,7 +4268,7 @@
|
|
|
4216
4268
|
return _formsList.length;
|
|
4217
4269
|
};
|
|
4218
4270
|
KwikIDFormsListComponent.prototype.checkIsAllFormsCompleted = function (formsList) {
|
|
4219
|
-
var e_1,
|
|
4271
|
+
var e_1, _c;
|
|
4220
4272
|
var isAllFormsCompleted = true;
|
|
4221
4273
|
try {
|
|
4222
4274
|
for (var formsList_1 = __values(formsList), formsList_1_1 = formsList_1.next(); !formsList_1_1.done; formsList_1_1 = formsList_1.next()) {
|
|
@@ -4234,14 +4286,16 @@
|
|
|
4234
4286
|
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
4235
4287
|
finally {
|
|
4236
4288
|
try {
|
|
4237
|
-
if (formsList_1_1 && !formsList_1_1.done && (
|
|
4289
|
+
if (formsList_1_1 && !formsList_1_1.done && (_c = formsList_1.return)) _c.call(formsList_1);
|
|
4238
4290
|
}
|
|
4239
4291
|
finally { if (e_1) throw e_1.error; }
|
|
4240
4292
|
}
|
|
4241
4293
|
return isAllFormsCompleted;
|
|
4242
4294
|
};
|
|
4243
4295
|
KwikIDFormsListComponent.prototype.handleOnClickSetActiveForm = function (selectedForm) {
|
|
4244
|
-
|
|
4296
|
+
console.log(this.isMobileView, this.selectedForm);
|
|
4297
|
+
if (this.isMobileView ||
|
|
4298
|
+
(!this.isMobileView && this.selectedForm !== selectedForm) ||
|
|
4245
4299
|
(this.isAllFormsCompleted && !this.showFormFields)) {
|
|
4246
4300
|
this.selectedForm = selectedForm;
|
|
4247
4301
|
this.onClickSetActiveForm.emit(selectedForm);
|
|
@@ -4253,10 +4307,13 @@
|
|
|
4253
4307
|
return KwikIDFormsListComponent;
|
|
4254
4308
|
}());
|
|
4255
4309
|
/** @nocollapse */ KwikIDFormsListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormsListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
4256
|
-
/** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div
|
|
4310
|
+
/** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["id", "value", "max", "size", "colors"] }, { type: i3__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "safeHtml": SafeHtmlPipe } });
|
|
4257
4311
|
__decorate([
|
|
4258
4312
|
kwikidToolkit.logMethod
|
|
4259
4313
|
], KwikIDFormsListComponent.prototype, "ngOnChanges", null);
|
|
4314
|
+
__decorate([
|
|
4315
|
+
kwikidToolkit.logMethod
|
|
4316
|
+
], KwikIDFormsListComponent.prototype, "formatStepConfig", null);
|
|
4260
4317
|
__decorate([
|
|
4261
4318
|
kwikidToolkit.logMethod
|
|
4262
4319
|
], KwikIDFormsListComponent.prototype, "filterHiddenForms", null);
|
|
@@ -4283,6 +4340,8 @@
|
|
|
4283
4340
|
type: i0.Input
|
|
4284
4341
|
}], userConfig: [{
|
|
4285
4342
|
type: i0.Input
|
|
4343
|
+
}], stepConfig: [{
|
|
4344
|
+
type: i0.Input
|
|
4286
4345
|
}], activeFormConfig: [{
|
|
4287
4346
|
type: i0.Input
|
|
4288
4347
|
}], formsList: [{
|
|
@@ -4297,14 +4356,7 @@
|
|
|
4297
4356
|
type: i0.Output
|
|
4298
4357
|
}], onClickSubmitForms: [{
|
|
4299
4358
|
type: i0.Output
|
|
4300
|
-
}], ngOnChanges: [], filterHiddenForms: [], findFormsListLength: [], checkIsAllFormsCompleted: [], handleOnClickSetActiveForm: [], handleOnSubmitForms: [] } });
|
|
4301
|
-
|
|
4302
|
-
var EFormsListStatus;
|
|
4303
|
-
(function (EFormsListStatus) {
|
|
4304
|
-
EFormsListStatus["COMPLETED"] = "completed";
|
|
4305
|
-
EFormsListStatus["EDITABLE"] = "editable";
|
|
4306
|
-
EFormsListStatus["LOCKED"] = "locked";
|
|
4307
|
-
})(EFormsListStatus || (EFormsListStatus = {}));
|
|
4359
|
+
}], ngOnChanges: [], formatStepConfig: [], filterHiddenForms: [], findFormsListLength: [], checkIsAllFormsCompleted: [], handleOnClickSetActiveForm: [], handleOnSubmitForms: [] } });
|
|
4308
4360
|
|
|
4309
4361
|
var ERendererActionKey;
|
|
4310
4362
|
(function (ERendererActionKey) {
|
|
@@ -4977,7 +5029,7 @@
|
|
|
4977
5029
|
return KwikIDFormsRendererComponent;
|
|
4978
5030
|
}());
|
|
4979
5031
|
/** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDFormsRendererComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
4980
|
-
/** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { stepConfig: "stepConfig", userConfig: "userConfig", formsData: "formsData", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, usesOnChanges: true, ngImport: i0__namespace, template: "<div ngClass=\"kwikid-renderer\">\n <div\n ngClass=\"kwikid-layout-container\"\n *ngIf=\"!loading\"\n >\n <div\n ngClass=\"kwikid-sections-container\"\n *ngIf=\"showFormSections\"\n class=\"active\"\n [class.active]=\"showFormSections\"\n [class.mobile]=\"isMobileView\"\n >\n <kwikid-forms-list\n [showFormFields]=\"this.showFormFields\"\n [activeFormConfig]=\"this.activeFormConfig\"\n [userConfig]=\"this.userConfig\"\n [formsList]=\"this.formsList\"\n [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__namespace$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4__namespace$1.TuiPushDirective, selector: "tui-push" }], animations: [
|
|
5032
|
+
/** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { stepConfig: "stepConfig", userConfig: "userConfig", formsData: "formsData", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, usesOnChanges: true, ngImport: i0__namespace, template: "<div ngClass=\"kwikid-renderer\">\n <div\n ngClass=\"kwikid-layout-container\"\n *ngIf=\"!loading\"\n >\n <div\n ngClass=\"kwikid-sections-container\"\n *ngIf=\"showFormSections\"\n class=\"active\"\n [class.active]=\"showFormSections\"\n [class.mobile]=\"isMobileView\"\n >\n <kwikid-forms-list\n [showFormFields]=\"this.showFormFields\"\n [activeFormConfig]=\"this.activeFormConfig\"\n [userConfig]=\"this.userConfig\"\n [formsList]=\"this.formsList\"\n [stepConfig]=\"this.stepConfig\"\n [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__namespace$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4__namespace$1.TuiPushDirective, selector: "tui-push" }], animations: [
|
|
4981
5033
|
animations.trigger("panelInOut", [
|
|
4982
5034
|
animations.transition(":enter", [
|
|
4983
5035
|
animations.style({ transform: "translateY(100%)" }),
|