ngx-render-material-forms 1.5.8 → 1.6.0

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

@@ -80,11 +80,11 @@ import SurveyComponent from 'formiojs/components/survey/Survey.js';
 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 { BehaviorSubject, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import * as CryptoJS from 'crypto-js';
 import { isNullOrUndefined } from 'util';
-import * as i9 from 'ngx-mat-select-search';
+import * as i10 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';
@@ -2543,12 +2543,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
         }] });
 SelectBoxesComponent.MaterialComponent = MaterialSelectBoxesComponent;
 
+class CommonService {
+    constructor(http) {
+        this.http = http;
+        this.dropdownItemsSubject = new BehaviorSubject([]);
+        this.dropdownItems$ = this.dropdownItemsSubject.asObservable();
+        this.setFlag = new BehaviorSubject(false); // Initialize with false
+        this.dropdownflag$ = this.setFlag.asObservable(); // Observable that emits the boolean value
+        this.paramsData = JSON.parse(localStorage.getItem('productPickerParams'));
+        this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
+    }
+    getBaseApiUrl() {
+        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;
+        return baseUrlMapping[hostname] || null;
+    }
+    /* Intialization of api path and queryparams */
+    initializeApiPath(getUrl, queryParams) {
+        if (queryParams?.length) {
+            const changeToObject = this.convertToObject(queryParams);
+            if (Object.keys(changeToObject).length) {
+                const queryString = this.convertToQueryString(changeToObject);
+                const baseApiUrl = this.getBaseApiUrl();
+                var apiUrl = `${baseApiUrl}/api/` + getUrl;
+                apiUrl += '?' + queryString;
+                return this.http.get(apiUrl);
+            }
+        }
+    }
+    /* Functon for convert array to object */
+    convertToObject(queryParams) {
+        if (queryParams.length) {
+            var obj = {};
+            queryParams.forEach(function (item) {
+                obj[item.key] = item.value;
+            });
+            return obj;
+        }
+    }
+    /* Append key and value to query string */
+    convertToQueryString(queryParams) {
+        const queryString = Object.keys(queryParams)
+            .map(key => {
+            if (queryParams[key] !== '' && queryParams[key] !== null) {
+                return encodeURIComponent(key) + '=' + encodeURIComponent(queryParams[key]);
+            }
+            else {
+                if (queryParams.hasOwnProperty('search')) {
+                    return encodeURIComponent(key) + '=' + encodeURIComponent(queryParams[key]);
+                }
+            }
+        })
+            .join('&');
+        return queryString;
+    }
+    listProductCategory() {
+        const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
+        const baseApiUrl = this.getBaseApiUrl();
+        return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetProductsCategory?vendorId=${vendorId}`);
+    }
+    // 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;
+    }
+    /* Function for verify numbers and numbers with comma seperated values */
+    onlyNumbers(str) {
+        if (str) {
+            return /^[0-9.,]+$/.test(str);
+        }
+    }
+    /* End */
+    setDropdownItems(items) {
+        this.dropdownItemsSubject.next(items);
+    }
+    getDropdownItems() {
+        return this.dropdownItemsSubject.getValue();
+    }
+    setDropDownFlag(flag) {
+        this.setFlag.next(flag);
+    }
+    getDropDownFlag() {
+        return this.setFlag.getValue();
+    }
+}
+CommonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CommonService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+CommonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CommonService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CommonService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+
 class MaterialSelectComponent extends MaterialComponent {
-    constructor(element, ref, http) {
+    constructor(element, ref, http, commonService) {
         super(element, ref);
         this.element = element;
         this.ref = ref;
         this.http = http;
+        this.commonService = commonService;
         this.websiteMultiCtrl = new FormControl();
         this.websiteMultiFilterCtrl = new FormControl();
         this._onDestroy = new Subject();
@@ -2563,10 +2667,15 @@ class MaterialSelectComponent extends MaterialComponent {
         this.searching = false;
         this.productList = [];
         this.selectedValue = '';
-        this.searchItem = "";
         // Variable to hold the reference to the current panel element
         this.currentPanelElement = null;
         this.openCounter = 1;
+        this.firstDropdownItems = [];
+        this.secondDropdownItems = [];
+        this.storeValue = [];
+        this.storeDependentItems = [];
+        this.executionFlag = false;
+        this.apiCounter = 0;
         this.holy = CryptoJS.enc.Base64.parse('8F/2+T2NXqUBQERR12R4sw==');
         this.grail = CryptoJS.enc.Base64.parse('yE0CgQbYzK5wqeoKTVzhOQ==');
     }
@@ -2578,7 +2687,6 @@ class MaterialSelectComponent extends MaterialComponent {
     clearProducts() {
         if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
             this.onClearAll();
-            this.searchItem = "";
         }
     }
     scrumble(msg) {
@@ -2772,18 +2880,63 @@ class MaterialSelectComponent extends MaterialComponent {
             this.loadData(this.pageNumber, this.pageSize, this.searchQuery);
         }
     }
+    updateSecondDropdown(value) {
+        const apiEndPoint = 'ManageVendors/GetReferenceDataItemsByVendorIdAndDataValue';
+        let finalParams = JSON.parse(localStorage.getItem('cascadingDropdownsParams'));
+        if (Array.isArray(finalParams)) {
+            const index = finalParams.findIndex(param => param.key === 'dataValue');
+            if (index !== -1) {
+                // If the object exists, update its value
+                finalParams[index].value = value;
+            }
+            else {
+                // If the object doesn't exist, add it to the array
+                finalParams.push({ key: 'dataValue', value: value });
+            }
+            this.commonService.initializeApiPath(apiEndPoint, finalParams).subscribe(response => {
+                if (response && response.code === 200) {
+                    this.secondDropdownItems = response.data;
+                    this.commonService.setDropdownItems(this.secondDropdownItems);
+                }
+            });
+        }
+    }
     ngAfterViewInit() {
+        const newProductPickerFlag = this.instance?.component?.attributes;
+        let checkInvokeFromLibrary = this.checkIsAttributeTrue(newProductPickerFlag, "invokeFromLibrary");
+        const firstLevel = (this.getVendorRefList(this.instance) && checkInvokeFromLibrary);
+        if (firstLevel) {
+            this.selectElem.valueChange.subscribe(res => {
+                this.commonService.setDropDownFlag(true);
+                this.updateSecondDropdown(res);
+            });
+        }
+        this.selectElem.openedChange.subscribe(async (isOpen) => {
+            if (isOpen) {
+                if (this.checkVendorRefItems(this.instance) && checkInvokeFromLibrary) {
+                    this.storeDependentItems = [];
+                    this.secondDropdownItems = this.commonService.getDropdownItems();
+                    if (this.secondDropdownItems?.length) {
+                        this.secondDropdownItems.forEach((renderElement, index, array) => {
+                            this.storeDependentItems.push({ label: renderElement['text'], value: this.commonService.onlyNumbers(renderElement['value']) ? renderElement['value'] + ' ' : renderElement['value'] });
+                        });
+                    }
+                    if (!this.commonService.getDropDownFlag()) {
+                        this.storeDependentItems = this.instance.component.data.values;
+                    }
+                    this.filteredOptions = Promise.resolve(this.storeDependentItems);
+                    this.selectOptions = Promise.resolve(this.storeDependentItems);
+                    this.selectOptions.then(result => {
+                        this.filteredOptionsLength = result.length;
+                    });
+                }
+            }
+        });
         if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
             this.selectElem.openedChange.subscribe((isOpen) => {
                 if (isOpen) {
                     this.pageNumber = 1;
                     this.pageSize = 20;
-                    if (this.searchQuery?.length > 0) {
-                        if (this.searchItem?.length > 0) {
-                            this.websiteMultiFilterCtrl.setValue(this.searchItem);
-                            this.ref.detectChanges();
-                        }
-                    }
                     this.searchQuery = '';
                     this.searching = false;
                     //this.loadData(this.pageNumber, this.pageSize, this.searchQuery);
@@ -2792,14 +2945,14 @@ class MaterialSelectComponent extends MaterialComponent {
                 else {
                     this.removePanelScrollEvent();
                     this.searching = false;
-                    // this.selectedValue = this.getValue();
-                    // if (this.selectedValue?.toString().length == 0) {
-                    //   this.productList = [];
-                    //   this.pageNumber = 1;
-                    //   this.pageSize = 20;
-                    //   this.searchQuery = '';
-                    //   this.loadData(this.pageNumber, this.pageSize, this.searchQuery);
-                    // }
+                    this.selectedValue = this.getValue();
+                    if (this.selectedValue?.toString().length == 0) {
+                        this.productList = [];
+                        this.pageNumber = 1;
+                        this.pageSize = 20;
+                        this.searchQuery = '';
+                        this.loadData(this.pageNumber, this.pageSize, this.searchQuery);
+                    }
                 }
             });
         }
@@ -2825,7 +2978,6 @@ class MaterialSelectComponent extends MaterialComponent {
                     this.productList = [];
                     this.searching = true;
                     this.searchQuery = searchQuery;
-                    this.searchItem = searchQuery;
                     this.loadData(this.pageNumber, this.pageSize, searchQuery);
                 }
             });
@@ -2846,6 +2998,20 @@ class MaterialSelectComponent extends MaterialComponent {
         });
         this.filteredOptions = this.selectOptions;
     }
+    onSelectionChange(event, submitData, attributes) {
+    }
+    checkVendorRefItems(instance) {
+        const selectValues = instance.component['selectValues'];
+        const dataUrl = instance.component['data']?.url;
+        const isSelectValuesValid = selectValues != null && selectValues !== '' && selectValues !== undefined;
+        const isDataUrlInvalid = dataUrl == null || dataUrl === '' || dataUrl === undefined;
+        return isSelectValuesValid && isDataUrlInvalid;
+    }
+    getVendorRefList(instance) {
+        const dataUrl = instance.component['data']?.url;
+        const isSelectValuesValid = dataUrl != null && dataUrl !== '' && dataUrl !== undefined;
+        return isSelectValuesValid;
+    }
     isError() {
         if (this.instance.error) {
             this.control.setErrors(this.instance.component.validate);
@@ -2875,8 +3041,12 @@ class MaterialSelectComponent extends MaterialComponent {
     compareObjects(o1, o2) {
         return _.isEqual(o1, o2);
     }
+    checkIsAttributeTrue(newProductPickerFlag, attributeName) {
+        return newProductPickerFlag && Object.keys(newProductPickerFlag).some(key => key.toLocaleLowerCase() === attributeName.toLowerCase() &&
+            newProductPickerFlag[key].toLowerCase() === "true");
+    }
 }
-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.ɵ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 }, { token: CommonService }], 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>
@@ -2917,7 +3087,7 @@ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
           <mat-error *ngIf="isError()" >{{ getErrorMessage() }}</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: "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: i9.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: "directive", type: i9.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { 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: "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: i10.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: "directive", type: i10.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { 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: `
@@ -2961,7 +3131,7 @@ 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"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }]; }, propDecorators: { multiSelect: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: CommonService }]; }, propDecorators: { multiSelect: [{
                 type: ViewChild,
                 args: ['multiSelect', { static: true }]
             }], selectElem: [{