kwikid-forms 0.5.14 → 0.5.16
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 +76 -27
- package/bundles/kwikid-forms.umd.js.map +1 -1
- package/esm2015/lib/builder/builder-form-editor/builder-form-editor.component.js +27 -12
- package/esm2015/lib/builder/builder-form-editor/builder.form-editor.constants.js +35 -1
- package/esm2015/lib/renderer/config-converter/config-converter.constants.js +2 -2
- package/esm2015/lib/renderer/config-converter/config-converter.js +2 -1
- package/esm2015/lib/renderer/form-view/form-view.component.js +6 -7
- package/fesm2015/kwikid-forms.js +66 -17
- package/fesm2015/kwikid-forms.js.map +1 -1
- package/lib/builder/builder-form-editor/builder-form-editor.component.d.ts +3 -1
- package/lib/builder/builder-form-editor/builder.form-editor.constants.d.ts +72 -0
- package/lib/renderer/form-view/form-view.component.d.ts +2 -2
- package/package.json +1 -1
|
@@ -702,7 +702,7 @@
|
|
|
702
702
|
case: "default"
|
|
703
703
|
},
|
|
704
704
|
"aadhaar-number": {
|
|
705
|
-
mask: "
|
|
705
|
+
mask: "# # # # - # # # # - # # # #"
|
|
706
706
|
},
|
|
707
707
|
number: {
|
|
708
708
|
decimal: "never",
|
|
@@ -1276,6 +1276,7 @@
|
|
|
1276
1276
|
var formatFieldTypeAadhaarNumber = function (field) {
|
|
1277
1277
|
field = setFieldKeyHidden(field);
|
|
1278
1278
|
field = setFieldAsFormElement(field, true);
|
|
1279
|
+
field = updateFormFieldProperties(field);
|
|
1279
1280
|
return field;
|
|
1280
1281
|
};
|
|
1281
1282
|
var formatFieldTypeFile = function (field) {
|
|
@@ -1659,6 +1660,7 @@
|
|
|
1659
1660
|
"select",
|
|
1660
1661
|
"slider",
|
|
1661
1662
|
"otp",
|
|
1663
|
+
"button",
|
|
1662
1664
|
"api",
|
|
1663
1665
|
"api-call",
|
|
1664
1666
|
"aadhaar-number",
|
|
@@ -1670,6 +1672,7 @@
|
|
|
1670
1672
|
],
|
|
1671
1673
|
disabled: [true, false],
|
|
1672
1674
|
properties: {
|
|
1675
|
+
button: {},
|
|
1673
1676
|
text: {
|
|
1674
1677
|
case: ["default", "upper", "lower"]
|
|
1675
1678
|
},
|
|
@@ -1774,6 +1777,7 @@
|
|
|
1774
1777
|
placeholder: ""
|
|
1775
1778
|
};
|
|
1776
1779
|
var FIELD_PROPERTIES_CONFIG = {
|
|
1780
|
+
button: Object.assign({}, FIELD_PROPERTIES_COMMON_CONFIG),
|
|
1777
1781
|
title: Object.assign({}, FIELD_PROPERTIES_COMMON_CONFIG),
|
|
1778
1782
|
text: Object.assign(Object.assign({}, FIELD_PROPERTIES_COMMON_CONFIG), { case: "default" }),
|
|
1779
1783
|
textarea: Object.assign({}, FIELD_PROPERTIES_COMMON_CONFIG),
|
|
@@ -1804,6 +1808,7 @@
|
|
|
1804
1808
|
var FIELD_CONFIG = {
|
|
1805
1809
|
title: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "title", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.title) }),
|
|
1806
1810
|
text: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "text", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.text) }),
|
|
1811
|
+
button: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "button", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.button) }),
|
|
1807
1812
|
textarea: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "textarea", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.textarea) }),
|
|
1808
1813
|
checkbox: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "checkbox", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.checkbox) }),
|
|
1809
1814
|
number: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "number", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.number) }),
|
|
@@ -1826,6 +1831,36 @@
|
|
|
1826
1831
|
} }),
|
|
1827
1832
|
file: Object.assign(Object.assign({}, FIELD_COMMON_CONFIG), { type: "file", properties: Object.assign({}, FIELD_PROPERTIES_CONFIG.file) })
|
|
1828
1833
|
};
|
|
1834
|
+
var NOFIELD_CONFIG = {
|
|
1835
|
+
required: true,
|
|
1836
|
+
type: "FORM",
|
|
1837
|
+
props: {
|
|
1838
|
+
url: "",
|
|
1839
|
+
title: ""
|
|
1840
|
+
},
|
|
1841
|
+
hidden: false,
|
|
1842
|
+
disabled: false,
|
|
1843
|
+
dependentOn: [],
|
|
1844
|
+
title: "",
|
|
1845
|
+
properties: {
|
|
1846
|
+
header: {
|
|
1847
|
+
logo: { src: "", alt: "Logo", hidden: false },
|
|
1848
|
+
backButton: { mode: "TABBED", bypassConfirmation: false, hidden: true },
|
|
1849
|
+
title: { hidden: false, label: "" },
|
|
1850
|
+
steps: { hidden: false }
|
|
1851
|
+
},
|
|
1852
|
+
footer: {
|
|
1853
|
+
viewFormsButton: {
|
|
1854
|
+
bypassConfirmation: false,
|
|
1855
|
+
hidden: false,
|
|
1856
|
+
label: "Back"
|
|
1857
|
+
},
|
|
1858
|
+
saveButton: { hidden: false, label: "Save" }
|
|
1859
|
+
},
|
|
1860
|
+
isUnsavedDataAlertEnabled: false
|
|
1861
|
+
},
|
|
1862
|
+
fieldGroups: {}
|
|
1863
|
+
};
|
|
1829
1864
|
|
|
1830
1865
|
var KwikIDFormBuilderFormEditorService = /** @class */ (function () {
|
|
1831
1866
|
function KwikIDFormBuilderFormEditorService() {
|
|
@@ -1968,26 +2003,9 @@
|
|
|
1968
2003
|
this.activeEditorType = editorType;
|
|
1969
2004
|
};
|
|
1970
2005
|
KwikIDBuilderFormEditorComponent.prototype.handleOnClickSaveActiveFormConfig = function () {
|
|
1971
|
-
|
|
1972
|
-
var fields = [];
|
|
1973
|
-
try {
|
|
1974
|
-
for (var _b = __values(Object.values(kwikidToolkit.getObjectDeepCopy(this.formGroup.getRawValue()))), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
1975
|
-
var field = _c.value;
|
|
1976
|
-
fields.push(kwikidToolkit.setValueToObjectPath(findModifiedKeys(FIELD_CONFIG[field["type"]], field, ""), "type", field["type"]));
|
|
1977
|
-
}
|
|
1978
|
-
}
|
|
1979
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
1980
|
-
finally {
|
|
1981
|
-
try {
|
|
1982
|
-
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
1983
|
-
}
|
|
1984
|
-
finally { if (e_1) throw e_1.error; }
|
|
1985
|
-
}
|
|
1986
|
-
this.activeFormConfig = kwikidToolkit.mergeObjects(kwikidToolkit.getObjectDeepCopy(this.activeFormConfig_NoFields), {
|
|
1987
|
-
fields: fields
|
|
1988
|
-
});
|
|
2006
|
+
this.convertToMinifiedJson();
|
|
1989
2007
|
this.markSaved();
|
|
1990
|
-
this.onClickSaveActiveFormConfig.emit(this.activeFormConfig);
|
|
2008
|
+
this.onClickSaveActiveFormConfig.emit(kwikidToolkit.getObjectDeepCopy(this.activeFormConfig));
|
|
1991
2009
|
};
|
|
1992
2010
|
/**
|
|
1993
2011
|
* Fields Editor Related Methods
|
|
@@ -2130,6 +2148,32 @@
|
|
|
2130
2148
|
KwikIDBuilderFormEditorComponent.prototype.copyToClipboard = function () {
|
|
2131
2149
|
this.kwikidBuilderFormEditorService.copyToClipboard(this.activeFormConfig);
|
|
2132
2150
|
};
|
|
2151
|
+
KwikIDBuilderFormEditorComponent.prototype.convertToMinifiedJson = function () {
|
|
2152
|
+
var e_1, _a;
|
|
2153
|
+
var fields = [];
|
|
2154
|
+
try {
|
|
2155
|
+
for (var _b = __values(Object.values(kwikidToolkit.getObjectDeepCopy(this.formGroup.getRawValue()))), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
2156
|
+
var field = _c.value;
|
|
2157
|
+
fields.push(kwikidToolkit.setValueToObjectPath(findModifiedKeys(FIELD_CONFIG[field["type"]], field, ""), "type", field["type"]));
|
|
2158
|
+
}
|
|
2159
|
+
}
|
|
2160
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
2161
|
+
finally {
|
|
2162
|
+
try {
|
|
2163
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
2164
|
+
}
|
|
2165
|
+
finally { if (e_1) throw e_1.error; }
|
|
2166
|
+
}
|
|
2167
|
+
var activeFormConfig_NoFields_Minified = findModifiedKeys(NOFIELD_CONFIG, kwikidToolkit.getObjectDeepCopy(this.activeFormConfig_NoFields), "");
|
|
2168
|
+
this.activeFormConfig = kwikidToolkit.mergeObjects({}, activeFormConfig_NoFields_Minified, {
|
|
2169
|
+
fields: fields
|
|
2170
|
+
});
|
|
2171
|
+
};
|
|
2172
|
+
KwikIDBuilderFormEditorComponent.prototype.convertToCompleteJson = function () {
|
|
2173
|
+
var formConfig = new Converter().convertFormConfig(kwikidToolkit.getObjectDeepCopy(this.activeFormConfig));
|
|
2174
|
+
formConfig = new Converter().updateFormConfigProperties(formConfig);
|
|
2175
|
+
this.activeFormConfig = formConfig;
|
|
2176
|
+
};
|
|
2133
2177
|
KwikIDBuilderFormEditorComponent.prototype.downloadJSON = function () {
|
|
2134
2178
|
this.kwikidBuilderFormEditorService.downloadJSON(this.activeFormConfig);
|
|
2135
2179
|
};
|
|
@@ -2186,7 +2230,7 @@
|
|
|
2186
2230
|
return KwikIDBuilderFormEditorComponent;
|
|
2187
2231
|
}());
|
|
2188
2232
|
/** @nocollapse */ KwikIDBuilderFormEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDBuilderFormEditorComponent, deps: [{ token: i2__namespace.KwikUILoaderService }, { token: KwikIDFormBuilderFormEditorService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2189
|
-
/** @nocollapse */ KwikIDBuilderFormEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDBuilderFormEditorComponent, selector: "kwikid-builder-form-editor", inputs: { activeFormConfig: "activeFormConfig" }, outputs: { onClickSaveActiveFormConfig: "onClickSaveActiveFormConfig" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!-- Component Loader -->\n<kwikui-loader\n></kwikui-loader>\n\n<!-- Component Main View -->\n<div class=\"container\">\n <ng-container *ngIf=\"activeFormConfig; else noFormSelectedTemplate\">\n <header>\n <div>\n Editing Config of Form: <b>{{ activeFormConfig.props.title }}</b>\n </div>\n <div class=\"header-form-editor-btns\">\n <button (click)=\"handleOnClickPreview()\">preview</button>\n <div>Editor Type:</div>\n <select (change)=\"handleOnClickChangeActiveEditor($event.target.value)\">\n <option\n *ngFor=\"let option of editorTypeOptions\"\n [value]=\"option.key\"\n [selected]=\"option.key === activeEditorType\"\n >\n {{ option.label }}\n </option>\n </select>\n </div>\n </header>\n <main>\n <div\n class=\"form-config-fields\"\n *ngIf=\"activeEditorType == 'FIELDS'; else nonFieldsEditorTemplate\"\n >\n <ng-container *ngIf=\"rows.length <= 0\">\n <div class=\"no-fields disclaimer\">\n <div><p>Please add field to get started</p></div>\n <div class=\"icon\"><h1>+</h1></div>\n <button (click)=\"handleOnClickAddField()\">add field</button>\n </div>\n </ng-container>\n <table>\n <thead>\n <tr>\n <th *ngFor=\"let column of columns\">\n {{ column }}\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-container\n *ngFor=\"let row of rows; let i = index; trackBy: trackByFn\"\n >\n <tr>\n <ng-container *ngFor=\"let column of columns; let j = index\">\n <td>\n <div [class]=\"column\">\n <ng-container\n *ngIf=\"\n column !== 'delete' &&\n column !== 'validators' &&\n column !== 'properties' &&\n column !== 'type' &&\n column !== 'disabled'\n \"\n [ngTemplateOutlet]=\"getFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: i,\n fieldValue: row[column],\n fieldKey: column,\n parentPath: ''\n }\"\n ></ng-container>\n <ng-container *ngIf=\"column === 'type'\">\n <ng-container\n [ngTemplateOutlet]=\"optionFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: i,\n key: column,\n value: row[column],\n path: '',\n options: memoizedGetOptions(\n i,\n row[column],\n column,\n ''\n )\n }\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"column === 'disabled'\">\n <ng-container\n [ngTemplateOutlet]=\"booleanFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: i,\n key: column,\n value: row[column],\n path: '',\n options: memoizedGetOptions(\n i,\n row[column],\n column,\n ''\n )\n }\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"column === 'delete'\">\n <button\n (click)=\"\n handleOnClickDeleteField({\n index: i,\n key: row['key']\n })\n \"\n [disabled]=\"rows.length === 1\"\n >\n delete\n </button>\n </ng-container>\n <ng-container *ngIf=\"column === 'validators'\">\n <button\n (click)=\"\n handleOnClickEditValidators({\n index: i,\n key: row['key'],\n type: row['type']\n })\n \"\n >\n edit\n </button>\n </ng-container>\n <ng-container *ngIf=\"column === 'properties'\">\n <button\n (click)=\"\n handleOnClickEditProperties({\n index: i,\n key: row['key'],\n type: row['type']\n })\n \"\n >\n edit\n </button>\n </ng-container>\n </div>\n </td>\n </ng-container>\n </tr>\n </ng-container>\n </tbody>\n </table>\n <div class=\"add-field-btn-container\"> </div>\n </div>\n <ng-template #nonFieldsEditorTemplate>\n <div class=\"form-config-no-fields\">\n <pre\n contenteditable=\"true\"\n (keyup)=\"\n handleOnClickSaveActiveFormConfig_NoFields(\n $event.target.innerHTML\n )\n \"\n >\n {{ activeFormConfig_NoFields | json }}\n </pre>\n </div>\n </ng-template>\n </main>\n <footer>\n <button\n *ngIf=\"rows.length > 0\"\n (click)=\"handleOnClickAddField()\"\n >\n add field\n </button>\n <button\n (click)=\"handleOnClickSaveActiveFormConfig()\"\n [class.secondary]=\"!savedConfig\"\n >\n {{ savedConfig ? \"saved\" : \"unsaved\" }}\n </button>\n </footer>\n </ng-container>\n <ng-template #noFormSelectedTemplate>\n <div class=\"no-form-selected disclaimer\">\n <div class=\"icon\"><h1>➦</h1></div>\n <div><p>Please select a form to edit it's fields</p></div>\n </div>\n </ng-template>\n</div>\n\n<!-- Component Dialog -->\n<div\n class=\"modal\"\n [class.error]=\"dialogError === true\"\n *ngIf=\"\n dialogOpen ||\n showFieldConfigValidatorsConfigEditor ||\n showFieldConfigPropertiesConfigEditor\n \"\n [@panelInOut]\n>\n <div class=\"modal-box\">\n <div\n class=\"modal-content\"\n *ngIf=\"dialogOpen\"\n >\n <div class=\"modal-heading\">\n <div class=\"modal-title\">\n {{ activeFormConfig.props.title }}'s Config Preview\n </div>\n <div class=\"modal-actions\">\n <button (click)=\"downloadJSON()\">download</button>\n <button (click)=\"copyToClipboard()\">copy</button>\n <button (click)=\"closeJSONPopup()\">close</button>\n </div>\n </div>\n <div class=\"modal-body\">\n <pre>\n <code>{{ activeFormConfig | json }}</code>\n </pre>\n </div>\n </div>\n <div\n class=\"modal-content\"\n *ngIf=\"showFieldConfigValidatorsConfigEditor\"\n >\n <div class=\"modal-heading\">\n <div class=\"modal-title\">\n {{ activeFormConfig.props.title }}'s Validator Config Editor\n </div>\n <div class=\"modal-actions\">\n <button (click)=\"closeJSONPopup()\">close</button>\n </div>\n </div>\n <div class=\"modal-body\">\n <pre\n contenteditable=\"true\"\n (keyup)=\"\n handleOnInputFieldConfigValidatorsConfig($event.target.innerHTML)\n \"\n >\n {{ this.activeFieldConfigValidatorsConfig | json }}\n </pre>\n </div>\n </div>\n <div\n class=\"modal-content\"\n *ngIf=\"showFieldConfigPropertiesConfigEditor\"\n >\n <div class=\"modal-heading\">\n <div class=\"modal-title\">\n {{ activeFormConfig.props.title }}'s Properties Config Editor\n </div>\n <div class=\"modal-actions\">\n <button (click)=\"closeJSONPopup()\">close</button>\n </div>\n </div>\n <div class=\"modal-body\">\n <pre\n contenteditable=\"true\"\n (keyup)=\"\n handleOnInputFieldConfigPropertiesConfig($event.target.innerHTML)\n \"\n >\n {{ this.activeFieldConfigPropertiesConfig | json }}\n </pre>\n </div>\n </div>\n </div>\n</div>\n<!-- END -->\n\n<!-- Template for rendering different field types -->\n<!-- General Field Template -->\n<ng-template\n #getFieldTemplate\n let-index=\"index\"\n let-value=\"fieldValue\"\n let-key=\"fieldKey\"\n let-path=\"parentPath\"\n>\n <div>\n <ng-container\n [ngTemplateOutlet]=\"\n isObject(value) ? objectFieldTemplate : notObjectFieldTemplate\n \"\n [ngTemplateOutletContext]=\"{\n index: index,\n fieldValue: value,\n fieldKey: key,\n parentPath: path\n }\"\n >\n </ng-container>\n </div>\n</ng-template>\n\n<!-- Object Type Field Template -->\n<ng-template\n #objectFieldTemplate\n let-index=\"index\"\n let-value=\"fieldValue\"\n let-key=\"fieldKey\"\n let-path=\"parentPath\"\n>\n <ng-container *ngFor=\"let item of value | keyvalue\">\n <ng-container\n [ngTemplateOutlet]=\"getFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: index,\n fieldValue: item.value,\n fieldKey: item.key,\n parentPath: path === '' ? key : path + '.' + key\n }\"\n >\n </ng-container>\n </ng-container>\n</ng-template>\n\n<!-- Non Object Type Field Template -->\n<ng-template\n #notObjectFieldTemplate\n let-index=\"index\"\n let-value=\"fieldValue\"\n let-key=\"fieldKey\"\n let-path=\"parentPath\"\n>\n <div>\n <ng-container *ngIf=\"isOptions(index, value, key, path)\">\n <ng-container\n [ngTemplateOutlet]=\"optionFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: index,\n key: key,\n value: value,\n path: path,\n options: memoizedGetOptions(index, value, key, path)\n }\"\n ></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isOptions(index, value, key, path) && isString(value)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n textFieldTemplate;\n context: { index: index, key: key, value: value, path: path }\n \"\n ></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isOptions(index, value, key, path) && isNumber(value)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n numberFieldTemplate;\n context: { index: index, key: key, value: value, path: path }\n \"\n ></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Options Field Template -->\n<ng-template\n #optionFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n let-options=\"options\"\n>\n <div class=\"field-container options\">\n <select\n (change)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n >\n <option\n *ngFor=\"let option of options\"\n [value]=\"option\"\n [selected]=\"option === value\"\n >{{ option }}</option\n >\n </select>\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Boolean Field Template -->\n<ng-template\n #booleanFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n>\n <div class=\"field-container checkbox\">\n <input\n type=\"checkbox\"\n [checked]=\"value\"\n (change)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.checked }, path })\"\n />\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Text Field Template -->\n<ng-template\n #textFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n>\n <div class=\"field-container text\">\n <input\n placeholder=\"Enter {{ key }}\"\n type=\"text\"\n [value]=\"value\"\n (blur)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n />\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Number Field Template -->\n<ng-template\n #numberFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n>\n <div class=\"field-container number\">\n <input\n placeholder=\"Enter {{ key }}\"\n type=\"number\"\n [value]=\"value\"\n (blur)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n />\n </div>\n</ng-template>\n<!-- END -->\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}input[type=text],input[type=number]{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;-webkit-appearance:auto!important;appearance:auto!important}input[type=checkbox]{-webkit-appearance:auto!important;appearance:auto!important;width:1rem;height:1rem}select{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}textarea{overflow-wrap:anywhere;resize:none;unicode-bidi:embed;white-space:pre-wrap}button{display:inline-block;padding:8px 12px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:4px;border:none;cursor:pointer}button:hover{background-color:#0069d9}button:active{background-color:#0056b3}button:focus{outline:none}button.secondary{padding:7px 11px;border:1px solid #007bff;background-color:#fff;color:#007bff}button.secondary:hover{background-color:#b7daff}button.secondary:active{background-color:#b7daff}button.secondary:focus{outline:none}.field-container{display:flex}.field-container label{color:gray}.field-container.checkbox{flex-direction:row;align-items:center;justify-content:center;padding:8px 12px;margin:auto}.field-container.options,.field-container.number,.field-container.text{flex-direction:column}.disclaimer{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#121212;width:100%;height:100%}.disclaimer>*:not(:last-child){margin-bottom:1.5rem}.disclaimer .icon{width:3rem;height:3rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.disclaimer.no-form-selected h1{transform:scaleX(-1)}.disclaimer h1{font-size:5rem;font-weight:100}.disclaimer p{font-size:1rem}\n", ":host{all:unset;position:relative;width:100%;height:100%;overflow:auto}.container{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;height:100%;border:1px solid #ccc}.container header{padding:.5rem;display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;border-bottom:1px solid #ccc}.container header .header-form-editor-btns{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center}.container header .header-form-editor-btns>*:not(:last-child){margin-right:1rem}.container main{padding:.5rem;flex-grow:1;overflow:auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;white-space:nowrap;position:relative}.container main>*:not(:last-child){margin-right:1rem}.container main .no-fields{position:absolute;top:0;left:0;background:white}.container main .form-config-no-fields{overflow:auto;width:100%}.container main .form-config-fields{overflow:auto;width:100%}.container main .form-config-fields .add-field-btn-container{width:100%;text-align:center}.container main .validators,.container main .properties{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.container main .validators>*:not(:last-child),.container main .properties>*:not(:last-child){margin-bottom:.5rem}.container main .input-checkbox-container{display:flex;flex-direction:row}.container footer{padding:.5rem;display:flex;flex-direction:row;justify-content:flex-end;align-items:stretch;border-top:1px solid lightgray}.container footer>*:not(:last-child){margin-right:1rem}.modal{position:absolute;top:0;background-color:#0000004d;width:100%;height:100%;display:flex;justify-content:center;align-items:center;left:0;flex-direction:row}.modal.error{background-color:#ff00004d}.modal-box{width:75%;height:75%;margin:auto;background-color:#fff;border-radius:1rem;box-shadow:#64646f33 0 7px 29px}.modal-content{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;width:100%;height:100%}.modal-heading{padding:.5rem 1rem;width:100%;display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid lightgray;align-items:center}.modal-title{font-weight:bold;font-size:1rem}.modal-actions{display:flex;flex-direction:row;cursor:pointer}.modal-actions>*:not(:last-child){margin-right:1rem}.modal-body{overflow:auto}.modal-body pre{padding:1rem}pre{white-space:pre-wrap;overflow:auto}table{width:100%;border-collapse:collapse;margin-bottom:20px}table th,table td{padding:8px;text-align:left;border:1px solid #ccc;vertical-align:top}table th{background-color:#f2f2f2}table tr:nth-child(even){background-color:#f9f9f9}table tr:hover{background-color:#eaeaea}\n"], components: [{ type: i2__namespace.KwikUILoaderComponent, selector: "kwikui-loader" }], directives: [{ type: i3__namespace$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "json": i3__namespace$2.JsonPipe, "keyvalue": i3__namespace$2.KeyValuePipe }, animations: [
|
|
2233
|
+
/** @nocollapse */ KwikIDBuilderFormEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDBuilderFormEditorComponent, selector: "kwikid-builder-form-editor", inputs: { activeFormConfig: "activeFormConfig" }, outputs: { onClickSaveActiveFormConfig: "onClickSaveActiveFormConfig" }, usesOnChanges: true, ngImport: i0__namespace, template: "<!-- Component Loader -->\n<kwikui-loader></kwikui-loader>\n\n<!-- Component Main View -->\n<div class=\"container\">\n <ng-container *ngIf=\"activeFormConfig; else noFormSelectedTemplate\">\n <header>\n <div>\n Editing Config of Form: <b>{{ activeFormConfig.props.title }}</b>\n </div>\n <div class=\"header-form-editor-btns\">\n <button (click)=\"handleOnClickPreview()\">preview</button>\n <div>Editor Type:</div>\n <select (change)=\"handleOnClickChangeActiveEditor($event.target.value)\">\n <option\n *ngFor=\"let option of editorTypeOptions\"\n [value]=\"option.key\"\n [selected]=\"option.key === activeEditorType\"\n >\n {{ option.label }}\n </option>\n </select>\n </div>\n </header>\n <main>\n <div\n class=\"form-config-fields\"\n *ngIf=\"activeEditorType == 'FIELDS'; else nonFieldsEditorTemplate\"\n >\n <ng-container *ngIf=\"rows.length <= 0\">\n <div class=\"no-fields disclaimer\">\n <div><p>Please add field to get started</p></div>\n <div class=\"icon\"><h1>+</h1></div>\n <button (click)=\"handleOnClickAddField()\">add field</button>\n </div>\n </ng-container>\n <table>\n <thead>\n <tr>\n <th *ngFor=\"let column of columns\">\n {{ column }}\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-container\n *ngFor=\"let row of rows; let i = index; trackBy: trackByFn\"\n >\n <tr>\n <ng-container *ngFor=\"let column of columns; let j = index\">\n <td>\n <div [class]=\"column\">\n <ng-container\n *ngIf=\"\n column !== 'delete' &&\n column !== 'validators' &&\n column !== 'properties' &&\n column !== 'type' &&\n column !== 'disabled'\n \"\n [ngTemplateOutlet]=\"getFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: i,\n fieldValue: row[column],\n fieldKey: column,\n parentPath: ''\n }\"\n ></ng-container>\n <ng-container *ngIf=\"column === 'type'\">\n <ng-container\n [ngTemplateOutlet]=\"optionFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: i,\n key: column,\n value: row[column],\n path: '',\n options: memoizedGetOptions(\n i,\n row[column],\n column,\n ''\n )\n }\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"column === 'disabled'\">\n <ng-container\n [ngTemplateOutlet]=\"booleanFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: i,\n key: column,\n value: row[column],\n path: '',\n options: memoizedGetOptions(\n i,\n row[column],\n column,\n ''\n )\n }\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"column === 'delete'\">\n <button\n (click)=\"\n handleOnClickDeleteField({\n index: i,\n key: row['key']\n })\n \"\n [disabled]=\"rows.length === 1\"\n >\n delete\n </button>\n </ng-container>\n <ng-container *ngIf=\"column === 'validators'\">\n <button\n (click)=\"\n handleOnClickEditValidators({\n index: i,\n key: row['key'],\n type: row['type']\n })\n \"\n >\n edit\n </button>\n </ng-container>\n <ng-container *ngIf=\"column === 'properties'\">\n <button\n (click)=\"\n handleOnClickEditProperties({\n index: i,\n key: row['key'],\n type: row['type']\n })\n \"\n >\n edit\n </button>\n </ng-container>\n </div>\n </td>\n </ng-container>\n </tr>\n </ng-container>\n </tbody>\n </table>\n <div class=\"add-field-btn-container\"> </div>\n </div>\n <ng-template #nonFieldsEditorTemplate>\n <div class=\"form-config-no-fields\">\n <pre\n contenteditable=\"true\"\n (keyup)=\"\n handleOnClickSaveActiveFormConfig_NoFields(\n $event.target.innerHTML\n )\n \"\n >\n {{ activeFormConfig_NoFields | json }}\n </pre>\n </div>\n </ng-template>\n </main>\n <footer>\n <button\n *ngIf=\"rows.length > 0\"\n (click)=\"handleOnClickAddField()\"\n >\n add field\n </button>\n <button\n (click)=\"handleOnClickSaveActiveFormConfig()\"\n [class.secondary]=\"!savedConfig\"\n >\n {{ savedConfig ? \"saved\" : \"unsaved\" }}\n </button>\n </footer>\n </ng-container>\n <ng-template #noFormSelectedTemplate>\n <div class=\"no-form-selected disclaimer\">\n <div class=\"icon\"><h1>➦</h1></div>\n <div><p>Please select a form to edit it's fields</p></div>\n </div>\n </ng-template>\n</div>\n\n<!-- Component Dialog -->\n<div\n class=\"modal\"\n [class.error]=\"dialogError === true\"\n *ngIf=\"\n dialogOpen ||\n showFieldConfigValidatorsConfigEditor ||\n showFieldConfigPropertiesConfigEditor\n \"\n [@panelInOut]\n>\n <div class=\"modal-box\">\n <div\n class=\"modal-content\"\n *ngIf=\"dialogOpen\"\n >\n <div class=\"modal-heading\">\n <div class=\"modal-title\">\n {{ activeFormConfig.props.title }}'s Config Preview\n </div>\n <div class=\"modal-actions\">\n <button (click)=\"convertToMinifiedJson()\">minify</button>\n <button (click)=\"convertToCompleteJson()\">full</button>\n <button (click)=\"downloadJSON()\">download</button>\n <button (click)=\"copyToClipboard()\">copy</button>\n <button (click)=\"closeJSONPopup()\">close</button>\n </div>\n </div>\n <div class=\"modal-body\">\n <pre>\n <code>{{ activeFormConfig | json }}</code>\n </pre>\n </div>\n </div>\n <div\n class=\"modal-content\"\n *ngIf=\"showFieldConfigValidatorsConfigEditor\"\n >\n <div class=\"modal-heading\">\n <div class=\"modal-title\">\n {{ activeFormConfig.props.title }}'s Validator Config Editor\n </div>\n <div class=\"modal-actions\">\n <button (click)=\"closeJSONPopup()\">close</button>\n </div>\n </div>\n <div class=\"modal-body\">\n <pre\n contenteditable=\"true\"\n (keyup)=\"\n handleOnInputFieldConfigValidatorsConfig($event.target.innerHTML)\n \"\n >\n {{ this.activeFieldConfigValidatorsConfig | json }}\n </pre>\n </div>\n </div>\n <div\n class=\"modal-content\"\n *ngIf=\"showFieldConfigPropertiesConfigEditor\"\n >\n <div class=\"modal-heading\">\n <div class=\"modal-title\">\n {{ activeFormConfig.props.title }}'s Properties Config Editor\n </div>\n <div class=\"modal-actions\">\n <button (click)=\"closeJSONPopup()\">close</button>\n </div>\n </div>\n <div class=\"modal-body\">\n <pre\n contenteditable=\"true\"\n (keyup)=\"\n handleOnInputFieldConfigPropertiesConfig($event.target.innerHTML)\n \"\n >\n {{ this.activeFieldConfigPropertiesConfig | json }}\n </pre>\n </div>\n </div>\n </div>\n</div>\n<!-- END -->\n\n<!-- Template for rendering different field types -->\n<!-- General Field Template -->\n<ng-template\n #getFieldTemplate\n let-index=\"index\"\n let-value=\"fieldValue\"\n let-key=\"fieldKey\"\n let-path=\"parentPath\"\n>\n <div>\n <ng-container\n [ngTemplateOutlet]=\"\n isObject(value) ? objectFieldTemplate : notObjectFieldTemplate\n \"\n [ngTemplateOutletContext]=\"{\n index: index,\n fieldValue: value,\n fieldKey: key,\n parentPath: path\n }\"\n >\n </ng-container>\n </div>\n</ng-template>\n\n<!-- Object Type Field Template -->\n<ng-template\n #objectFieldTemplate\n let-index=\"index\"\n let-value=\"fieldValue\"\n let-key=\"fieldKey\"\n let-path=\"parentPath\"\n>\n <ng-container *ngFor=\"let item of value | keyvalue\">\n <ng-container\n [ngTemplateOutlet]=\"getFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: index,\n fieldValue: item.value,\n fieldKey: item.key,\n parentPath: path === '' ? key : path + '.' + key\n }\"\n >\n </ng-container>\n </ng-container>\n</ng-template>\n\n<!-- Non Object Type Field Template -->\n<ng-template\n #notObjectFieldTemplate\n let-index=\"index\"\n let-value=\"fieldValue\"\n let-key=\"fieldKey\"\n let-path=\"parentPath\"\n>\n <div>\n <ng-container *ngIf=\"isOptions(index, value, key, path)\">\n <ng-container\n [ngTemplateOutlet]=\"optionFieldTemplate\"\n [ngTemplateOutletContext]=\"{\n index: index,\n key: key,\n value: value,\n path: path,\n options: memoizedGetOptions(index, value, key, path)\n }\"\n ></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isOptions(index, value, key, path) && isString(value)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n textFieldTemplate;\n context: { index: index, key: key, value: value, path: path }\n \"\n ></ng-container>\n </ng-container>\n <ng-container\n *ngIf=\"!isOptions(index, value, key, path) && isNumber(value)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n numberFieldTemplate;\n context: { index: index, key: key, value: value, path: path }\n \"\n ></ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Options Field Template -->\n<ng-template\n #optionFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n let-options=\"options\"\n>\n <div class=\"field-container options\">\n <select\n (change)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n >\n <option\n *ngFor=\"let option of options\"\n [value]=\"option\"\n [selected]=\"option === value\"\n >{{ option }}</option\n >\n </select>\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Boolean Field Template -->\n<ng-template\n #booleanFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n>\n <div class=\"field-container checkbox\">\n <input\n type=\"checkbox\"\n [checked]=\"value\"\n (change)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.checked }, path })\"\n />\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Text Field Template -->\n<ng-template\n #textFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n>\n <div class=\"field-container text\">\n <input\n placeholder=\"Enter {{ key }}\"\n type=\"text\"\n [value]=\"value\"\n (blur)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n />\n </div>\n</ng-template>\n\n<!-- Non Object Type Field :: Number Field Template -->\n<ng-template\n #numberFieldTemplate\n let-index=\"index\"\n let-key=\"key\"\n let-value=\"value\"\n let-path=\"path\"\n>\n <div class=\"field-container number\">\n <input\n placeholder=\"Enter {{ key }}\"\n type=\"number\"\n [value]=\"value\"\n (blur)=\"handleOnInput({ index, key, value: { previous: value, new: $event.target.value }, path })\"\n />\n </div>\n</ng-template>\n<!-- END -->\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}input[type=text],input[type=number]{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;-webkit-appearance:auto!important;appearance:auto!important}input[type=checkbox]{-webkit-appearance:auto!important;appearance:auto!important;width:1rem;height:1rem}select{width:100%;padding:8px 12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}textarea{overflow-wrap:anywhere;resize:none;unicode-bidi:embed;white-space:pre-wrap}button{display:inline-block;padding:8px 12px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:4px;border:none;cursor:pointer}button:hover{background-color:#0069d9}button:active{background-color:#0056b3}button:focus{outline:none}button.secondary{padding:7px 11px;border:1px solid #007bff;background-color:#fff;color:#007bff}button.secondary:hover{background-color:#b7daff}button.secondary:active{background-color:#b7daff}button.secondary:focus{outline:none}.field-container{display:flex}.field-container label{color:gray}.field-container.checkbox{flex-direction:row;align-items:center;justify-content:center;padding:8px 12px;margin:auto}.field-container.options,.field-container.number,.field-container.text{flex-direction:column}.disclaimer{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;color:#121212;width:100%;height:100%}.disclaimer>*:not(:last-child){margin-bottom:1.5rem}.disclaimer .icon{width:3rem;height:3rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.disclaimer.no-form-selected h1{transform:scaleX(-1)}.disclaimer h1{font-size:5rem;font-weight:100}.disclaimer p{font-size:1rem}\n", ":host{all:unset;position:relative;width:100%;height:100%;overflow:auto}.container{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;height:100%;border:1px solid #ccc}.container header{padding:.5rem;display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;border-bottom:1px solid #ccc}.container header .header-form-editor-btns{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center}.container header .header-form-editor-btns>*:not(:last-child){margin-right:1rem}.container main{padding:.5rem;flex-grow:1;overflow:auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;white-space:nowrap;position:relative}.container main>*:not(:last-child){margin-right:1rem}.container main .no-fields{position:absolute;top:0;left:0;background:white}.container main .form-config-no-fields{overflow:auto;width:100%}.container main .form-config-fields{overflow:auto;width:100%}.container main .form-config-fields .add-field-btn-container{width:100%;text-align:center}.container main .validators,.container main .properties{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.container main .validators>*:not(:last-child),.container main .properties>*:not(:last-child){margin-bottom:.5rem}.container main .input-checkbox-container{display:flex;flex-direction:row}.container footer{padding:.5rem;display:flex;flex-direction:row;justify-content:flex-end;align-items:stretch;border-top:1px solid lightgray}.container footer>*:not(:last-child){margin-right:1rem}.modal{position:absolute;top:0;background-color:#0000004d;width:100%;height:100%;display:flex;justify-content:center;align-items:center;left:0;flex-direction:row}.modal.error{background-color:#ff00004d}.modal-box{width:75%;height:75%;margin:auto;background-color:#fff;border-radius:1rem;box-shadow:#64646f33 0 7px 29px}.modal-content{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;width:100%;height:100%}.modal-heading{padding:.5rem 1rem;width:100%;display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid lightgray;align-items:center}.modal-title{font-weight:bold;font-size:1rem}.modal-actions{display:flex;flex-direction:row;cursor:pointer}.modal-actions>*:not(:last-child){margin-right:1rem}.modal-body{overflow:auto}.modal-body pre{padding:1rem}pre{white-space:pre-wrap;overflow:auto}table{width:100%;border-collapse:collapse;margin-bottom:20px}table th,table td{padding:8px;text-align:left;border:1px solid #ccc;vertical-align:top}table th{background-color:#f2f2f2}table tr:nth-child(even){background-color:#f9f9f9}table tr:hover{background-color:#eaeaea}\n"], components: [{ type: i2__namespace.KwikUILoaderComponent, selector: "kwikui-loader" }], directives: [{ type: i3__namespace$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "json": i3__namespace$2.JsonPipe, "keyvalue": i3__namespace$2.KeyValuePipe }, animations: [
|
|
2190
2234
|
animations.trigger("panelInOut", [
|
|
2191
2235
|
animations.transition(":enter", [
|
|
2192
2236
|
animations.style({ transform: "translateY(100%)" }),
|
|
@@ -2248,6 +2292,12 @@
|
|
|
2248
2292
|
__decorate([
|
|
2249
2293
|
kwikidToolkit.logMethod
|
|
2250
2294
|
], KwikIDBuilderFormEditorComponent.prototype, "copyToClipboard", null);
|
|
2295
|
+
__decorate([
|
|
2296
|
+
kwikidToolkit.logMethod
|
|
2297
|
+
], KwikIDBuilderFormEditorComponent.prototype, "convertToMinifiedJson", null);
|
|
2298
|
+
__decorate([
|
|
2299
|
+
kwikidToolkit.logMethod
|
|
2300
|
+
], KwikIDBuilderFormEditorComponent.prototype, "convertToCompleteJson", null);
|
|
2251
2301
|
__decorate([
|
|
2252
2302
|
kwikidToolkit.logMethod
|
|
2253
2303
|
], KwikIDBuilderFormEditorComponent.prototype, "downloadJSON", null);
|
|
@@ -2274,7 +2324,7 @@
|
|
|
2274
2324
|
type: i0.Input
|
|
2275
2325
|
}], onClickSaveActiveFormConfig: [{
|
|
2276
2326
|
type: i0.Output
|
|
2277
|
-
}], ngOnInit: [], ngOnChanges: [], initFormEditor: [], handleOnClickChangeActiveEditor: [], handleOnClickSaveActiveFormConfig: [], handleOnClickAddField: [], handleOnClickEditValidators: [], handleOnClickEditProperties: [], handleOnInput: [], handleOnInputFieldConfigValidatorsConfig: [], handleOnInputFieldConfigPropertiesConfig: [], handleOnClickDeleteField: [], handleOnClickSaveActiveFormConfig_NoFields: [], handleOnClickPreview: [], toggleLoader: [], closeJSONPopup: [], copyToClipboard: [], downloadJSON: [] } });
|
|
2327
|
+
}], ngOnInit: [], ngOnChanges: [], initFormEditor: [], handleOnClickChangeActiveEditor: [], handleOnClickSaveActiveFormConfig: [], handleOnClickAddField: [], handleOnClickEditValidators: [], handleOnClickEditProperties: [], handleOnInput: [], handleOnInputFieldConfigValidatorsConfig: [], handleOnInputFieldConfigPropertiesConfig: [], handleOnClickDeleteField: [], handleOnClickSaveActiveFormConfig_NoFields: [], handleOnClickPreview: [], toggleLoader: [], closeJSONPopup: [], copyToClipboard: [], convertToMinifiedJson: [], convertToCompleteJson: [], downloadJSON: [] } });
|
|
2278
2328
|
|
|
2279
2329
|
var KwikIDFormsBuilderComponent = /** @class */ (function () {
|
|
2280
2330
|
function KwikIDFormsBuilderComponent(loaderService) {
|
|
@@ -3613,7 +3663,6 @@
|
|
|
3613
3663
|
PREVIOUS_FORM_DATA: this.previousFormData,
|
|
3614
3664
|
ALL_FORMS_DATA: this.allFormsData
|
|
3615
3665
|
}, this.takeAction.bind(this));
|
|
3616
|
-
console.log("Running Validations:", validations_1);
|
|
3617
3666
|
(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
3618
3667
|
return __generator(this, function (_h) {
|
|
3619
3668
|
switch (_h.label) {
|
|
@@ -5454,12 +5503,12 @@
|
|
|
5454
5503
|
this.alertService
|
|
5455
5504
|
.open("" + message, {
|
|
5456
5505
|
status: type === "error"
|
|
5457
|
-
?
|
|
5506
|
+
? i3$1.TuiNotification.Error
|
|
5458
5507
|
: type === "warning"
|
|
5459
|
-
?
|
|
5508
|
+
? i3$1.TuiNotification.Warning
|
|
5460
5509
|
: type === "success"
|
|
5461
|
-
?
|
|
5462
|
-
:
|
|
5510
|
+
? i3$1.TuiNotification.Success
|
|
5511
|
+
: i3$1.TuiNotification.Info
|
|
5463
5512
|
})
|
|
5464
5513
|
.subscribe({
|
|
5465
5514
|
complete: function () { }
|