ngx-render-material-forms 1.2.1 → 1.2.2

package/fesm2020/ngx-render-material-forms.js

@@ -1,5 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, Input, ViewChild, ViewContainerRef, ViewChildren, EventEmitter, Output, forwardRef, Directive, Optional, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -35,7 +37,7 @@ import * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5$1 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
-import * as i1$1 from '@angular/material/dialog';
+import * as i1$2 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import Webform from 'formiojs/Webform.js';
 import FormioComponent$2 from 'formiojs/components/_classes/component/Component.js';
@@ -79,12 +81,14 @@ import RadioComponent from 'formiojs/components/radio/Radio.js';
 import SelectBoxesComponent from 'formiojs/components/selectboxes/SelectBoxes.js';
 import SelectComponent from 'formiojs/components/select/Select.js';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import * as i7 from 'ngx-mat-select-search';
+import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import * as CryptoJS from 'crypto-js';
+import { isNullOrUndefined } from 'util';
+import * as i8 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import WellComponent from 'formiojs/components/well/Well.js';
 import DataGridComponent from 'formiojs/components/datagrid/DataGrid.js';
-import * as i8 from '@angular/cdk/drag-drop';
+import * as i8$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import EditGridComponent from 'formiojs/components/editgrid/EditGrid.js';
 import Components$2 from 'formiojs/components/Components';
@@ -94,7 +98,7 @@ import Wizard from 'formiojs/Wizard';
 import Displays from 'formiojs/displays/Displays';
 import * as i3$2 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
