kwikid-forms 0.3.7 → 0.3.9
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 +1182 -379
- package/bundles/kwikid-forms.umd.js.map +1 -1
- package/esm2015/lib/renderer/config-converter.helper.js +11 -32
- package/esm2015/lib/renderer/form-view/definitions/form-view.actions.definition.js +15 -2
- package/esm2015/lib/renderer/form-view/definitions/form-view.commons.definition.js +6 -1
- package/esm2015/lib/renderer/form-view/form-view.component.js +530 -136
- package/esm2015/lib/renderer/form-view/form-view.module.js +18 -4
- package/esm2015/lib/renderer/form-view/helpers/form-view.apis.helper.js +5 -1
- package/esm2015/lib/renderer/form-view/helpers/form-view.tasks.helper.js +28 -0
- package/esm2015/lib/renderer/form-view/pipes/safe-url.pipe.js +25 -0
- package/esm2015/lib/renderer/forms-list/forms-list.component.js +7 -1
- package/esm2015/lib/renderer/renderer.component.js +176 -14
- package/esm2015/lib/renderer/renderer.module.js +15 -2
- package/fesm2015/kwikid-forms.js +815 -185
- package/fesm2015/kwikid-forms.js.map +1 -1
- package/lib/renderer/form-view/definitions/form-view.actions.definition.d.ts +28 -2
- package/lib/renderer/form-view/definitions/form-view.commons.definition.d.ts +5 -0
- package/lib/renderer/form-view/form-view.component.d.ts +45 -7
- package/lib/renderer/form-view/form-view.module.d.ts +8 -6
- package/lib/renderer/form-view/helpers/form-view.tasks.helper.d.ts +7 -0
- package/lib/renderer/form-view/pipes/safe-url.pipe.d.ts +15 -0
- package/lib/renderer/renderer.component.d.ts +33 -4
- package/lib/renderer/renderer.module.d.ts +2 -1
- package/package.json +2 -2
package/fesm2015/kwikid-forms.js
CHANGED
|
@@ -2,17 +2,19 @@ import { __decorate, __awaiter } from 'tslib';
|
|
|
2
2
|
import * as i4 from '@angular/cdk/drag-drop';
|
|
3
3
|
import { copyArrayItem, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { EventEmitter, Component, Input, Output, ViewEncapsulation, Pipe, Inject, HostListener, NgModule } from '@angular/core';
|
|
5
|
+
import { EventEmitter, Component, Input, Output, ViewEncapsulation, Pipe, Inject, ViewChild, HostListener, NgModule } from '@angular/core';
|
|
6
6
|
import * as i2 from '@angular/forms';
|
|
7
7
|
import { FormGroup, FormControl, FormArray, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
8
|
-
import { logMethod, setMissingKeyValue, mergeObjects, checkObjectKeyExists, getObjectFromLocalStorage, isNotEmptyValue, isEmptyValue, setValueToObjectPath, Source, Rule, Condition, Action, PATTERNS, Validation,
|
|
8
|
+
import { logMethod, setMissingKeyValue, mergeObjects, checkObjectKeyExists, getObjectFromLocalStorage, isNotEmptyValue, isEmptyValue, setValueToObjectPath, Source, Rule, Condition, Action, PATTERNS, Validation, ESourceKey, replaceString, getObjectValueFromPath, isUndefined, isNull, getObjectDeepCopy } from 'kwikid-toolkit';
|
|
9
9
|
import * as i1 from 'kwikui';
|
|
10
10
|
import { KwikUIButtonIconModule, KwikUIButtonModule, KwikUIInputModule, KwikUIInputNumberModule, KwikUISelectComboboxModule, KwikUITableModule, KwikUITextareaModule, KwikUIModule } from 'kwikui';
|
|
11
|
-
import * as
|
|
11
|
+
import * as i3 from '@angular/common';
|
|
12
12
|
import { CommonModule } from '@angular/common';
|
|
13
13
|
import _ from 'lodash';
|
|
14
|
-
import * as
|
|
15
|
-
import {
|
|
14
|
+
import * as i5 from '@taiga-ui/addon-preview';
|
|
15
|
+
import { TuiPreviewDialogService, TuiPreviewModule, TuiPreviewActionModule } from '@taiga-ui/addon-preview';
|
|
16
|
+
import * as i3$1 from '@taiga-ui/core';
|
|
17
|
+
import { TuiAlertService, TuiDialogService, TuiLabelModule, TuiSvgModule, TuiButtonModule, TuiDialogModule, TuiLoaderModule } from '@taiga-ui/core';
|
|
16
18
|
import * as i4$1 from '@taiga-ui/kit';
|
|
17
19
|
import { TuiPushService, TuiPushModule } from '@taiga-ui/kit';
|
|
18
20
|
import { pairwise } from 'rxjs/operators';
|
|
@@ -517,7 +519,7 @@ class BasicRadioConfigEditor {
|
|
|
517
519
|
</fieldset>
|
|
518
520
|
</div>
|
|
519
521
|
</form>
|
|
520
|
-
`, isInline: true, styles: ["\n .form-array-actions {\n display: flex;\n flex-direction: row;\n align-content: center;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n }\n "], components: [{ type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type:
|
|
522
|
+
`, isInline: true, styles: ["\n .form-array-actions {\n display: flex;\n flex-direction: row;\n align-content: center;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n }\n "], components: [{ type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
521
523
|
__decorate([
|
|
522
524
|
logMethod
|
|
523
525
|
], BasicRadioConfigEditor.prototype, "ngOnInit", null);
|
|
@@ -852,7 +854,7 @@ class BasicDropdownWithSearchConfigEditor {
|
|
|
852
854
|
</div>
|
|
853
855
|
</fieldset>
|
|
854
856
|
</form>
|
|
855
|
-
`, isInline: true, styles: ["\n .form-array-actions {\n display: flex;\n flex-direction: row;\n align-content: center;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n }\n "], components: [{ type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type:
|
|
857
|
+
`, isInline: true, styles: ["\n .form-array-actions {\n display: flex;\n flex-direction: row;\n align-content: center;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n }\n "], components: [{ type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
856
858
|
__decorate([
|
|
857
859
|
logMethod
|
|
858
860
|
], BasicDropdownWithSearchConfigEditor.prototype, "ngOnInit", null);
|
|
@@ -1668,7 +1670,7 @@ class BasicElementConfigEditor {
|
|
|
1668
1670
|
</ng-container>
|
|
1669
1671
|
</ng-container>
|
|
1670
1672
|
</form>
|
|
1671
|
-
`, isInline: true, styles: ["\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: flex-start;\n align-items: stretch;\n gap: 1rem;\n }\n "], components: [{ type: i1.KwikUITableComponent, selector: "kwikui-table", inputs: ["id", "columns", "headers", "data"], outputs: ["onClick"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "prefix", "postfix", "precision", "decimal", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: BasicTextConfigEditor, selector: "basic-text-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: BasicNumberConfigEditor, selector: "basic-number-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: BasicRadioConfigEditor, selector: "basic-radio-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: BasicDropdownWithSearchConfigEditor, selector: "basic-dropdown-with-search-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: BasicCheckboxConfigEditor, selector: "basic-checkbox-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: BasicOtpConfigEditor, selector: "basic-otp-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: BasicPhoneConfigEditor, selector: "basic-phone-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }], directives: [{ type:
|
|
1673
|
+
`, isInline: true, styles: ["\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: flex-start;\n align-items: stretch;\n gap: 1rem;\n }\n "], components: [{ type: i1.KwikUITableComponent, selector: "kwikui-table", inputs: ["id", "columns", "headers", "data"], outputs: ["onClick"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "prefix", "postfix", "precision", "decimal", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: BasicTextConfigEditor, selector: "basic-text-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: BasicNumberConfigEditor, selector: "basic-number-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: BasicRadioConfigEditor, selector: "basic-radio-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: BasicDropdownWithSearchConfigEditor, selector: "basic-dropdown-with-search-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: BasicCheckboxConfigEditor, selector: "basic-checkbox-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: BasicOtpConfigEditor, selector: "basic-otp-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: BasicPhoneConfigEditor, selector: "basic-phone-config-editor", inputs: ["saveBasicClickCounter", "elementConfig"], outputs: ["updateElement"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
|
|
1672
1674
|
__decorate([
|
|
1673
1675
|
logMethod
|
|
1674
1676
|
], BasicElementConfigEditor.prototype, "ngOnInit", null);
|
|
@@ -2560,7 +2562,7 @@ class DocumentElementConfigEditor {
|
|
|
2560
2562
|
</ng-container>
|
|
2561
2563
|
</ng-container>
|
|
2562
2564
|
</form>
|
|
2563
|
-
`, isInline: true, styles: ["\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: flex-start;\n align-items: stretch;\n gap: 1rem;\n }\n "], components: [{ type: i1.KwikUITableComponent, selector: "kwikui-table", inputs: ["id", "columns", "headers", "data"], outputs: ["onClick"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "prefix", "postfix", "precision", "decimal", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: DocumentAadhaarNumberConfigEditor, selector: "document-aadhaar-number-config-editor", inputs: ["saveDocumentClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: DocumentPanNumberConfigEditor, selector: "document-pan-number-config-editor", inputs: ["saveDocumentClickCounter", "elementConfig"], outputs: ["updateElement"] }], directives: [{ type:
|
|
2565
|
+
`, isInline: true, styles: ["\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: flex-start;\n align-items: stretch;\n gap: 1rem;\n }\n "], components: [{ type: i1.KwikUITableComponent, selector: "kwikui-table", inputs: ["id", "columns", "headers", "data"], outputs: ["onClick"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "prefix", "postfix", "precision", "decimal", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: DocumentAadhaarNumberConfigEditor, selector: "document-aadhaar-number-config-editor", inputs: ["saveDocumentClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: DocumentPanNumberConfigEditor, selector: "document-pan-number-config-editor", inputs: ["saveDocumentClickCounter", "elementConfig"], outputs: ["updateElement"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
|
|
2564
2566
|
__decorate([
|
|
2565
2567
|
logMethod
|
|
2566
2568
|
], DocumentElementConfigEditor.prototype, "ngOnInit", null);
|
|
@@ -3164,7 +3166,7 @@ class OtherElementConfigEditor {
|
|
|
3164
3166
|
</ng-container>
|
|
3165
3167
|
</ng-container>
|
|
3166
3168
|
</form>
|
|
3167
|
-
`, isInline: true, styles: ["\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: flex-start;\n align-items: stretch;\n gap: 1rem;\n }\n "], components: [{ type: i1.KwikUITableComponent, selector: "kwikui-table", inputs: ["id", "columns", "headers", "data"], outputs: ["onClick"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: OtherHTMLConfigEditor, selector: "other-html-config-editor", inputs: ["saveOtherClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: OtherTitleConfigEditor, selector: "other-title-config-editor", inputs: ["saveOtherClickCounter", "elementConfig"], outputs: ["updateElement"] }], directives: [{ type:
|
|
3169
|
+
`, isInline: true, styles: ["\n :host {\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: flex-start;\n align-items: stretch;\n gap: 1rem;\n }\n "], components: [{ type: i1.KwikUITableComponent, selector: "kwikui-table", inputs: ["id", "columns", "headers", "data"], outputs: ["onClick"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: OtherHTMLConfigEditor, selector: "other-html-config-editor", inputs: ["saveOtherClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: OtherTitleConfigEditor, selector: "other-title-config-editor", inputs: ["saveOtherClickCounter", "elementConfig"], outputs: ["updateElement"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
|
|
3168
3170
|
__decorate([
|
|
3169
3171
|
logMethod
|
|
3170
3172
|
], OtherElementConfigEditor.prototype, "ngOnInit", null);
|
|
@@ -3312,7 +3314,7 @@ class ElementConfigEditor {
|
|
|
3312
3314
|
}
|
|
3313
3315
|
}
|
|
3314
3316
|
/** @nocollapse */ ElementConfigEditor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ElementConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3315
|
-
/** @nocollapse */ ElementConfigEditor.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementConfigEditor, selector: "element-config-editor", inputs: { formKey: "formKey", elementConfig: "elementConfig" }, outputs: { updateElement: "updateElement" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"container\"\n *ngIf=\"elementConfig\"\n>\n <div class=\"element-config-editor-header\">\n '{{ elementConfig.elementType }}' Element Config Editor\n </div>\n <div class=\"element-config-editor-body\"\n ><ng-container [ngSwitch]=\"elementCategory\">\n <!-- Basic -->\n <ng-container *ngSwitchCase=\"'basic'\">\n <basic-element-config-editor\n [saveClickCounter]=\"saveClickCounter\"\n [elementConfig]=\"elementConfig\"\n (updateElement)=\"handleOnSaveUpdateElement($event)\"\n ></basic-element-config-editor>\n </ng-container>\n <!-- Document -->\n <ng-container *ngSwitchCase=\"'document'\">\n <document-element-config-editor\n [saveClickCounter]=\"saveClickCounter\"\n [elementConfig]=\"elementConfig\"\n (updateElement)=\"handleOnSaveUpdateElement($event)\"\n ></document-element-config-editor>\n </ng-container>\n <!-- Other -->\n <ng-container *ngSwitchCase=\"'other'\">\n <other-element-config-editor\n [saveClickCounter]=\"saveClickCounter\"\n [elementConfig]=\"elementConfig\"\n (updateElement)=\"handleOnSaveUpdateElement($event)\"\n ></other-element-config-editor>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"element-config-editor-footer\">\n <!-- <button\n class=\"save-button\"\n type=\"submit\"\n (click)=\"handleOnClickSave()\"\n >\n Save\n </button> -->\n <kwikui-button\n [disabled]=\"false\"\n label=\"Save\"\n [showLoader]=\"false\"\n styles=\"\"\n class=\"save-button\"\n type=\"button\"\n appearance=\"primary\"\n icon=\"\"\n iconRight=\"\"\n size=\"m\"\n (onClick)=\"handleOnClickSave()\"\n ></kwikui-button>\n </div>\n</div>\n", styles: ["form{display:flex;align-content:center;justify-content:flex-start;flex:1;flex-direction:column;align-items:stretch;grid-gap:1rem;gap:1rem}.form-group{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;padding:.5rem 0}.form-group-title{margin-top:1rem}.container{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-gap:1rem;gap:1rem}.container .element-config-editor-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;align-content:center;grid-gap:1rem;gap:1rem}\n", "kwikid-forms-builder fieldset{display:flex;flex-direction:column;justify-content:center;align-items:stretch;align-content:center;grid-gap:.5rem;gap:.5rem;padding:.5rem 1rem 1rem;box-shadow:0 0 10px -6px #000;border:0px solid gray;border-radius:1rem}kwikid-forms-builder table,kwikid-forms-builder tr,kwikid-forms-builder td{border:1px solid black;padding:.5rem 1rem}kwikui-table table{width:100%;box-shadow:0 0 10px -6px #000;border:0px solid gray;padding:0}\n"], components: [{ type: BasicElementConfigEditor, selector: "basic-element-config-editor", inputs: ["saveClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: DocumentElementConfigEditor, selector: "document-element-config-editor", inputs: ["saveClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: OtherElementConfigEditor, selector: "other-element-config-editor", inputs: ["saveClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type:
|
|
3317
|
+
/** @nocollapse */ ElementConfigEditor.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ElementConfigEditor, selector: "element-config-editor", inputs: { formKey: "formKey", elementConfig: "elementConfig" }, outputs: { updateElement: "updateElement" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"container\"\n *ngIf=\"elementConfig\"\n>\n <div class=\"element-config-editor-header\">\n '{{ elementConfig.elementType }}' Element Config Editor\n </div>\n <div class=\"element-config-editor-body\"\n ><ng-container [ngSwitch]=\"elementCategory\">\n <!-- Basic -->\n <ng-container *ngSwitchCase=\"'basic'\">\n <basic-element-config-editor\n [saveClickCounter]=\"saveClickCounter\"\n [elementConfig]=\"elementConfig\"\n (updateElement)=\"handleOnSaveUpdateElement($event)\"\n ></basic-element-config-editor>\n </ng-container>\n <!-- Document -->\n <ng-container *ngSwitchCase=\"'document'\">\n <document-element-config-editor\n [saveClickCounter]=\"saveClickCounter\"\n [elementConfig]=\"elementConfig\"\n (updateElement)=\"handleOnSaveUpdateElement($event)\"\n ></document-element-config-editor>\n </ng-container>\n <!-- Other -->\n <ng-container *ngSwitchCase=\"'other'\">\n <other-element-config-editor\n [saveClickCounter]=\"saveClickCounter\"\n [elementConfig]=\"elementConfig\"\n (updateElement)=\"handleOnSaveUpdateElement($event)\"\n ></other-element-config-editor>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"element-config-editor-footer\">\n <!-- <button\n class=\"save-button\"\n type=\"submit\"\n (click)=\"handleOnClickSave()\"\n >\n Save\n </button> -->\n <kwikui-button\n [disabled]=\"false\"\n label=\"Save\"\n [showLoader]=\"false\"\n styles=\"\"\n class=\"save-button\"\n type=\"button\"\n appearance=\"primary\"\n icon=\"\"\n iconRight=\"\"\n size=\"m\"\n (onClick)=\"handleOnClickSave()\"\n ></kwikui-button>\n </div>\n</div>\n", styles: ["form{display:flex;align-content:center;justify-content:flex-start;flex:1;flex-direction:column;align-items:stretch;grid-gap:1rem;gap:1rem}.form-group{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;padding:.5rem 0}.form-group-title{margin-top:1rem}.container{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-gap:1rem;gap:1rem}.container .element-config-editor-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;align-content:center;grid-gap:1rem;gap:1rem}\n", "kwikid-forms-builder fieldset{display:flex;flex-direction:column;justify-content:center;align-items:stretch;align-content:center;grid-gap:.5rem;gap:.5rem;padding:.5rem 1rem 1rem;box-shadow:0 0 10px -6px #000;border:0px solid gray;border-radius:1rem}kwikid-forms-builder table,kwikid-forms-builder tr,kwikid-forms-builder td{border:1px solid black;padding:.5rem 1rem}kwikui-table table{width:100%;box-shadow:0 0 10px -6px #000;border:0px solid gray;padding:0}\n"], components: [{ type: BasicElementConfigEditor, selector: "basic-element-config-editor", inputs: ["saveClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: DocumentElementConfigEditor, selector: "document-element-config-editor", inputs: ["saveClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: OtherElementConfigEditor, selector: "other-element-config-editor", inputs: ["saveClickCounter", "elementConfig"], outputs: ["updateElement"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3316
3318
|
__decorate([
|
|
3317
3319
|
logMethod
|
|
3318
3320
|
], ElementConfigEditor.prototype, "ngOnInit", null);
|
|
@@ -3598,7 +3600,7 @@ class KwikIDFormsBuilderComponent {
|
|
|
3598
3600
|
}
|
|
3599
3601
|
}
|
|
3600
3602
|
/** @nocollapse */ KwikIDFormsBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormsBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3601
|
-
/** @nocollapse */ KwikIDFormsBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsBuilderComponent, selector: "kwikid-forms-builder", ngImport: i0, template: "<div class=\"container\">\n <div class=\"wrapper\">\n <div class=\"builder-header\">\n <div class=\"builder-title\">KwikID Form Builder</div>\n <form\n [formGroup]=\"builderFormGroup\"\n class=\"builder-form\"\n >\n <kwikui-input\n [label]=\"'Form Key'\"\n [id]=\"'form_key'\"\n [type]=\"'text'\"\n [formControlName]=\"'formKey'\"\n [formControl]=\"builderFormGroup.controls['formKey']\"\n [disabled]=\"false\"\n [placeholder]=\"'Please enter a Form Key'\"\n [focus]=\"false\"\n [invalid]=\"false\"\n [case]=\"'upper'\"\n size=\"m\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input>\n <kwikui-input\n [label]=\"'Form Title'\"\n [id]=\"'form_title'\"\n [type]=\"'text'\"\n [formControlName]=\"'formTitle'\"\n [formControl]=\"builderFormGroup.controls['formTitle']\"\n [disabled]=\"false\"\n [placeholder]=\"'Please enter a Form Title'\"\n [focus]=\"false\"\n [invalid]=\"false\"\n [case]=\"'default'\"\n size=\"m\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input>\n <kwikui-button\n [disabled]=\"!builderFormGroup.valid\"\n id=\"save_form_btn\"\n label=\"Save Form\"\n [showLoader]=\"false\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"primary\"\n icon=\"\"\n iconRight=\"\"\n size=\"m\"\n (onClick)=\"handleOnClickSaveForms($event)\"\n ></kwikui-button>\n </form>\n </div>\n <div class=\"builder-body\">\n <div class=\"form-elements-drag-wrapper\">\n <div\n class=\"form-elements-drag\"\n cdkDropList\n [cdkDropListData]=\"formElementsDragList\"\n cdkDropListSortingDisabled\n [cdkDropListConnectedTo]=\"[formElementsList]\"\n (cdkDropListExited)=\"exit($event, 'other')\"\n (cdkDropListEntered)=\"enter($event, 'other')\"\n >\n <ng-container\n *ngFor=\"let formElementDragItem of formElementsDragList\"\n >\n <ng-container *ngIf=\"formElementDragItem.isElement\">\n <div\n class=\"form-element-drag\"\n cdkDrag\n [cdkDragData]=\"formElementDragItem\"\n >\n ⋮⋮ {{ formElementDragItem.elementTitle }}\n <!-- <ng-container *ngComponentOutlet=\"formElementDragItem.component\"></ng-container> -->\n </div>\n <div\n class=\"form-element-drag\"\n *cdkDragPlaceholder\n >\n {{ formElementDragItem.elementTitle }}\n </div>\n </ng-container>\n <ng-container *ngIf=\"!formElementDragItem.isElement\">\n <div class=\"form-element-category\">\n {{ formElementDragItem.elementTitle }}\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div\n class=\"form-elements-drop-wrapper\"\n cdkDropList\n #formElementsList=\"cdkDropList\"\n [cdkDropListData]=\"formElementsDropList\"\n (cdkDropListDropped)=\"drop($event, '')\"\n [cdkDropListEnterPredicate]=\"isElementPredicate\"\n >\n <ng-container\n *ngFor=\"\n let formElementDropItem of formElementsDropList;\n let idx = index\n \"\n >\n <div\n class=\"form-drop-element\"\n cdkDrag\n >\n <div class=\"form-drop-element-grab-symbol\">⋮⋮</div>\n <div class=\"form-drop-element-main\">\n <div class=\"form-drop-element-header\">\n <div class=\"form-drop-element-title\">\n {{ formElementDropItem.elementTitle }}\n </div>\n <div class=\"form-drop-element-actions\">\n <kwikui-button-icon\n [disabled]=\"false\"\n [id]=\"'edit-element'\"\n [showLoader]=\"false\"\n [styles]=\"\"\n [class]=\"\"\n [type]=\"'button'\"\n [appearance]=\"'secondary'\"\n [icon]=\"'tuiIconEdit'\"\n [shape]=\"'rounded'\"\n [size]=\"'s'\"\n (onClick)=\"editElement(idx, formElementDropItem)\"\n ></kwikui-button-icon>\n <kwikui-button-icon\n [disabled]=\"false\"\n [id]=\"'remove-element'\"\n [showLoader]=\"false\"\n [styles]=\"\"\n [class]=\"\"\n [type]=\"'button'\"\n [appearance]=\"'accent'\"\n [icon]=\"'tuiIconCloseLarge'\"\n [shape]=\"'rounded'\"\n [size]=\"'s'\"\n (onClick)=\"removeElement(idx, formElementDropItem)\"\n ></kwikui-button-icon>\n <!-- <button\n (click)=\"editElement(idx, formElementDropItem)\"\n title=\"edit element properties\"\n >\n ✎\n </button>\n <button\n (click)=\"removeElement(idx, formElementDropItem)\"\n title=\"delete element\"\n >\n ✖\n </button> -->\n </div>\n </div>\n <div class=\"form-drop-element-body\"> </div>\n <div class=\"form-drop-element-footer\">\n <div class=\"form-drop-element-id\">\n {{ formElementDropItem.elementId }}\n </div>\n <div class=\"form-drop-element-category\">\n {{ formElementDropItem.elementCategory }}\n </div>\n <div class=\"form-drop-element-type\">\n {{ formElementDropItem.elementType }}\n </div>\n </div>\n <div\n class=\"example-custom-placeholder\"\n *cdkDragPlaceholder\n ></div>\n <!-- <ng-container *ngComponentOutlet=\"formElementDropItem.component\"> </ng-container> -->\n <!-- <ng-container *ngTemplateOutlet=\"formModal; context: formElementDropItem\"></ng-container> -->\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"element-property-editor-wrapper\">\n <element-config-editor\n [elementConfig]=\"elementEditorElementConfig\"\n (updateElement)=\"handleOnSaveUpdateElement($event)\"\n ></element-config-editor>\n </div>\n </div>\n <div class=\"builder-footer\"> © Baiju Dodhia, KwikID </div>\n </div>\n <div\n class=\"modal\"\n *ngIf=\"finalJSONConfig\"\n >\n <div class=\"modal-box\">\n <div class=\"modal-content\">\n <div class=\"modal-heading\">\n <div class=\"modal-title\">{{ formTitle }}</div>\n <div class=\"modal-actions\">\n <div\n class=\"modal-code-download\"\n (click)=\"downloadJSON()\"\n >Download JSON</div\n >\n <div\n class=\"modal-code-copy\"\n (click)=\"copyToClipboard()\"\n >Copy to Clipboard</div\n >\n <div\n class=\"modal-close\"\n (click)=\"closeJSONPopup()\"\n >\n Close\n </div>\n </div>\n </div>\n <pre>\n <code>{{JSON.stringify(finalJSONConfig, undefined, 2)}}</code>\n </pre>\n </div>\n </div>\n </div>\n</div>\n", styles: ["kwikid-forms-builder fieldset{display:flex;flex-direction:column;justify-content:center;align-items:stretch;align-content:center;grid-gap:.5rem;gap:.5rem;padding:.5rem 1rem 1rem;box-shadow:0 0 10px -6px #000;border:0px solid gray;border-radius:1rem}kwikid-forms-builder table,kwikid-forms-builder tr,kwikid-forms-builder td{border:1px solid black;padding:.5rem 1rem}kwikui-table table{width:100%;box-shadow:0 0 10px -6px #000;border:0px solid gray;padding:0}\n", ":host{all:unset;position:relative;width:100%;height:100%}.container{width:100%;height:100%;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.container .wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:space-between;align-items:stretch}.container .wrapper .builder-header{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:1rem;column-gap:1rem;padding:1rem;max-height:max-content;border:1px solid lightgray;box-shadow:0 2px 10px -6px #000}.container .wrapper .builder-header .builder-title{font-weight:bold;display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;font-size:1rem}.container .wrapper .builder-header .builder-form{display:flex;align-content:center;justify-content:flex-end;flex:1;flex-direction:row;align-items:center;grid-gap:1rem;gap:1rem;width:100%}.container .wrapper .builder-header .builder-form kwikui-input{width:16rem}.container .wrapper .builder-body{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:stretch;grid-gap:1rem;gap:1rem;flex:1;padding:1rem;overflow:auto}.container .wrapper .builder-body>*{width:100%;border:1px solid lightgray;overflow:auto;box-shadow:0 2px 10px -6px #000}.container .wrapper .builder-body .form-elements-drag-wrapper{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-gap:1rem;gap:1rem;padding:1rem;min-width:16rem;max-width:16rem}.container .wrapper .builder-body .form-elements-drag-wrapper .form-elements-drag{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-gap:1rem;gap:1rem;border-bottom:none}.container .wrapper .builder-body .form-elements-drag-wrapper .form-elements-drag .form-element-drag{display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;grid-gap:1rem;gap:1rem;border-radius:.5rem;padding:1rem;cursor:grab;box-shadow:0 2px 10px -6px #000;text-transform:capitalize}.container .wrapper .builder-body .form-elements-drag-wrapper .form-elements-drag .form-element-category{display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;grid-gap:1rem;gap:1rem;border-left:.25rem solid var(--tui-primary);padding:1rem;background:var(--tui-secondary)}.container .wrapper .builder-body .form-elements-drop-wrapper{padding:1rem;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-gap:1rem;gap:1rem;min-width:20rem;max-width:28rem}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder{display:flex;justify-content:flex-start;justify-items:start;align-items:center;padding:1rem;border-radius:1rem;box-shadow:0 2px 10px -6px #000;cursor:grab;flex-direction:row;position:relative;grid-gap:1rem;gap:1rem}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main{flex:1;display:flex;justify-content:space-between;justify-items:start;align-items:stretch;flex-direction:column;width:100%;grid-gap:.5rem;gap:.5rem}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-header,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-header{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:1rem;column-gap:1rem}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-header .form-drop-element-actions,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-header .form-drop-element-actions{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;gap:1rem}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-header .form-drop-element-actions button,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-header .form-drop-element-actions button{width:1.6rem;height:1.6rem;transform:rotate(90deg)!important}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-header .form-drop-element-actions button:first-child,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-header .form-drop-element-actions button:first-child{background-color:#dc143c!important;color:#fff!important}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-header .form-drop-element-actions button:last-child,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-header .form-drop-element-actions button:last-child{background-color:gray!important;color:#fff!important}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-body,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-body{border-top:1px dashed lightgray;border-bottom:1px dashed lightgray}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-footer,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-footer{display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;grid-gap:.5rem;gap:.5rem}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-footer .form-drop-element-id,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-footer .form-drop-element-id{background:var(--tui-secondary);padding:0 .3rem;border-radius:1rem;color:var(--tui-primary)}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-footer .form-drop-element-category,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-footer .form-drop-element-category{background:var(--tui-primary);padding:0 .3rem;border-radius:1rem;color:#fff}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-footer .form-drop-element-type,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-footer .form-drop-element-type{background:var(--tui-positive);padding:0 .3rem;border-radius:1rem;color:#fff}.container .wrapper .builder-body .element-property-editor-wrapper{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;padding:1rem;min-width:20rem;grid-gap:1rem;gap:1rem}.container .wrapper .builder-footer{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-column-gap:1rem;column-gap:1rem;padding:1rem;max-height:30px;border:1px solid lightgray;box-shadow:0 -2px 10px -6px #000;font-weight:bold}.cdk-drag-preview{width:-moz-fit-content;width:fit-content;height:auto;box-sizing:border-box;background-color:transparent;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:grabbing}.cdk-drag-placeholder{opacity:1}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-custom-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.modal{position:absolute;background-color:#0000004d;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.modal-box{width:75%;height:75%;margin:auto;background-color:#fff;border:1px solid lightgray;box-shadow:0 2px 10px -6px #000}.modal-content{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;width:100%;height:100%}.modal-heading{padding:1rem;width:100%;display:flex;flex-direction:row;justify-content:space-between;border:1px solid lightgray;box-shadow:0 2px 10px -6px #000}.modal-title{font-weight:bold;font-size:1rem}.modal-actions{display:flex;flex-direction:row;grid-gap:1rem;gap:1rem;cursor:pointer}pre{float:left;justify-content:center;width:100%;height:100%;box-sizing:border-box;overflow:auto}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i1.KwikUIButtonIconComponent, selector: "kwikui-button-icon", inputs: ["disabled", "id", "showLoader", "styles", "class", "type", "appearance", "icon", "shape", "size"], outputs: ["onClick"] }, { type: ElementConfigEditor, selector: "element-config-editor", inputs: ["formKey", "elementConfig"], outputs: ["updateElement"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i4.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
|
|
3603
|
+
/** @nocollapse */ KwikIDFormsBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsBuilderComponent, selector: "kwikid-forms-builder", ngImport: i0, template: "<div class=\"container\">\n <div class=\"wrapper\">\n <div class=\"builder-header\">\n <div class=\"builder-title\">KwikID Form Builder</div>\n <form\n [formGroup]=\"builderFormGroup\"\n class=\"builder-form\"\n >\n <kwikui-input\n [label]=\"'Form Key'\"\n [id]=\"'form_key'\"\n [type]=\"'text'\"\n [formControlName]=\"'formKey'\"\n [formControl]=\"builderFormGroup.controls['formKey']\"\n [disabled]=\"false\"\n [placeholder]=\"'Please enter a Form Key'\"\n [focus]=\"false\"\n [invalid]=\"false\"\n [case]=\"'upper'\"\n size=\"m\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input>\n <kwikui-input\n [label]=\"'Form Title'\"\n [id]=\"'form_title'\"\n [type]=\"'text'\"\n [formControlName]=\"'formTitle'\"\n [formControl]=\"builderFormGroup.controls['formTitle']\"\n [disabled]=\"false\"\n [placeholder]=\"'Please enter a Form Title'\"\n [focus]=\"false\"\n [invalid]=\"false\"\n [case]=\"'default'\"\n size=\"m\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input>\n <kwikui-button\n [disabled]=\"!builderFormGroup.valid\"\n id=\"save_form_btn\"\n label=\"Save Form\"\n [showLoader]=\"false\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"primary\"\n icon=\"\"\n iconRight=\"\"\n size=\"m\"\n (onClick)=\"handleOnClickSaveForms($event)\"\n ></kwikui-button>\n </form>\n </div>\n <div class=\"builder-body\">\n <div class=\"form-elements-drag-wrapper\">\n <div\n class=\"form-elements-drag\"\n cdkDropList\n [cdkDropListData]=\"formElementsDragList\"\n cdkDropListSortingDisabled\n [cdkDropListConnectedTo]=\"[formElementsList]\"\n (cdkDropListExited)=\"exit($event, 'other')\"\n (cdkDropListEntered)=\"enter($event, 'other')\"\n >\n <ng-container\n *ngFor=\"let formElementDragItem of formElementsDragList\"\n >\n <ng-container *ngIf=\"formElementDragItem.isElement\">\n <div\n class=\"form-element-drag\"\n cdkDrag\n [cdkDragData]=\"formElementDragItem\"\n >\n ⋮⋮ {{ formElementDragItem.elementTitle }}\n <!-- <ng-container *ngComponentOutlet=\"formElementDragItem.component\"></ng-container> -->\n </div>\n <div\n class=\"form-element-drag\"\n *cdkDragPlaceholder\n >\n {{ formElementDragItem.elementTitle }}\n </div>\n </ng-container>\n <ng-container *ngIf=\"!formElementDragItem.isElement\">\n <div class=\"form-element-category\">\n {{ formElementDragItem.elementTitle }}\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div\n class=\"form-elements-drop-wrapper\"\n cdkDropList\n #formElementsList=\"cdkDropList\"\n [cdkDropListData]=\"formElementsDropList\"\n (cdkDropListDropped)=\"drop($event, '')\"\n [cdkDropListEnterPredicate]=\"isElementPredicate\"\n >\n <ng-container\n *ngFor=\"\n let formElementDropItem of formElementsDropList;\n let idx = index\n \"\n >\n <div\n class=\"form-drop-element\"\n cdkDrag\n >\n <div class=\"form-drop-element-grab-symbol\">⋮⋮</div>\n <div class=\"form-drop-element-main\">\n <div class=\"form-drop-element-header\">\n <div class=\"form-drop-element-title\">\n {{ formElementDropItem.elementTitle }}\n </div>\n <div class=\"form-drop-element-actions\">\n <kwikui-button-icon\n [disabled]=\"false\"\n [id]=\"'edit-element'\"\n [showLoader]=\"false\"\n [styles]=\"\"\n [class]=\"\"\n [type]=\"'button'\"\n [appearance]=\"'secondary'\"\n [icon]=\"'tuiIconEdit'\"\n [shape]=\"'rounded'\"\n [size]=\"'s'\"\n (onClick)=\"editElement(idx, formElementDropItem)\"\n ></kwikui-button-icon>\n <kwikui-button-icon\n [disabled]=\"false\"\n [id]=\"'remove-element'\"\n [showLoader]=\"false\"\n [styles]=\"\"\n [class]=\"\"\n [type]=\"'button'\"\n [appearance]=\"'accent'\"\n [icon]=\"'tuiIconCloseLarge'\"\n [shape]=\"'rounded'\"\n [size]=\"'s'\"\n (onClick)=\"removeElement(idx, formElementDropItem)\"\n ></kwikui-button-icon>\n <!-- <button\n (click)=\"editElement(idx, formElementDropItem)\"\n title=\"edit element properties\"\n >\n ✎\n </button>\n <button\n (click)=\"removeElement(idx, formElementDropItem)\"\n title=\"delete element\"\n >\n ✖\n </button> -->\n </div>\n </div>\n <div class=\"form-drop-element-body\"> </div>\n <div class=\"form-drop-element-footer\">\n <div class=\"form-drop-element-id\">\n {{ formElementDropItem.elementId }}\n </div>\n <div class=\"form-drop-element-category\">\n {{ formElementDropItem.elementCategory }}\n </div>\n <div class=\"form-drop-element-type\">\n {{ formElementDropItem.elementType }}\n </div>\n </div>\n <div\n class=\"example-custom-placeholder\"\n *cdkDragPlaceholder\n ></div>\n <!-- <ng-container *ngComponentOutlet=\"formElementDropItem.component\"> </ng-container> -->\n <!-- <ng-container *ngTemplateOutlet=\"formModal; context: formElementDropItem\"></ng-container> -->\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"element-property-editor-wrapper\">\n <element-config-editor\n [elementConfig]=\"elementEditorElementConfig\"\n (updateElement)=\"handleOnSaveUpdateElement($event)\"\n ></element-config-editor>\n </div>\n </div>\n <div class=\"builder-footer\"> © Baiju Dodhia, KwikID </div>\n </div>\n <div\n class=\"modal\"\n *ngIf=\"finalJSONConfig\"\n >\n <div class=\"modal-box\">\n <div class=\"modal-content\">\n <div class=\"modal-heading\">\n <div class=\"modal-title\">{{ formTitle }}</div>\n <div class=\"modal-actions\">\n <div\n class=\"modal-code-download\"\n (click)=\"downloadJSON()\"\n >Download JSON</div\n >\n <div\n class=\"modal-code-copy\"\n (click)=\"copyToClipboard()\"\n >Copy to Clipboard</div\n >\n <div\n class=\"modal-close\"\n (click)=\"closeJSONPopup()\"\n >\n Close\n </div>\n </div>\n </div>\n <pre>\n <code>{{JSON.stringify(finalJSONConfig, undefined, 2)}}</code>\n </pre>\n </div>\n </div>\n </div>\n</div>\n", styles: ["kwikid-forms-builder fieldset{display:flex;flex-direction:column;justify-content:center;align-items:stretch;align-content:center;grid-gap:.5rem;gap:.5rem;padding:.5rem 1rem 1rem;box-shadow:0 0 10px -6px #000;border:0px solid gray;border-radius:1rem}kwikid-forms-builder table,kwikid-forms-builder tr,kwikid-forms-builder td{border:1px solid black;padding:.5rem 1rem}kwikui-table table{width:100%;box-shadow:0 0 10px -6px #000;border:0px solid gray;padding:0}\n", ":host{all:unset;position:relative;width:100%;height:100%}.container{width:100%;height:100%;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.container .wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:space-between;align-items:stretch}.container .wrapper .builder-header{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:1rem;column-gap:1rem;padding:1rem;max-height:max-content;border:1px solid lightgray;box-shadow:0 2px 10px -6px #000}.container .wrapper .builder-header .builder-title{font-weight:bold;display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;font-size:1rem}.container .wrapper .builder-header .builder-form{display:flex;align-content:center;justify-content:flex-end;flex:1;flex-direction:row;align-items:center;grid-gap:1rem;gap:1rem;width:100%}.container .wrapper .builder-header .builder-form kwikui-input{width:16rem}.container .wrapper .builder-body{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:stretch;grid-gap:1rem;gap:1rem;flex:1;padding:1rem;overflow:auto}.container .wrapper .builder-body>*{width:100%;border:1px solid lightgray;overflow:auto;box-shadow:0 2px 10px -6px #000}.container .wrapper .builder-body .form-elements-drag-wrapper{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-gap:1rem;gap:1rem;padding:1rem;min-width:16rem;max-width:16rem}.container .wrapper .builder-body .form-elements-drag-wrapper .form-elements-drag{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-gap:1rem;gap:1rem;border-bottom:none}.container .wrapper .builder-body .form-elements-drag-wrapper .form-elements-drag .form-element-drag{display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;grid-gap:1rem;gap:1rem;border-radius:.5rem;padding:1rem;cursor:grab;box-shadow:0 2px 10px -6px #000;text-transform:capitalize}.container .wrapper .builder-body .form-elements-drag-wrapper .form-elements-drag .form-element-category{display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;grid-gap:1rem;gap:1rem;border-left:.25rem solid var(--tui-primary);padding:1rem;background:var(--tui-secondary)}.container .wrapper .builder-body .form-elements-drop-wrapper{padding:1rem;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-gap:1rem;gap:1rem;min-width:20rem;max-width:28rem}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder{display:flex;justify-content:flex-start;justify-items:start;align-items:center;padding:1rem;border-radius:1rem;box-shadow:0 2px 10px -6px #000;cursor:grab;flex-direction:row;position:relative;grid-gap:1rem;gap:1rem}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main{flex:1;display:flex;justify-content:space-between;justify-items:start;align-items:stretch;flex-direction:column;width:100%;grid-gap:.5rem;gap:.5rem}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-header,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-header{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:1rem;column-gap:1rem}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-header .form-drop-element-actions,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-header .form-drop-element-actions{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;gap:1rem}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-header .form-drop-element-actions button,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-header .form-drop-element-actions button{width:1.6rem;height:1.6rem;transform:rotate(90deg)!important}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-header .form-drop-element-actions button:first-child,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-header .form-drop-element-actions button:first-child{background-color:#dc143c!important;color:#fff!important}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-header .form-drop-element-actions button:last-child,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-header .form-drop-element-actions button:last-child{background-color:gray!important;color:#fff!important}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-body,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-body{border-top:1px dashed lightgray;border-bottom:1px dashed lightgray}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-footer,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-footer{display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;grid-gap:.5rem;gap:.5rem}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-footer .form-drop-element-id,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-footer .form-drop-element-id{background:var(--tui-secondary);padding:0 .3rem;border-radius:1rem;color:var(--tui-primary)}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-footer .form-drop-element-category,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-footer .form-drop-element-category{background:var(--tui-primary);padding:0 .3rem;border-radius:1rem;color:#fff}.container .wrapper .builder-body .form-elements-drop-wrapper .form-drop-element .form-drop-element-main .form-drop-element-footer .form-drop-element-type,.container .wrapper .builder-body .form-elements-drop-wrapper .cdk-drag-placeholder .form-drop-element-main .form-drop-element-footer .form-drop-element-type{background:var(--tui-positive);padding:0 .3rem;border-radius:1rem;color:#fff}.container .wrapper .builder-body .element-property-editor-wrapper{display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;padding:1rem;min-width:20rem;grid-gap:1rem;gap:1rem}.container .wrapper .builder-footer{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-column-gap:1rem;column-gap:1rem;padding:1rem;max-height:30px;border:1px solid lightgray;box-shadow:0 -2px 10px -6px #000;font-weight:bold}.cdk-drag-preview{width:-moz-fit-content;width:fit-content;height:auto;box-sizing:border-box;background-color:transparent;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:grabbing}.cdk-drag-placeholder{opacity:1}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-custom-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.modal{position:absolute;background-color:#0000004d;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.modal-box{width:75%;height:75%;margin:auto;background-color:#fff;border:1px solid lightgray;box-shadow:0 2px 10px -6px #000}.modal-content{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;width:100%;height:100%}.modal-heading{padding:1rem;width:100%;display:flex;flex-direction:row;justify-content:space-between;border:1px solid lightgray;box-shadow:0 2px 10px -6px #000}.modal-title{font-weight:bold;font-size:1rem}.modal-actions{display:flex;flex-direction:row;grid-gap:1rem;gap:1rem;cursor:pointer}pre{float:left;justify-content:center;width:100%;height:100%;box-sizing:border-box;overflow:auto}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i1.KwikUIButtonIconComponent, selector: "kwikui-button-icon", inputs: ["disabled", "id", "showLoader", "styles", "class", "type", "appearance", "icon", "shape", "size"], outputs: ["onClick"] }, { type: ElementConfigEditor, selector: "element-config-editor", inputs: ["formKey", "elementConfig"], outputs: ["updateElement"] }], directives: [{ type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i4.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] });
|
|
3602
3604
|
__decorate([
|
|
3603
3605
|
logMethod
|
|
3604
3606
|
], KwikIDFormsBuilderComponent.prototype, "handleGetKeyValue", null);
|
|
@@ -3876,12 +3878,17 @@ class Converter {
|
|
|
3876
3878
|
return formConfig;
|
|
3877
3879
|
}
|
|
3878
3880
|
updateFormConfigProperties(formConfig) {
|
|
3879
|
-
var _a
|
|
3881
|
+
var _a;
|
|
3880
3882
|
const formViewProperties = {
|
|
3881
3883
|
header: {
|
|
3884
|
+
backButton: {
|
|
3885
|
+
mode: "TABBED",
|
|
3886
|
+
bypassConfirmation: false,
|
|
3887
|
+
hidden: true
|
|
3888
|
+
},
|
|
3882
3889
|
title: {
|
|
3883
3890
|
hidden: false,
|
|
3884
|
-
label: formConfig.title
|
|
3891
|
+
label: (_a = formConfig === null || formConfig === void 0 ? void 0 : formConfig.title) !== null && _a !== void 0 ? _a : "Form"
|
|
3885
3892
|
},
|
|
3886
3893
|
steps: {
|
|
3887
3894
|
hidden: false
|
|
@@ -3889,6 +3896,7 @@ class Converter {
|
|
|
3889
3896
|
},
|
|
3890
3897
|
footer: {
|
|
3891
3898
|
viewFormsButton: {
|
|
3899
|
+
bypassConfirmation: false,
|
|
3892
3900
|
hidden: false,
|
|
3893
3901
|
label: "View Forms"
|
|
3894
3902
|
},
|
|
@@ -3899,34 +3907,7 @@ class Converter {
|
|
|
3899
3907
|
}
|
|
3900
3908
|
};
|
|
3901
3909
|
if (checkObjectKeyExists(formConfig, "properties")) {
|
|
3902
|
-
|
|
3903
|
-
const headerTitleLabel = (_f = (_e = (_d = formConfig.properties.header) === null || _d === void 0 ? void 0 : _d.title) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : formConfig.title;
|
|
3904
|
-
const headerStepsHidden = (_j = (_h = (_g = formConfig.properties.header) === null || _g === void 0 ? void 0 : _g.steps) === null || _h === void 0 ? void 0 : _h.hidden) !== null && _j !== void 0 ? _j : formViewProperties.header.steps.hidden;
|
|
3905
|
-
const viewFormsButtonHidden = (_m = (_l = (_k = formConfig.properties.footer) === null || _k === void 0 ? void 0 : _k.viewFormsButton) === null || _l === void 0 ? void 0 : _l.hidden) !== null && _m !== void 0 ? _m : formViewProperties.footer.viewFormsButton.hidden;
|
|
3906
|
-
const viewFormsButtonLabel = (_q = (_p = (_o = formConfig.properties.footer) === null || _o === void 0 ? void 0 : _o.viewFormsButton) === null || _p === void 0 ? void 0 : _p.label) !== null && _q !== void 0 ? _q : formViewProperties.footer.viewFormsButton.label;
|
|
3907
|
-
const saveButtonHidden = (_t = (_s = (_r = formConfig.properties.footer) === null || _r === void 0 ? void 0 : _r.saveButton) === null || _s === void 0 ? void 0 : _s.hidden) !== null && _t !== void 0 ? _t : formViewProperties.footer.saveButton.hidden;
|
|
3908
|
-
const saveButtonLabel = (_w = (_v = (_u = formConfig.properties.footer) === null || _u === void 0 ? void 0 : _u.saveButton) === null || _v === void 0 ? void 0 : _v.label) !== null && _w !== void 0 ? _w : formViewProperties.footer.saveButton.label;
|
|
3909
|
-
formConfig.properties = {
|
|
3910
|
-
header: {
|
|
3911
|
-
title: {
|
|
3912
|
-
hidden: headerTitleHidden,
|
|
3913
|
-
label: headerTitleLabel
|
|
3914
|
-
},
|
|
3915
|
-
steps: {
|
|
3916
|
-
hidden: headerStepsHidden
|
|
3917
|
-
}
|
|
3918
|
-
},
|
|
3919
|
-
footer: {
|
|
3920
|
-
viewFormsButton: {
|
|
3921
|
-
hidden: viewFormsButtonHidden,
|
|
3922
|
-
label: viewFormsButtonLabel
|
|
3923
|
-
},
|
|
3924
|
-
saveButton: {
|
|
3925
|
-
hidden: saveButtonHidden,
|
|
3926
|
-
label: saveButtonLabel
|
|
3927
|
-
}
|
|
3928
|
-
}
|
|
3929
|
-
};
|
|
3910
|
+
formConfig.properties = mergeObjects(formViewProperties, formConfig.properties);
|
|
3930
3911
|
}
|
|
3931
3912
|
else {
|
|
3932
3913
|
formConfig.properties = formViewProperties;
|
|
@@ -4603,7 +4584,20 @@ var EActionKey;
|
|
|
4603
4584
|
EActionKey["FIELD_GROUP_DISABLE"] = "FIELD_GROUP_DISABLE";
|
|
4604
4585
|
EActionKey["SET_DROPDOWN_OPTIONS"] = "SET_DROPDOWN_OPTIONS";
|
|
4605
4586
|
EActionKey["API_CALL"] = "API_CALL";
|
|
4606
|
-
EActionKey["
|
|
4587
|
+
EActionKey["API_CALL_MULTIPLE"] = "API_CALL_MULTIPLE";
|
|
4588
|
+
EActionKey["API_CALL_MULTIPLE_END"] = "API_CALL_MULTIPLE_END";
|
|
4589
|
+
EActionKey["TASK_API_CALL"] = "TASK_API_CALL";
|
|
4590
|
+
EActionKey["TASK_API_CALL_MULTIPLE"] = "TASK_API_CALL_MULTIPLE";
|
|
4591
|
+
EActionKey["TASK_API_CALL_MULTIPLE_END"] = "TASK_API_CALL_MULTIPLE_END";
|
|
4592
|
+
EActionKey["PREVIEW_DIALOG_SHOW"] = "PREVIEW_DIALOG_SHOW";
|
|
4593
|
+
EActionKey["POPUP_FORM_SHOW"] = "POPUP_FORM_SHOW";
|
|
4594
|
+
EActionKey["MOVE_AHEAD"] = "MOVE_AHEAD";
|
|
4595
|
+
EActionKey["NOTIFICATION_ERROR_SHOW"] = "NOTIFICATION_ERROR_SHOW";
|
|
4596
|
+
EActionKey["NOTIFICATION_ERROR_HIDE"] = "NOTIFICATION_ERROR_HIDE";
|
|
4597
|
+
EActionKey["DIALOG_SHOW"] = "DIALOG_SHOW";
|
|
4598
|
+
EActionKey["DIALOG_HIDE"] = "DIALOG_HIDE";
|
|
4599
|
+
EActionKey["RESUME_TASK_EXECUTION"] = "RESUME_TASK_EXECUTION";
|
|
4600
|
+
EActionKey["STOP_TASK_EXECUTION"] = "STOP_TASK_EXECUTION";
|
|
4607
4601
|
})(EActionKey || (EActionKey = {}));
|
|
4608
4602
|
|
|
4609
4603
|
var EApiStatusType;
|
|
@@ -4626,6 +4620,11 @@ var EMessageType;
|
|
|
4626
4620
|
EMessageType["SUCCESS"] = "success";
|
|
4627
4621
|
EMessageType["WARNING"] = "warning";
|
|
4628
4622
|
})(EMessageType || (EMessageType = {}));
|
|
4623
|
+
var EFormViewGoBackMode;
|
|
4624
|
+
(function (EFormViewGoBackMode) {
|
|
4625
|
+
EFormViewGoBackMode["DIRECT"] = "DIRECT";
|
|
4626
|
+
EFormViewGoBackMode["TABBED"] = "TABBED";
|
|
4627
|
+
})(EFormViewGoBackMode || (EFormViewGoBackMode = {}));
|
|
4629
4628
|
|
|
4630
4629
|
class Defaults {
|
|
4631
4630
|
constructor(field, formFields, allFormsData, formData, previousFormData, takeAction) {
|
|
@@ -4938,10 +4937,12 @@ class Apis {
|
|
|
4938
4937
|
return this._object.API_CONFIG;
|
|
4939
4938
|
}
|
|
4940
4939
|
else {
|
|
4940
|
+
this._object = setValueToObjectPath(this._object, "API_CONFIG.request.validation.body.is_valid", true);
|
|
4941
4941
|
return this._object.API_CONFIG;
|
|
4942
4942
|
}
|
|
4943
4943
|
}
|
|
4944
4944
|
else {
|
|
4945
|
+
this._object = setValueToObjectPath(this._object, "API_CONFIG.request.validation.body.is_valid", true);
|
|
4945
4946
|
return this._object.API_CONFIG;
|
|
4946
4947
|
}
|
|
4947
4948
|
});
|
|
@@ -5009,10 +5010,12 @@ class Apis {
|
|
|
5009
5010
|
return this._object.API_CONFIG;
|
|
5010
5011
|
}
|
|
5011
5012
|
else {
|
|
5013
|
+
this._object = setValueToObjectPath(this._object, "API_CONFIG.request.validation.headers.is_valid", true);
|
|
5012
5014
|
return this._object.API_CONFIG;
|
|
5013
5015
|
}
|
|
5014
5016
|
}
|
|
5015
5017
|
else {
|
|
5018
|
+
this._object = setValueToObjectPath(this._object, "API_CONFIG.request.validation.headers.is_valid", true);
|
|
5016
5019
|
return this._object.API_CONFIG;
|
|
5017
5020
|
}
|
|
5018
5021
|
});
|
|
@@ -5076,6 +5079,32 @@ __decorate([
|
|
|
5076
5079
|
logMethod
|
|
5077
5080
|
], Apis.prototype, "callNextApi", null);
|
|
5078
5081
|
|
|
5082
|
+
class Tasks {
|
|
5083
|
+
constructor(task, object, takeAction) {
|
|
5084
|
+
this._task = task;
|
|
5085
|
+
this._object = object;
|
|
5086
|
+
this._takeAction = takeAction;
|
|
5087
|
+
}
|
|
5088
|
+
execute() {
|
|
5089
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
5090
|
+
const triggers = this._task.triggers;
|
|
5091
|
+
const rules = this._task.rules;
|
|
5092
|
+
const actions = this._task.actions;
|
|
5093
|
+
const rulesMapping = new Rule(rules, this._object).mapping();
|
|
5094
|
+
for (let action of actions) {
|
|
5095
|
+
const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
|
|
5096
|
+
if (conditionEvaluation) {
|
|
5097
|
+
const actions = new Action(action, rulesMapping, this._object, this._takeAction);
|
|
5098
|
+
yield actions.execute();
|
|
5099
|
+
}
|
|
5100
|
+
}
|
|
5101
|
+
});
|
|
5102
|
+
}
|
|
5103
|
+
}
|
|
5104
|
+
__decorate([
|
|
5105
|
+
logMethod
|
|
5106
|
+
], Tasks.prototype, "execute", null);
|
|
5107
|
+
|
|
5079
5108
|
/**
|
|
5080
5109
|
* Generated class for the SafeHtmlPipe pipe.
|
|
5081
5110
|
*
|
|
@@ -5098,19 +5127,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
5098
5127
|
}]
|
|
5099
5128
|
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
|
|
5100
5129
|
|
|
5130
|
+
/**
|
|
5131
|
+
* Generated class for the SafeUrlPipe pipe.
|
|
5132
|
+
*
|
|
5133
|
+
* See https://angular.io/api/core/Pipe for more info on Angular Pipes.
|
|
5134
|
+
*/
|
|
5135
|
+
class SafeUrlPipe {
|
|
5136
|
+
constructor(sanitizer) {
|
|
5137
|
+
this.sanitizer = sanitizer;
|
|
5138
|
+
}
|
|
5139
|
+
transform(url) {
|
|
5140
|
+
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
|
|
5141
|
+
}
|
|
5142
|
+
}
|
|
5143
|
+
/** @nocollapse */ SafeUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
5144
|
+
/** @nocollapse */ SafeUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeUrlPipe, name: "safeUrl" });
|
|
5145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SafeUrlPipe, decorators: [{
|
|
5146
|
+
type: Pipe,
|
|
5147
|
+
args: [{
|
|
5148
|
+
name: "safeUrl"
|
|
5149
|
+
}]
|
|
5150
|
+
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
|
|
5151
|
+
|
|
5101
5152
|
class KwikIDFormViewComponent {
|
|
5102
|
-
constructor(push, alert,
|
|
5153
|
+
constructor(cd, formViewService, push, alert, previewDialogService, dialogs) {
|
|
5154
|
+
this.cd = cd;
|
|
5155
|
+
this.formViewService = formViewService;
|
|
5103
5156
|
this.push = push;
|
|
5104
5157
|
this.alert = alert;
|
|
5105
|
-
this.
|
|
5158
|
+
this.previewDialogService = previewDialogService;
|
|
5159
|
+
this.dialogs = dialogs;
|
|
5106
5160
|
this.isMobileView = false;
|
|
5161
|
+
this.popupFormCallback = undefined;
|
|
5162
|
+
this.onClickGoBack = new EventEmitter();
|
|
5107
5163
|
this.onClickViewForms = new EventEmitter();
|
|
5108
5164
|
this.onClickSaveForm = new EventEmitter();
|
|
5109
5165
|
this.onClickApiCall = new EventEmitter();
|
|
5166
|
+
this.onActionShowPopupForm = new EventEmitter();
|
|
5110
5167
|
this.fieldGroups = {};
|
|
5111
5168
|
this.formFields = [];
|
|
5112
5169
|
this.previousFormData = {};
|
|
5170
|
+
this.previewProperties = {
|
|
5171
|
+
html: {
|
|
5172
|
+
before: "",
|
|
5173
|
+
after: ""
|
|
5174
|
+
},
|
|
5175
|
+
iframe: {
|
|
5176
|
+
src: "",
|
|
5177
|
+
title: ""
|
|
5178
|
+
},
|
|
5179
|
+
popupFormKey: "",
|
|
5180
|
+
title: "",
|
|
5181
|
+
unavailable: false
|
|
5182
|
+
};
|
|
5113
5183
|
this.loading = true;
|
|
5184
|
+
this.backButton = {
|
|
5185
|
+
disabled: false,
|
|
5186
|
+
showLoader: false
|
|
5187
|
+
};
|
|
5114
5188
|
this.viewFormsButton = {
|
|
5115
5189
|
disabled: false,
|
|
5116
5190
|
showLoader: false
|
|
@@ -5119,8 +5193,14 @@ class KwikIDFormViewComponent {
|
|
|
5119
5193
|
disabled: false,
|
|
5120
5194
|
showLoader: false
|
|
5121
5195
|
};
|
|
5196
|
+
this.stopTaskExecution = false;
|
|
5197
|
+
this.waitingForChanges = false;
|
|
5198
|
+
this.popupFormConfig = undefined;
|
|
5199
|
+
this.popupFormData = undefined;
|
|
5200
|
+
this.tasksData = undefined;
|
|
5122
5201
|
this.formGroup = new FormGroup({});
|
|
5123
5202
|
this.showErrorNotification = false;
|
|
5203
|
+
this.dialogRef = undefined;
|
|
5124
5204
|
}
|
|
5125
5205
|
ngOnInit() {
|
|
5126
5206
|
(() => __awaiter(this, void 0, void 0, function* () {
|
|
@@ -5136,6 +5216,17 @@ class KwikIDFormViewComponent {
|
|
|
5136
5216
|
if (verifyChange("formData")) {
|
|
5137
5217
|
this.formData = Object.assign(Object.assign({}, this.formData), changes.formData.currentValue);
|
|
5138
5218
|
}
|
|
5219
|
+
if (verifyChange("popupFormCallback")) {
|
|
5220
|
+
if (isNotEmptyValue(changes.popupFormCallback.currentValue)) {
|
|
5221
|
+
const popupFormData = changes.popupFormCallback.currentValue.popupFormData;
|
|
5222
|
+
const popupFormConfig = changes.popupFormCallback.currentValue.popupFormConfig;
|
|
5223
|
+
this.popupFormData = mergeObjects(this.popupFormData, {
|
|
5224
|
+
[popupFormConfig.key]: popupFormData
|
|
5225
|
+
});
|
|
5226
|
+
this.formData = mergeObjects(this.formData, this.popupFormData);
|
|
5227
|
+
}
|
|
5228
|
+
this.waitingForChanges = false;
|
|
5229
|
+
}
|
|
5139
5230
|
if (verifyChange("isMobileView")) {
|
|
5140
5231
|
this.isMobileView = changes.isMobileView.currentValue;
|
|
5141
5232
|
}
|
|
@@ -5156,6 +5247,46 @@ class KwikIDFormViewComponent {
|
|
|
5156
5247
|
this.setFormFieldsFromFormConfig(formConfig);
|
|
5157
5248
|
this.setFormFieldGroupsFromFormConfig(formConfig);
|
|
5158
5249
|
this.setFormDataFromAllFormsData();
|
|
5250
|
+
/**
|
|
5251
|
+
* PRE Form Tasks
|
|
5252
|
+
* 1. API Calls.
|
|
5253
|
+
* 2. Alter Data Structure.
|
|
5254
|
+
* 3. Alter Form Config.
|
|
5255
|
+
*/
|
|
5256
|
+
if (checkObjectKeyExists(this.formConfig, "tasks") &&
|
|
5257
|
+
checkObjectKeyExists(this.formConfig.tasks, "pre")) {
|
|
5258
|
+
for (let preTask of this.formConfig.tasks.pre) {
|
|
5259
|
+
const task = new Tasks(preTask, {
|
|
5260
|
+
FORM_CONFIG: this.formConfig,
|
|
5261
|
+
FORM_FIELDS: this.formFields,
|
|
5262
|
+
FORM_DATA: this.formData,
|
|
5263
|
+
PREVIOUS_FORM_DATA: this.previousFormData,
|
|
5264
|
+
ALL_FORMS_DATA: this.allFormsData
|
|
5265
|
+
}, this.takeAction.bind(this));
|
|
5266
|
+
// if (preTask.wait) {
|
|
5267
|
+
this.waitingForChanges = true;
|
|
5268
|
+
// } else {
|
|
5269
|
+
// this.waitingForChanges = false;
|
|
5270
|
+
// }
|
|
5271
|
+
yield task.execute();
|
|
5272
|
+
// Wait for ngOnChanges to be called before continuing to the next task
|
|
5273
|
+
yield new Promise((resolve) => {
|
|
5274
|
+
const intervalId = setInterval(() => {
|
|
5275
|
+
if (!this.waitingForChanges) {
|
|
5276
|
+
clearInterval(intervalId);
|
|
5277
|
+
resolve();
|
|
5278
|
+
}
|
|
5279
|
+
}, 10);
|
|
5280
|
+
});
|
|
5281
|
+
if (this.stopTaskExecution) {
|
|
5282
|
+
break;
|
|
5283
|
+
}
|
|
5284
|
+
}
|
|
5285
|
+
this.formData = mergeObjects(this.formData, this.popupFormData);
|
|
5286
|
+
}
|
|
5287
|
+
if (this.stopTaskExecution) {
|
|
5288
|
+
return;
|
|
5289
|
+
}
|
|
5159
5290
|
this.formGroup = yield this.formViewService.createFormGroup(this.formFields, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
|
|
5160
5291
|
for (let field of this.formFields) {
|
|
5161
5292
|
if (field.isFormElement) {
|
|
@@ -5372,24 +5503,80 @@ class KwikIDFormViewComponent {
|
|
|
5372
5503
|
}
|
|
5373
5504
|
});
|
|
5374
5505
|
}
|
|
5375
|
-
|
|
5376
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
5506
|
+
handleFieldApiCall(field, api) {
|
|
5377
5507
|
return __awaiter(this, void 0, void 0, function* () {
|
|
5378
|
-
|
|
5508
|
+
api = yield this.handleApiCall(api, {
|
|
5379
5509
|
FIELD_CONFIG: field,
|
|
5380
5510
|
API_CONFIG: api,
|
|
5381
5511
|
FORM_FIELDS: this.formFields,
|
|
5382
5512
|
FORM_DATA: this.formData,
|
|
5383
5513
|
PREVIOUS_FORM_DATA: this.previousFormData,
|
|
5384
5514
|
ALL_FORMS_DATA: this.allFormsData
|
|
5515
|
+
});
|
|
5516
|
+
if (api.request.body.validation.is_valid &&
|
|
5517
|
+
api.request.headers.validation.is_valid) {
|
|
5518
|
+
if (checkObjectKeyExists(field.api, "request")) {
|
|
5519
|
+
this.formData = Object.assign(Object.assign({}, this.formData), { [field.key]: api.response.value });
|
|
5520
|
+
this.formGroup.patchValue({
|
|
5521
|
+
[field.key]: api.response.value
|
|
5522
|
+
}, { emitEvent: false });
|
|
5523
|
+
}
|
|
5524
|
+
const apis = new Apis({
|
|
5525
|
+
FIELD_CONFIG: field,
|
|
5526
|
+
API_CONFIG: api,
|
|
5527
|
+
FORM_FIELDS: this.formFields,
|
|
5528
|
+
FORM_DATA: this.formData,
|
|
5529
|
+
PREVIOUS_FORM_DATA: this.previousFormData,
|
|
5530
|
+
ALL_FORMS_DATA: this.allFormsData
|
|
5531
|
+
}, this.takeAction.bind(this));
|
|
5532
|
+
api = yield apis.validateResponse();
|
|
5533
|
+
}
|
|
5534
|
+
else {
|
|
5535
|
+
setTimeout(() => {
|
|
5536
|
+
field["api"]["status"]["value"] = EApiStatusType.FAILED;
|
|
5537
|
+
field["showLoader"] = false;
|
|
5538
|
+
}, 500);
|
|
5539
|
+
}
|
|
5540
|
+
return { field: field, api: api };
|
|
5541
|
+
});
|
|
5542
|
+
}
|
|
5543
|
+
handleTaskApiCall(api) {
|
|
5544
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
5545
|
+
api = yield this.handleApiCall(api, {
|
|
5546
|
+
FORM_CONFIG: this.formConfig,
|
|
5547
|
+
API_CONFIG: api,
|
|
5548
|
+
FORM_FIELDS: this.formFields,
|
|
5549
|
+
FORM_DATA: this.formData,
|
|
5550
|
+
PREVIOUS_FORM_DATA: this.previousFormData,
|
|
5551
|
+
ALL_FORMS_DATA: this.allFormsData
|
|
5552
|
+
});
|
|
5553
|
+
const apis = new Apis({
|
|
5554
|
+
FORM_CONFIG: this.formConfig,
|
|
5555
|
+
API_CONFIG: api,
|
|
5556
|
+
FORM_FIELDS: this.formFields,
|
|
5557
|
+
FORM_DATA: this.formData,
|
|
5558
|
+
PREVIOUS_FORM_DATA: this.previousFormData,
|
|
5559
|
+
ALL_FORMS_DATA: this.allFormsData
|
|
5385
5560
|
}, this.takeAction.bind(this));
|
|
5561
|
+
if (api.request.body.validation.is_valid &&
|
|
5562
|
+
api.request.headers.validation.is_valid) {
|
|
5563
|
+
api = yield apis.validateResponse();
|
|
5564
|
+
}
|
|
5565
|
+
return { api: api };
|
|
5566
|
+
});
|
|
5567
|
+
}
|
|
5568
|
+
handleApiCall(api, object) {
|
|
5569
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
5570
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
5571
|
+
const apis = new Apis(object, this.takeAction.bind(this));
|
|
5386
5572
|
api = yield apis.setUrl();
|
|
5387
5573
|
api = yield apis.setRequestHeaders();
|
|
5388
5574
|
api = yield apis.validateRequestHeaders();
|
|
5389
5575
|
api = yield apis.setRequestBody();
|
|
5390
5576
|
api = yield apis.validateRequestBody();
|
|
5391
5577
|
let apiCallResponse = undefined;
|
|
5392
|
-
if (api.request.body.validation.is_valid
|
|
5578
|
+
if (api.request.body.validation.is_valid &&
|
|
5579
|
+
api.request.headers.validation.is_valid) {
|
|
5393
5580
|
if (api.request.url.hasOwnProperty("type") &&
|
|
5394
5581
|
api.request.url.type === EApiRequestUrlType.MOCK) {
|
|
5395
5582
|
apiCallResponse = api.request.url.props.mockedData;
|
|
@@ -5406,40 +5593,23 @@ class KwikIDFormViewComponent {
|
|
|
5406
5593
|
});
|
|
5407
5594
|
apiCallResponse = yield response.json();
|
|
5408
5595
|
}
|
|
5409
|
-
|
|
5410
|
-
* This runs when API is in old format or new.
|
|
5411
|
-
* If Old Format then it directly patches api response to field data
|
|
5412
|
-
*/
|
|
5413
|
-
if (checkObjectKeyExists(field.api, "request")) {
|
|
5414
|
-
this.formData = Object.assign(Object.assign({}, this.formData), { [field.key]: apiCallResponse });
|
|
5415
|
-
this.formGroup.patchValue({
|
|
5416
|
-
[field.key]: apiCallResponse
|
|
5417
|
-
}, { emitEvent: false });
|
|
5418
|
-
}
|
|
5419
|
-
console.log(api.response);
|
|
5420
|
-
console.log(apiCallResponse);
|
|
5421
|
-
api.response = setMissingKeyValue(api.response, "value", apiCallResponse);
|
|
5422
|
-
const apis = new Apis({
|
|
5423
|
-
FIELD_CONFIG: field,
|
|
5424
|
-
API_CONFIG: api,
|
|
5425
|
-
FORM_FIELDS: this.formFields,
|
|
5426
|
-
FORM_DATA: this.formData,
|
|
5427
|
-
PREVIOUS_FORM_DATA: this.previousFormData,
|
|
5428
|
-
ALL_FORMS_DATA: this.allFormsData
|
|
5429
|
-
}, this.takeAction.bind(this));
|
|
5430
|
-
(() => __awaiter(this, void 0, void 0, function* () {
|
|
5431
|
-
api = yield apis.validateResponse();
|
|
5432
|
-
}))();
|
|
5433
|
-
}
|
|
5434
|
-
else {
|
|
5435
|
-
setTimeout(() => {
|
|
5436
|
-
field["api"]["status"]["value"] = EApiStatusType.FAILED;
|
|
5437
|
-
field["showLoader"] = false;
|
|
5438
|
-
}, 500);
|
|
5596
|
+
api.response = setValueToObjectPath(api.response, "value", apiCallResponse);
|
|
5439
5597
|
}
|
|
5440
|
-
return
|
|
5598
|
+
return api;
|
|
5441
5599
|
});
|
|
5442
5600
|
}
|
|
5601
|
+
showApiLoader() {
|
|
5602
|
+
this.viewFormsButton["disabled"] = true;
|
|
5603
|
+
this.viewFormsButton["showLoader"] = true;
|
|
5604
|
+
this.saveFormButton["disabled"] = true;
|
|
5605
|
+
this.saveFormButton["showLoader"] = true;
|
|
5606
|
+
}
|
|
5607
|
+
hideApiLoader() {
|
|
5608
|
+
this.viewFormsButton["disabled"] = false;
|
|
5609
|
+
this.viewFormsButton["showLoader"] = false;
|
|
5610
|
+
this.saveFormButton["disabled"] = false;
|
|
5611
|
+
this.saveFormButton["showLoader"] = false;
|
|
5612
|
+
}
|
|
5443
5613
|
handleOnClickApiCall(e) {
|
|
5444
5614
|
return __awaiter(this, void 0, void 0, function* () {
|
|
5445
5615
|
let field = getFormFieldByKey(this.formFields, e.key);
|
|
@@ -5447,12 +5617,10 @@ class KwikIDFormViewComponent {
|
|
|
5447
5617
|
// set button status to loading
|
|
5448
5618
|
field["api"]["status"]["value"] = EApiStatusType.LOADING;
|
|
5449
5619
|
field["showLoader"] = true;
|
|
5450
|
-
this.
|
|
5451
|
-
|
|
5452
|
-
this.saveFormButton["disabled"] = true;
|
|
5453
|
-
this.saveFormButton["showLoader"] = true;
|
|
5620
|
+
this.showApiLoader();
|
|
5621
|
+
// Determine API Call time
|
|
5454
5622
|
if (checkObjectKeyExists(field.api, "request")) {
|
|
5455
|
-
yield this.
|
|
5623
|
+
yield this.handleFieldApiCall(field, field.api);
|
|
5456
5624
|
}
|
|
5457
5625
|
else {
|
|
5458
5626
|
const apis = new Apis({
|
|
@@ -5465,10 +5633,7 @@ class KwikIDFormViewComponent {
|
|
|
5465
5633
|
}, this.takeAction.bind(this));
|
|
5466
5634
|
yield apis.callNextApi(field.api.entrypoint);
|
|
5467
5635
|
}
|
|
5468
|
-
this.
|
|
5469
|
-
this.viewFormsButton["showLoader"] = false;
|
|
5470
|
-
this.saveFormButton["disabled"] = false;
|
|
5471
|
-
this.saveFormButton["showLoader"] = false;
|
|
5636
|
+
this.hideApiLoader();
|
|
5472
5637
|
}
|
|
5473
5638
|
});
|
|
5474
5639
|
}
|
|
@@ -5481,13 +5646,29 @@ class KwikIDFormViewComponent {
|
|
|
5481
5646
|
getUniqueIdentifier(index, item) {
|
|
5482
5647
|
return item.key;
|
|
5483
5648
|
}
|
|
5649
|
+
handleOnClickGoBack(e, mode) {
|
|
5650
|
+
if (this.formConfig.status === EFormsListStatus.COMPLETED) {
|
|
5651
|
+
this.onClickGoBack.emit({
|
|
5652
|
+
clicked: true,
|
|
5653
|
+
mode: mode
|
|
5654
|
+
});
|
|
5655
|
+
}
|
|
5656
|
+
else if (this.formConfig.properties.header.backButton.bypassConfirmation ||
|
|
5657
|
+
window.confirm("Your data will be lost if you leave this page! Continue?")) {
|
|
5658
|
+
this.onClickGoBack.emit({
|
|
5659
|
+
clicked: true,
|
|
5660
|
+
mode: mode
|
|
5661
|
+
});
|
|
5662
|
+
}
|
|
5663
|
+
}
|
|
5484
5664
|
handleOnClickViewForms(e) {
|
|
5485
5665
|
if (this.formConfig.status === EFormsListStatus.COMPLETED) {
|
|
5486
5666
|
this.onClickViewForms.emit({
|
|
5487
5667
|
clicked: true
|
|
5488
5668
|
});
|
|
5489
5669
|
}
|
|
5490
|
-
else if (
|
|
5670
|
+
else if (this.formConfig.properties.footer.viewFormsButton.bypassConfirmation ||
|
|
5671
|
+
window.confirm("Your data will be lost if you leave this page! Continue?")) {
|
|
5491
5672
|
this.onClickViewForms.emit({
|
|
5492
5673
|
clicked: true
|
|
5493
5674
|
});
|
|
@@ -5547,7 +5728,52 @@ class KwikIDFormViewComponent {
|
|
|
5547
5728
|
formData[key] = "";
|
|
5548
5729
|
}
|
|
5549
5730
|
});
|
|
5550
|
-
|
|
5731
|
+
/**
|
|
5732
|
+
* POST Tasks
|
|
5733
|
+
* 1. API Calls.
|
|
5734
|
+
* 2. Alter Data Structure.
|
|
5735
|
+
* 3. Trigger an Internal Popup Form.
|
|
5736
|
+
* 4. URL Redirection or new opening of URL in external tab.
|
|
5737
|
+
*/
|
|
5738
|
+
if (checkObjectKeyExists(this.formConfig, "tasks") &&
|
|
5739
|
+
checkObjectKeyExists(this.formConfig.tasks, "post")) {
|
|
5740
|
+
for (let postTask of this.formConfig.tasks.post) {
|
|
5741
|
+
const task = new Tasks(postTask, {
|
|
5742
|
+
FORM_CONFIG: this.formConfig,
|
|
5743
|
+
FORM_FIELDS: this.formFields,
|
|
5744
|
+
FORM_DATA: this.formData,
|
|
5745
|
+
PREVIOUS_FORM_DATA: this.previousFormData,
|
|
5746
|
+
ALL_FORMS_DATA: this.allFormsData
|
|
5747
|
+
}, this.takeAction.bind(this));
|
|
5748
|
+
this.waitingForChanges = true;
|
|
5749
|
+
yield task.execute();
|
|
5750
|
+
// Wait for ngOnChanges to be called before continuing to the next task
|
|
5751
|
+
yield new Promise((resolve) => {
|
|
5752
|
+
const intervalId = setInterval(() => {
|
|
5753
|
+
if (!this.waitingForChanges) {
|
|
5754
|
+
clearInterval(intervalId);
|
|
5755
|
+
resolve();
|
|
5756
|
+
}
|
|
5757
|
+
}, 10);
|
|
5758
|
+
});
|
|
5759
|
+
if (this.stopTaskExecution) {
|
|
5760
|
+
return;
|
|
5761
|
+
}
|
|
5762
|
+
}
|
|
5763
|
+
if (this.stopTaskExecution) {
|
|
5764
|
+
return;
|
|
5765
|
+
}
|
|
5766
|
+
this.onClickSaveForm.emit({
|
|
5767
|
+
formConfig: this.formConfig,
|
|
5768
|
+
data: mergeObjects(this.allFormsData[this.formConfig.key], formData, this.popupFormData, this.tasksData)
|
|
5769
|
+
});
|
|
5770
|
+
}
|
|
5771
|
+
else {
|
|
5772
|
+
this.onClickSaveForm.emit({
|
|
5773
|
+
formConfig: this.formConfig,
|
|
5774
|
+
data: mergeObjects(this.allFormsData[this.formConfig.key], formData, this.popupFormData, this.tasksData)
|
|
5775
|
+
});
|
|
5776
|
+
}
|
|
5551
5777
|
});
|
|
5552
5778
|
}
|
|
5553
5779
|
toggleErrorNotification(show) {
|
|
@@ -5698,6 +5924,168 @@ class KwikIDFormViewComponent {
|
|
|
5698
5924
|
field = removeFormFieldMessage(field, message);
|
|
5699
5925
|
this.formFields[fieldIndex] = field;
|
|
5700
5926
|
}
|
|
5927
|
+
setValue(action, object) {
|
|
5928
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
5929
|
+
const source = new Source(object);
|
|
5930
|
+
const sourceValue = yield source.getValueFromSource(action.props.value.source);
|
|
5931
|
+
source.setValueToSource(action.props.value.destination, sourceValue);
|
|
5932
|
+
object.FIELD_CONFIG = source.object.FIELD_CONFIG;
|
|
5933
|
+
this.formData = source.object.FORM_DATA;
|
|
5934
|
+
this.patchFormGroup(this.formData);
|
|
5935
|
+
this.allFormsData = source.object.ALL_FORMS_DATA;
|
|
5936
|
+
this.previousFormData = source.object.PREVIOUS_FORM_DATA;
|
|
5937
|
+
});
|
|
5938
|
+
}
|
|
5939
|
+
setFieldDefaultValue(action, object) {
|
|
5940
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
5941
|
+
const source = new Source(object);
|
|
5942
|
+
const sourceValue = yield source.getValueFromSource(action.props.value.source);
|
|
5943
|
+
source.setValueToSource({
|
|
5944
|
+
key: ESourceKey.OBJECT,
|
|
5945
|
+
props: {
|
|
5946
|
+
object: {
|
|
5947
|
+
key: "FIELD_CONFIG",
|
|
5948
|
+
path: "default.value.value"
|
|
5949
|
+
}
|
|
5950
|
+
}
|
|
5951
|
+
}, sourceValue);
|
|
5952
|
+
source.setValueToSource({
|
|
5953
|
+
key: ESourceKey.OBJECT,
|
|
5954
|
+
props: {
|
|
5955
|
+
object: {
|
|
5956
|
+
key: "FORM_DATA",
|
|
5957
|
+
path: String(action.props.fieldKey)
|
|
5958
|
+
}
|
|
5959
|
+
}
|
|
5960
|
+
}, sourceValue);
|
|
5961
|
+
object.FIELD_CONFIG = source.object.FIELD_CONFIG;
|
|
5962
|
+
this.formData = source.object.FORM_DATA;
|
|
5963
|
+
this.patchFormGroup(this.formData);
|
|
5964
|
+
this.allFormsData = source.object.ALL_FORMS_DATA;
|
|
5965
|
+
this.previousFormData = source.object.PREVIOUS_FORM_DATA;
|
|
5966
|
+
});
|
|
5967
|
+
}
|
|
5968
|
+
setDropdownOptions(action, object) {
|
|
5969
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
5970
|
+
const source = new Source(object);
|
|
5971
|
+
let sourceValue = yield source.getValueFromSource(action.props.value.source);
|
|
5972
|
+
if (checkObjectKeyExists(action.props, "options")) {
|
|
5973
|
+
if (checkObjectKeyExists(action.props.options, "appendToPath")) {
|
|
5974
|
+
let appendToPath = yield source.getValueFromSource(action.props.options.appendToPath.source);
|
|
5975
|
+
if (isNotEmptyValue(appendToPath)) {
|
|
5976
|
+
const appendToPathStr = replaceString(appendToPath.match(`${action.props.options.appendToPath.filterSourceValue}`)[0], "[^a-zA-Z0-9_]", "_");
|
|
5977
|
+
const optionsPath = `${action.props.options.path}${appendToPathStr}`;
|
|
5978
|
+
sourceValue = getObjectValueFromPath(sourceValue, optionsPath);
|
|
5979
|
+
}
|
|
5980
|
+
}
|
|
5981
|
+
else {
|
|
5982
|
+
sourceValue = getObjectValueFromPath(sourceValue, action.props.options.path);
|
|
5983
|
+
}
|
|
5984
|
+
}
|
|
5985
|
+
source.setValueToSource(action.props.value.destination, sourceValue);
|
|
5986
|
+
object.FIELD_CONFIG = source.object.FIELD_CONFIG;
|
|
5987
|
+
this.formData = source.object.FORM_DATA;
|
|
5988
|
+
this.allFormsData = source.object.ALL_FORMS_DATA;
|
|
5989
|
+
this.previousFormData = source.object.PREVIOUS_FORM_DATA;
|
|
5990
|
+
});
|
|
5991
|
+
}
|
|
5992
|
+
fieldMultipleApiCalls(action, object) {
|
|
5993
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
5994
|
+
const entrypointApiKey = action.props.apiKey;
|
|
5995
|
+
let field = getFormFieldByKey(this.formFields, action.props.fieldKey);
|
|
5996
|
+
const endpoints = field.api.endpoints;
|
|
5997
|
+
const nextApiIndex = endpoints.findIndex((api) => api.apiKey == entrypointApiKey);
|
|
5998
|
+
const apiConfig = endpoints[nextApiIndex];
|
|
5999
|
+
const response = yield this.handleFieldApiCall(field, apiConfig);
|
|
6000
|
+
field = response.field;
|
|
6001
|
+
field.api.endpoints[nextApiIndex] = response.api;
|
|
6002
|
+
});
|
|
6003
|
+
}
|
|
6004
|
+
fieldMultipleApiCallsEnd(action, object) {
|
|
6005
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
6006
|
+
const field = getFormFieldByKey(this.formFields, action.props.fieldKey);
|
|
6007
|
+
let multipleApiCallResponses = {};
|
|
6008
|
+
field.api.endpoints.map((api) => {
|
|
6009
|
+
if (checkObjectKeyExists(api.response, "value"))
|
|
6010
|
+
multipleApiCallResponses = setValueToObjectPath(multipleApiCallResponses, `${api.apiKey}`, api.response.value);
|
|
6011
|
+
});
|
|
6012
|
+
this.formData = Object.assign(Object.assign({}, this.formData), { [field.key]: multipleApiCallResponses });
|
|
6013
|
+
this.patchFormGroup(this.formData);
|
|
6014
|
+
});
|
|
6015
|
+
}
|
|
6016
|
+
taskApiCall(action, object) {
|
|
6017
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
6018
|
+
this.showApiLoader();
|
|
6019
|
+
let apiConfig = this.formConfig.apis[action.props.formApiKey];
|
|
6020
|
+
const response = yield this.handleTaskApiCall(apiConfig);
|
|
6021
|
+
apiConfig = response.api;
|
|
6022
|
+
this.formConfig = setValueToObjectPath(this.formConfig, `apis.${action.props.formApiKey}`, apiConfig);
|
|
6023
|
+
this.tasksData = mergeObjects(this.tasksData, {
|
|
6024
|
+
[action.props.formApiKey]: apiConfig.response.value
|
|
6025
|
+
});
|
|
6026
|
+
this.waitingForChanges = false;
|
|
6027
|
+
this.hideApiLoader();
|
|
6028
|
+
});
|
|
6029
|
+
}
|
|
6030
|
+
taskMultipleApiCalls(action, object) {
|
|
6031
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
6032
|
+
this.showApiLoader();
|
|
6033
|
+
let multipleApiConfig = this.formConfig.apis[action.props.formApiKey];
|
|
6034
|
+
if (checkObjectKeyExists(action.props, "apiKey")) {
|
|
6035
|
+
const entrypointApiKey = action.props.apiKey;
|
|
6036
|
+
const endpoints = multipleApiConfig.endpoints;
|
|
6037
|
+
const nextApiIndex = endpoints.findIndex((api) => api.apiKey == entrypointApiKey);
|
|
6038
|
+
const apiConfig = endpoints[nextApiIndex];
|
|
6039
|
+
const response = yield this.handleTaskApiCall(apiConfig);
|
|
6040
|
+
multipleApiConfig.endpoints[nextApiIndex] = response.api;
|
|
6041
|
+
this.formConfig = setValueToObjectPath(this.formConfig, `apis.${action.props.formApiKey}`, multipleApiConfig);
|
|
6042
|
+
this.hideApiLoader();
|
|
6043
|
+
}
|
|
6044
|
+
else {
|
|
6045
|
+
const apis = new Apis({
|
|
6046
|
+
FORM_CONFIG: this.formConfig,
|
|
6047
|
+
API_CONFIG: multipleApiConfig,
|
|
6048
|
+
FORM_FIELDS: this.formFields,
|
|
6049
|
+
FORM_DATA: this.formData,
|
|
6050
|
+
PREVIOUS_FORM_DATA: this.previousFormData,
|
|
6051
|
+
ALL_FORMS_DATA: this.allFormsData
|
|
6052
|
+
}, this.takeAction.bind(this));
|
|
6053
|
+
yield apis.callNextApi(multipleApiConfig.entrypoint);
|
|
6054
|
+
}
|
|
6055
|
+
});
|
|
6056
|
+
}
|
|
6057
|
+
taskMultipleApiCallsEnd(action, object) {
|
|
6058
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
6059
|
+
const multipleApiConfig = this.formConfig.apis[action.props.formApiKey];
|
|
6060
|
+
let multipleApiCallResponses = {};
|
|
6061
|
+
multipleApiConfig.endpoints.map((api) => {
|
|
6062
|
+
if (checkObjectKeyExists(api.response, "value"))
|
|
6063
|
+
multipleApiCallResponses = setValueToObjectPath(multipleApiCallResponses, `${api.apiKey}`, api.response.value);
|
|
6064
|
+
});
|
|
6065
|
+
this.tasksData = Object.assign(Object.assign({}, this.tasksData), { [action.props.formApiKey]: multipleApiCallResponses });
|
|
6066
|
+
this.waitingForChanges = false;
|
|
6067
|
+
this.hideApiLoader();
|
|
6068
|
+
});
|
|
6069
|
+
}
|
|
6070
|
+
dialogShow(options) {
|
|
6071
|
+
var _a;
|
|
6072
|
+
this.dialogRef = this.dialogs
|
|
6073
|
+
.open(options === null || options === void 0 ? void 0 : options.html, {
|
|
6074
|
+
closeable: true,
|
|
6075
|
+
dismissible: true,
|
|
6076
|
+
label: options === null || options === void 0 ? void 0 : options.label,
|
|
6077
|
+
size: (_a = options === null || options === void 0 ? void 0 : options.size) !== null && _a !== void 0 ? _a : "s",
|
|
6078
|
+
data: { button: options === null || options === void 0 ? void 0 : options.button }
|
|
6079
|
+
})
|
|
6080
|
+
.subscribe({
|
|
6081
|
+
complete: () => { }
|
|
6082
|
+
});
|
|
6083
|
+
}
|
|
6084
|
+
dialogHide() {
|
|
6085
|
+
if (this.dialogRef) {
|
|
6086
|
+
this.dialogRef.complete();
|
|
6087
|
+
}
|
|
6088
|
+
}
|
|
5701
6089
|
patchFieldControlValue(key, value) {
|
|
5702
6090
|
this.formGroup.patchValue({
|
|
5703
6091
|
[key]: value
|
|
@@ -5728,6 +6116,25 @@ class KwikIDFormViewComponent {
|
|
|
5728
6116
|
getFormGroupRawValues() {
|
|
5729
6117
|
return this.formGroup.getRawValue();
|
|
5730
6118
|
}
|
|
6119
|
+
showPreview(previewProperties) {
|
|
6120
|
+
this.previewProperties = mergeObjects(this.previewProperties, previewProperties);
|
|
6121
|
+
if (isEmptyValue(this.previewProperties.iframe.src) &&
|
|
6122
|
+
isEmptyValue(this.previewProperties.html.before) &&
|
|
6123
|
+
isEmptyValue(this.previewProperties.html.after)) {
|
|
6124
|
+
this.previewProperties.unavailable = true;
|
|
6125
|
+
}
|
|
6126
|
+
else {
|
|
6127
|
+
this.previewProperties.unavailable = false;
|
|
6128
|
+
}
|
|
6129
|
+
this.previewDialogService.open(this.preview || "").subscribe();
|
|
6130
|
+
}
|
|
6131
|
+
showPopupForm(popupFormKey) {
|
|
6132
|
+
const popupFormConfig = this.formConfig.popupForms[popupFormKey];
|
|
6133
|
+
this.onActionShowPopupForm.emit({
|
|
6134
|
+
activeFormData: mergeObjects(this.formData, this.tasksData),
|
|
6135
|
+
popupFormConfig: popupFormConfig
|
|
6136
|
+
});
|
|
6137
|
+
}
|
|
5731
6138
|
takeActionOnFieldGroup(action, object) {
|
|
5732
6139
|
return __awaiter(this, void 0, void 0, function* () {
|
|
5733
6140
|
switch (action.key) {
|
|
@@ -5749,6 +6156,7 @@ class KwikIDFormViewComponent {
|
|
|
5749
6156
|
});
|
|
5750
6157
|
}
|
|
5751
6158
|
takeAction(action, object) {
|
|
6159
|
+
var _a, _b, _c, _d;
|
|
5752
6160
|
return __awaiter(this, void 0, void 0, function* () {
|
|
5753
6161
|
switch (action.key) {
|
|
5754
6162
|
case EActionKey.FIELD_HIDE:
|
|
@@ -5791,92 +6199,65 @@ class KwikIDFormViewComponent {
|
|
|
5791
6199
|
this.fieldMessageHide(action.props.fieldKey, action.props.message);
|
|
5792
6200
|
break;
|
|
5793
6201
|
case EActionKey.SET_VALUE:
|
|
5794
|
-
|
|
5795
|
-
const sourceValue = yield setValue_Source.getValueFromSource(action.props.value.source);
|
|
5796
|
-
setValue_Source.setValueToSource(action.props.value.destination, sourceValue);
|
|
5797
|
-
object.FIELD_CONFIG = setValue_Source.object.FIELD_CONFIG;
|
|
5798
|
-
this.formData = setValue_Source.object.FORM_DATA;
|
|
5799
|
-
this.patchFormGroup(this.formData);
|
|
5800
|
-
this.allFormsData = setValue_Source.object.ALL_FORMS_DATA;
|
|
5801
|
-
this.previousFormData = setValue_Source.object.PREVIOUS_FORM_DATA;
|
|
6202
|
+
yield this.setValue(action, object);
|
|
5802
6203
|
break;
|
|
5803
6204
|
case EActionKey.SET_FIELD_DEFAULT_VALUE:
|
|
5804
|
-
|
|
5805
|
-
const sourceDefaultValue = yield setDefaultValue_Source.getValueFromSource(action.props.value.source);
|
|
5806
|
-
const destinationDefaultValue_FieldConfig_Config = {
|
|
5807
|
-
key: ESourceKey.OBJECT,
|
|
5808
|
-
props: {
|
|
5809
|
-
object: {
|
|
5810
|
-
key: "FIELD_CONFIG",
|
|
5811
|
-
path: "default.value.value"
|
|
5812
|
-
}
|
|
5813
|
-
}
|
|
5814
|
-
};
|
|
5815
|
-
setDefaultValue_Source.setValueToSource(destinationDefaultValue_FieldConfig_Config, sourceDefaultValue);
|
|
5816
|
-
const destinationDefaultValue_FormData_Config__Props__Object__Path = String(`${action.props.fieldKey}`);
|
|
5817
|
-
const destinationDefaultValue_FormData_Config = {
|
|
5818
|
-
key: ESourceKey.OBJECT,
|
|
5819
|
-
props: {
|
|
5820
|
-
object: {
|
|
5821
|
-
key: "FORM_DATA",
|
|
5822
|
-
path: String(action.props.fieldKey)
|
|
5823
|
-
}
|
|
5824
|
-
}
|
|
5825
|
-
};
|
|
5826
|
-
setDefaultValue_Source.setValueToSource(destinationDefaultValue_FormData_Config, sourceDefaultValue);
|
|
5827
|
-
object.FIELD_CONFIG = setDefaultValue_Source.object.FIELD_CONFIG;
|
|
5828
|
-
this.formData = setDefaultValue_Source.object.FORM_DATA;
|
|
5829
|
-
this.patchFormGroup(this.formData);
|
|
5830
|
-
this.allFormsData = setDefaultValue_Source.object.ALL_FORMS_DATA;
|
|
5831
|
-
this.previousFormData =
|
|
5832
|
-
setDefaultValue_Source.object.PREVIOUS_FORM_DATA;
|
|
6205
|
+
yield this.setFieldDefaultValue(action, object);
|
|
5833
6206
|
break;
|
|
5834
6207
|
case EActionKey.SET_DROPDOWN_OPTIONS:
|
|
5835
|
-
|
|
5836
|
-
let dropdownValue = yield setDropdownValue_Sources.getValueFromSource(action.props.value.source);
|
|
5837
|
-
if (checkObjectKeyExists(action.props, "options")) {
|
|
5838
|
-
if (checkObjectKeyExists(action.props.options, "appendToPath")) {
|
|
5839
|
-
let appendToPath = yield setDropdownValue_Sources.getValueFromSource(action.props.options.appendToPath.source);
|
|
5840
|
-
if (isNotEmptyValue(appendToPath)) {
|
|
5841
|
-
const appendToPathStr = replaceString(appendToPath.match(`${action.props.options.appendToPath.filterSourceValue}`)[0], "[^a-zA-Z0-9_]", "_");
|
|
5842
|
-
const optionsPath = `${action.props.options.path}${appendToPathStr}`;
|
|
5843
|
-
dropdownValue = getObjectValueFromPath(dropdownValue, optionsPath);
|
|
5844
|
-
}
|
|
5845
|
-
}
|
|
5846
|
-
else {
|
|
5847
|
-
dropdownValue = getObjectValueFromPath(dropdownValue, action.props.options.path);
|
|
5848
|
-
}
|
|
5849
|
-
}
|
|
5850
|
-
setDropdownValue_Sources.setValueToSource(action.props.value.destination, dropdownValue);
|
|
5851
|
-
object.FIELD_CONFIG = setDropdownValue_Sources.object.FIELD_CONFIG;
|
|
5852
|
-
this.formData = setDropdownValue_Sources.object.FORM_DATA;
|
|
5853
|
-
this.allFormsData = setDropdownValue_Sources.object.ALL_FORMS_DATA;
|
|
5854
|
-
this.previousFormData =
|
|
5855
|
-
setDropdownValue_Sources.object.PREVIOUS_FORM_DATA;
|
|
6208
|
+
yield this.setDropdownOptions(action, object);
|
|
5856
6209
|
break;
|
|
5857
6210
|
case EActionKey.HANDLE_CONNECTED_ELEMENTS:
|
|
5858
6211
|
this.handleConnectedElements({ key: action.props.fieldKey }, "ON_ACTION");
|
|
5859
6212
|
break;
|
|
5860
|
-
case EActionKey.CUSTOM:
|
|
5861
|
-
break;
|
|
5862
6213
|
case EActionKey.API_CALL:
|
|
5863
|
-
const entrypointKey = action.props.apiKey;
|
|
5864
|
-
let apiField = getFormFieldByKey(this.formFields, action.props.fieldKey);
|
|
5865
|
-
const endpoints = apiField.api.endpoints;
|
|
5866
|
-
const nextApiIndex = endpoints.findIndex((api) => api.apiKey == entrypointKey);
|
|
5867
|
-
const response = yield this.handleApiCall(apiField, endpoints[nextApiIndex]);
|
|
5868
|
-
apiField = response.field;
|
|
5869
|
-
apiField.api.endpoints[nextApiIndex] = response.api;
|
|
5870
6214
|
break;
|
|
5871
|
-
case EActionKey.
|
|
5872
|
-
|
|
5873
|
-
|
|
5874
|
-
|
|
5875
|
-
|
|
5876
|
-
|
|
6215
|
+
case EActionKey.API_CALL_MULTIPLE:
|
|
6216
|
+
yield this.fieldMultipleApiCalls(action, object);
|
|
6217
|
+
break;
|
|
6218
|
+
case EActionKey.API_CALL_MULTIPLE_END:
|
|
6219
|
+
yield this.fieldMultipleApiCallsEnd(action, object);
|
|
6220
|
+
break;
|
|
6221
|
+
case EActionKey.TASK_API_CALL:
|
|
6222
|
+
yield this.taskApiCall(action, object);
|
|
6223
|
+
break;
|
|
6224
|
+
case EActionKey.TASK_API_CALL_MULTIPLE:
|
|
6225
|
+
yield this.taskMultipleApiCalls(action, object);
|
|
6226
|
+
break;
|
|
6227
|
+
case EActionKey.TASK_API_CALL_MULTIPLE_END:
|
|
6228
|
+
yield this.taskMultipleApiCallsEnd(action, object);
|
|
6229
|
+
break;
|
|
6230
|
+
case EActionKey.PREVIEW_DIALOG_SHOW:
|
|
6231
|
+
this.showPreview(action.props);
|
|
6232
|
+
break;
|
|
6233
|
+
case EActionKey.POPUP_FORM_SHOW:
|
|
6234
|
+
this.showPopupForm(action.props.popupFormKey);
|
|
6235
|
+
break;
|
|
6236
|
+
case EActionKey.MOVE_AHEAD:
|
|
6237
|
+
this.waitingForChanges = false;
|
|
6238
|
+
break;
|
|
6239
|
+
case EActionKey.NOTIFICATION_ERROR_SHOW:
|
|
6240
|
+
this.toggleErrorNotification(true);
|
|
6241
|
+
break;
|
|
6242
|
+
case EActionKey.NOTIFICATION_ERROR_HIDE:
|
|
6243
|
+
this.toggleErrorNotification(false);
|
|
6244
|
+
break;
|
|
6245
|
+
case EActionKey.RESUME_TASK_EXECUTION:
|
|
6246
|
+
this.stopTaskExecution = false;
|
|
6247
|
+
break;
|
|
6248
|
+
case EActionKey.STOP_TASK_EXECUTION:
|
|
6249
|
+
this.stopTaskExecution = true;
|
|
6250
|
+
break;
|
|
6251
|
+
case EActionKey.DIALOG_SHOW:
|
|
6252
|
+
this.dialogShow({
|
|
6253
|
+
html: (_a = action.props) === null || _a === void 0 ? void 0 : _a.html,
|
|
6254
|
+
label: (_b = action.props) === null || _b === void 0 ? void 0 : _b.label,
|
|
6255
|
+
size: (_c = action.props) === null || _c === void 0 ? void 0 : _c.size,
|
|
6256
|
+
button: (_d = action.props) === null || _d === void 0 ? void 0 : _d.button
|
|
5877
6257
|
});
|
|
5878
|
-
|
|
5879
|
-
|
|
6258
|
+
break;
|
|
6259
|
+
case EActionKey.DIALOG_HIDE:
|
|
6260
|
+
this.dialogHide();
|
|
5880
6261
|
break;
|
|
5881
6262
|
default:
|
|
5882
6263
|
break;
|
|
@@ -5884,8 +6265,8 @@ class KwikIDFormViewComponent {
|
|
|
5884
6265
|
});
|
|
5885
6266
|
}
|
|
5886
6267
|
}
|
|
5887
|
-
/** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormViewComponent, deps: [{ token: TuiPushService }, { token: TuiAlertService }, { token:
|
|
5888
|
-
/** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", isMobileView: "isMobileView", allFormsData: "allFormsData" }, outputs: { onClickViewForms: "onClickViewForms", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall" }, providers: [KwikIDFormViewService], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"kwikid-form-container\"\n *ngIf=\"!loading\"\n>\n <div\n id=\"uf-form-fields-header-container\"\n *ngIf=\"\n !formConfig.properties.header.title.hidden ||\n !formConfig.properties.header.steps.hidden\n \"\n >\n <div\n id=\"uf-form-fields-title\"\n *ngIf=\"!formConfig.properties.header.title.hidden\"\n >{{ formConfig.properties.header.title.label }}</div\n >\n <div\n id=\"uf-form-fields-steps\"\n *ngIf=\"!formConfig.properties.header.steps.hidden\"\n >Step {{ formConfig.sequenceNo }} of {{ formConfig.formsListLength }}</div\n >\n <hr\n *ngIf=\"\n !formConfig.properties.header.title.hidden &&\n !formConfig.properties.header.steps.hidden\n \"\n />\n </div>\n <form\n class=\"kwikid-form show\"\n [formGroup]=\"formGroup\"\n >\n <ng-container\n *ngFor=\"\n let field of formFields;\n let i = index;\n trackBy: getUniqueIdentifier\n \"\n >\n <ng-container [ngSwitch]=\"field.type\">\n <!-- HTML Content -->\n <ng-container *ngSwitchCase=\"'html'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <div [innerHtml]=\"field.html | safeHtml\"></div>\n </div>\n </ng-container>\n <!-- Form Title -->\n <ng-container *ngSwitchCase=\"'title'\">\n <div\n class=\"title\"\n [class.hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <div>\n {{ field.label }}\n </div>\n <kwikui-button\n *ngIf=\"field?.reset\"\n appearance=\"whiteblock\"\n size=\"s\"\n label=\"Reset\"\n (onClick)=\"handleOnClickResetFormFields($event, field)\"\n ></kwikui-button>\n </div>\n </ng-container>\n <!-- Input Text -->\n <ng-container *ngSwitchCase=\"'text'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input\n [case]=\"field?.properties?.case\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [type]=\"'text'\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Textarea -->\n <ng-container *ngSwitchCase=\"'textarea'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-textarea\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-textarea>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Checkbox -->\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-checkbox-block\n [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.properties?.placeholder\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [size]=\"field?.properties?.size ?? 'l'\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-checkbox-block>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Number -->\n <ng-container *ngSwitchCase=\"'number'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-number\n [decimal]=\"field?.properties?.decimal\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [max]=\"field?.properties?.max\"\n [min]=\"field?.properties?.min\"\n [placeholder]=\"field?.properties?.placeholder\"\n [postfix]=\"field?.properties?.postfix ?? ''\"\n [precision]=\"field?.properties?.precision\"\n [prefix]=\"field?.properties?.prefix ?? ''\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-number>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Date -->\n <ng-container *ngSwitchCase=\"'date'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-date\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [min]=\"field?.properties?.min\"\n [minCalculatedFromToday]=\"\n field?.properties?.minCalculatedFromToday\n \"\n [max]=\"field?.properties?.max\"\n [maxCalculatedFromToday]=\"\n field?.properties?.maxCalculatedFromToday\n \"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-date>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Phone -->\n <ng-container *ngSwitchCase=\"'phone'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-phone\n [countryCode]=\"field?.properties?.countryCode\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [phoneMaskAfterCountryCode]=\"\n field?.properties?.phoneMaskAfterCountryCode\n \"\n [removeCountryCodeFromValue]=\"\n field?.properties?.removeCountryCodeFromValue\n \"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-phone>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Radio -->\n <ng-container *ngSwitchCase=\"'radio'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <label\n [tuiLabel]=\"labelTemplate\"\n style=\"min-height: auto; padding: 0px 0.5rem\"\n >\n <kwikui-radio-list\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [items]=\"field?.options\"\n [label]=\"field?.label\"\n [orientation]=\"field?.properties?.orientation\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [size]=\"field?.properties?.size\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-radio-list>\n </label>\n <ng-template #labelTemplate>\n <p\n class=\"tui-space_bottom-2\"\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <b>\n {{ field.label }}\n <span *ngIf=\"field.validators?.required\"></span>\n </b>\n </p>\n </ng-template>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Dropdown -->\n <ng-container *ngSwitchCase=\"'dropdown-with-search'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-select-combobox\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [options]=\"field.options\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-select-combobox>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Slider -->\n <ng-container *ngSwitchCase=\"'slider'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-slider\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [max]=\"field?.properties?.max\"\n [min]=\"field?.properties?.min\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [quantum]=\"field?.properties?.quantum\"\n [size]=\"field?.properties?.size\"\n [steps]=\"field?.properties?.steps\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-slider>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- API Call -->\n <ng-container *ngSwitchCase=\"'api-call'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-button-api-call\n [apiStatus]=\"field?.api?.status?.value\"\n [class]=\"field?.class\"\n [disabled]=\"field?.disabled\"\n [id]=\"field.key\"\n [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\n [showLoader]=\"field?.disabled === 'loading'\"\n shape=\"null\"\n size=\"m\"\n styles=\"width: fit-content\"\n (onClick)=\"handleOnClickApiCall($event)\"\n ></kwikui-button-api-call>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Mobile OTP -->\n <ng-container *ngSwitchCase=\"'otp'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-otp\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [mask]=\"field?.properties?.mask\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-otp>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Aadhaar Number -->\n <ng-container *ngSwitchCase=\"'aadhaar-number'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-aadhaar\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [placeholder]=\"field?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-aadhaar>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Preview Image -->\n <ng-container *ngSwitchCase=\"'preview-image'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-preview-image\n [altText]=\"field?.properties?.altText\"\n [html]=\"field?.properties?.html\"\n [id]=\"field.key\"\n [imageSrc]=\"field?.default?.value?.value\"\n [imageType]=\"field?.properties?.imageType\"\n [loadingType]=\"field?.properties?.loadingType\"\n [styles]=\"field?.properties?.styles\"\n [class]=\"field?.properties?.class\"\n ></kwikui-preview-image>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </form>\n <div class=\"kwikid-form-buttons\">\n <kwikui-button\n *ngIf=\"\n !formConfig.properties.footer.viewFormsButton.hidden && isMobileView\n \"\n [disabled]=\"viewFormsButton.disabled\"\n id=\"\"\n label=\"{{ formConfig.properties.footer.viewFormsButton.label }}\"\n [showLoader]=\"viewFormsButton.showLoader\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"secondary\"\n icon=\"\"\n iconRight=\"\"\n [shape]=\"null\"\n size=\"m\"\n styles=\"width: 100%\"\n (onClick)=\"handleOnClickViewForms($event)\"\n ></kwikui-button>\n <kwikui-button\n *ngIf=\"!formConfig.properties.footer.saveButton.hidden\"\n [disabled]=\"saveFormButton.disabled\"\n id=\"\"\n label=\"{{ formConfig.properties.footer.saveButton.label }}\"\n [showLoader]=\"saveFormButton.showLoader\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"primary\"\n icon=\"\"\n iconRight=\"\"\n [shape]=\"null\"\n size=\"m\"\n styles=\"width: 100%\"\n (onClick)=\"handleOnClickSaveForm($event)\"\n ></kwikui-button>\n </div>\n</div>\n<div\n class=\"kwikid-form-container-loading\"\n *ngIf=\"loading\"\n>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n</div>\n<tui-push\n id=\"field-error-notification\"\n *tuiPush=\"showErrorNotification\"\n heading=\"Missing/Incorrect Fields!\"\n type=\"Error\"\n (close)=\"toggleErrorNotification(false)\"\n>\n <tui-svg\n src=\"tuiIconXCircle\"\n style=\"color: #fff !important\"\n >\n </tui-svg>\n</tui-push>\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: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i1.KwikUITextareaComponent, selector: "kwikui-textarea", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "size", "placeholder", "properties", "validators"], outputs: ["getKeyValue"] }, { type: i1.KwikUICheckboxBlockComponent, selector: "kwikui-checkbox-block", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "contentAlign", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "prefix", "postfix", "precision", "decimal", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "minCalculatedFromToday", "max", "maxCalculatedFromToday", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "countryCode", "phoneMaskAfterCountryCode", "removeCountryCodeFromValue", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i1.KwikUIRadioListComponent, selector: "kwikui-radio-list", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "orientation", "items", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputSliderComponent, selector: "kwikui-input-slider", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "size", "min", "max", "steps", "quantum", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i1.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIPreviewImageComponent, selector: "kwikui-preview-image", inputs: ["id", "imageSrc", "altText", "imageType", "styles", "class", "loadingType", "html"], outputs: ["onClick"] }, { type: i4$1.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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4$1.TuiPushDirective, selector: "tui-push" }], pipes: { "safeHtml": SafeHtmlPipe$1 } });
|
|
6268
|
+
/** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: KwikIDFormViewService }, { token: TuiPushService }, { token: TuiAlertService }, { token: TuiPreviewDialogService }, { token: TuiDialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6269
|
+
/** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", isMobileView: "isMobileView", allFormsData: "allFormsData", popupFormCallback: "popupFormCallback" }, outputs: { onClickGoBack: "onClickGoBack", onClickViewForms: "onClickViewForms", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall", onActionShowPopupForm: "onActionShowPopupForm" }, providers: [KwikIDFormViewService], viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"kwikid-form-container\"\n *ngIf=\"!loading\"\n>\n <div\n id=\"uf-form-fields-header-container\"\n *ngIf=\"\n !formConfig.properties?.header?.title?.hidden ||\n !formConfig.properties?.header?.steps?.hidden ||\n !formConfig.properties?.header?.backButton?.hidden\n \"\n >\n <div id=\"uf-form-fields-header-main\">\n <div id=\"uf-form-fields-header-left\">\n <kwikui-button-icon\n *ngIf=\"\n !formConfig.properties?.header.backButton.hidden && isMobileView\n \"\n [disabled]=\"backButton.disabled\"\n id=\"\"\n [showLoader]=\"backButton.showLoader\"\n styles=\"\"\n class=\"\"\n type=\"submit\"\n appearance=\"mono\"\n icon=\"tuiIconArrowLeft\"\n shape=\"rounded\"\n size=\"m\"\n (onClick)=\"\n handleOnClickGoBack(\n $event,\n formConfig.properties?.header.backButton.mode\n )\n \"\n ></kwikui-button-icon>\n </div>\n <div id=\"uf-form-fields-header-right\">\n <div\n id=\"uf-form-fields-title\"\n *ngIf=\"!formConfig.properties?.header.title.hidden\"\n >{{ formConfig.properties?.header.title.label }}</div\n >\n <div\n id=\"uf-form-fields-steps\"\n *ngIf=\"!formConfig.properties?.header.steps.hidden\"\n >Step {{ formConfig.sequenceNo }} of\n {{ formConfig.formsListLength }}</div\n >\n </div>\n </div>\n <hr\n *ngIf=\"\n !formConfig.properties?.header.title.hidden &&\n !formConfig.properties?.header.steps.hidden &&\n !formConfig.properties?.header.backButton.hidden\n \"\n />\n </div>\n <form\n class=\"kwikid-form show\"\n [formGroup]=\"formGroup\"\n >\n <ng-container\n *ngFor=\"\n let field of formFields;\n let i = index;\n trackBy: getUniqueIdentifier\n \"\n >\n <ng-container [ngSwitch]=\"field.type\">\n <!-- HTML Content -->\n <ng-container *ngSwitchCase=\"'html'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <div [innerHtml]=\"field.html | safeHtml\"></div>\n </div>\n </ng-container>\n <!-- Form Title -->\n <ng-container *ngSwitchCase=\"'title'\">\n <div\n class=\"title\"\n [class.hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <div>\n {{ field.label }}\n </div>\n <kwikui-button\n *ngIf=\"field?.reset\"\n appearance=\"whiteblock\"\n size=\"s\"\n label=\"Reset\"\n (onClick)=\"handleOnClickResetFormFields($event, field)\"\n ></kwikui-button>\n </div>\n </ng-container>\n <!-- Input Text -->\n <ng-container *ngSwitchCase=\"'text'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input\n [case]=\"field?.properties?.case\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [type]=\"'text'\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Textarea -->\n <ng-container *ngSwitchCase=\"'textarea'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-textarea\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-textarea>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Checkbox -->\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-checkbox-block\n [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.properties?.placeholder\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [size]=\"field?.properties?.size ?? 'l'\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-checkbox-block>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Number -->\n <ng-container *ngSwitchCase=\"'number'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-number\n [decimal]=\"field?.properties?.decimal\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [max]=\"field?.properties?.max\"\n [min]=\"field?.properties?.min\"\n [placeholder]=\"field?.properties?.placeholder\"\n [postfix]=\"field?.properties?.postfix ?? ''\"\n [precision]=\"field?.properties?.precision\"\n [prefix]=\"field?.properties?.prefix ?? ''\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-number>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Date -->\n <ng-container *ngSwitchCase=\"'date'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-date\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [min]=\"field?.properties?.min\"\n [minCalculatedFromToday]=\"\n field?.properties?.minCalculatedFromToday\n \"\n [max]=\"field?.properties?.max\"\n [maxCalculatedFromToday]=\"\n field?.properties?.maxCalculatedFromToday\n \"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-date>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Phone -->\n <ng-container *ngSwitchCase=\"'phone'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-phone\n [countryCode]=\"field?.properties?.countryCode\"\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [phoneMaskAfterCountryCode]=\"\n field?.properties?.phoneMaskAfterCountryCode\n \"\n [removeCountryCodeFromValue]=\"\n field?.properties?.removeCountryCodeFromValue\n \"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-phone>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Radio -->\n <ng-container *ngSwitchCase=\"'radio'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <label\n [tuiLabel]=\"labelTemplate\"\n style=\"min-height: auto; padding: 0px 0.5rem\"\n >\n <kwikui-radio-list\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [items]=\"field?.options\"\n [label]=\"field?.label\"\n [orientation]=\"field?.properties?.orientation\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [size]=\"field?.properties?.size\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-radio-list>\n </label>\n <ng-template #labelTemplate>\n <p\n class=\"tui-space_bottom-2\"\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <b>\n {{ field.label }}\n <span *ngIf=\"field.validators?.required\"></span>\n </b>\n </p>\n </ng-template>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Dropdown -->\n <ng-container *ngSwitchCase=\"'dropdown-with-search'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-select-combobox\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [options]=\"field.options\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-select-combobox>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Input Slider -->\n <ng-container *ngSwitchCase=\"'slider'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-slider\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [max]=\"field?.properties?.max\"\n [min]=\"field?.properties?.min\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [quantum]=\"field?.properties?.quantum\"\n [size]=\"field?.properties?.size\"\n [steps]=\"field?.properties?.steps\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-slider>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- API Call -->\n <ng-container *ngSwitchCase=\"'api-call'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-button-api-call\n [apiStatus]=\"field?.api?.status?.value\"\n [class]=\"field?.class\"\n [disabled]=\"field?.disabled\"\n [id]=\"field.key\"\n [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\n [showLoader]=\"field?.disabled === 'loading'\"\n shape=\"null\"\n size=\"m\"\n styles=\"width: fit-content\"\n (onClick)=\"handleOnClickApiCall($event)\"\n ></kwikui-button-api-call>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Mobile OTP -->\n <ng-container *ngSwitchCase=\"'otp'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-otp\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [mask]=\"field?.properties?.mask\"\n [placeholder]=\"field?.properties?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-otp>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Aadhaar Number -->\n <ng-container *ngSwitchCase=\"'aadhaar-number'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-input-aadhaar\n [disabled]=\"field?.disabled\"\n [focus]=\"field?.focus\"\n [formControl]=\"formGroup.controls[field.key]\"\n [formControlName]=\"field.key\"\n [id]=\"field.key\"\n [invalid]=\"field?.invalid\"\n [label]=\"field?.label\"\n [placeholder]=\"field?.placeholder\"\n [properties]=\"field?.properties\"\n [validators]=\"field?.validators\"\n (getKeyValue)=\"handleGetKeyValue($event)\"\n ></kwikui-input-aadhaar>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n <!-- Preview Image -->\n <ng-container *ngSwitchCase=\"'preview-image'\">\n <div\n [hidden]=\"field?.hidden\"\n id=\"field_{{ field.key }}\"\n >\n <kwikui-preview-image\n [altText]=\"field?.properties?.altText\"\n [html]=\"field?.properties?.html\"\n [id]=\"field.key\"\n [imageSrc]=\"field?.default?.value?.value\"\n [imageType]=\"field?.properties?.imageType\"\n [loadingType]=\"field?.properties?.loadingType\"\n [styles]=\"field?.properties?.styles\"\n [class]=\"field?.properties?.class\"\n ></kwikui-preview-image>\n <kwikui-messages\n [messages]=\"field.messages\"\n [id]=\"field.key\"\n ></kwikui-messages>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </form>\n <div class=\"kwikid-form-buttons\">\n <kwikui-button\n *ngIf=\"\n !formConfig.properties.footer.viewFormsButton.hidden && isMobileView\n \"\n [disabled]=\"viewFormsButton.disabled\"\n id=\"\"\n label=\"{{ formConfig.properties.footer.viewFormsButton.label }}\"\n [showLoader]=\"viewFormsButton.showLoader\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"secondary\"\n icon=\"\"\n iconRight=\"\"\n [shape]=\"null\"\n size=\"m\"\n styles=\"width: 100%\"\n (onClick)=\"handleOnClickViewForms($event)\"\n ></kwikui-button>\n <kwikui-button\n *ngIf=\"!formConfig.properties.footer.saveButton.hidden\"\n [disabled]=\"saveFormButton.disabled\"\n id=\"\"\n label=\"{{ formConfig.properties.footer.saveButton.label }}\"\n [showLoader]=\"saveFormButton.showLoader\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"primary\"\n icon=\"\"\n iconRight=\"\"\n [shape]=\"null\"\n size=\"m\"\n styles=\"width: 100%\"\n (onClick)=\"handleOnClickSaveForm($event)\"\n ></kwikui-button>\n </div>\n</div>\n<div\n class=\"kwikid-form-container-loading\"\n *ngIf=\"loading\"\n>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n <div\n class=\"large-wrapper\"\n [class.tui-skeleton]=\"loading\"\n [class.tui-skeleton_rounded]=\"loading\"\n >\n </div>\n</div>\n<tui-push\n id=\"field-error-notification\"\n *tuiPush=\"showErrorNotification\"\n heading=\"Missing/Incorrect Fields!\"\n type=\"Error\"\n (close)=\"toggleErrorNotification(false)\"\n>\n <tui-svg\n src=\"tuiIconXCircle\"\n style=\"color: #fff !important\"\n >\n </tui-svg>\n</tui-push>\n\n<ng-template\n #preview\n let-preview\n>\n <tui-preview\n [rotatable]=\"false\"\n [zoomable]=\"false\"\n class=\"preview-container\"\n >\n <tui-preview-title *ngIf=\"previewProperties.title !== ''\">{{\n previewProperties.title\n }}</tui-preview-title>\n\n <ng-container *ngIf=\"!previewProperties.unavailable\">\n <div\n *ngIf=\"previewProperties?.html?.before !== ''\"\n [innerHtml]=\"previewProperties.html.before | safeHtml\"\n ></div>\n\n <iframe\n *ngIf=\"previewProperties.iframe.src !== ''\"\n [src]=\"previewProperties.iframe.src | safeUrl\"\n frameborder=\"0\"\n allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen\n [title]=\"previewProperties.iframe.title\"\n class=\"preview-iframe\"\n ></iframe>\n\n <div\n *ngIf=\"previewProperties?.html?.after !== ''\"\n [innerHtml]=\"previewProperties.html.after | safeHtml\"\n ></div>\n </ng-container>\n\n <ng-container *ngIf=\"previewProperties.unavailable\">\n <div class=\"preview-unavailable\">\n <tui-svg\n src=\"tuiIconFileLarge\"\n class=\"t-icon\"\n ></tui-svg>\n <div>Preview unavailable</div>\n </div>\n </ng-container>\n\n <button\n tuiIconButton\n tuiPreviewAction\n icon=\"tuiIconCloseLarge\"\n title=\"Close\"\n type=\"button\"\n (click)=\"preview.complete()\"\n ></button>\n </tui-preview>\n</ng-template>\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 #uf-form-fields-header-main{display:flex;flex-direction:row;align-content:center;justify-content:flex-start;align-items:center;grid-gap:.25rem;gap:.25rem;width:100%}#uf-form-fields-header-container #uf-form-fields-header-main #uf-form-fields-header-right{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start;grid-row-gap:.5rem;grid-row-gap:.25rem;row-gap:.25rem}#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}.preview-container{display:flex!important;flex-grow:1!important;flex-direction:column!important;align-content:center!important;justify-content:space-between!important;align-items:stretch!important}.preview-container .preview-iframe{width:100vw;height:100vh}.preview-container .preview-unavailable{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;grid-gap:1.4rem;gap:1.4rem;color:#fff;font-size:1.2rem;top:50%;left:50%;width:100%;height:100vh}\n"], components: [{ type: i1.KwikUIButtonIconComponent, selector: "kwikui-button-icon", inputs: ["disabled", "id", "showLoader", "styles", "class", "type", "appearance", "icon", "shape", "size"], outputs: ["onClick"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "size", "icon", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i1.KwikUITextareaComponent, selector: "kwikui-textarea", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "size", "placeholder", "properties", "validators"], outputs: ["getKeyValue"] }, { type: i1.KwikUICheckboxBlockComponent, selector: "kwikui-checkbox-block", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "contentAlign", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "max", "prefix", "postfix", "precision", "decimal", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "min", "minCalculatedFromToday", "max", "maxCalculatedFromToday", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "countryCode", "phoneMaskAfterCountryCode", "removeCountryCodeFromValue", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3$1.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i1.KwikUIRadioListComponent, selector: "kwikui-radio-list", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "orientation", "items", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "size", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputSliderComponent, selector: "kwikui-input-slider", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "size", "min", "max", "steps", "quantum", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i1.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i1.KwikUIPreviewImageComponent, selector: "kwikui-preview-image", inputs: ["id", "imageSrc", "altText", "imageType", "styles", "class", "loadingType", "html"], outputs: ["onClick"] }, { type: i4$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i5.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { type: i5.TuiPreviewTitleComponent, selector: "tui-preview-title" }, { type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4$1.TuiPushDirective, selector: "tui-push" }, { type: i5.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }], pipes: { "safeHtml": SafeHtmlPipe$1, "safeUrl": SafeUrlPipe } });
|
|
5889
6270
|
__decorate([
|
|
5890
6271
|
logMethod
|
|
5891
6272
|
], KwikIDFormViewComponent.prototype, "ngOnInit", null);
|
|
@@ -5928,12 +6309,21 @@ __decorate([
|
|
|
5928
6309
|
__decorate([
|
|
5929
6310
|
logMethod
|
|
5930
6311
|
], KwikIDFormViewComponent.prototype, "handleOnClickResetFormFields", null);
|
|
6312
|
+
__decorate([
|
|
6313
|
+
logMethod
|
|
6314
|
+
], KwikIDFormViewComponent.prototype, "handleFieldApiCall", null);
|
|
6315
|
+
__decorate([
|
|
6316
|
+
logMethod
|
|
6317
|
+
], KwikIDFormViewComponent.prototype, "handleTaskApiCall", null);
|
|
5931
6318
|
__decorate([
|
|
5932
6319
|
logMethod
|
|
5933
6320
|
], KwikIDFormViewComponent.prototype, "handleApiCall", null);
|
|
5934
6321
|
__decorate([
|
|
5935
6322
|
logMethod
|
|
5936
6323
|
], KwikIDFormViewComponent.prototype, "handleOnClickApiCall", null);
|
|
6324
|
+
__decorate([
|
|
6325
|
+
logMethod
|
|
6326
|
+
], KwikIDFormViewComponent.prototype, "handleOnClickGoBack", null);
|
|
5937
6327
|
__decorate([
|
|
5938
6328
|
logMethod
|
|
5939
6329
|
], KwikIDFormViewComponent.prototype, "handleOnClickViewForms", null);
|
|
@@ -5982,6 +6372,36 @@ __decorate([
|
|
|
5982
6372
|
__decorate([
|
|
5983
6373
|
logMethod
|
|
5984
6374
|
], KwikIDFormViewComponent.prototype, "fieldMessageHide", null);
|
|
6375
|
+
__decorate([
|
|
6376
|
+
logMethod
|
|
6377
|
+
], KwikIDFormViewComponent.prototype, "setValue", null);
|
|
6378
|
+
__decorate([
|
|
6379
|
+
logMethod
|
|
6380
|
+
], KwikIDFormViewComponent.prototype, "setFieldDefaultValue", null);
|
|
6381
|
+
__decorate([
|
|
6382
|
+
logMethod
|
|
6383
|
+
], KwikIDFormViewComponent.prototype, "setDropdownOptions", null);
|
|
6384
|
+
__decorate([
|
|
6385
|
+
logMethod
|
|
6386
|
+
], KwikIDFormViewComponent.prototype, "fieldMultipleApiCalls", null);
|
|
6387
|
+
__decorate([
|
|
6388
|
+
logMethod
|
|
6389
|
+
], KwikIDFormViewComponent.prototype, "fieldMultipleApiCallsEnd", null);
|
|
6390
|
+
__decorate([
|
|
6391
|
+
logMethod
|
|
6392
|
+
], KwikIDFormViewComponent.prototype, "taskApiCall", null);
|
|
6393
|
+
__decorate([
|
|
6394
|
+
logMethod
|
|
6395
|
+
], KwikIDFormViewComponent.prototype, "taskMultipleApiCalls", null);
|
|
6396
|
+
__decorate([
|
|
6397
|
+
logMethod
|
|
6398
|
+
], KwikIDFormViewComponent.prototype, "taskMultipleApiCallsEnd", null);
|
|
6399
|
+
__decorate([
|
|
6400
|
+
logMethod
|
|
6401
|
+
], KwikIDFormViewComponent.prototype, "dialogShow", null);
|
|
6402
|
+
__decorate([
|
|
6403
|
+
logMethod
|
|
6404
|
+
], KwikIDFormViewComponent.prototype, "dialogHide", null);
|
|
5985
6405
|
__decorate([
|
|
5986
6406
|
logMethod
|
|
5987
6407
|
], KwikIDFormViewComponent.prototype, "patchFieldControlValue", null);
|
|
@@ -5997,6 +6417,12 @@ __decorate([
|
|
|
5997
6417
|
__decorate([
|
|
5998
6418
|
logMethod
|
|
5999
6419
|
], KwikIDFormViewComponent.prototype, "getFormGroupRawValues", null);
|
|
6420
|
+
__decorate([
|
|
6421
|
+
logMethod
|
|
6422
|
+
], KwikIDFormViewComponent.prototype, "showPreview", null);
|
|
6423
|
+
__decorate([
|
|
6424
|
+
logMethod
|
|
6425
|
+
], KwikIDFormViewComponent.prototype, "showPopupForm", null);
|
|
6000
6426
|
__decorate([
|
|
6001
6427
|
logMethod
|
|
6002
6428
|
], KwikIDFormViewComponent.prototype, "takeActionOnFieldGroup", null);
|
|
@@ -6011,13 +6437,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
6011
6437
|
styleUrls: ["./form-view.component.scss"],
|
|
6012
6438
|
providers: [KwikIDFormViewService]
|
|
6013
6439
|
}]
|
|
6014
|
-
}], ctorParameters: function () { return [{ type: i4$1.TuiPushService, decorators: [{
|
|
6440
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: KwikIDFormViewService }, { type: i4$1.TuiPushService, decorators: [{
|
|
6015
6441
|
type: Inject,
|
|
6016
6442
|
args: [TuiPushService]
|
|
6017
|
-
}] }, { type: i3.TuiAlertService, decorators: [{
|
|
6443
|
+
}] }, { type: i3$1.TuiAlertService, decorators: [{
|
|
6018
6444
|
type: Inject,
|
|
6019
6445
|
args: [TuiAlertService]
|
|
6020
|
-
}] }, { type:
|
|
6446
|
+
}] }, { type: i5.TuiPreviewDialogService, decorators: [{
|
|
6447
|
+
type: Inject,
|
|
6448
|
+
args: [TuiPreviewDialogService]
|
|
6449
|
+
}] }, { type: i3$1.TuiDialogService, decorators: [{
|
|
6450
|
+
type: Inject,
|
|
6451
|
+
args: [TuiDialogService]
|
|
6452
|
+
}] }]; }, propDecorators: { preview: [{
|
|
6453
|
+
type: ViewChild,
|
|
6454
|
+
args: ["preview"]
|
|
6455
|
+
}], formConfig: [{
|
|
6021
6456
|
type: Input
|
|
6022
6457
|
}], formData: [{
|
|
6023
6458
|
type: Input
|
|
@@ -6025,13 +6460,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
6025
6460
|
type: Input
|
|
6026
6461
|
}], allFormsData: [{
|
|
6027
6462
|
type: Input
|
|
6463
|
+
}], popupFormCallback: [{
|
|
6464
|
+
type: Input
|
|
6465
|
+
}], onClickGoBack: [{
|
|
6466
|
+
type: Output
|
|
6028
6467
|
}], onClickViewForms: [{
|
|
6029
6468
|
type: Output
|
|
6030
6469
|
}], onClickSaveForm: [{
|
|
6031
6470
|
type: Output
|
|
6032
6471
|
}], onClickApiCall: [{
|
|
6033
6472
|
type: Output
|
|
6034
|
-
}],
|
|
6473
|
+
}], onActionShowPopupForm: [{
|
|
6474
|
+
type: Output
|
|
6475
|
+
}], ngOnInit: [], ngAfterViewInit: [], ngOnChanges: [], initFormConfig: [], setFormFieldsFromFormConfig: [], setFormFieldGroupsFromFormConfig: [], setFormDataFromAllFormsData: [], handleConnectedElementFieldGroupActions: [], handleConnectedElementFieldGroup: [], handleConnectedElementFieldActions: [], handleConnectedElementFields: [], handleConnectedElements: [], handleGetKeyValue: [], handleOnClickResetFormFields: [], handleFieldApiCall: [], handleTaskApiCall: [], handleApiCall: [], handleOnClickApiCall: [], handleOnClickGoBack: [], handleOnClickViewForms: [], handleOnClickSaveForm: [], toggleErrorNotification: [], fieldHide: [], fieldGroupHide: [], fieldShow: [], fieldGroupShow: [], fieldDisable: [], fieldGroupDisable: [], fieldEnable: [], fieldGroupEnable: [], fieldReset: [], fieldErrorShow: [], fieldErrorHide: [], fieldMessageShow: [], fieldMessageHide: [], setValue: [], setFieldDefaultValue: [], setDropdownOptions: [], fieldMultipleApiCalls: [], fieldMultipleApiCallsEnd: [], taskApiCall: [], taskMultipleApiCalls: [], taskMultipleApiCallsEnd: [], dialogShow: [], dialogHide: [], patchFieldControlValue: [], patchFormGroup: [], isFieldValid: [], isFieldEnabled: [], getFormGroupRawValues: [], showPreview: [], showPopupForm: [], takeActionOnFieldGroup: [], takeAction: [] } });
|
|
6035
6476
|
|
|
6036
6477
|
/**
|
|
6037
6478
|
* Generated class for the SafeHtmlPipe pipe.
|
|
@@ -6188,11 +6629,17 @@ class KwikIDFormsListComponent {
|
|
|
6188
6629
|
}
|
|
6189
6630
|
}
|
|
6190
6631
|
handleOnSubmitForms(e) {
|
|
6632
|
+
/**
|
|
6633
|
+
* POST ACTIONS
|
|
6634
|
+
* 1. API Calls.
|
|
6635
|
+
* 2. Preview of all filled data.
|
|
6636
|
+
* 3. URL Redirection or new opening of URL in external tab.
|
|
6637
|
+
*/
|
|
6191
6638
|
this.onClickSubmitForms.emit(e);
|
|
6192
6639
|
}
|
|
6193
6640
|
}
|
|
6194
6641
|
/** @nocollapse */ KwikIDFormsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6195
|
-
/** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: { showFormFields: "showFormFields", userConfig: "userConfig", stepConfig: "stepConfig", activeFormConfig: "activeFormConfig", formsList: "formsList", formsListCompleted: "formsListCompleted", isMobileView: "isMobileView" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", onClickHideFormsList: "onClickHideFormsList", onClickSubmitForms: "onClickSubmitForms" }, usesOnChanges: true, ngImport: i0, template: "<div\n id=\"sidebar-container\"\n *ngIf=\"!loading\"\n>\n <div id=\"sidebar\">\n <div ngClass=\"kwikid-form-header\">\n <div id=\"uf-header\">\n <div id=\"uf-header-logo-container\">\n <img\n id=\"uf-header-logo\"\n src=\"{{ this.userConfig.theme.clientLogo }}\"\n [ngClass]=\"'large-icon'\"\n />\n </div>\n </div>\n <hr />\n </div>\n <div id=\"uf-progress\">\n <div id=\"uf-progress-steps\">\n {{ this.formsListCompleted.length }} / {{ this.formsListLength }} Steps\n Completed\n </div>\n <kwikui-progress-segmented\n [max]=\"this.formsListLength\"\n size=\"m\"\n [value]=\"this.formsListCompleted.length\"\n ></kwikui-progress-segmented>\n </div>\n <div id=\"uf-sections-container\">\n <ng-container *ngFor=\"let form of formsList; let i = index\">\n <ng-container [ngSwitch]=\"form.type\">\n <!-- HTML Content -->\n <ng-container *ngSwitchCase=\"'html'\">\n <div [innerHtml]=\"form.props.htmlContent | safeHtml\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'form'\">\n <div\n [class]=\"'uf-section-item'\"\n [class.completed]=\"form.status === 'completed' && !form.disabled\"\n [class.edit]=\"form.status === 'editable' && !form.disabled\"\n [class.locked]=\"form.status === 'locked' && form.disabled\"\n [class.active]=\"\n activeFormConfig !== undefined &&\n form.key === activeFormConfig.key\n \"\n (click)=\"\n form.status === 'locked' && form.disabled\n ? undefined\n : handleOnClickSetActiveForm(form.key)\n \"\n >\n <div class=\"uf-form-section-card-title\">\n {{ form.props.title }} <span *ngIf=\"form?.required\"\n >*</span\n >\n </div>\n <div class=\"uf-form-section-card-status\">\n <div\n *ngIf=\"form.status === 'completed' && !form.disabled\"\n class=\"uf-form-section-card-status-img completed\"\n >\n <tui-svg src=\"tuiIconCheckLarge\"></tui-svg>\n </div>\n <div\n *ngIf=\"form.status !== 'completed' && !form.disabled\"\n class=\"uf-form-section-card-status-img edit\"\n >\n <tui-svg src=\"tuiIconEdit\"></tui-svg>\n </div>\n <div\n *ngIf=\"form.status !== 'completed' && form.disabled\"\n class=\"uf-form-section-card-status-img locked\"\n >\n <tui-svg src=\"tuiIconLock\"></tui-svg>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n <div id=\"submit-sidebar-btn-container\">\n <kwikui-button\n *ngIf=\"\n !stepConfig.props.formListProperties.footer.submitFormButton.hidden\n \"\n [disabled]=\"false\"\n id=\"\"\n label=\"{{\n stepConfig.props.formListProperties.footer.submitFormButton.label\n }}\"\n [showLoader]=\"false\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"primary\"\n icon=\"\"\n iconRight=\"\"\n [shape]=\"null\"\n size=\"m\"\n styles=\"width: 100%\"\n (onClick)=\"handleOnSubmitForms($event)\"\n ></kwikui-button>\n </div>\n </div>\n</div>\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}#sidebar-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}#sidebar{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch}.uf-section-item{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-content:center;padding:1rem;grid-gap:1rem;gap:1rem;cursor:pointer;box-shadow:0 1px 3px -1px var(--tui-base-05);border-radius:.5rem;background-color:var(--tui-base-02);position:relative}.uf-section-item:hover{box-shadow:0 1px 3px -1px var(--tui-base-08)}#submit-sidebar-btn-container{width:100%;bottom:0px;z-index:1;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;gap:1rem}#submit-sidebar-btn-container *{flex-grow:1}#uf-sections-container{display:flex;flex-direction:column;height:100%;grid-row-gap:20px;row-gap:20px;padding:1rem;overflow-y:auto}.uf-form-section-card{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:10px;column-gap:10px;border:none;border-radius:8px;background-color:#e9e9e9;height:-moz-fit-content;height:fit-content;min-height:60px;padding:10px 15px;width:100%;max-width:350px;margin:0 auto}.uf-section-item.locked{-webkit-user-select:none;user-select:none;cursor:not-allowed}.uf-form-section-card .uf-form-section-card-title{font-size:1.2em;text-align:left;line-height:1.25em}.uf-form-section-card .uf-form-section-card-status{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.uf-form-section-card .uf-form-section-card-status .uf-form-section-card-status-img{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;border-radius:100%;color:#fff;font-weight:bold}.uf-form-section-card-status-img.completed{background-color:var(--tui-success-fill);padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-status-img.edit{background-color:var(--tui-error-fill);padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-status-img.locked{background-color:var(--tui-neutral-fill);padding:.25rem;border-radius:50%;color:#fff}#uf-progress{display:flex;padding:1rem;flex-direction:column;align-content:center;justify-content:center;align-items:stretch;grid-gap:.5rem;gap:.5rem}#uf-progress-steps{font-size:1em;text-align:right;color:#3d3d3d}.uf-form-section-card-title{font-size:1em;font-weight:bold;color:#000}@media screen and (max-width: 600px){#sidebar-container{max-width:unset}}.kwikid-form-header{height:70px;z-index:6}.kwikid-form-header hr{width:calc(100% - 1rem);margin-left:auto;margin-right:auto}#uf-header{display:flex;flex-direction:row;align-content:center;align-items:center;justify-content:flex-start;grid-column-gap:10px;column-gap:10px;padding:10px 20px;width:100%;max-width:calc(400px + 50vw + 2rem);margin:0 auto;height:70px;z-index:1}#uf-header #uf-header-goback-container{display:none}#uf-header #uf-header-goback-container:hover{border-radius:50%;background-color:#d3d3d3}#uf-header #uf-header-goback-container #uf-header-goback{width:100%;height:auto}#uf-header #uf-header-logo-container{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}#uf-header #uf-header-logo-container #uf-header-logo.small-icon{width:100%;height:50px}#uf-header #uf-header-logo-container #uf-header-logo.large-icon{width:100%;height:50px}#uf-header #uf-header-title-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;grid-row-gap:4px;row-gap:4px}#uf-header #uf-header-title-container #uf-header-title{font-size:1.4em;color:#121212}#uf-header #uf-header-title-container #uf-header-subtitle{font-size:1.2em;color:#121212}\n"], components: [{ type: i1.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["id", "value", "max", "size", "colors"] }, { type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type:
|
|
6642
|
+
/** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: { showFormFields: "showFormFields", userConfig: "userConfig", stepConfig: "stepConfig", activeFormConfig: "activeFormConfig", formsList: "formsList", formsListCompleted: "formsListCompleted", isMobileView: "isMobileView" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", onClickHideFormsList: "onClickHideFormsList", onClickSubmitForms: "onClickSubmitForms" }, usesOnChanges: true, ngImport: i0, template: "<div\n id=\"sidebar-container\"\n *ngIf=\"!loading\"\n>\n <div id=\"sidebar\">\n <div ngClass=\"kwikid-form-header\">\n <div id=\"uf-header\">\n <div id=\"uf-header-logo-container\">\n <img\n id=\"uf-header-logo\"\n src=\"{{ this.userConfig.theme.clientLogo }}\"\n [ngClass]=\"'large-icon'\"\n />\n </div>\n </div>\n <hr />\n </div>\n <div id=\"uf-progress\">\n <div id=\"uf-progress-steps\">\n {{ this.formsListCompleted.length }} / {{ this.formsListLength }} Steps\n Completed\n </div>\n <kwikui-progress-segmented\n [max]=\"this.formsListLength\"\n size=\"m\"\n [value]=\"this.formsListCompleted.length\"\n ></kwikui-progress-segmented>\n </div>\n <div id=\"uf-sections-container\">\n <ng-container *ngFor=\"let form of formsList; let i = index\">\n <ng-container [ngSwitch]=\"form.type\">\n <!-- HTML Content -->\n <ng-container *ngSwitchCase=\"'html'\">\n <div [innerHtml]=\"form.props.htmlContent | safeHtml\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"'form'\">\n <div\n [class]=\"'uf-section-item'\"\n [class.completed]=\"form.status === 'completed' && !form.disabled\"\n [class.edit]=\"form.status === 'editable' && !form.disabled\"\n [class.locked]=\"form.status === 'locked' && form.disabled\"\n [class.active]=\"\n activeFormConfig !== undefined &&\n form.key === activeFormConfig.key\n \"\n (click)=\"\n form.status === 'locked' && form.disabled\n ? undefined\n : handleOnClickSetActiveForm(form.key)\n \"\n >\n <div class=\"uf-form-section-card-title\">\n {{ form.props.title }} <span *ngIf=\"form?.required\"\n >*</span\n >\n </div>\n <div class=\"uf-form-section-card-status\">\n <div\n *ngIf=\"form.status === 'completed' && !form.disabled\"\n class=\"uf-form-section-card-status-img completed\"\n >\n <tui-svg src=\"tuiIconCheckLarge\"></tui-svg>\n </div>\n <div\n *ngIf=\"form.status !== 'completed' && !form.disabled\"\n class=\"uf-form-section-card-status-img edit\"\n >\n <tui-svg src=\"tuiIconEdit\"></tui-svg>\n </div>\n <div\n *ngIf=\"form.status !== 'completed' && form.disabled\"\n class=\"uf-form-section-card-status-img locked\"\n >\n <tui-svg src=\"tuiIconLock\"></tui-svg>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n <div id=\"submit-sidebar-btn-container\">\n <kwikui-button\n *ngIf=\"\n !stepConfig.props.formListProperties.footer.submitFormButton.hidden\n \"\n [disabled]=\"false\"\n id=\"\"\n label=\"{{\n stepConfig.props.formListProperties.footer.submitFormButton.label\n }}\"\n [showLoader]=\"false\"\n styles=\"\"\n class=\"\"\n type=\"button\"\n appearance=\"primary\"\n icon=\"\"\n iconRight=\"\"\n [shape]=\"null\"\n size=\"m\"\n styles=\"width: 100%\"\n (onClick)=\"handleOnSubmitForms($event)\"\n ></kwikui-button>\n </div>\n </div>\n</div>\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}#sidebar-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}#sidebar{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch}.uf-section-item{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-content:center;padding:1rem;grid-gap:1rem;gap:1rem;cursor:pointer;box-shadow:0 1px 3px -1px var(--tui-base-05);border-radius:.5rem;background-color:var(--tui-base-02);position:relative}.uf-section-item:hover{box-shadow:0 1px 3px -1px var(--tui-base-08)}#submit-sidebar-btn-container{width:100%;bottom:0px;z-index:1;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;gap:1rem}#submit-sidebar-btn-container *{flex-grow:1}#uf-sections-container{display:flex;flex-direction:column;height:100%;grid-row-gap:20px;row-gap:20px;padding:1rem;overflow-y:auto}.uf-form-section-card{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:10px;column-gap:10px;border:none;border-radius:8px;background-color:#e9e9e9;height:-moz-fit-content;height:fit-content;min-height:60px;padding:10px 15px;width:100%;max-width:350px;margin:0 auto}.uf-section-item.locked{-webkit-user-select:none;user-select:none;cursor:not-allowed}.uf-form-section-card .uf-form-section-card-title{font-size:1.2em;text-align:left;line-height:1.25em}.uf-form-section-card .uf-form-section-card-status{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.uf-form-section-card .uf-form-section-card-status .uf-form-section-card-status-img{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;border-radius:100%;color:#fff;font-weight:bold}.uf-form-section-card-status-img.completed{background-color:var(--tui-success-fill);padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-status-img.edit{background-color:var(--tui-error-fill);padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-status-img.locked{background-color:var(--tui-neutral-fill);padding:.25rem;border-radius:50%;color:#fff}#uf-progress{display:flex;padding:1rem;flex-direction:column;align-content:center;justify-content:center;align-items:stretch;grid-gap:.5rem;gap:.5rem}#uf-progress-steps{font-size:1em;text-align:right;color:#3d3d3d}.uf-form-section-card-title{font-size:1em;font-weight:bold;color:#000}@media screen and (max-width: 600px){#sidebar-container{max-width:unset}}.kwikid-form-header{height:70px;z-index:6}.kwikid-form-header hr{width:calc(100% - 1rem);margin-left:auto;margin-right:auto}#uf-header{display:flex;flex-direction:row;align-content:center;align-items:center;justify-content:flex-start;grid-column-gap:10px;column-gap:10px;padding:10px 20px;width:100%;max-width:calc(400px + 50vw + 2rem);margin:0 auto;height:70px;z-index:1}#uf-header #uf-header-goback-container{display:none}#uf-header #uf-header-goback-container:hover{border-radius:50%;background-color:#d3d3d3}#uf-header #uf-header-goback-container #uf-header-goback{width:100%;height:auto}#uf-header #uf-header-logo-container{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}#uf-header #uf-header-logo-container #uf-header-logo.small-icon{width:100%;height:50px}#uf-header #uf-header-logo-container #uf-header-logo.large-icon{width:100%;height:50px}#uf-header #uf-header-title-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;grid-row-gap:4px;row-gap:4px}#uf-header #uf-header-title-container #uf-header-title{font-size:1.4em;color:#121212}#uf-header #uf-header-title-container #uf-header-subtitle{font-size:1.2em;color:#121212}\n"], components: [{ type: i1.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["id", "value", "max", "size", "colors"] }, { type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "safeHtml": SafeHtmlPipe } });
|
|
6196
6643
|
__decorate([
|
|
6197
6644
|
logMethod
|
|
6198
6645
|
], KwikIDFormsListComponent.prototype, "ngOnChanges", null);
|
|
@@ -6262,10 +6709,12 @@ const getFormConfigByKey = (forms, key) => {
|
|
|
6262
6709
|
};
|
|
6263
6710
|
|
|
6264
6711
|
class KwikIDFormsRendererComponent {
|
|
6265
|
-
constructor(hostElement, cdr) {
|
|
6712
|
+
constructor(hostElement, cdr, previewDialogService) {
|
|
6266
6713
|
this.hostElement = hostElement;
|
|
6267
6714
|
this.cdr = cdr;
|
|
6715
|
+
this.previewDialogService = previewDialogService;
|
|
6268
6716
|
this.formsData = {};
|
|
6717
|
+
this.activeFormData = {};
|
|
6269
6718
|
this.apiCallResponse = {};
|
|
6270
6719
|
this.onClickSubmit = new EventEmitter();
|
|
6271
6720
|
this.getFormData = new EventEmitter();
|
|
@@ -6273,9 +6722,26 @@ class KwikIDFormsRendererComponent {
|
|
|
6273
6722
|
this.loading = false;
|
|
6274
6723
|
this.loader = false;
|
|
6275
6724
|
this.showErrorNotification = false;
|
|
6725
|
+
this.activePopupFormData = {};
|
|
6726
|
+
this.popupFormCallback = undefined;
|
|
6276
6727
|
this.allFormsData = {};
|
|
6728
|
+
this.allFormsSubmitted = false;
|
|
6277
6729
|
this.formsList = [];
|
|
6278
6730
|
this.isMobileView = false;
|
|
6731
|
+
this.previewProperties = {
|
|
6732
|
+
html: {
|
|
6733
|
+
before: "",
|
|
6734
|
+
after: ""
|
|
6735
|
+
},
|
|
6736
|
+
iframe: {
|
|
6737
|
+
src: "",
|
|
6738
|
+
title: ""
|
|
6739
|
+
},
|
|
6740
|
+
popupFormKey: "",
|
|
6741
|
+
title: "",
|
|
6742
|
+
unavailable: false
|
|
6743
|
+
};
|
|
6744
|
+
this.popupFormConfig = undefined;
|
|
6279
6745
|
// display forms and list conditionally
|
|
6280
6746
|
this.showForm = false;
|
|
6281
6747
|
this.showFormFields = true;
|
|
@@ -6563,6 +7029,28 @@ class KwikIDFormsRendererComponent {
|
|
|
6563
7029
|
this.activeFormConfig = this.findActiveFormConfig(this.formsList);
|
|
6564
7030
|
});
|
|
6565
7031
|
}
|
|
7032
|
+
showPreview(previewProperties) {
|
|
7033
|
+
this.previewProperties = mergeObjects(this.previewProperties, previewProperties);
|
|
7034
|
+
if (isEmptyValue(this.previewProperties.iframe.src) &&
|
|
7035
|
+
isEmptyValue(this.previewProperties.html.before) &&
|
|
7036
|
+
isEmptyValue(this.previewProperties.html.after) &&
|
|
7037
|
+
isEmptyValue(this.previewProperties.popupFormKey)) {
|
|
7038
|
+
this.previewProperties.unavailable = true;
|
|
7039
|
+
}
|
|
7040
|
+
else {
|
|
7041
|
+
if (isNotEmptyValue(this.previewProperties.popupFormKey)) {
|
|
7042
|
+
if (checkObjectKeyExists(this.activeFormConfig, "popupForms")) {
|
|
7043
|
+
this.popupFormConfig =
|
|
7044
|
+
this.activeFormConfig.popupForms[this.previewProperties.popupFormKey];
|
|
7045
|
+
}
|
|
7046
|
+
else {
|
|
7047
|
+
this.popupFormConfig = undefined;
|
|
7048
|
+
}
|
|
7049
|
+
}
|
|
7050
|
+
this.previewProperties.unavailable = false;
|
|
7051
|
+
}
|
|
7052
|
+
this.previewDialogService.open(this.preview || "").subscribe();
|
|
7053
|
+
}
|
|
6566
7054
|
formHide(formKey) {
|
|
6567
7055
|
let form = getFormConfigByKey(this.formsList, formKey);
|
|
6568
7056
|
form = setValueToObjectPath(form, "hidden", true);
|
|
@@ -6684,15 +7172,49 @@ class KwikIDFormsRendererComponent {
|
|
|
6684
7172
|
this.loader = true;
|
|
6685
7173
|
this.onClickApiCall.emit(e);
|
|
6686
7174
|
}
|
|
7175
|
+
handleOnActionShowPopupForm(e) {
|
|
7176
|
+
if (checkObjectKeyExists(e, "activeFormData") &&
|
|
7177
|
+
checkObjectKeyExists(e, "popupFormConfig")) {
|
|
7178
|
+
const popupFormData = { [this.activeFormConfig.key]: e.activeFormData };
|
|
7179
|
+
this.activePopupFormData = mergeObjects(this.allFormsData, popupFormData);
|
|
7180
|
+
this.popupFormConfig = e.popupFormConfig;
|
|
7181
|
+
this.previewDialogRef = this.previewDialogService
|
|
7182
|
+
.open(this.preview || "")
|
|
7183
|
+
.subscribe({
|
|
7184
|
+
next: (data) => {
|
|
7185
|
+
this.popupFormCallback = {
|
|
7186
|
+
popupFormData: data["data"],
|
|
7187
|
+
popupFormConfig: data["formConfig"],
|
|
7188
|
+
activeFormConfig: this.activeFormConfig
|
|
7189
|
+
};
|
|
7190
|
+
this.activePopupFormData = {};
|
|
7191
|
+
this.popupFormConfig = undefined;
|
|
7192
|
+
this.previewDialogRef.complete();
|
|
7193
|
+
},
|
|
7194
|
+
complete: () => {
|
|
7195
|
+
console.info("Dialog closed");
|
|
7196
|
+
}
|
|
7197
|
+
});
|
|
7198
|
+
}
|
|
7199
|
+
}
|
|
6687
7200
|
/**
|
|
6688
7201
|
* FormView - Listens to event of getting the Active Form's Data when the Form is Saved and emits (read as passes) the same event to the library consumer.
|
|
6689
7202
|
* @param e any
|
|
6690
7203
|
*/
|
|
6691
|
-
handleOnClickSaveForm(e) {
|
|
6692
|
-
|
|
6693
|
-
|
|
6694
|
-
|
|
6695
|
-
|
|
7204
|
+
handleOnClickSaveForm(e, eventType) {
|
|
7205
|
+
switch (eventType) {
|
|
7206
|
+
case "FORM":
|
|
7207
|
+
this.loader = true;
|
|
7208
|
+
this.getFormData.emit({
|
|
7209
|
+
[this.activeFormConfig.key]: e["data"]
|
|
7210
|
+
});
|
|
7211
|
+
break;
|
|
7212
|
+
case "POPUP_FORM":
|
|
7213
|
+
this.previewDialogRef.next(e);
|
|
7214
|
+
break;
|
|
7215
|
+
default:
|
|
7216
|
+
break;
|
|
7217
|
+
}
|
|
6696
7218
|
}
|
|
6697
7219
|
/**
|
|
6698
7220
|
* FormView - Listens to event of showing the Forms List in Mobile View.
|
|
@@ -6703,6 +7225,70 @@ class KwikIDFormsRendererComponent {
|
|
|
6703
7225
|
this.showForm = false;
|
|
6704
7226
|
this.showFormFields = false;
|
|
6705
7227
|
}
|
|
7228
|
+
/**
|
|
7229
|
+
* Handles the event of going back to the previous form directly or by tabbing, without showing the form list in mobile view.
|
|
7230
|
+
*
|
|
7231
|
+
* Prerequisite: The current form can never be locked; it should either be in an editable or completed state.
|
|
7232
|
+
*
|
|
7233
|
+
* Logic:
|
|
7234
|
+
* 1. For DIRECT mode, find the config of the previous form starting from the first form, such that the previous form is editable and its sequence number is one less than the current active form's sequence number.
|
|
7235
|
+
* If no previous form is found or all forms have been completed, show the form list.
|
|
7236
|
+
* 2. For TABBED mode, find the config of the previous form in the list, such that the previous form's sequence number is less than the current active form's sequence number and the form is editable.
|
|
7237
|
+
* If no previous form is found, show the form list.
|
|
7238
|
+
*
|
|
7239
|
+
* @param {Object} e - The event object containing the mode to go back in.
|
|
7240
|
+
* @param {string} e.mode - The mode of going back: DIRECT or TABBED.
|
|
7241
|
+
* @returns {void}
|
|
7242
|
+
*/
|
|
7243
|
+
handleOnClickGoBack(e) {
|
|
7244
|
+
switch (e.mode) {
|
|
7245
|
+
case EFormViewGoBackMode.DIRECT:
|
|
7246
|
+
if (this.activeFormConfig.sequenceNo === 1) {
|
|
7247
|
+
this.showFormSections = true;
|
|
7248
|
+
this.showForm = false;
|
|
7249
|
+
this.showFormFields = false;
|
|
7250
|
+
return;
|
|
7251
|
+
}
|
|
7252
|
+
else {
|
|
7253
|
+
if (this.checkIfFormsStatusCompleted(this.formsList, this.formsListCompleted)) {
|
|
7254
|
+
this.showFormSections = true;
|
|
7255
|
+
this.showForm = false;
|
|
7256
|
+
this.showFormFields = false;
|
|
7257
|
+
return;
|
|
7258
|
+
}
|
|
7259
|
+
else {
|
|
7260
|
+
const previousFormConfigDirect = this.formsList.find((form) => {
|
|
7261
|
+
if (form.sequenceNo === this.activeFormConfig.sequenceNo - 1 &&
|
|
7262
|
+
form.status !== EFormsListStatus.LOCKED) {
|
|
7263
|
+
return form;
|
|
7264
|
+
}
|
|
7265
|
+
});
|
|
7266
|
+
if (previousFormConfigDirect) {
|
|
7267
|
+
this.handleOnClickSetActiveForm(previousFormConfigDirect.key);
|
|
7268
|
+
}
|
|
7269
|
+
}
|
|
7270
|
+
}
|
|
7271
|
+
break;
|
|
7272
|
+
case EFormViewGoBackMode.TABBED:
|
|
7273
|
+
const previousFormConfig = this.formsList.find((form) => {
|
|
7274
|
+
if (form.sequenceNo < this.activeFormConfig.sequenceNo &&
|
|
7275
|
+
form.status === EFormsListStatus.EDITABLE) {
|
|
7276
|
+
return form;
|
|
7277
|
+
}
|
|
7278
|
+
});
|
|
7279
|
+
if (previousFormConfig) {
|
|
7280
|
+
this.handleOnClickSetActiveForm(previousFormConfig.key);
|
|
7281
|
+
}
|
|
7282
|
+
else {
|
|
7283
|
+
this.showFormSections = true;
|
|
7284
|
+
this.showForm = false;
|
|
7285
|
+
this.showFormFields = false;
|
|
7286
|
+
}
|
|
7287
|
+
break;
|
|
7288
|
+
default:
|
|
7289
|
+
break;
|
|
7290
|
+
}
|
|
7291
|
+
}
|
|
6706
7292
|
/**
|
|
6707
7293
|
* FormList - Listens to event of submitting all the forms and moving out of the library and also handles the validation of all the forms.
|
|
6708
7294
|
* @param e any
|
|
@@ -6749,8 +7335,8 @@ class KwikIDFormsRendererComponent {
|
|
|
6749
7335
|
}
|
|
6750
7336
|
}
|
|
6751
7337
|
}
|
|
6752
|
-
/** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormsRendererComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6753
|
-
/** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { stepConfig: "stepConfig", userConfig: "userConfig", formsData: "formsData", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div ngClass=\"kwikid-renderer\">\n <div\n ngClass=\"kwikid-layout-container\"\n *ngIf=\"!loading\"\n >\n <div\n ngClass=\"kwikid-sections-container\"\n *ngIf=\"showFormSections\"\n class=\"active\"\n [class.active]=\"showFormSections\"\n [class.mobile]=\"isMobileView\"\n >\n <kwikid-forms-list\n [showFormFields]=\"this.showFormFields\"\n [activeFormConfig]=\"this.activeFormConfig\"\n [userConfig]=\"this.userConfig\"\n [formsList]=\"this.formsList\"\n [stepConfig]=\"this.stepConfig\"\n [formsListCompleted]=\"this.formsListCompleted\"\n [isMobileView]=\"this.isMobileView\"\n (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\n (onClickSubmitForms)=\"this.handleOnClickSubmitForms($event)\"\n ></kwikid-forms-list>\n </div>\n <div\n ngClass=\"kwikid-forms-container\"\n *ngIf=\"\n this.showForm &&\n this.showFormFields &&\n this.activeFormConfig !== undefined\n \"\n [class.active]=\"showFormFields\"\n [class.mobile]=\"isMobileView\"\n [@panelInOut]\n >\n <kwikid-form-view\n [formConfig]=\"this.activeFormConfig\"\n [allFormsData]=\"this.allFormsData\"\n [isMobileView]=\"this.isMobileView\"\n (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\n (onClickSaveForm)=\"this.handleOnClickSaveForm($event)\"\n ></kwikid-form-view>\n </div>\n </div>\n</div>\n<div\n ngClass=\"kwikid-forms-renderer-loader\"\n *ngIf=\"loader\"\n>\n <span class=\"loader\"></span>\n</div>\n<tui-push\n id=\"error-notification\"\n *tuiPush=\"showErrorNotification\"\n heading=\"Please complete the required Forms!\"\n type=\"Error\"\n (close)=\"toggleErrorNotification(false)\"\n>\n <tui-svg\n src=\"tuiIconXCircle\"\n style=\"color: #fff !important\"\n >\n </tui-svg>\n</tui-push>\n", styles: [":host{position:relative;height:100%}.kwikid-root{width:100%;height:100%}.kwikid-renderer{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%}.kwikid-layout-container{display:flex;flex-direction:row;padding:0 1rem;height:100%;justify-content:center;align-items:stretch;background:var(--tui-secondary-active);position:relative}.kwikid-sections-container{display:block;width:100%;max-width:400px;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);margin:auto 1rem auto 0;box-shadow:0 0 12px -8px var(--tui-secondary)}.kwikid-sections-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}.kwikid-forms-container{display:block;width:100%;max-width:50%;margin:auto 0;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);box-shadow:0 0 12px -8px var(--tui-primary)}.kwikid-forms-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}@media screen and (max-width: 600px){.kwikid-layout-container{padding:0;background:transparent}.kwikid-sections-container{position:absolute;max-width:100%;bottom:-10000px;left:-10000px;opacity:0;padding:0;visibility:hidden}.kwikid-sections-container.active{visibility:visible}.kwikid-sections-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container{display:none;max-width:100%;height:100%;padding:0;border-radius:0;box-shadow:none}.kwikid-forms-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container.active{display:block}}.kwikid-forms-renderer-loader{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;z-index:100}.kwikid-forms-renderer-loader .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:#fff #fff transparent;box-sizing:border-box;animation:rotation 1s linear infinite}.kwikid-forms-renderer-loader .loader:after{content:\"\";box-sizing:border-box;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:3px solid;border-color:transparent var(--tui-primary) var(--tui-primary);width:24px;height:24px;border-radius:50%;animation:rotationBack .5s linear infinite;transform-origin:center center}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.kwikid-forms-renderer-loader .t-loader{display:none!important}#error-notification{background-color:var(--tui-error-fill);color:#fff!important}#error-notification .t-top{color:#fff!important}#error-notification .t-close{color:#fff!important}\n"], components: [{ type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["showFormFields", "userConfig", "stepConfig", "activeFormConfig", "formsList", "formsListCompleted", "isMobileView"], outputs: ["onClickSetActiveForm", "onClickHideFormsList", "onClickSubmitForms"] }, { type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["formConfig", "formData", "isMobileView", "allFormsData"], outputs: ["onClickViewForms", "onClickSaveForm", "onClickApiCall"] }, { type: i4$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type:
|
|
7338
|
+
/** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormsRendererComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: TuiPreviewDialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7339
|
+
/** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { stepConfig: "stepConfig", userConfig: "userConfig", formsData: "formsData", activeFormData: "activeFormData", apiCallResponse: "apiCallResponse" }, outputs: { onClickSubmit: "onClickSubmit", getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div ngClass=\"kwikid-renderer\">\n <div\n ngClass=\"kwikid-layout-container\"\n *ngIf=\"!loading\"\n >\n <div\n ngClass=\"kwikid-sections-container\"\n *ngIf=\"showFormSections\"\n class=\"active\"\n [class.active]=\"showFormSections\"\n [class.mobile]=\"isMobileView\"\n >\n <kwikid-forms-list\n [showFormFields]=\"this.showFormFields\"\n [activeFormConfig]=\"this.activeFormConfig\"\n [userConfig]=\"this.userConfig\"\n [formsList]=\"this.formsList\"\n [stepConfig]=\"this.stepConfig\"\n [formsListCompleted]=\"this.formsListCompleted\"\n [isMobileView]=\"this.isMobileView\"\n (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\n (onClickSubmitForms)=\"this.handleOnClickSubmitForms($event)\"\n ></kwikid-forms-list>\n </div>\n <div\n ngClass=\"kwikid-forms-container\"\n *ngIf=\"\n this.showForm &&\n this.showFormFields &&\n this.activeFormConfig !== undefined\n \"\n [class.active]=\"showFormFields\"\n [class.mobile]=\"isMobileView\"\n [@panelInOut]\n >\n <kwikid-form-view\n [formConfig]=\"this.activeFormConfig\"\n [allFormsData]=\"this.allFormsData\"\n [isMobileView]=\"this.isMobileView\"\n [popupFormCallback]=\"this.popupFormCallback\"\n (onActionShowPopupForm)=\"this.handleOnActionShowPopupForm($event)\"\n (onClickGoBack)=\"this.handleOnClickGoBack($event)\"\n (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\n (onClickSaveForm)=\"this.handleOnClickSaveForm($event, 'FORM')\"\n ></kwikid-form-view>\n </div>\n </div>\n</div>\n<div\n ngClass=\"kwikid-forms-renderer-loader\"\n *ngIf=\"loader\"\n>\n <span class=\"loader\"></span>\n</div>\n<tui-push\n id=\"error-notification\"\n *tuiPush=\"showErrorNotification\"\n heading=\"Please complete the required Forms!\"\n type=\"Error\"\n (close)=\"toggleErrorNotification(false)\"\n>\n <tui-svg\n src=\"tuiIconXCircle\"\n style=\"color: #fff !important\"\n >\n </tui-svg>\n</tui-push>\n<ng-template\n #preview\n let-preview\n>\n <tui-preview\n [rotatable]=\"false\"\n [zoomable]=\"false\"\n class=\"preview-container\"\n *ngIf=\"popupFormConfig\"\n >\n <tui-preview-title *ngIf=\"previewProperties.title !== ''\">{{\n previewProperties.title\n }}</tui-preview-title>\n\n <div class=\"kwikid-form-view-popup-container\">\n <kwikid-form-view\n [formData]=\"activePopupFormData\"\n [formConfig]=\"popupFormConfig\"\n [allFormsData]=\"allFormsData\"\n [isMobileView]=\"this.isMobileView\"\n (onClickSaveForm)=\"this.handleOnClickSaveForm($event, 'POPUP_FORM')\"\n ></kwikid-form-view>\n </div>\n\n <button\n tuiIconButton\n tuiPreviewAction\n icon=\"tuiIconCloseLarge\"\n title=\"Close\"\n type=\"button\"\n (click)=\"preview.complete()\"\n ></button>\n </tui-preview>\n</ng-template>\n", styles: [":host{position:relative;height:100%}.kwikid-root{width:100%;height:100%}.kwikid-renderer{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%}.kwikid-layout-container{display:flex;flex-direction:row;padding:0 1rem;height:100%;justify-content:center;align-items:stretch;background:var(--tui-secondary-active);position:relative}.kwikid-sections-container{display:block;width:100%;max-width:400px;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);margin:auto 1rem auto 0;box-shadow:0 0 12px -8px var(--tui-secondary)}.kwikid-sections-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}.kwikid-forms-container{display:block;width:100%;max-width:50%;margin:auto 0;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);box-shadow:0 0 12px -8px var(--tui-primary)}.kwikid-forms-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s;height:100%;border-radius:0;max-width:unset}@media screen and (max-width: 600px){.kwikid-layout-container{padding:0;background:transparent}.kwikid-sections-container{position:absolute;max-width:100%;bottom:-10000px;left:-10000px;opacity:0;padding:0;visibility:hidden}.kwikid-sections-container.active{visibility:visible}.kwikid-sections-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container{display:none;max-width:100%;height:100%;padding:0;border-radius:0;box-shadow:none}.kwikid-forms-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container.active{display:block}}.kwikid-forms-renderer-loader{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;z-index:100}.kwikid-forms-renderer-loader .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:#fff #fff transparent;box-sizing:border-box;animation:rotation 1s linear infinite}.kwikid-forms-renderer-loader .loader:after{content:\"\";box-sizing:border-box;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:3px solid;border-color:transparent var(--tui-primary) var(--tui-primary);width:24px;height:24px;border-radius:50%;animation:rotationBack .5s linear infinite;transform-origin:center center}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.kwikid-forms-renderer-loader .t-loader{display:none!important}#error-notification{background-color:var(--tui-error-fill);color:#fff!important}#error-notification .t-top{color:#fff!important}#error-notification .t-close{color:#fff!important}.preview-container{display:flex!important;flex-grow:1!important;flex-direction:column!important;align-content:center!important;justify-content:space-between!important;align-items:stretch!important}.preview-container .preview-iframe{width:100vw;height:100vh}.preview-container .preview-unavailable{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;grid-gap:1.4rem;gap:1.4rem;color:#fff;font-size:1.2rem;top:50%;left:50%;width:100%;height:100vh}.kwikid-form-view-popup-container{width:100%;height:100vh;border-radius:1rem;background:var(--tui-base-01);padding:1rem}\n"], components: [{ type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["showFormFields", "userConfig", "stepConfig", "activeFormConfig", "formsList", "formsListCompleted", "isMobileView"], outputs: ["onClickSetActiveForm", "onClickHideFormsList", "onClickSubmitForms"] }, { type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["formConfig", "formData", "isMobileView", "allFormsData", "popupFormCallback"], outputs: ["onClickGoBack", "onClickViewForms", "onClickSaveForm", "onClickApiCall", "onActionShowPopupForm"] }, { type: i4$1.TuiPushComponent, selector: "tui-push", inputs: ["heading", "type", "timestamp"], outputs: ["close"] }, { type: i3$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i5.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { type: i5.TuiPreviewTitleComponent, selector: "tui-preview-title" }, { type: i3$1.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.TuiPushAlertDirective, selector: "[tuiPush]", inputs: ["tuiPush"] }, { type: i4$1.TuiPushDirective, selector: "tui-push" }, { type: i5.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }], animations: [
|
|
6754
7340
|
trigger("panelInOut", [
|
|
6755
7341
|
transition(":enter", [
|
|
6756
7342
|
style({ transform: "translateY(100%)" }),
|
|
@@ -6788,6 +7374,9 @@ __decorate([
|
|
|
6788
7374
|
__decorate([
|
|
6789
7375
|
logMethod
|
|
6790
7376
|
], KwikIDFormsRendererComponent.prototype, "updateFormsList", null);
|
|
7377
|
+
__decorate([
|
|
7378
|
+
logMethod
|
|
7379
|
+
], KwikIDFormsRendererComponent.prototype, "showPreview", null);
|
|
6791
7380
|
__decorate([
|
|
6792
7381
|
logMethod
|
|
6793
7382
|
], KwikIDFormsRendererComponent.prototype, "formHide", null);
|
|
@@ -6800,6 +7389,15 @@ __decorate([
|
|
|
6800
7389
|
__decorate([
|
|
6801
7390
|
logMethod
|
|
6802
7391
|
], KwikIDFormsRendererComponent.prototype, "handleOnClickSetActiveForm", null);
|
|
7392
|
+
__decorate([
|
|
7393
|
+
logMethod
|
|
7394
|
+
], KwikIDFormsRendererComponent.prototype, "handleOnActionShowPopupForm", null);
|
|
7395
|
+
__decorate([
|
|
7396
|
+
logMethod
|
|
7397
|
+
], KwikIDFormsRendererComponent.prototype, "handleOnClickSaveForm", null);
|
|
7398
|
+
__decorate([
|
|
7399
|
+
logMethod
|
|
7400
|
+
], KwikIDFormsRendererComponent.prototype, "handleOnClickGoBack", null);
|
|
6803
7401
|
__decorate([
|
|
6804
7402
|
logMethod
|
|
6805
7403
|
], KwikIDFormsRendererComponent.prototype, "handleOnClickSubmitForms", null);
|
|
@@ -6821,15 +7419,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
6821
7419
|
])
|
|
6822
7420
|
]
|
|
6823
7421
|
}]
|
|
6824
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }
|
|
7422
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i5.TuiPreviewDialogService, decorators: [{
|
|
7423
|
+
type: Inject,
|
|
7424
|
+
args: [TuiPreviewDialogService]
|
|
7425
|
+
}] }]; }, propDecorators: { windowResizeWatcher: [{
|
|
6825
7426
|
type: HostListener,
|
|
6826
7427
|
args: ["window:resize", ["$event"]]
|
|
7428
|
+
}], preview: [{
|
|
7429
|
+
type: ViewChild,
|
|
7430
|
+
args: ["preview"]
|
|
6827
7431
|
}], stepConfig: [{
|
|
6828
7432
|
type: Input
|
|
6829
7433
|
}], userConfig: [{
|
|
6830
7434
|
type: Input
|
|
6831
7435
|
}], formsData: [{
|
|
6832
7436
|
type: Input
|
|
7437
|
+
}], activeFormData: [{
|
|
7438
|
+
type: Input
|
|
6833
7439
|
}], apiCallResponse: [{
|
|
6834
7440
|
type: Input
|
|
6835
7441
|
}], onClickSubmit: [{
|
|
@@ -6838,7 +7444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
6838
7444
|
type: Output
|
|
6839
7445
|
}], onClickApiCall: [{
|
|
6840
7446
|
type: Output
|
|
6841
|
-
}], convertFormListConfig: [], assignSequenceNoToForm: [], findCompletedFormsList: [], markFormInFormsListAsCompleted: [], markFormInFormsListAsDisabled: [], filterAllFormsData: [], checkIfFormsStatusCompleted: [], findActiveFormConfig: [], updateFormsList: [], formHide: [], formShow: [], findFormsListLength: [], handleOnClickSetActiveForm: [], handleOnClickSubmitForms: [] } });
|
|
7447
|
+
}], convertFormListConfig: [], assignSequenceNoToForm: [], findCompletedFormsList: [], markFormInFormsListAsCompleted: [], markFormInFormsListAsDisabled: [], filterAllFormsData: [], checkIfFormsStatusCompleted: [], findActiveFormConfig: [], updateFormsList: [], showPreview: [], formHide: [], formShow: [], findFormsListLength: [], handleOnClickSetActiveForm: [], handleOnActionShowPopupForm: [], handleOnClickSaveForm: [], handleOnClickGoBack: [], handleOnClickSubmitForms: [] } });
|
|
6842
7448
|
|
|
6843
7449
|
class BasicDateConfigEditor {
|
|
6844
7450
|
constructor() {
|
|
@@ -6993,12 +7599,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
6993
7599
|
class KwikIDFormViewModule {
|
|
6994
7600
|
}
|
|
6995
7601
|
/** @nocollapse */ KwikIDFormViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
6996
|
-
/** @nocollapse */ KwikIDFormViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormViewModule, declarations: [KwikIDFormViewComponent, SafeHtmlPipe$1], imports: [CommonModule,
|
|
7602
|
+
/** @nocollapse */ KwikIDFormViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormViewModule, declarations: [KwikIDFormViewComponent, SafeHtmlPipe$1, SafeUrlPipe], imports: [CommonModule,
|
|
6997
7603
|
FormsModule,
|
|
6998
7604
|
ReactiveFormsModule,
|
|
6999
7605
|
TuiLabelModule,
|
|
7000
7606
|
TuiPushModule,
|
|
7001
7607
|
TuiSvgModule,
|
|
7608
|
+
TuiPreviewModule,
|
|
7609
|
+
TuiButtonModule,
|
|
7610
|
+
TuiPreviewActionModule,
|
|
7611
|
+
TuiDialogModule,
|
|
7002
7612
|
KwikUIModule], exports: [KwikIDFormViewComponent] });
|
|
7003
7613
|
/** @nocollapse */ KwikIDFormViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormViewModule, imports: [[
|
|
7004
7614
|
CommonModule,
|
|
@@ -7007,12 +7617,16 @@ class KwikIDFormViewModule {
|
|
|
7007
7617
|
TuiLabelModule,
|
|
7008
7618
|
TuiPushModule,
|
|
7009
7619
|
TuiSvgModule,
|
|
7620
|
+
TuiPreviewModule,
|
|
7621
|
+
TuiButtonModule,
|
|
7622
|
+
TuiPreviewActionModule,
|
|
7623
|
+
TuiDialogModule,
|
|
7010
7624
|
KwikUIModule
|
|
7011
7625
|
]] });
|
|
7012
7626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormViewModule, decorators: [{
|
|
7013
7627
|
type: NgModule,
|
|
7014
7628
|
args: [{
|
|
7015
|
-
declarations: [KwikIDFormViewComponent, SafeHtmlPipe$1],
|
|
7629
|
+
declarations: [KwikIDFormViewComponent, SafeHtmlPipe$1, SafeUrlPipe],
|
|
7016
7630
|
imports: [
|
|
7017
7631
|
CommonModule,
|
|
7018
7632
|
FormsModule,
|
|
@@ -7020,6 +7634,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
7020
7634
|
TuiLabelModule,
|
|
7021
7635
|
TuiPushModule,
|
|
7022
7636
|
TuiSvgModule,
|
|
7637
|
+
TuiPreviewModule,
|
|
7638
|
+
TuiButtonModule,
|
|
7639
|
+
TuiPreviewActionModule,
|
|
7640
|
+
TuiDialogModule,
|
|
7023
7641
|
KwikUIModule
|
|
7024
7642
|
],
|
|
7025
7643
|
exports: [KwikIDFormViewComponent]
|
|
@@ -7066,6 +7684,10 @@ class KwikIDFormRendererModule {
|
|
|
7066
7684
|
KwikUIModule,
|
|
7067
7685
|
TuiLoaderModule,
|
|
7068
7686
|
TuiPushModule,
|
|
7687
|
+
TuiPreviewActionModule,
|
|
7688
|
+
TuiPreviewModule,
|
|
7689
|
+
TuiButtonModule,
|
|
7690
|
+
TuiPreviewActionModule,
|
|
7069
7691
|
TuiSvgModule], exports: [KwikIDFormsRendererComponent] });
|
|
7070
7692
|
/** @nocollapse */ KwikIDFormRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormRendererModule, providers: [], imports: [[
|
|
7071
7693
|
CommonModule,
|
|
@@ -7075,6 +7697,10 @@ class KwikIDFormRendererModule {
|
|
|
7075
7697
|
KwikUIModule,
|
|
7076
7698
|
TuiLoaderModule,
|
|
7077
7699
|
TuiPushModule,
|
|
7700
|
+
TuiPreviewActionModule,
|
|
7701
|
+
TuiPreviewModule,
|
|
7702
|
+
TuiButtonModule,
|
|
7703
|
+
TuiPreviewActionModule,
|
|
7078
7704
|
TuiSvgModule
|
|
7079
7705
|
]] });
|
|
7080
7706
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDFormRendererModule, decorators: [{
|
|
@@ -7089,6 +7715,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
7089
7715
|
KwikUIModule,
|
|
7090
7716
|
TuiLoaderModule,
|
|
7091
7717
|
TuiPushModule,
|
|
7718
|
+
TuiPreviewActionModule,
|
|
7719
|
+
TuiPreviewModule,
|
|
7720
|
+
TuiButtonModule,
|
|
7721
|
+
TuiPreviewActionModule,
|
|
7092
7722
|
TuiSvgModule
|
|
7093
7723
|
],
|
|
7094
7724
|
providers: [],
|