kwikid-forms 0.0.9 → 0.1.0
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 +385 -68
- package/bundles/kwikid-forms.umd.js.map +1 -1
- package/esm2015/lib/renderer/form-view/definitions/actions/form-view.actions.enum.definitions.js +5 -1
- package/esm2015/lib/renderer/form-view/definitions/actions/form-view.actions.type.definitions.js +1 -1
- package/esm2015/lib/renderer/form-view/form-view.component.js +155 -22
- package/esm2015/lib/renderer/renderer.component.js +4 -1
- package/esm2015/lib/renderer/renderer.config-converter.helper.js +19 -7
- package/esm2015/lib/renderer/renderer.service.js +18 -2
- package/fesm2015/kwikid-forms.js +196 -28
- package/fesm2015/kwikid-forms.js.map +1 -1
- package/lib/renderer/form-view/definitions/actions/form-view.actions.enum.definitions.d.ts +5 -1
- package/lib/renderer/form-view/definitions/actions/form-view.actions.type.definitions.d.ts +1 -1
- package/lib/renderer/form-view/form-view.component.d.ts +10 -1
- package/lib/renderer/renderer.service.d.ts +1 -0
- package/package.json +2 -2
package/fesm2015/kwikid-forms.js
CHANGED
|
@@ -165,6 +165,10 @@ var EActionKey;
|
|
|
165
165
|
EActionKey["FIELD_RESET"] = "FIELD_RESET";
|
|
166
166
|
EActionKey["HANDLE_CONNECTED_ELEMENTS"] = "HANDLE_CONNECTED_ELEMENTS";
|
|
167
167
|
EActionKey["CUSTOM"] = "CUSTOM";
|
|
168
|
+
EActionKey["FIELD_GROUP_SHOW"] = "FIELD_GROUP_SHOW";
|
|
169
|
+
EActionKey["FIELD_GROUP_HIDE"] = "FIELD_GROUP_HIDE";
|
|
170
|
+
EActionKey["FIELD_GROUP_ENABLE"] = "FIELD_GROUP_ENABLE";
|
|
171
|
+
EActionKey["FIELD_GROUP_DISABLE"] = "FIELD_GROUP_DISABLE";
|
|
168
172
|
})(EActionKey || (EActionKey = {}));
|
|
169
173
|
|
|
170
174
|
var EApiStatusType;
|
|
@@ -1411,6 +1415,7 @@ class KwikIDFormViewComponent {
|
|
|
1411
1415
|
this.onClickSaveForm = new EventEmitter();
|
|
1412
1416
|
this.onClickApiCall = new EventEmitter();
|
|
1413
1417
|
this.getActiveFormData = new EventEmitter();
|
|
1418
|
+
this.fieldGroups = {};
|
|
1414
1419
|
this.formFields = [];
|
|
1415
1420
|
this.previousFormData = {};
|
|
1416
1421
|
this.loading = true;
|
|
@@ -1470,6 +1475,7 @@ class KwikIDFormViewComponent {
|
|
|
1470
1475
|
initFormConfig(formConfig) {
|
|
1471
1476
|
return __awaiter(this, void 0, void 0, function* () {
|
|
1472
1477
|
this.setFormFieldsFromFormConfig(formConfig);
|
|
1478
|
+
this.setFormFieldGroupsFromFormConfig(formConfig);
|
|
1473
1479
|
this.setFormDataFromAllFormsData();
|
|
1474
1480
|
this.formGroup = yield this.formViewService.createFormGroup(this.formFields, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
|
|
1475
1481
|
for (let field of this.formFields) {
|
|
@@ -1504,6 +1510,9 @@ class KwikIDFormViewComponent {
|
|
|
1504
1510
|
this.formFields = formConfig.multiForm.fields;
|
|
1505
1511
|
}
|
|
1506
1512
|
}
|
|
1513
|
+
setFormFieldGroupsFromFormConfig(formConfig) {
|
|
1514
|
+
this.fieldGroups = formConfig.fieldGroups;
|
|
1515
|
+
}
|
|
1507
1516
|
setFormDataFromAllFormsData() {
|
|
1508
1517
|
if (hasKey$1(this.allFormsData, this.formConfig.key)) {
|
|
1509
1518
|
this.formData = this.allFormsData[this.formConfig.key];
|
|
@@ -1512,6 +1521,48 @@ class KwikIDFormViewComponent {
|
|
|
1512
1521
|
this.formData = {};
|
|
1513
1522
|
}
|
|
1514
1523
|
}
|
|
1524
|
+
handleConnectedElementFieldGroupActions(childFieldGroupConfig, parentField) {
|
|
1525
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
1526
|
+
if (hasKey$1(childFieldGroupConfig, "rules")) {
|
|
1527
|
+
const rulesMapping = new Rules$1(childFieldGroupConfig.rules, parentField, this.formData, this.previousFormData, this.allFormsData).mapping();
|
|
1528
|
+
for (let action of childFieldGroupConfig.actions) {
|
|
1529
|
+
const conditionSuccess = new Condition$1(action.condition, rulesMapping).evaluate();
|
|
1530
|
+
if (conditionSuccess) {
|
|
1531
|
+
const actions = new Actions$1(action, parentField, rulesMapping, this.allFormsData, this.formData, this.previousFormData, this.takeActionOnFieldGroup.bind(this));
|
|
1532
|
+
yield actions.execute();
|
|
1533
|
+
}
|
|
1534
|
+
}
|
|
1535
|
+
}
|
|
1536
|
+
});
|
|
1537
|
+
}
|
|
1538
|
+
handleConnectedElementFieldGroup(currentField, connectedFieldGroupConfig, eventType) {
|
|
1539
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
1540
|
+
switch (eventType) {
|
|
1541
|
+
case "INIT":
|
|
1542
|
+
if (hasKey$1(connectedFieldGroupConfig, "triggers") &&
|
|
1543
|
+
connectedFieldGroupConfig.triggers.includes("INIT")) {
|
|
1544
|
+
yield this.handleConnectedElementFieldGroupActions(connectedFieldGroupConfig, currentField);
|
|
1545
|
+
}
|
|
1546
|
+
break;
|
|
1547
|
+
case "VALUE_CHANGE":
|
|
1548
|
+
if (hasKey$1(connectedFieldGroupConfig, "triggers") &&
|
|
1549
|
+
connectedFieldGroupConfig.triggers.includes("VALUE_CHANGE")) {
|
|
1550
|
+
yield this.handleConnectedElementFieldGroupActions(connectedFieldGroupConfig, currentField);
|
|
1551
|
+
}
|
|
1552
|
+
break;
|
|
1553
|
+
case "NESTED_LINK":
|
|
1554
|
+
if (hasKey$1(connectedFieldGroupConfig, "triggers") &&
|
|
1555
|
+
connectedFieldGroupConfig.triggers.includes("NESTED_LINK")) {
|
|
1556
|
+
yield this.handleConnectedElementFieldGroupActions(connectedFieldGroupConfig, currentField);
|
|
1557
|
+
}
|
|
1558
|
+
default:
|
|
1559
|
+
if (hasKey$1(connectedFieldGroupConfig, "triggers")) {
|
|
1560
|
+
yield this.handleConnectedElementFieldGroupActions(connectedFieldGroupConfig, currentField);
|
|
1561
|
+
}
|
|
1562
|
+
break;
|
|
1563
|
+
}
|
|
1564
|
+
});
|
|
1565
|
+
}
|
|
1515
1566
|
handleConnectedElementFieldActions(connectedFieldConfig, connectedField) {
|
|
1516
1567
|
return __awaiter(this, void 0, void 0, function* () {
|
|
1517
1568
|
if (hasKey$1(connectedFieldConfig, "rules")) {
|
|
@@ -1573,22 +1624,34 @@ class KwikIDFormViewComponent {
|
|
|
1573
1624
|
break;
|
|
1574
1625
|
}
|
|
1575
1626
|
if (hasKey$1(connectedField, "connectedElements")) {
|
|
1576
|
-
|
|
1577
|
-
.
|
|
1578
|
-
|
|
1627
|
+
if (hasKey$1(connectedField.connectedElements, "connectedFields")) {
|
|
1628
|
+
for (const connectedFieldConfig of connectedField.connectedElements
|
|
1629
|
+
.connectedFields) {
|
|
1630
|
+
connectedField = this.handleConnectedElementFields(connectedField, connectedFieldConfig, "NESTED_LINK");
|
|
1631
|
+
}
|
|
1579
1632
|
}
|
|
1580
1633
|
}
|
|
1581
1634
|
return currentField;
|
|
1582
1635
|
});
|
|
1583
1636
|
}
|
|
1584
1637
|
handleConnectedElements(e, eventType) {
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1638
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
1639
|
+
let currentField = findFieldFromKey(this.formFields, e.key);
|
|
1640
|
+
if (hasKey$1(currentField, "connectedElements")) {
|
|
1641
|
+
if (hasKey$1(currentField.connectedElements, "connectedFieldGroups")) {
|
|
1642
|
+
let connectedFieldGroups = currentField.connectedElements.connectedFieldGroups;
|
|
1643
|
+
for (let connectedFieldGroupConfig of connectedFieldGroups) {
|
|
1644
|
+
yield this.handleConnectedElementFieldGroup(currentField, connectedFieldGroupConfig, eventType);
|
|
1645
|
+
}
|
|
1646
|
+
}
|
|
1647
|
+
if (hasKey$1(currentField.connectedElements, "connectedFields")) {
|
|
1648
|
+
let connectedFields = currentField.connectedElements.connectedFields;
|
|
1649
|
+
for (let connectedFieldConfig of connectedFields) {
|
|
1650
|
+
currentField = yield this.handleConnectedElementFields(currentField, connectedFieldConfig, eventType);
|
|
1651
|
+
}
|
|
1652
|
+
}
|
|
1590
1653
|
}
|
|
1591
|
-
}
|
|
1654
|
+
});
|
|
1592
1655
|
}
|
|
1593
1656
|
// DOM Event Handlers
|
|
1594
1657
|
handleGetKeyValue(e) {
|
|
@@ -1698,6 +1761,9 @@ class KwikIDFormViewComponent {
|
|
|
1698
1761
|
this.formFields = setFieldError(this.formFields, this.formGroup.controls[control.key].errors, control.key, control.invalid);
|
|
1699
1762
|
}
|
|
1700
1763
|
this.toggleErrorNotification(true);
|
|
1764
|
+
setTimeout(() => {
|
|
1765
|
+
this.toggleErrorNotification(false);
|
|
1766
|
+
}, 3000);
|
|
1701
1767
|
return;
|
|
1702
1768
|
}
|
|
1703
1769
|
Object.keys(formData).map((key) => {
|
|
@@ -1717,6 +1783,12 @@ class KwikIDFormViewComponent {
|
|
|
1717
1783
|
return field.key === _.key;
|
|
1718
1784
|
});
|
|
1719
1785
|
this.formFields[fieldIndex]["hidden"] = true;
|
|
1786
|
+
this.formGroup.updateValueAndValidity();
|
|
1787
|
+
}
|
|
1788
|
+
fieldGroupHide(fieldGroup) {
|
|
1789
|
+
for (let fieldKey of this.fieldGroups[fieldGroup]) {
|
|
1790
|
+
this.fieldHide(fieldKey);
|
|
1791
|
+
}
|
|
1720
1792
|
}
|
|
1721
1793
|
fieldShow(fieldKey) {
|
|
1722
1794
|
let field = findFieldFromKey(this.formFields, fieldKey);
|
|
@@ -1726,16 +1798,29 @@ class KwikIDFormViewComponent {
|
|
|
1726
1798
|
this.formFields[fieldIndex]["hidden"] = false;
|
|
1727
1799
|
this.formGroup.updateValueAndValidity();
|
|
1728
1800
|
}
|
|
1801
|
+
fieldGroupShow(fieldGroup) {
|
|
1802
|
+
for (let fieldKey of this.fieldGroups[fieldGroup]) {
|
|
1803
|
+
this.fieldShow(fieldKey);
|
|
1804
|
+
}
|
|
1805
|
+
}
|
|
1729
1806
|
fieldDisable(fieldKey) {
|
|
1730
1807
|
let field = findFieldFromKey(this.formFields, fieldKey);
|
|
1731
1808
|
let fieldIndex = this.formFields.findIndex((_) => {
|
|
1732
1809
|
return field.key === _.key;
|
|
1733
1810
|
});
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
this.formGroup.controls
|
|
1737
|
-
|
|
1738
|
-
|
|
1811
|
+
if (field.type !== EFieldType.TITLE) {
|
|
1812
|
+
this.formFields[fieldIndex]["disabled"] = true;
|
|
1813
|
+
if (isNotEmpty(this.formGroup.controls)) {
|
|
1814
|
+
this.formGroup.controls[field.key].disable({
|
|
1815
|
+
emitEvent: false
|
|
1816
|
+
});
|
|
1817
|
+
}
|
|
1818
|
+
this.formGroup.updateValueAndValidity();
|
|
1819
|
+
}
|
|
1820
|
+
}
|
|
1821
|
+
fieldGroupDisable(fieldGroup) {
|
|
1822
|
+
for (let fieldKey of this.fieldGroups[fieldGroup]) {
|
|
1823
|
+
this.fieldDisable(fieldKey);
|
|
1739
1824
|
}
|
|
1740
1825
|
}
|
|
1741
1826
|
fieldEnable(fieldKey) {
|
|
@@ -1743,11 +1828,19 @@ class KwikIDFormViewComponent {
|
|
|
1743
1828
|
let fieldIndex = this.formFields.findIndex((_) => {
|
|
1744
1829
|
return field.key === _.key;
|
|
1745
1830
|
});
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
this.formGroup.controls
|
|
1749
|
-
|
|
1750
|
-
|
|
1831
|
+
if (field.type !== EFieldType.TITLE) {
|
|
1832
|
+
this.formFields[fieldIndex]["disabled"] = false;
|
|
1833
|
+
if (isNotEmpty(this.formGroup.controls)) {
|
|
1834
|
+
this.formGroup.controls[field.key].enable({
|
|
1835
|
+
emitEvent: false
|
|
1836
|
+
});
|
|
1837
|
+
}
|
|
1838
|
+
this.formGroup.updateValueAndValidity();
|
|
1839
|
+
}
|
|
1840
|
+
}
|
|
1841
|
+
fieldGroupEnable(fieldGroup) {
|
|
1842
|
+
for (let fieldKey of this.fieldGroups[fieldGroup]) {
|
|
1843
|
+
this.fieldEnable(fieldKey);
|
|
1751
1844
|
}
|
|
1752
1845
|
}
|
|
1753
1846
|
fieldReset(fieldKey) {
|
|
@@ -1847,6 +1940,26 @@ class KwikIDFormViewComponent {
|
|
|
1847
1940
|
return childField;
|
|
1848
1941
|
});
|
|
1849
1942
|
}
|
|
1943
|
+
takeActionOnFieldGroup(action, field, allFormsData, formData, previousFormData) {
|
|
1944
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
1945
|
+
switch (action.key) {
|
|
1946
|
+
case EActionKey.FIELD_GROUP_HIDE:
|
|
1947
|
+
this.fieldGroupHide(action.props.groupKey);
|
|
1948
|
+
break;
|
|
1949
|
+
case EActionKey.FIELD_GROUP_SHOW:
|
|
1950
|
+
this.fieldGroupShow(action.props.groupKey);
|
|
1951
|
+
break;
|
|
1952
|
+
case EActionKey.FIELD_GROUP_ENABLE:
|
|
1953
|
+
this.fieldGroupEnable(action.props.groupKey);
|
|
1954
|
+
break;
|
|
1955
|
+
case EActionKey.FIELD_GROUP_DISABLE:
|
|
1956
|
+
this.fieldGroupDisable(action.props.groupKey);
|
|
1957
|
+
break;
|
|
1958
|
+
default:
|
|
1959
|
+
break;
|
|
1960
|
+
}
|
|
1961
|
+
});
|
|
1962
|
+
}
|
|
1850
1963
|
takeAction(action, field, allFormsData, formData, previousFormData) {
|
|
1851
1964
|
return __awaiter(this, void 0, void 0, function* () {
|
|
1852
1965
|
switch (action.key) {
|
|
@@ -1898,7 +2011,7 @@ class KwikIDFormViewComponent {
|
|
|
1898
2011
|
}
|
|
1899
2012
|
}
|
|
1900
2013
|
/** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormViewComponent, deps: [{ token: TuiPushService }, { token: TuiAlertService }, { token: KwikIDFormViewService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1901
|
-
/** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", apiCallResponse: "apiCallResponse", isMobileView: "isMobileView", allFormsData: "allFormsData", formsList: "formsList" }, outputs: { onClickViewForms: "onClickViewForms", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall", getActiveFormData: "getActiveFormData" }, providers: [KwikIDFormViewService], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"kwikid-form-container\"\r\n *ngIf=\"!this.loading\"\r\n>\r\n <div id=\"uf-form-fields-header-container\">\r\n <div id=\"uf-form-fields-title\">\r\n {{ this.formConfig.title }}\r\n </div>\r\n <div id=\"uf-form-fields-steps\">\r\n Step {{ this.formConfig.sequenceNo }} of {{ this.formsList.length }}\r\n </div>\r\n <hr />\r\n </div>\r\n <form\r\n class=\"kwikid-form show\"\r\n [formGroup]=\"this.formGroup\"\r\n >\r\n <ng-container *ngFor=\"let field of this.formFields; let i = index\">\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <!-- Form Title -->\r\n <ng-container *ngSwitchCase=\"'title'\">\r\n <div\r\n class=\"title\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <div>\r\n {{ field.label }}\r\n </div>\r\n <kwikui-button\r\n *ngIf=\"field?.reset\"\r\n appearance=\"whiteblock\"\r\n size=\"s\"\r\n label=\"Reset\"\r\n (onClick)=\"this.handleOnClickResetFormFields($event, field)\"\r\n ></kwikui-button>\r\n </div>\r\n </ng-container>\r\n <!-- Input Text -->\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-input\r\n [case]=\"field?.properties?.case\"\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field.label\"\r\n [placeholder]=\"field?.properties?.placeholder\"\r\n [type]=\"'text'\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-input>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Checkbox -->\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-checkbox-block\r\n [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field?.properties?.placeholder\"\r\n [placeholder]=\"field?.properties?.placeholder\"\r\n [properties]=\"field?.properties\"\r\n [size]=\"field?.properties?.size ?? 'l'\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-checkbox-block\r\n ><kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Input Number -->\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-input-number\r\n [decimal]=\"field?.properties?.decimal\"\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field?.label\"\r\n [max]=\"field?.properties?.max\"\r\n [min]=\"field?.properties?.min\"\r\n [placeholder]=\"field?.properties?.placeholder\"\r\n [postfix]=\"field?.properties?.postfix ?? ''\"\r\n [precision]=\"field?.properties?.precision\"\r\n [prefix]=\"field?.properties?.prefix ?? ''\"\r\n [properties]=\"field?.properties\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-input-number\r\n ><kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Input Date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-input-date\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field.label\"\r\n [max]=\"field?.properties?.max\"\r\n [min]=\"field?.properties?.min\"\r\n [placeholder]=\"field?.placeholder\"\r\n [properties]=\"field?.properties\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-input-date>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Input Phone -->\r\n <ng-container *ngSwitchCase=\"'phone'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-input-phone\r\n [countryCode]=\"field?.properties?.countryCode\"\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field?.label\"\r\n [phoneMaskAfterCountryCode]=\"\r\n field?.properties?.phoneMaskAfterCountryCode\r\n \"\r\n [placeholder]=\"field?.placeholder\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-input-phone>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Input Radio -->\r\n <ng-container *ngSwitchCase=\"'radio'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <label\r\n [tuiLabel]=\"labelTemplate\"\r\n style=\"min-height: auto\"\r\n >\r\n <kwikui-radio-list\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [items]=\"field?.options\"\r\n [label]=\"field?.label\"\r\n [orientation]=\"field?.properties?.orientation\"\r\n [placeholder]=\"field?.properties?.placeholder\"\r\n [properties]=\"field?.properties\"\r\n [size]=\"field?.properties?.size\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-radio-list>\r\n </label>\r\n <ng-template #labelTemplate>\r\n <p\r\n class=\"tui-space_bottom-2\"\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <b>\r\n {{ field.label }}\r\n <span *ngIf=\"field.validators?.required\"></span>\r\n </b>\r\n </p>\r\n </ng-template>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Dropdown -->\r\n <ng-container *ngSwitchCase=\"'dropdown-with-search'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-select-combobox\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field.label\"\r\n [options]=\"field.options\"\r\n [placeholder]=\"field?.properties?.placeholder\"\r\n [properties]=\"field?.properties\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-select-combobox>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- API Call -->\r\n <ng-container *ngSwitchCase=\"'api-call'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-button-api-call\r\n [apiStatus]=\"field?.api?.status?.value\"\r\n [class]=\"field?.class\"\r\n [disabled]=\"field?.disabled\"\r\n [id]=\"field.key\"\r\n [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\r\n [showLoader]=\"field?.disabled === 'loading'\"\r\n shape=\"null\"\r\n size=\"m\"\r\n styles=\"width: fit-content\"\r\n (onClick)=\"this.handleOnClickApiCall($event)\"\r\n ></kwikui-button-api-call>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Mobile OTP -->\r\n <ng-container *ngSwitchCase=\"'otp'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-input-otp\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field?.label\"\r\n [mask]=\"field?.properties?.mask\"\r\n [placeholder]=\"field?.properties?.placeholder\"\r\n [properties]=\"field?.properties\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-input-otp>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Aadhaar Number -->\r\n <ng-container *ngSwitchCase=\"'aadhaar-number'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-input-aadhaar\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field?.label\"\r\n [placeholder]=\"field?.placeholder\"\r\n [properties]=\"field?.properties\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-input-aadhaar>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </form>\r\n <div class=\"kwikid-form-buttons\">\r\n <kwikui-button\r\n *ngIf=\"this.isMobileView\"\r\n [disabled]=\"viewFormsButton.disabled\"\r\n id=\"\"\r\n label=\"View Forms\"\r\n [showLoader]=\"viewFormsButton.showLoader\"\r\n styles=\"\"\r\n class=\"\"\r\n type=\"button\"\r\n appearance=\"secondary\"\r\n icon=\"\"\r\n iconRight=\"\"\r\n shape=\"null\"\r\n size=\"m\"\r\n styles=\"width: 100%\"\r\n (onClick)=\"this.handleOnClickViewForms($event)\"\r\n ></kwikui-button>\r\n <kwikui-button\r\n [disabled]=\"saveFormButton.disabled\"\r\n id=\"\"\r\n label=\"Save\"\r\n [showLoader]=\"saveFormButton.showLoader\"\r\n styles=\"\"\r\n class=\"\"\r\n type=\"button\"\r\n appearance=\"primary\"\r\n icon=\"\"\r\n iconRight=\"\"\r\n shape=\"null\"\r\n size=\"m\"\r\n styles=\"width: 100%\"\r\n (onClick)=\"this.handleOnClickSaveForm($event)\"\r\n ></kwikui-button>\r\n </div>\r\n</div>\r\n<div\r\n class=\"kwikid-form-container-loading\"\r\n *ngIf=\"this.loading\"\r\n>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n</div>\r\n<tui-push\r\n id=\"field-error-notification\"\r\n *tuiPush=\"showErrorNotification\"\r\n heading=\"Missing/Incorrect Fields!\"\r\n type=\"Error\"\r\n (close)=\"toggleErrorNotification(false)\"\r\n>\r\n <tui-svg\r\n src=\"tuiIconCancel\"\r\n style=\"color: #fff !important\"\r\n >\r\n </tui-svg>\r\n</tui-push>\r\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}.kwikid-form-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}.kwikid-form.show{width:100%;height:100%;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-row-gap:1rem;row-gap:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-column-gap:10px;column-gap:10px}.kwikid-form-buttons *{flex-grow:1}#uf-form-fields-header-container{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start;grid-row-gap:.5rem;row-gap:.5rem;padding:1rem}#uf-form-fields-header-container hr{width:100%}#uf-form-fields-title{color:#000;font-size:1.75em;font-weight:bold}#uf-form-fields-steps{color:var(--color-on-secondary-container);font-size:1em}.title{border-left:.25rem solid var(--tui-primary);padding:.75rem;font-size:1.4em;font-weight:bold;background-color:var(--tui-secondary);display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-gap:.5rem;gap:.5rem}.title:not(:first-child){margin-top:.5rem}.large-wrapper{width:100%;height:60px}.large-wrapper:first-child{margin-bottom:auto}.large-wrapper:last-child{margin-top:auto}.kwikid-form-container-loading{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;grid-row-gap:1rem;row-gap:1rem;padding:1rem}#field-error-notification{background-color:var(--tui-error-fill);color:#fff!important}#field-error-notification .t-top{color:#fff!important}#field-error-notification .t-close{color:#fff!important}\n"], components: [{ type: i2.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i2.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i2.KwikUICheckboxBlockComponent, selector: "kwikui-checkbox-block", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "contentAlign", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "min", "max", "prefix", "postfix", "precision", "decimal", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "min", "max", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "countryCode", "phoneMaskAfterCountryCode", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i2.KwikUIRadioListComponent, selector: "kwikui-radio-list", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "items", "orientation", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i2.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i4.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4.TuiPushDirective, selector: "tui-push" }] });
|
|
2014
|
+
/** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", apiCallResponse: "apiCallResponse", isMobileView: "isMobileView", allFormsData: "allFormsData", formsList: "formsList" }, outputs: { onClickViewForms: "onClickViewForms", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall", getActiveFormData: "getActiveFormData" }, providers: [KwikIDFormViewService], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"kwikid-form-container\"\r\n *ngIf=\"!this.loading\"\r\n>\r\n <div id=\"uf-form-fields-header-container\">\r\n <div id=\"uf-form-fields-title\">\r\n {{ this.formConfig.title }}\r\n </div>\r\n <div id=\"uf-form-fields-steps\">\r\n Step {{ this.formConfig.sequenceNo }} of {{ this.formsList.length }}\r\n </div>\r\n <hr />\r\n </div>\r\n <form\r\n class=\"kwikid-form show\"\r\n [formGroup]=\"this.formGroup\"\r\n >\r\n <ng-container *ngFor=\"let field of this.formFields; let i = index\">\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <!-- Form Title -->\r\n <ng-container *ngSwitchCase=\"'title'\">\r\n <div\r\n class=\"title\"\r\n [class.hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <div>\r\n {{ field.label }}\r\n </div>\r\n <kwikui-button\r\n *ngIf=\"field?.reset\"\r\n appearance=\"whiteblock\"\r\n size=\"s\"\r\n label=\"Reset\"\r\n (onClick)=\"this.handleOnClickResetFormFields($event, field)\"\r\n ></kwikui-button>\r\n </div>\r\n </ng-container>\r\n <!-- Input Text -->\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-input\r\n [case]=\"field?.properties?.case\"\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field.label\"\r\n [placeholder]=\"field?.properties?.placeholder\"\r\n [type]=\"'text'\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-input>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Checkbox -->\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-checkbox-block\r\n [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field?.properties?.placeholder\"\r\n [placeholder]=\"field?.properties?.placeholder\"\r\n [properties]=\"field?.properties\"\r\n [size]=\"field?.properties?.size ?? 'l'\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-checkbox-block\r\n ><kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Input Number -->\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-input-number\r\n [decimal]=\"field?.properties?.decimal\"\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field?.label\"\r\n [max]=\"field?.properties?.max\"\r\n [min]=\"field?.properties?.min\"\r\n [placeholder]=\"field?.properties?.placeholder\"\r\n [postfix]=\"field?.properties?.postfix ?? ''\"\r\n [precision]=\"field?.properties?.precision\"\r\n [prefix]=\"field?.properties?.prefix ?? ''\"\r\n [properties]=\"field?.properties\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-input-number\r\n ><kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Input Date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-input-date\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field.label\"\r\n [max]=\"field?.properties?.max\"\r\n [min]=\"field?.properties?.min\"\r\n [placeholder]=\"field?.placeholder\"\r\n [properties]=\"field?.properties\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-input-date>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Input Phone -->\r\n <ng-container *ngSwitchCase=\"'phone'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-input-phone\r\n [countryCode]=\"field?.properties?.countryCode\"\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field?.label\"\r\n [phoneMaskAfterCountryCode]=\"\r\n field?.properties?.phoneMaskAfterCountryCode\r\n \"\r\n [placeholder]=\"field?.placeholder\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-input-phone>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Input Radio -->\r\n <ng-container *ngSwitchCase=\"'radio'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <label\r\n [tuiLabel]=\"labelTemplate\"\r\n style=\"min-height: auto\"\r\n >\r\n <kwikui-radio-list\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [items]=\"field?.options\"\r\n [label]=\"field?.label\"\r\n [orientation]=\"field?.properties?.orientation\"\r\n [placeholder]=\"field?.properties?.placeholder\"\r\n [properties]=\"field?.properties\"\r\n [size]=\"field?.properties?.size\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-radio-list>\r\n </label>\r\n <ng-template #labelTemplate>\r\n <p\r\n class=\"tui-space_bottom-2\"\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <b>\r\n {{ field.label }}\r\n <span *ngIf=\"field.validators?.required\"></span>\r\n </b>\r\n </p>\r\n </ng-template>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Dropdown -->\r\n <ng-container *ngSwitchCase=\"'dropdown-with-search'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-select-combobox\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field.label\"\r\n [options]=\"field.options\"\r\n [placeholder]=\"field?.properties?.placeholder\"\r\n [properties]=\"field?.properties\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-select-combobox>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- API Call -->\r\n <ng-container *ngSwitchCase=\"'api-call'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-button-api-call\r\n [apiStatus]=\"field?.api?.status?.value\"\r\n [class]=\"field?.class\"\r\n [disabled]=\"field?.disabled\"\r\n [id]=\"field.key\"\r\n [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\r\n [showLoader]=\"field?.disabled === 'loading'\"\r\n shape=\"null\"\r\n size=\"m\"\r\n styles=\"width: fit-content\"\r\n (onClick)=\"this.handleOnClickApiCall($event)\"\r\n ></kwikui-button-api-call>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Mobile OTP -->\r\n <ng-container *ngSwitchCase=\"'otp'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-input-otp\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field?.label\"\r\n [mask]=\"field?.properties?.mask\"\r\n [placeholder]=\"field?.properties?.placeholder\"\r\n [properties]=\"field?.properties\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-input-otp>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n <!-- Aadhaar Number -->\r\n <ng-container *ngSwitchCase=\"'aadhaar-number'\">\r\n <div\r\n [hidden]=\"field?.hidden\"\r\n id=\"field_{{ field.key }}\"\r\n >\r\n <kwikui-input-aadhaar\r\n [disabled]=\"field?.disabled\"\r\n [focus]=\"field?.focus\"\r\n [formControl]=\"formGroup.controls[field.key]\"\r\n [formControlName]=\"field.key\"\r\n [id]=\"field.key\"\r\n [invalid]=\"field?.invalid\"\r\n [label]=\"field?.label\"\r\n [placeholder]=\"field?.placeholder\"\r\n [properties]=\"field?.properties\"\r\n [validators]=\"field?.validators\"\r\n (getKeyValue)=\"handleGetKeyValue($event)\"\r\n ></kwikui-input-aadhaar>\r\n <kwikui-messages\r\n [messages]=\"field.messages\"\r\n [id]=\"field.key\"\r\n ></kwikui-messages>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </form>\r\n <div class=\"kwikid-form-buttons\">\r\n <kwikui-button\r\n *ngIf=\"this.isMobileView\"\r\n [disabled]=\"viewFormsButton.disabled\"\r\n id=\"\"\r\n label=\"View Forms\"\r\n [showLoader]=\"viewFormsButton.showLoader\"\r\n styles=\"\"\r\n class=\"\"\r\n type=\"button\"\r\n appearance=\"secondary\"\r\n icon=\"\"\r\n iconRight=\"\"\r\n shape=\"null\"\r\n size=\"m\"\r\n styles=\"width: 100%\"\r\n (onClick)=\"this.handleOnClickViewForms($event)\"\r\n ></kwikui-button>\r\n <kwikui-button\r\n [disabled]=\"saveFormButton.disabled\"\r\n id=\"\"\r\n label=\"Save\"\r\n [showLoader]=\"saveFormButton.showLoader\"\r\n styles=\"\"\r\n class=\"\"\r\n type=\"button\"\r\n appearance=\"primary\"\r\n icon=\"\"\r\n iconRight=\"\"\r\n shape=\"null\"\r\n size=\"m\"\r\n styles=\"width: 100%\"\r\n (onClick)=\"this.handleOnClickSaveForm($event)\"\r\n ></kwikui-button>\r\n </div>\r\n</div>\r\n<div\r\n class=\"kwikid-form-container-loading\"\r\n *ngIf=\"this.loading\"\r\n>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n <div\r\n class=\"large-wrapper\"\r\n [class.tui-skeleton]=\"this.loading\"\r\n [class.tui-skeleton_rounded]=\"this.loading\"\r\n ></div>\r\n</div>\r\n<tui-push\r\n id=\"field-error-notification\"\r\n *tuiPush=\"showErrorNotification\"\r\n heading=\"Missing/Incorrect Fields!\"\r\n type=\"Error\"\r\n (close)=\"toggleErrorNotification(false)\"\r\n>\r\n <tui-svg\r\n src=\"tuiIconCancel\"\r\n style=\"color: #fff !important\"\r\n >\r\n </tui-svg>\r\n</tui-push>\r\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}.kwikid-form-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}.kwikid-form.show{width:100%;height:100%;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-row-gap:1rem;row-gap:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-column-gap:10px;column-gap:10px}.kwikid-form-buttons *{flex-grow:1}#uf-form-fields-header-container{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start;grid-row-gap:.5rem;row-gap:.5rem;padding:1rem}#uf-form-fields-header-container hr{width:100%}#uf-form-fields-title{color:#000;font-size:1.75em;font-weight:bold}#uf-form-fields-steps{color:var(--color-on-secondary-container);font-size:1em}.title{border-left:.25rem solid var(--tui-primary);padding:.75rem;font-size:1.4em;font-weight:bold;background-color:var(--tui-secondary);display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-gap:.5rem;gap:.5rem}.title:not(:first-child){margin-top:.5rem}.title.hidden{display:none}.large-wrapper{width:100%;height:60px}.large-wrapper:first-child{margin-bottom:auto}.large-wrapper:last-child{margin-top:auto}.kwikid-form-container-loading{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;grid-row-gap:1rem;row-gap:1rem;padding:1rem}#field-error-notification{background-color:var(--tui-error-fill);color:#fff!important}#field-error-notification .t-top{color:#fff!important}#field-error-notification .t-close{color:#fff!important}\n"], components: [{ type: i2.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i2.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i2.KwikUICheckboxBlockComponent, selector: "kwikui-checkbox-block", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "contentAlign", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "prefix", "postfix", "precision", "decimal", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "countryCode", "phoneMaskAfterCountryCode", "removeCountryCodeFromValue", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i2.KwikUIRadioListComponent, selector: "kwikui-radio-list", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "orientation", "items", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i2.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i4.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4.TuiPushDirective, selector: "tui-push" }] });
|
|
1902
2015
|
__decorate([
|
|
1903
2016
|
log
|
|
1904
2017
|
], KwikIDFormViewComponent.prototype, "ngOnInit", null);
|
|
@@ -1914,9 +2027,18 @@ __decorate([
|
|
|
1914
2027
|
__decorate([
|
|
1915
2028
|
log
|
|
1916
2029
|
], KwikIDFormViewComponent.prototype, "setFormFieldsFromFormConfig", null);
|
|
2030
|
+
__decorate([
|
|
2031
|
+
log
|
|
2032
|
+
], KwikIDFormViewComponent.prototype, "setFormFieldGroupsFromFormConfig", null);
|
|
1917
2033
|
__decorate([
|
|
1918
2034
|
log
|
|
1919
2035
|
], KwikIDFormViewComponent.prototype, "setFormDataFromAllFormsData", null);
|
|
2036
|
+
__decorate([
|
|
2037
|
+
log
|
|
2038
|
+
], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldGroupActions", null);
|
|
2039
|
+
__decorate([
|
|
2040
|
+
log
|
|
2041
|
+
], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldGroup", null);
|
|
1920
2042
|
__decorate([
|
|
1921
2043
|
log
|
|
1922
2044
|
], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldActions", null);
|
|
@@ -1947,15 +2069,27 @@ __decorate([
|
|
|
1947
2069
|
__decorate([
|
|
1948
2070
|
log
|
|
1949
2071
|
], KwikIDFormViewComponent.prototype, "fieldHide", null);
|
|
2072
|
+
__decorate([
|
|
2073
|
+
log
|
|
2074
|
+
], KwikIDFormViewComponent.prototype, "fieldGroupHide", null);
|
|
1950
2075
|
__decorate([
|
|
1951
2076
|
log
|
|
1952
2077
|
], KwikIDFormViewComponent.prototype, "fieldShow", null);
|
|
2078
|
+
__decorate([
|
|
2079
|
+
log
|
|
2080
|
+
], KwikIDFormViewComponent.prototype, "fieldGroupShow", null);
|
|
1953
2081
|
__decorate([
|
|
1954
2082
|
log
|
|
1955
2083
|
], KwikIDFormViewComponent.prototype, "fieldDisable", null);
|
|
2084
|
+
__decorate([
|
|
2085
|
+
log
|
|
2086
|
+
], KwikIDFormViewComponent.prototype, "fieldGroupDisable", null);
|
|
1956
2087
|
__decorate([
|
|
1957
2088
|
log
|
|
1958
2089
|
], KwikIDFormViewComponent.prototype, "fieldEnable", null);
|
|
2090
|
+
__decorate([
|
|
2091
|
+
log
|
|
2092
|
+
], KwikIDFormViewComponent.prototype, "fieldGroupEnable", null);
|
|
1959
2093
|
__decorate([
|
|
1960
2094
|
log
|
|
1961
2095
|
], KwikIDFormViewComponent.prototype, "fieldReset", null);
|
|
@@ -1989,6 +2123,9 @@ __decorate([
|
|
|
1989
2123
|
__decorate([
|
|
1990
2124
|
log
|
|
1991
2125
|
], KwikIDFormViewComponent.prototype, "handleFieldTypeSearchText", null);
|
|
2126
|
+
__decorate([
|
|
2127
|
+
log
|
|
2128
|
+
], KwikIDFormViewComponent.prototype, "takeActionOnFieldGroup", null);
|
|
1992
2129
|
__decorate([
|
|
1993
2130
|
log
|
|
1994
2131
|
], KwikIDFormViewComponent.prototype, "takeAction", null);
|
|
@@ -2026,7 +2163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
2026
2163
|
type: Output
|
|
2027
2164
|
}], getActiveFormData: [{
|
|
2028
2165
|
type: Output
|
|
2029
|
-
}], ngOnInit: [], ngAfterViewInit: [], ngOnChanges: [], initFormConfig: [], setFormFieldsFromFormConfig: [], setFormDataFromAllFormsData: [], handleConnectedElementFieldActions: [], handleConnectedElementFields: [], handleConnectedElements: [], handleGetKeyValue: [], handleOnClickResetFormFields: [], handleOnClickApiCall: [], handleOnClickViewForms: [], handleOnClickSaveForm: [], toggleErrorNotification: [], fieldHide: [], fieldShow: [], fieldDisable: [], fieldEnable: [], fieldReset: [], fieldErrorShow: [], fieldErrorHide: [], fieldMessageShow: [], fieldMessageHide: [], setObjectValue: [], patchFieldControlValue: [], isFieldValid: [], isFieldEnabled: [], getFormGroupRawValues: [], handleFieldTypeSearchText: [], takeAction: [] } });
|
|
2166
|
+
}], ngOnInit: [], ngAfterViewInit: [], ngOnChanges: [], initFormConfig: [], setFormFieldsFromFormConfig: [], setFormFieldGroupsFromFormConfig: [], setFormDataFromAllFormsData: [], handleConnectedElementFieldGroupActions: [], handleConnectedElementFieldGroup: [], handleConnectedElementFieldActions: [], handleConnectedElementFields: [], handleConnectedElements: [], handleGetKeyValue: [], handleOnClickResetFormFields: [], handleOnClickApiCall: [], handleOnClickViewForms: [], handleOnClickSaveForm: [], toggleErrorNotification: [], fieldHide: [], fieldGroupHide: [], fieldShow: [], fieldGroupShow: [], fieldDisable: [], fieldGroupDisable: [], fieldEnable: [], fieldGroupEnable: [], fieldReset: [], fieldErrorShow: [], fieldErrorHide: [], fieldMessageShow: [], fieldMessageHide: [], setObjectValue: [], patchFieldControlValue: [], isFieldValid: [], isFieldEnabled: [], getFormGroupRawValues: [], handleFieldTypeSearchText: [], takeActionOnFieldGroup: [], takeAction: [] } });
|
|
2030
2167
|
|
|
2031
2168
|
const hasKey = (object, key) => {
|
|
2032
2169
|
return object.hasOwnProperty(key);
|
|
@@ -2376,11 +2513,6 @@ class Converter {
|
|
|
2376
2513
|
convertFormConfig(formConfig) {
|
|
2377
2514
|
const updateOnFieldType = (field) => {
|
|
2378
2515
|
const formatFieldTypeTitle = (field) => {
|
|
2379
|
-
const fieldKey = `${field.type}_${field.label
|
|
2380
|
-
.split(" ")
|
|
2381
|
-
.join("_")
|
|
2382
|
-
.toLocaleLowerCase()}`;
|
|
2383
|
-
field = this.setFieldKeyValue(field, "key", fieldKey);
|
|
2384
2516
|
field = this.setFieldKeyValue(field, "hidden", false);
|
|
2385
2517
|
return field;
|
|
2386
2518
|
};
|
|
@@ -2656,7 +2788,6 @@ class Converter {
|
|
|
2656
2788
|
default:
|
|
2657
2789
|
break;
|
|
2658
2790
|
}
|
|
2659
|
-
console.log(field.key, field.validators);
|
|
2660
2791
|
if (isEmpty$1((_a = field.validators) === null || _a === void 0 ? void 0 : _a.min)) {
|
|
2661
2792
|
delete field.validators.min;
|
|
2662
2793
|
}
|
|
@@ -2882,11 +3013,27 @@ class Converter {
|
|
|
2882
3013
|
}
|
|
2883
3014
|
return formConfig;
|
|
2884
3015
|
};
|
|
3016
|
+
const setFormFieldGroups = (formConfig, groups) => {
|
|
3017
|
+
formConfig["fieldGroups"] = groups;
|
|
3018
|
+
return formConfig;
|
|
3019
|
+
};
|
|
3020
|
+
const updateFormFieldGroups = (fieldGroups, field) => {
|
|
3021
|
+
if (hasKey$2(field, "groupKey")) {
|
|
3022
|
+
if (hasKey$2(fieldGroups, field.groupKey)) {
|
|
3023
|
+
fieldGroups[field.groupKey].push(field.key);
|
|
3024
|
+
}
|
|
3025
|
+
else {
|
|
3026
|
+
fieldGroups[field.groupKey] = [field.key];
|
|
3027
|
+
}
|
|
3028
|
+
}
|
|
3029
|
+
return fieldGroups;
|
|
3030
|
+
};
|
|
2885
3031
|
let connectedFieldMapping = {
|
|
2886
3032
|
parent: {},
|
|
2887
3033
|
child: {}
|
|
2888
3034
|
};
|
|
2889
3035
|
let fields = this.getFormFields(formConfig);
|
|
3036
|
+
let fieldGroups = {};
|
|
2890
3037
|
for (let field of fields) {
|
|
2891
3038
|
field = updateOnFieldType(field);
|
|
2892
3039
|
field = formatFieldKeys(field);
|
|
@@ -2895,11 +3042,13 @@ class Converter {
|
|
|
2895
3042
|
// connectedFieldMapping
|
|
2896
3043
|
// );
|
|
2897
3044
|
// field = updateConnectedElementsKeyValue(field, connectedFieldMapping);
|
|
3045
|
+
fieldGroups = updateFormFieldGroups(fieldGroups, field);
|
|
2898
3046
|
field = updateFieldDefaultValueConfig(field);
|
|
2899
3047
|
field = updateFieldValidatorConfig(field);
|
|
2900
3048
|
field = updateFieldResetButton(field);
|
|
2901
3049
|
field = updateFieldMessages(field);
|
|
2902
3050
|
}
|
|
3051
|
+
formConfig = setFormFieldGroups(formConfig, fieldGroups);
|
|
2903
3052
|
formConfig = setFormFields(formConfig, fields);
|
|
2904
3053
|
return formConfig;
|
|
2905
3054
|
}
|
|
@@ -2993,12 +3142,28 @@ class KwikIDRendererService {
|
|
|
2993
3142
|
}
|
|
2994
3143
|
return formsList;
|
|
2995
3144
|
}
|
|
3145
|
+
filterAllFormsData(allFormsData, formsList) {
|
|
3146
|
+
let currentUserFormAllFormsData = {};
|
|
3147
|
+
for (let form of formsList) {
|
|
3148
|
+
if (hasKey$2(allFormsData, form.key)) {
|
|
3149
|
+
currentUserFormAllFormsData = Object.assign(Object.assign({}, currentUserFormAllFormsData), { [form.key]: allFormsData[form.key] });
|
|
3150
|
+
}
|
|
3151
|
+
}
|
|
3152
|
+
return currentUserFormAllFormsData;
|
|
3153
|
+
}
|
|
2996
3154
|
updateFormsList() {
|
|
2997
3155
|
let formsList = this.formsList;
|
|
2998
3156
|
let formsListCompleted;
|
|
2999
3157
|
let activeFormConfig;
|
|
3000
3158
|
formsList = this.assignSequenceNoToForm(formsList);
|
|
3001
|
-
|
|
3159
|
+
/**
|
|
3160
|
+
* Below code identifies the allFormsData required for the current User Form.
|
|
3161
|
+
* Why? Because allFormsData will actually contain the whole journey's all
|
|
3162
|
+
* possible User Form steps. So, it is important to set the form data which
|
|
3163
|
+
* this particular User Form only has to LOCAL METHOD Variable.
|
|
3164
|
+
*/
|
|
3165
|
+
const currentUserFormAllFormsData = this.filterAllFormsData(this.allFormsData, formsList);
|
|
3166
|
+
formsListCompleted = this.findCompletedFormsList(currentUserFormAllFormsData);
|
|
3002
3167
|
formsList = this.markFormInFormsListAsCompleted(formsList, formsListCompleted);
|
|
3003
3168
|
formsList = this.markFormInFormsListAsDisabled(formsList, formsListCompleted);
|
|
3004
3169
|
if (formsList.length !== formsListCompleted.length) {
|
|
@@ -3160,6 +3325,9 @@ class KwikIDFormsRendererComponent {
|
|
|
3160
3325
|
}
|
|
3161
3326
|
else {
|
|
3162
3327
|
this.toggleErrorNotification(true);
|
|
3328
|
+
setTimeout(() => {
|
|
3329
|
+
this.toggleErrorNotification(false);
|
|
3330
|
+
}, 3000);
|
|
3163
3331
|
}
|
|
3164
3332
|
}))();
|
|
3165
3333
|
}
|