-import * as i1$2 from '@formio/angular';
+import * as i1$3 from '@formio/angular';
 import { FormioBaseComponent } from '@formio/angular';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -2518,11 +2522,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
 SelectBoxesComponent.MaterialComponent = MaterialSelectBoxesComponent;
 
 class MaterialSelectComponent extends MaterialComponent {
-    constructor() {
-        super(...arguments);
+    constructor(element, ref, http) {
+        super(element, ref);
+        this.element = element;
+        this.ref = ref;
+        this.http = http;
         this.websiteMultiCtrl = new FormControl();
         this.websiteMultiFilterCtrl = new FormControl();
         this._onDestroy = new Subject();
+        // Variables to track pagination
+        this.pageNumber = 1;
+        this.pageSize = 3;
+        this.totalPages = 3;
+        this.searchQuery = '';
+        this.holy = '';
+        this.grail = '';
+        this.productsloadingFlag = false;
+        this.searchFlag = true;
+        this.holy = CryptoJS.enc.Base64.parse('8F/2+T2NXqUBQERR12R4sw==');
+        this.grail = CryptoJS.enc.Base64.parse('yE0CgQbYzK5wqeoKTVzhOQ==');
+    }
+    onSearchInputChange(value) {
+        if (value === '') {
+            this.onClearAll();
+        }
+    }
+    onChange(event) {
+        if (event) {
+            this.searchFlag = false;
+        }
+    }
+    scrumble(msg) {
+        if (!isNullOrUndefined(msg)) {
+            var conceal = this.getcampaign(msg, this.holy, this.grail);
+            var sha256 = CryptoJS.HmacSHA256(CryptoJS.enc.Base64.stringify(this.grail) + conceal.toString(), CryptoJS.enc.Base64.stringify(this.holy));
+            var hashInBase64 = CryptoJS.enc.Base64.stringify(sha256);
+            let keyValue = {
+                "value": conceal.toString(),
+                "mac": hashInBase64
+            };
+            var result = JSON.stringify(keyValue);
+            var jumbled = CryptoJS.enc.Utf8.parse(result);
+            return CryptoJS.enc.Base64.stringify(jumbled);
+        }
+    }
+    getcampaign(data, holy, grail) {
+        return CryptoJS.AES.encrypt(data.toString(), holy, {
+            blockSize: 128,
+            iv: grail,
+            mode: CryptoJS.mode.CBC,
+            padding: CryptoJS.pad.Pkcs7
+        });
+    }
+    // Method to handle when the mat-select is opened
+    onMatSelectOpen(select) {
+        this.selectElem = select;
+        this.registerPanelScrollEvent();
+    }
+    registerPanelScrollEvent() {
+        if (this.selectElem) {
+            this.selectElem.panel.nativeElement.addEventListener('scroll', this.onScroll.bind(this));
+        }
+    }
+    onScroll(event) {
+        if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
+            const scrollElement = event.target;
+            const trackHeight = scrollElement.scrollHeight - scrollElement.offsetHeight;
+            if (this.productsloadingFlag && Math.floor(scrollElement.scrollTop / trackHeight * 100) > 50) {
+                this.productsloadingFlag = false;
+                if (this.pageNumber < this.totalPages && this.totalPages > 1) {
+                    this.pageNumber = this.pageNumber + 1;
+                    this.loadData(this.pageNumber, this.pageSize, this.searchQuery);
+                }
+            }
+        }
+    }
+    // Function to get value by key from the array
+    getValueByKey(data, key) {
+        if (!data || data.length === 0) {
+            return null; // Return null if data is empty or undefined
+        }
+        const item = data.find(kv => kv.key.toLowerCase() === key.toLowerCase());
+        return item ? item.value : null;
+    }
+    loadData(pageNumber, pageSize, searchQuery) {
+        const paramsData = JSON.parse(localStorage.getItem('productPicker'));
+        const includeDescription = this.getValueByKey(paramsData, 'includeDescription');
+        const vendorId = this.getValueByKey(paramsData, 'vendorId');
+        const onlyActive = this.getValueByKey(paramsData, 'onlyActive');
+        var currentUser = JSON.parse(localStorage.getItem('currentUser'));
+        var accessToken = currentUser.Tokens.AccessToken;
+        const headers = new HttpHeaders({
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + accessToken
+        });
+        const envendorId = this.scrumble(vendorId);
+        const enpageNumber = this.scrumble(pageNumber);
+        const enpageSize = this.scrumble(pageSize);
+        const ensearchQuery = this.scrumble(searchQuery);
+        const enactive = this.scrumble(onlyActive);
+        const endescription = this.scrumble(includeDescription);
+        const baseUrlMapping = {
+            'localhost': 'http://localhost:58504',
+            'lincoln.vartopia.com': 'https://lincoln-api.vartopia.com',
+            'stage.vartopia.com': 'https://stage-api.vartopia.com',
+            'my.vartopia.com': 'https://reagan-api.vartopia.com',
+            'jackson.vartopia.com': 'https://jackson-api.vartopia.com'
+        };
+        // Get the current hostname
+        const hostname = window.location.hostname;
+        const baseApiUrl = baseUrlMapping[hostname] || null;
+        this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetVendorProducts?vendorId=${envendorId}&pageNumber=${enpageNumber}&pageSize=${enpageSize}&search=${ensearchQuery}&onlyActive=${enactive}&includeDescription=${endescription}`, { headers }).subscribe(response => {
+            if (response && response.code === 200) {
+                this.totalPages = response.data.dataSource;
+                const transformedData = this.transformResponseData(response.data.dataSource);
+                // Process the transformed data
+                this.filteredOptions = Promise.resolve(transformedData.map(item => ({
+                    label: item.label,
+                    value: item.value,
+                    date: item.date
+                })));
+                setTimeout(() => {
+                    this.productsloadingFlag = true;
+                }, 1000);
+            }
+        });
+    }
+    // Utility function to transform response data
+    transformResponseData(data) {
+        // Check if data is not null, undefined, and is an array with elements
+        if (data && Array.isArray(data) && data.length > 0) {
+            return data.map(item => ({
+                label: item.text,
+                value: item.value,
+                date: item.date
+            }));
+        }
+        else {
+            // Return an empty array if data is null, undefined, or empty
+            return [];
+        }
     }
     filterWebsiteMulti() {
         if (!this.selectOptions) {
@@ -2545,13 +2684,42 @@ class MaterialSelectComponent extends MaterialComponent {
         super.setInstance(instance);
         this.instance.triggerUpdate();
     }
+    onClearAll() {
+        if (this.searchFlag) {
+            this.loadData(1, 20, '');
+        }
+    }
+    ngAfterViewInit() {
+        this.selectElem.openedChange.subscribe((isOpen) => {
+            if (isOpen) {
+                this.searchFlag = false;
+                this.loadData(1, 20, '');
+            }
+            else {
+                this.searchFlag = false;
+            }
+        });
+    }
     ngOnInit() {
         /*new logic */
-        this.websiteMultiFilterCtrl.valueChanges
-            .pipe(takeUntil(this._onDestroy))
-            .subscribe(() => {
-            this.filterWebsiteMulti();
-        });
+        if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
+            this.websiteMultiFilterCtrl.valueChanges
+                .pipe(debounceTime(1000), // Time in milliseconds between key events
+            distinctUntilChanged(), takeUntil(this._onDestroy))
+                .subscribe((searchQuery) => {
+                if (searchQuery != '') {
+                    this.searchFlag = true;
+                    this.loadData(1, 20, searchQuery);
+                }
+            });
+        }
+        else {
+            this.websiteMultiFilterCtrl.valueChanges
+                .pipe(takeUntil(this._onDestroy))
+                .subscribe(() => {
+                this.filterWebsiteMulti();
+            });
+        }
         /*End */
         this.selectOptions = new Promise((resolve) => {
             this.selectOptionsResolve = resolve;
@@ -2565,8 +2733,8 @@ class MaterialSelectComponent extends MaterialComponent {
         return _.isEqual(o1, o2);
     }
 }
-MaterialSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectComponent, selector: "mat-formio-select", viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+MaterialSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectComponent, selector: "mat-formio-select", viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }, { propertyName: "selectElem", first: true, predicate: ["productSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
     <ng-template #componentTemplate let-hasLabel>
       <mat-form-field fxFill>
@@ -2582,12 +2750,14 @@ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
                 [multiple]="instance.component.multiple"
                 [formControl]="control"
                 [placeholder]="instance.component.placeholder"
-                (selectionChange)="onChange()"
+                (selectionChange)="onChange($event)"
                 [compareWith]="compareObjects"
+                #productSelect
+                (openedChange)="onMatSelectOpen($event ? selectElem : null)"
         >
 
         <mat-option>
-        <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
+        <ngx-mat-select-search (ngModelChange)="onSearchInputChange($event)" placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
       </mat-option>
 
       <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value" class="virtual-full-view">
@@ -2605,7 +2775,7 @@ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
       </mat-form-field>
     </ng-template>
-  `, isInline: true, styles: [".example-viewport{height:200px}.product-picker{overflow-x:hidden}.virtual-full-view{height:auto!important;white-space:normal!important;line-height:1.4!important;text-overflow:initial!important;min-height:48px!important;overflow:visible!important;overflow:initial!important;padding-top:10px!important;padding-bottom:10px!important}::ng-deep .product-picker .cdk-virtual-scroll-content-wrapper{width:100%!important}.virtual-full-view .mat-pseudo-checkbox{align-self:top!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i7.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+  `, isInline: true, styles: [".example-viewport{height:200px}.product-picker{overflow-x:hidden}.virtual-full-view{height:auto!important;white-space:normal!important;line-height:1.4!important;text-overflow:initial!important;min-height:48px!important;overflow:visible!important;overflow:initial!important;padding-top:10px!important;padding-bottom:10px!important}::ng-deep .product-picker .cdk-virtual-scroll-content-wrapper{width:100%!important}.virtual-full-view .mat-pseudo-checkbox{align-self:top!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i8.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-formio-select', template: `
@@ -2624,12 +2794,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                 [multiple]="instance.component.multiple"
                 [formControl]="control"
                 [placeholder]="instance.component.placeholder"
-                (selectionChange)="onChange()"
+                (selectionChange)="onChange($event)"
                 [compareWith]="compareObjects"
+                #productSelect
+                (openedChange)="onMatSelectOpen($event ? selectElem : null)"
         >
 
         <mat-option>
-        <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
+        <ngx-mat-select-search (ngModelChange)="onSearchInputChange($event)" placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
       </mat-option>
 
       <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value" class="virtual-full-view">
@@ -2648,9 +2820,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
       </mat-form-field>
     </ng-template>
   `, styles: [".example-viewport{height:200px}.product-picker{overflow-x:hidden}.virtual-full-view{height:auto!important;white-space:normal!important;line-height:1.4!important;text-overflow:initial!important;min-height:48px!important;overflow:visible!important;overflow:initial!important;padding-top:10px!important;padding-bottom:10px!important}::ng-deep .product-picker .cdk-virtual-scroll-content-wrapper{width:100%!important}.virtual-full-view .mat-pseudo-checkbox{align-self:top!important}\n"] }]
-        }], propDecorators: { multiSelect: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }]; }, propDecorators: { multiSelect: [{
                 type: ViewChild,
                 args: ['multiSelect', { static: true }]
+            }], selectElem: [{
+                type: ViewChild,
+                args: ['productSelect']
             }] } });
 SelectComponent.MaterialComponent = MaterialSelectComponent;
 // Make sure we detect changes when new items make their way into the select dropdown.
@@ -2703,12 +2878,12 @@ class ConfirmationDialogComponent {
     ngOnInit() {
     }
 }
-ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ConfirmationDialogComponent, selector: "NgxMat-confirmation-dialog", ngImport: i0, template: "<div class=\"dialog-container\">\n<h2 mat-dialog-title class=\"data-grid-alert\">Alert</h2>\n<mat-dialog-content class=\"data-grid-popup-body\">\n    Are you sure you want to delete this Product?\n</mat-dialog-content>\n<mat-dialog-actions class=\"data-grid-popup-footer\">\n    <button mat-button [mat-dialog-close]=\"true\" color=\"warn\">Delete</button>\n    <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\n</mat-dialog-actions>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
+ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ConfirmationDialogComponent, selector: "NgxMat-confirmation-dialog", ngImport: i0, template: "<div class=\"dialog-container\">\n<h2 mat-dialog-title class=\"data-grid-alert\">Alert</h2>\n<mat-dialog-content class=\"data-grid-popup-body\">\n    Are you sure you want to delete this Product?\n</mat-dialog-content>\n<mat-dialog-actions class=\"data-grid-popup-footer\">\n    <button mat-button [mat-dialog-close]=\"true\" color=\"warn\">Delete</button>\n    <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\n</mat-dialog-actions>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'NgxMat-confirmation-dialog', template: "<div class=\"dialog-container\">\n<h2 mat-dialog-title class=\"data-grid-alert\">Alert</h2>\n<mat-dialog-content class=\"data-grid-popup-body\">\n    Are you sure you want to delete this Product?\n</mat-dialog-content>\n<mat-dialog-actions class=\"data-grid-popup-footer\">\n    <button mat-button [mat-dialog-close]=\"true\" color=\"warn\">Delete</button>\n    <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\n</mat-dialog-actions>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }]; } });
 
 class MaterialDataGridComponent extends MaterialNestedComponent {
     constructor(element, ref, dialog) {
@@ -2797,7 +2972,7 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
         super.setValue(value);
     }
 }
-MaterialDataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDataGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+MaterialDataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDataGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
 MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDataGridComponent, selector: "mat-formio-datagrid", usesInheritance: true, ngImport: i0, template: `
     <mat-formio-form-field [instance]="instance"
                            [componentTemplate]="componentTemplate"
@@ -2869,7 +3044,7 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
         <span [instance]="instance" matFormioLabel></span>
       </mat-card-title>
     </ng-template>
-  `, isInline: true, styles: [".datagrid-row{height:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
+  `, isInline: true, styles: [".datagrid-row{height:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i8$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDataGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-formio-datagrid', template: `
@@ -2944,7 +3119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
       </mat-card-title>
     </ng-template>
   `, styles: [".datagrid-row{height:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.MatDialog }]; } });
 DataGridComponent.MaterialComponent = MaterialDataGridComponent;
 
 var EditRowState;
@@ -3486,7 +3661,7 @@ class FormioComponent extends FormioBaseComponent {
         return form.instance;
     }
 }
-FormioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormioComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$2.FormioAppConfig, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+FormioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormioComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$3.FormioAppConfig, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 FormioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: FormioComponent, selector: "mat-formio", viewQueries: [{ propertyName: "formioViewContainer", first: true, predicate: ["formio"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
     <mat-spinner *ngIf="isLoading"></mat-spinner>
     <div *ngIf="!this.options?.disableAlerts">
@@ -3517,7 +3692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
       <ng-template #formio></ng-template>
     </div>
   `, styles: [".alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:.5rem;border:1px solid transparent;border-radius:.25rem}::ng-deep mat-card{box-sizing:border-box;-moz-box-sizing:border-box}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$2.FormioAppConfig, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$3.FormioAppConfig, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { formioViewContainer: [{
                 type: ViewChild,
@@ -3597,7 +3772,8 @@ NgxRenderMaterialFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.
         DragDropModule,
         ScrollingModule,
         NgxMatSelectSearchModule,
-        MatDialogModule], exports: [NgxRenderMaterialFormsComponent,
+        MatDialogModule,
+        HttpClientModule], exports: [NgxRenderMaterialFormsComponent,
         FormioComponent,
         MatInputModule,
         MatFormFieldModule,
@@ -3621,7 +3797,8 @@ NgxRenderMaterialFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.
         FlexLayoutModule,
         ScrollingModule,
         NgxMatSelectSearchModule,
-        MatDialogModule] });
+        MatDialogModule,
+        HttpClientModule] });
 NgxRenderMaterialFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxRenderMaterialFormsModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -3649,7 +3826,8 @@ NgxRenderMaterialFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
         DragDropModule,
         ScrollingModule,
         NgxMatSelectSearchModule,
-        MatDialogModule, MatInputModule,
+        MatDialogModule,
+        HttpClientModule, MatInputModule,
         MatFormFieldModule,
         MatCheckboxModule,
         MatRadioModule,
@@ -3671,7 +3849,8 @@ NgxRenderMaterialFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
         FlexLayoutModule,
         ScrollingModule,
         NgxMatSelectSearchModule,
-        MatDialogModule] });
+        MatDialogModule,
+        HttpClientModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NgxRenderMaterialFormsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -3746,7 +3925,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                         DragDropModule,
                         ScrollingModule,
                         NgxMatSelectSearchModule,
-                        MatDialogModule
+                        MatDialogModule,
+                        HttpClientModule
                     ],
                     exports: [
                         NgxRenderMaterialFormsComponent,
@@ -3773,7 +3953,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                         FlexLayoutModule,
                         ScrollingModule,
                         NgxMatSelectSearchModule,
-                        MatDialogModule
+                        MatDialogModule,
+                        HttpClientModule
                     ],
                     entryComponents: [
                         MaterialButtonComponent,