ngx-render-material-forms 1.7.0 → 1.7.2

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, Input, ViewChild, ViewContainerRef, ViewChildren, EventEmitter, Output, forwardRef, Directive, Inject, Optional, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/common/http';
+import * as i1$2 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';
-import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i4$2 from '@angular/material/input';
 import { MAT_INPUT_VALUE_ACCESSOR, MatInputModule } from '@angular/material/input';
 import * as i3$2 from '@angular/material/button';
@@ -27,18 +27,20 @@ import * as i4 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i5$3 from '@angular/material/table';
+import * as i10$1 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i5$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i3$4 from '@angular/material/progress-spinner';
+import * as i11 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 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$2 from '@angular/material/dialog';
+import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i16 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import Webform from 'formiojs/Webform.js';
 import FormioComponent$2 from 'formiojs/components/_classes/component/Component.js';
 import TextFieldComponent from 'formiojs/components/textfield/TextField.js';
@@ -82,7 +84,7 @@ import SelectBoxesComponent from 'formiojs/components/selectboxes/SelectBoxes.js
 import { __awaiter } from 'tslib';
 import SelectComponent from 'formiojs/components/select/Select.js';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, takeUntil, startWith, map } from 'rxjs/operators';
 import * as CryptoJS from 'crypto-js';
 import { isNullOrUndefined } from 'util';
 import * as i10 from 'ngx-mat-select-search';
@@ -91,14 +93,15 @@ import WellComponent from 'formiojs/components/well/Well.js';
 import DataGridComponent from 'formiojs/components/datagrid/DataGrid.js';
 import * as i9 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i15 from '@angular/material/stepper';
+import { MatStepperModule } from '@angular/material/stepper';
 import EditGridComponent from 'formiojs/components/editgrid/EditGrid.js';
 import Components$2 from 'formiojs/components/Components';
 import isString from 'lodash/isString';
 import TableComponent from 'formiojs/components/table/Table.js';
 import Wizard from 'formiojs/Wizard';
 import Displays from 'formiojs/displays/Displays';
-import * as i3$3 from '@angular/material/stepper';
-import { MatStepperModule } from '@angular/material/stepper';
 import * as i1$3 from '@formio/angular';
 import { FormioBaseComponent } from '@formio/angular';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -984,8 +987,11 @@ var AngularButtonsThemes;
 })(AngularButtonsThemes || (AngularButtonsThemes = {}));
 
 class MaterialButtonComponent extends MaterialComponent {
-    constructor() {
-        super(...arguments);
+    constructor(element, ref, dialog) {
+        super(element, ref);
+        this.element = element;
+        this.ref = ref;
+        this.dialog = dialog;
         this.loading = false;
         this.done = false;
         this.error = false;
@@ -1056,12 +1062,12 @@ class MaterialButtonComponent extends MaterialComponent {
         return retVal;
     }
 }
-MaterialButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MaterialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialButtonComponent, selector: "mat-formio-button", usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"instance\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+MaterialButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+MaterialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialButtonComponent, selector: "mat-formio-button", usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-formio-button', template: "<button *ngIf=\"instance\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"] }]
-        }] });
+            args: [{ selector: 'mat-formio-button', template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }]; } });
 ButtonComponent.MaterialComponent = MaterialButtonComponent;
 
 class MaterialTextareaComponent extends MaterialComponent {
@@ -2551,8 +2557,12 @@ class CommonService {
         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.holy = '';
+        this.grail = '';
         this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
+        this.holy = CryptoJS.enc.Base64.parse('8F/2+T2NXqUBQERR12R4sw==');
+        this.grail = CryptoJS.enc.Base64.parse('yE0CgQbYzK5wqeoKTVzhOQ==');
+        this.paramsData = JSON.parse(localStorage.getItem('productPickerParams'));
     }
     getBaseApiUrl() {
         const baseUrlMapping = {
@@ -2566,6 +2576,28 @@ class CommonService {
         const hostname = window.location.hostname;
         return baseUrlMapping[hostname] || null;
     }
+    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
+        });
+    }
     /* Intialization of api path and queryparams */
     initializeApiPath(getUrl, queryParams) {
         if (queryParams === null || queryParams === void 0 ? void 0 : queryParams.length) {
@@ -2589,6 +2621,16 @@ class CommonService {
             return obj;
         }
     }
+    loadProducts(pageNumber, pazeSize, search = '', onlyActive = true, description = false, levelOneId, levelTwoId, levelThreeId, levelFourId) {
+        const baseApiUrl = this.getBaseApiUrl();
+        const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
+        return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetVendorProductsV2?vendorId=${vendorId}&pageNumber=${pageNumber}&pageSize=${pazeSize}&search=${search}&onlyActive=${onlyActive}&includeDescription=${description}&levelOne=${levelOneId}&levelTwo=${levelTwoId}&levelThree=${levelThreeId}&levelFour=${levelFourId}`);
+    }
+    listSubCategory(category) {
+        const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
+        const baseApiUrl = this.getBaseApiUrl();
+        return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetProductsSubCategory?vendorId=${vendorId}&categoryName=${category}`);
+    }
     /* Append key and value to query string */
     convertToQueryString(queryParams) {
         const queryString = Object.keys(queryParams)
@@ -2610,10 +2652,30 @@ class CommonService {
         const baseApiUrl = this.getBaseApiUrl();
         return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetProductsCategory?vendorId=${vendorId}`);
     }
+    productLevelOne() {
+        const baseApiUrl = this.getBaseApiUrl();
+        const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
+        return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetProductLevelOne?vendorId=${vendorId}`);
+    }
+    productLevelTwo(levelOneId) {
+        const baseApiUrl = this.getBaseApiUrl();
+        const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
+        return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetProductLevelTwo?levelOneId=${levelOneId}&vendorId=${vendorId}`);
+    }
+    productLevelThree(levelOneId, levelTwoId) {
+        const baseApiUrl = this.getBaseApiUrl();
+        const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
+        return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetProductLevelThree?levelOneId=${levelOneId}&levelTwoId=${levelTwoId}&vendorId=${vendorId}`);
+    }
+    productLevelFour(levelOneId, levelTwoId, levelThreeId) {
+        const baseApiUrl = this.getBaseApiUrl();
+        const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
+        return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetProductLevelFour?levelOneId=${levelOneId}&levelTwoId=${levelTwoId}&levelThreeId=${levelThreeId}&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
+            return null;
         }
         const item = data.find(kv => kv.key.toLowerCase() === key.toLowerCase());
         return item ? item.value : null;
@@ -2637,19 +2699,20 @@ class CommonService {
     getDropDownFlag() {
         return this.setFlag.getValue();
     }
+    /*Funtion to check if property is matched with given attributes in formBuilder or not */
     checkIsAttributeTrue(newProductPickerFlag, attributeName) {
         return newProductPickerFlag && Object.keys(newProductPickerFlag).some(key => key.toLocaleLowerCase() === attributeName.toLowerCase() &&
             newProductPickerFlag[key].toLowerCase() === "true");
     }
 }
-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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CommonService, deps: [{ token: i1$2.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 }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
 
 class MaterialSelectComponent extends MaterialComponent {
     constructor(element, ref, http, commonService) {
@@ -2890,76 +2953,25 @@ class MaterialSelectComponent extends MaterialComponent {
         }
     }
     updateSecondDropdown(value) {
-        var _a, _b, _c;
-        const paramsData = JSON.parse(localStorage.getItem('cascadingDropdownsParamsone'));
-        const vendorId = this.getValueByKey(paramsData, 'vendorId');
-        const dealId = this.getValueByKey(paramsData, 'dealId');
-        const isEdit = this.getValueByKey(paramsData, 'isEdit');
-        let finalParams;
-        ((_c = (_b = (_a = this.instance) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.length) && this.instance.parent.components.forEach(items => {
-            var _a, _b, _c, _d;
-            if (this.checkVendorRefItems(items)) {
-                const apiEndPoint = (_a = items === null || items === void 0 ? void 0 : items.component) === null || _a === void 0 ? void 0 : _a.selectValues;
-                if (apiEndPoint != '') {
-                    var parameters = [
-                        {
-                            "key": "userId",
-                            "value": JSON.parse(localStorage.getItem('currentUser')).UserId
-                        },
-                        {
-                            "key": "vendorId",
-                            "value": vendorId
-                        },
-                        {
-                            "key": "loginUserId",
-                            "value": JSON.parse(localStorage.getItem('currentUser')).UserId
-                        },
-                        {
-                            "key": "country",
-                            "value": typeof value === 'string' ? value.trim() : ''
-                        },
-                        {
-                            "key": "dataValue",
-                            "value": typeof value === 'string' ? value.trim() : ''
-                        },
-                        {
-                            "key": "dealId",
-                            "value": dealId
-                        },
-                        {
-                            "key": "isEdit",
-                            "value": isEdit
-                        },
-                        {
-                            "key": "referenceListName",
-                            "value": (_b = items === null || items === void 0 ? void 0 : items.component) === null || _b === void 0 ? void 0 : _b.key
-                        },
-                        {
-                            "key": "referenceListFieldName",
-                            "value": (_d = (_c = this.instance) === null || _c === void 0 ? void 0 : _c.component) === null || _d === void 0 ? void 0 : _d.key
-                        }
-                    ];
-                    finalParams = parameters === null || parameters === void 0 ? void 0 : parameters.filter(f1 => { var _a, _b; return (_b = (_a = items === null || items === void 0 ? void 0 : items.component) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.headers.some(f2 => f1.key === f2.key); });
-                    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);
-                            }
-                        });
-                    }
-                }
+        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() {
         this.selectElem.openedChange.subscribe((isOpen) => __awaiter(this, void 0, void 0, function* () {
@@ -3117,7 +3129,7 @@ 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: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: CommonService }], 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$2.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>
@@ -3202,7 +3214,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 }, { type: CommonService }]; }, propDecorators: { multiSelect: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.HttpClient }, { type: CommonService }]; }, propDecorators: { multiSelect: [{
                 type: ViewChild,
                 args: ['multiSelect', { static: true }]
             }], selectElem: [{
@@ -3261,18 +3273,455 @@ class ConfirmationDialogComponent {
     ngOnInit() {
     }
 }
-ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], 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\">\r\n<h2 mat-dialog-title class=\"data-grid-alert\">Alert</h2>\r\n<mat-dialog-content class=\"data-grid-popup-body\">\r\n   {{data.message}}\r\n</mat-dialog-content>\r\n<mat-dialog-actions class=\"data-grid-popup-footer\">\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"warn\" *ngIf=\"data.buttonStatus\">Delete</button>\r\n    <button mat-button [mat-dialog-close]=\"false\" [ngClass]=\"{'data-grid-closed-btn': !data.buttonStatus}\">{{data.buttonStatus ? 'Cancel': 'Close'}}</button>\r\n</mat-dialog-actions>\r\n</div>", styles: ["::ng-deep .data-grid-closed-btn .mat-button-focus-overlay{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.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: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { 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"] }] });
+ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], 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\">\r\n<h2 mat-dialog-title class=\"data-grid-alert\">Alert</h2>\r\n<mat-dialog-content class=\"data-grid-popup-body\">\r\n   {{data.message}}\r\n</mat-dialog-content>\r\n<mat-dialog-actions class=\"data-grid-popup-footer\">\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"warn\" *ngIf=\"data.buttonStatus\">Delete</button>\r\n    <button mat-button [mat-dialog-close]=\"false\" [ngClass]=\"{'data-grid-closed-btn': !data.buttonStatus}\">{{data.buttonStatus ? 'Cancel': 'Close'}}</button>\r\n</mat-dialog-actions>\r\n</div>", styles: ["::ng-deep .data-grid-closed-btn .mat-button-focus-overlay{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.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: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { 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"] }] });
 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\">\r\n<h2 mat-dialog-title class=\"data-grid-alert\">Alert</h2>\r\n<mat-dialog-content class=\"data-grid-popup-body\">\r\n   {{data.message}}\r\n</mat-dialog-content>\r\n<mat-dialog-actions class=\"data-grid-popup-footer\">\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"warn\" *ngIf=\"data.buttonStatus\">Delete</button>\r\n    <button mat-button [mat-dialog-close]=\"false\" [ngClass]=\"{'data-grid-closed-btn': !data.buttonStatus}\">{{data.buttonStatus ? 'Cancel': 'Close'}}</button>\r\n</mat-dialog-actions>\r\n</div>", styles: ["::ng-deep .data-grid-closed-btn .mat-button-focus-overlay{background-color:transparent}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+        return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [MAT_DIALOG_DATA]
                     }] }];
     } });
 
+class AddOnProductsComponent {
+    constructor(matDialogRef, data, fb, dialog, commonSevice) {
+        this.matDialogRef = matDialogRef;
+        this.fb = fb;
+        this.dialog = dialog;
+        this.commonSevice = commonSevice;
+        this.dropdownOne = [];
+        this.dropdownTwo = [];
+        this.dropdownThree = [];
+        this.dropdownFour = [];
+        this.filteredDropdownOne = [];
+        this.filteredDropdownTwo = [];
+        this.filteredDropdownThree = [];
+        this.filteredDropdownFour = [];
+        this.addProductsColumns = ['select', 'productName', 'skuNumber'];
+        this.showAllproductsColumns = ['delete', 'productName', 'categoryName', 'subCategory', 'Quantity', 'price', 'skuNumber'];
+        this.quantityList = [5, 10, 15, 20, 25];
+        this.ELEMENT_DATA = [];
+        this.dataSource = new MatTableDataSource();
+        this.selection = new SelectionModel(true, []);
+        this.selectedDataSource = new MatTableDataSource([]);
+        this.selectedCategory = null;
+        this.selectedSubCategory = null;
+        this.showCategory = false;
+        this.showSubcategory = false;
+        this.showPrice = true;
+        this.showQuantity = true;
+        this.showSkuNumber = false;
+        this.showNewProductPicker = true;
+        this.setCategory = '';
+        this.setSubCategory = '';
+        this.loadingFlag = false;
+        this.pageNumber = 1;
+        this.pageSize = 20;
+        this.totalPages = 0;
+        this.searchQuery = '';
+        this.itemList = [];
+        this.prevScrollPosition = 0; // Track the previous scroll position
+        this.spinnerFlag = false;
+        this.dropdownL1 = false;
+        this.dropdownL2 = false;
+        this.dropdownL3 = false;
+        this.dropdownL4 = false;
+        this.dropdownL1Label = '';
+        this.dropdownL2Label = '';
+        this.dropdownL3Label = '';
+        this.dropdownL4Label = '';
+        this.dropDownCount = 0;
+        this.disablePrice = true;
+        this.showCategory = data.dropdownsFlag.showDialogCategory;
+        this.showSubcategory = data.dropdownsFlag.showDialogSubCategory;
+        this.showPrice = data.dropdownsFlag.showDialogPrice;
+        this.showQuantity = data.dropdownsFlag.showDialogQuantity;
+        this.showSkuNumber = data.dropdownsFlag.showDialogSkuNumber;
+        this.showNewProductPicker = data.dropdownsFlag.showNewProductPicker;
+        this.dropdownL1 = data.dropdownsFlag.dropdownL1;
+        this.dropdownL2 = data.dropdownsFlag.dropdownL2;
+        this.dropdownL3 = data.dropdownsFlag.dropdownL3;
+        this.dropdownL4 = data.dropdownsFlag.dropdownL4;
+        this.dropdownL1Label = data.dropdownsFlag.dropdownL1Label;
+        this.dropdownL2Label = data.dropdownsFlag.dropdownL2Label;
+        this.dropdownL3Label = data.dropdownsFlag.dropdownL3Label;
+        this.dropdownL4Label = data.dropdownsFlag.dropdownL4Label;
+        this.dropDownCount = this.countTrueDropdowns(data.dropdownsFlag);
+        this.selection = new SelectionModel(true, data.selectedProducts || []);
+        this.form = this.fb.group({
+            dropdownLevel1: [''],
+            dropdownLevel2: [''],
+            dropdownLevel3: [''],
+            dropdownLevel4: [''],
+            searchProductName: [''],
+            selectedProducts: this.fb.array([])
+        });
+        this.initializeFormArray();
+        if (!this.showCategory) {
+            this.removeColumn('categoryName');
+        }
+        if (!this.showPrice) {
+            this.removeColumn('price');
+        }
+        if (!this.showSubcategory) {
+            this.removeColumn('subCategory');
+        }
+        if (!this.showQuantity) {
+            this.removeColumn('Quantity');
+        }
+        if (!this.showSkuNumber) {
+            this.removeColumn('skuNumber');
+        }
+    }
+    removeColumn(columnName) {
+        this.showAllproductsColumns = this.showAllproductsColumns.filter(column => column !== columnName);
+        this.addProductsColumns = this.addProductsColumns.filter(column => column !== columnName);
+    }
+    initializeFormArray() {
+        const selectedProductsArray = this.form.get('selectedProducts');
+        this.selection.selected.forEach(product => {
+            selectedProductsArray.push(this.fb.group({
+                price: [product.price || '', Validators.required],
+                text: [product.text || ''],
+                quantity: [product.quantity || '', Validators.required],
+                category: [(product === null || product === void 0 ? void 0 : product.category) || ''],
+                subCategory: [(product === null || product === void 0 ? void 0 : product.subCategory) || ''],
+                value: [(product === null || product === void 0 ? void 0 : product.value) || ''],
+                skuNumber: [(product === null || product === void 0 ? void 0 : product.value) || '']
+            }));
+        });
+        selectedProductsArray.controls.forEach(control => {
+            var _a;
+            (_a = control.get('price')) === null || _a === void 0 ? void 0 : _a.disable();
+        });
+        this.selectedDataSource.data = [...this.selection.selected];
+    }
+    initializeDataSources() {
+        var _a, _b, _c, _d;
+        // Ensure selected items are marked in the main data source
+        if ((_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.length) {
+            (_d = (_c = this.selection) === null || _c === void 0 ? void 0 : _c.selected) === null || _d === void 0 ? void 0 : _d.forEach(selectedProduct => {
+                const index = this.dataSource.data.findIndex(product => product.value === selectedProduct.value);
+                if (index >= 0) {
+                    this.dataSource.data[index] = selectedProduct;
+                }
+            });
+            this.selectedDataSource.data = [...this.selection.selected];
+        }
+        else {
+            console.warn('No selected products found.');
+        }
+    }
+    ngAfterViewInit() {
+    }
+    ngOnInit() {
+        // this.loadProductCategory();
+        this.loadDropdownL1();
+        this.form.get('dropdownLevel1').valueChanges
+            .pipe(startWith(''), map(value => this.filterProducts(value, 'category1'))).subscribe(l1 => {
+            this.filteredDropdownOne = l1;
+        });
+        this.form.get('dropdownLevel2').valueChanges
+            .pipe(startWith(''), map(value => this.filterProducts(value, 'category2'))).subscribe(l2 => {
+            this.filteredDropdownTwo = l2;
+        });
+        this.form.get('dropdownLevel3').valueChanges
+            .pipe(startWith(''), map(value => this.filterProducts(value, 'category3'))).subscribe(l3 => {
+            this.filteredDropdownThree = l3;
+        });
+        this.form.get('dropdownLevel4').valueChanges
+            .pipe(startWith(''), map(value => this.filterProducts(value, 'category4'))).subscribe(l4 => {
+            this.filteredDropdownFour = l4;
+        });
+    }
+    handleDropdownFilter() {
+        var _a, _b, _c, _d, _e;
+        if (this.form.controls.dropdownLevel1.value !== '' || this.form.controls.searchProductName.value !== '') {
+            this.searchQuery = (_a = this.form.controls.searchProductName) === null || _a === void 0 ? void 0 : _a.value;
+            this.levelOneId = (_b = this.form.controls.dropdownLevel1.value) === null || _b === void 0 ? void 0 : _b.id;
+            this.levelTwoId = (_c = this.form.controls.dropdownLevel2.value) === null || _c === void 0 ? void 0 : _c.id;
+            this.levelThreeId = (_d = this.form.controls.dropdownLevel3.value) === null || _d === void 0 ? void 0 : _d.id;
+            this.levelFourId = (_e = this.form.controls.dropdownLevel4.value) === null || _e === void 0 ? void 0 : _e.id;
+            this.getProducts(false);
+        }
+    }
+    loadDropdownL1() {
+        this.spinnerFlag = true;
+        this.commonSevice.productLevelOne().subscribe(response => {
+            this.spinnerFlag = false;
+            if (response && response.code === 200) {
+                this.dropdownOne = response.data;
+                this.filteredDropdownOne = this.filterProducts('', 'category1');
+            }
+        });
+    }
+    loadDropdownL2(levelOneId) {
+        this.spinnerFlag = true;
+        this.commonSevice.productLevelTwo(levelOneId).subscribe(response => {
+            this.spinnerFlag = false;
+            if (response && response.code === 200) {
+                this.dropdownTwo = response.data;
+                this.filteredDropdownTwo = this.filterProducts('', 'category2');
+            }
+        });
+    }
+    loadDropdownL3(levelOneId, levelTwoId) {
+        this.spinnerFlag = true;
+        this.commonSevice.productLevelThree(levelOneId, levelTwoId).subscribe(response => {
+            this.spinnerFlag = false;
+            if (response && response.code === 200) {
+                this.dropdownThree = response.data;
+                this.filteredDropdownThree = this.filterProducts('', 'category3');
+            }
+        });
+    }
+    loadDropdownL4(levelOneId, levelTwoId, levelThreeId) {
+        this.spinnerFlag = true;
+        this.commonSevice.productLevelFour(levelOneId, levelTwoId, levelThreeId).subscribe(response => {
+            this.spinnerFlag = false;
+            if (response && response.code === 200) {
+                this.dropdownFour = response.data;
+                this.filteredDropdownFour = this.filterProducts('', 'category4');
+            }
+        });
+    }
+    filterProducts(value, cat) {
+        const filterValue = typeof value === 'string' ? value === null || value === void 0 ? void 0 : value.toLowerCase() : value;
+        let data;
+        // Dynamically assign the data array based on the category
+        switch (cat) {
+            case 'category1':
+                data = this.dropdownOne;
+                break;
+            case 'category2':
+                data = this.dropdownTwo;
+                break;
+            case 'category3':
+                data = this.dropdownThree;
+                break;
+            case 'category4':
+                data = this.dropdownFour;
+                break;
+            default:
+                data = [];
+        }
+        if (!filterValue) {
+            return data;
+        }
+        else {
+            return data === null || data === void 0 ? void 0 : data.filter(option => { var _a; return (_a = option['name']) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(filterValue); });
+        }
+    }
+    onSubmit() {
+        if (this.form.valid) {
+            this.matDialogRef.close({
+                data: {
+                    status: true,
+                    items: this.form.getRawValue()
+                }
+            });
+        }
+    }
+    isAllSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
+    isIndeterminate() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected > 0 && numSelected < numRows;
+    }
+    masterToggle() {
+        this.isAllSelected()
+            ? this.selection.clear()
+            : this.dataSource.data.forEach(row => this.selection.select(row));
+        this.updateSelectedProducts();
+    }
+    toggleSelection(row) {
+        this.selection.toggle(row);
+        this.updateSelectedProducts();
+    }
+    // Getter for the FormArray
+    get selectedProducts() {
+        return this.form.get('selectedProducts');
+    }
+    updateSelectedProducts() {
+        var _a, _b;
+        if (Array.isArray(this.selection.selected)) {
+            this.selectedDataSource.data = [...this.selection.selected];
+            const selectedProductsArray = this.selectedProducts;
+            selectedProductsArray.clear();
+            (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.forEach(product => {
+                var _a, _b;
+                selectedProductsArray === null || selectedProductsArray === void 0 ? void 0 : selectedProductsArray.push(this.fb.group({
+                    price: [(_a = product === null || product === void 0 ? void 0 : product.price) !== null && _a !== void 0 ? _a : '', this.showPrice ? Validators.required : []],
+                    text: [(product === null || product === void 0 ? void 0 : product.text) || ''],
+                    quantity: [(_b = product === null || product === void 0 ? void 0 : product.quantity) !== null && _b !== void 0 ? _b : '', this.showQuantity ? Validators.required : []],
+                    category: [(product === null || product === void 0 ? void 0 : product.category) || ''],
+                    subCategory: [(product === null || product === void 0 ? void 0 : product.subCategory) || ''],
+                    value: [(product === null || product === void 0 ? void 0 : product.value) || ''],
+                    skuNumber: [(product === null || product === void 0 ? void 0 : product.value) || '']
+                }));
+            });
+            selectedProductsArray.controls.forEach(control => {
+                var _a;
+                (_a = control.get('price')) === null || _a === void 0 ? void 0 : _a.disable();
+            });
+        }
+        else {
+            console.error('Selection.selected is not an array:', this.selection.selected);
+        }
+    }
+    getTotalRows() {
+        return this.dataSource.data.length;
+    }
+    getSelectedRowsCount() {
+        return this.selection.selected.length;
+    }
+    onOptionSelected(event, category) {
+        let selectedValue;
+        if (event && event.option && event.option.value !== undefined) {
+            selectedValue = event.option.value.id;
+        }
+        else {
+            selectedValue = event;
+        }
+        if (category === 'category1') {
+            this.levelOneId = selectedValue;
+            this.form.get('dropdownLevel2').setValue(null);
+            this.form.get('dropdownLevel3').setValue(null);
+            this.form.get('dropdownLevel4').setValue(null);
+            this.filteredDropdownTwo = [];
+            this.filteredDropdownThree = [];
+            this.filteredDropdownFour = [];
+            if (this.dropdownL2) {
+                this.loadDropdownL2(this.levelOneId);
+            }
+        }
+        if (category === 'category2') {
+            this.levelTwoId = selectedValue;
+            this.form.get('dropdownLevel3').setValue(null);
+            this.form.get('dropdownLevel4').setValue(null);
+            this.filteredDropdownThree = [];
+            this.filteredDropdownFour = [];
+            if (this.dropdownL3) {
+                this.loadDropdownL3(this.levelOneId, this.levelTwoId);
+            }
+        }
+        if (category === 'category3') {
+            this.levelThreeId = selectedValue;
+            this.form.get('dropdownLevel4').setValue(null);
+            this.filteredDropdownFour = [];
+            if (this.dropdownL4) {
+                this.loadDropdownL4(this.levelOneId, this.levelTwoId, this.levelThreeId);
+            }
+        }
+        if (category === 'category4') {
+            this.levelFourId = selectedValue;
+        }
+    }
+    getProducts(flag) {
+        this.spinnerFlag = true;
+        const search = this.searchQuery;
+        this.commonSevice.loadProducts(this.pageNumber, this.pageSize, search, true, false, this.levelOneId, this.levelTwoId, this.levelThreeId, this.levelFourId).subscribe(response => {
+            var _a;
+            this.spinnerFlag = false;
+            if (response && response.code === 200) {
+                this.totalPages = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.totalPages;
+                const data = response.data.dataSource;
+                if (this.dataSource.data.length > 0 && flag) {
+                    data.forEach(item => this.dataSource.data.push(item));
+                    this.dataSource.data = [...this.dataSource.data, ...data];
+                }
+                else {
+                    this.dataSource.data = data;
+                }
+                this.loadingFlag = true;
+                setTimeout(() => {
+                    const middlePosition = this.trackHeight / 2 - 50;
+                    if (this.firstscrollableDiv && this.firstscrollableDiv.nativeElement) {
+                        this.firstscrollableDiv.nativeElement.scrollTo({ top: middlePosition, behavior: 'auto' });
+                    }
+                }, 250);
+                this.initializeDataSources();
+            }
+        });
+    }
+    removeRow(event, element) {
+        event.stopPropagation();
+        event.preventDefault();
+        let message = 'Are you sure you want to delete this product?';
+        let showButton = true;
+        const index = this.selectedDataSource.data.indexOf(element);
+        if (index >= 0) {
+            if (this.selectedDataSource.data.length === 1) {
+                message = 'Please select at least one product.';
+                showButton = false;
+            }
+            const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+                disableClose: true,
+                width: '90%',
+                maxWidth: '400px',
+                data: { message: message, buttonStatus: showButton }
+            });
+            dialogRef.afterClosed().subscribe(result => {
+                if (result) {
+                    this.selectedDataSource.data.splice(index, 1);
+                    this.selectedDataSource._updateChangeSubscription();
+                    this.selection.deselect(element);
+                    const selectedProductsArray = this.form.get('selectedProducts');
+                    const productIndex = selectedProductsArray.controls.findIndex(control => control.value.productName === element.productName);
+                    if (productIndex >= 0) {
+                        selectedProductsArray.removeAt(productIndex);
+                    }
+                }
+            });
+        }
+    }
+    onScroll(event) {
+        this.trackHeight = event.target.scrollHeight - event.target.offsetHeight;
+        if (this.loadingFlag && (Math.floor(event.target.scrollTop / this.trackHeight * 100) > 50)) {
+            this.loadingFlag = false;
+            if (this.pageNumber < this.totalPages) {
+                this.pageNumber = this.pageNumber + 1;
+                this.getProducts(true);
+            }
+            else {
+                this.loadingFlag = true;
+            }
+        }
+        this.prevScrollPosition = event.target.scrollTop;
+    }
+    countTrueDropdowns(obj) {
+        // Dynamically find all keys that start with 'dropdownL' and are boolean (true/false)
+        return Object.keys(obj)
+            .filter(key => key.startsWith('dropdownL') && typeof obj[key] === 'boolean' && obj[key] === true)
+            .length;
+    }
+    /* Use the property that should display in the input field */
+    displayFn(option) {
+        return option ? option.name : '';
+    }
+}
+AddOnProductsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AddOnProductsComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: i1$1.MatDialog }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
+AddOnProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: AddOnProductsComponent, selector: "ngx-mat-add-on-products", viewQueries: [{ propertyName: "firstscrollableDiv", first: true, predicate: ["firstscrollableDiv"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n    <div class=\"OverlayDivContent\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n</div>\r\n<div class=\"product-selector\" mat-dialog-content>\r\n    <mat-stepper labelPosition=\"bottom\" #stepper>\r\n        <mat-step [stepControl]=\"form\">\r\n            <form [formGroup]=\"form\">\r\n                <ng-template matStepLabel>Select Products</ng-template>\r\n                <div class=\"product-selection-container\">\r\n                    <!-- <h3>Select Products</h3> -->\r\n                    <p class=\"product-selection-desc\">Your ideal match is just a few preferences away. Start discovering now!</p>\r\n                    <mat-form-field class=\"global-search\" appearance=\"outline\">\r\n                        <mat-icon matPrefix class=\"material-symbols-outlined product-picker-icon\">search</mat-icon>\r\n                        <input matInput placeholder=\"Search Product Name\" formControlName=\"searchProductName\" />\r\n                    </mat-form-field>\r\n                    <div class=\"dropdown-selection\">\r\n                        <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n                            <div class=\"row\">\r\n                                <mat-form-field *ngIf=\"dropdownL1\">\r\n                                    <mat-label>{{dropdownL1Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n                                        [matAutocomplete]=\"auto3\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL2\">\r\n                                    <mat-label>{{dropdownL2Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n                                        [matAutocomplete]=\"auto4\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL3\">\r\n                                    <mat-label>{{dropdownL3Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n                                        [matAutocomplete]=\"auto3\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL4\">\r\n                                    <mat-label>{{dropdownL4Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n                                        [matAutocomplete]=\"auto4\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Search Button -->\r\n                    <div fxLayout=\"row\" fxLayoutAlign=\"left\" class=\"margin-top search-btn-wrp\">\r\n                        <button mat-button color=\"primary\" mat-raised-button\r\n                            (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n                    </div>\r\n                </div>\r\n                <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n                    (scroll)=\"onScroll($event)\">\r\n                    <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n                        *ngIf=\"dataSource && dataSource.data.length > 0; else noData\">\r\n                        <ng-container matColumnDef=\"select\">\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                            </th>\r\n                            <td mat-cell *matCellDef=\"let row\">\r\n                                <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n                                    (change)=\"$event ? toggleSelection(row) : null\"\r\n                                    [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"productName\">\r\n                            <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n                        </ng-container>\r\n                        <!-- <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                            <th mat-header-cell *matHeaderCellDef> Price </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element?.price}} </td>\r\n                        </ng-container> -->\r\n                        <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                            <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> #SkuNumber-{{element?.value}} </td>\r\n                        </ng-container>\r\n\r\n                        <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n                        <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"></tr>\r\n                    </table>\r\n                    <ng-template #noData>\r\n                        <div class=\"no-data-message\">\r\n                            No data found.\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div class=\"row-summary\">\r\n                    <p>Rows: {{ getTotalRows() }} Selected: {{ getSelectedRowsCount() }}</p>\r\n                </div>\r\n                <div class=\"tabs-action-step-one\">\r\n                    <button mat-button matStepperNext\r\n                    [disabled]=\"selection.selected.length ? false : true\" color=\"primary\" mat-raised-button>Next</button>\r\n                    <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n                </div>\r\n            </form>\r\n        </mat-step>\r\n        <mat-step [stepControl]=\"form\">\r\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n                <ng-template matStepLabel>Edit/Save</ng-template>\r\n                <div class=\"new-class\">\r\n                    <table mat-table [dataSource]=\"selectedDataSource\"\r\n                        *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n                        <ng-container matColumnDef=\"delete\">\r\n                            <th mat-header-cell *matHeaderCellDef></th>\r\n                            <td mat-cell *matCellDef=\"let element\">\r\n                                <button class=\"delete-btn-picker\" mat-button (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n                                    <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n                                </button>\r\n                            </td>\r\n                        </ng-container>\r\n                        <ng-container matColumnDef=\"productName\">\r\n                            <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n                            <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n                            <th mat-header-cell *matHeaderCellDef>Sub Category </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                            <th mat-header-cell *matHeaderCellDef>Price</th>\r\n                            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                <mat-form-field class=\"example-full-width select-price\">\r\n                                    <mat-label>Price</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n                                        placeholder=\"Please enter price\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n                                        Price is required\r\n                                    </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n                            <th mat-header-cell *matHeaderCellDef> Quantity </th>\r\n                            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                <mat-form-field class=\"example-full-width select-qunatity\">\r\n                                    <mat-label>Select quantity</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n                                        placeholder=\"Please enter quantity\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n                                        Quantity is required\r\n                                    </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n                        showSkuNumber={{showSkuNumber}}\r\n                        <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                            <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n                            <td mat-cell *matCellDef=\"let element\">#SkuNumber-{{element?.value}} </td>\r\n                        </ng-container>\r\n\r\n                        <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n                        <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n                    </table>\r\n                    <ng-template #showBlank>\r\n                        <div class=\"no-data-message\">\r\n                            No data found.\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div class=\"tabs-action\">\r\n                    <div class=\"tab-action-wrp\">\r\n                        <button mat-button matStepperPrevious>Back</button>\r\n                    </div>\r\n                    \r\n                    <div class=\"tab-action-wrp\">\r\n                        <button mat-button matStepperNext type=\"submit\" color=\"primary\" mat-raised-button>Add products</button>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </mat-step>\r\n    </mat-stepper>\r\n</div>", styles: [".dropdown-section{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;gap:16px}mat-form-field{flex:1}.new-class{margin:20px 0;border:1px solid #ddd;border-radius:5px}.mat-column-select{width:50px;text-align:center}.mat-header-cell,.mat-cell{text-align:center}button{align-self:flex-end;margin-top:20px}.row-summary{margin-top:20px;font-weight:700}.new-class td{border:1px solid #ddd;padding:10px}.new-class th{background-color:#f2f2f2;position:-webkit-sticky;position:sticky;top:0;transform:none;z-index:99;padding:10px}table{width:100%;border-collapse:collapse}.select-qunatity,.select-price{width:110px}.no-data-message{text-align:center;margin:20px 0;font-size:18px;color:#888}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused,.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:transparent}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.product-selection-container{max-width:800px;margin:0 auto;text-align:center}.global-search{width:100%;margin-bottom:20px}.dropdown-selection{display:flex;flex-direction:column;width:100%}.row{display:flex;justify-content:space-between;width:100%;margin-bottom:20px;flex-wrap:wrap}.dropdown-item{flex:1;margin-right:10px}.dropdown-item:last-child{margin-right:0}.scrollable-div{max-height:350px;overflow-y:auto;margin-top:20px;margin-bottom:20px}.mat-table{width:100%;border-collapse:collapse}.dropdown-selection>div{display:flex;justify-content:space-between;border:1px solid #ddd;border-radius:5px;padding:20px;flex-wrap:wrap}.mat-form-field:last-child{margin-right:0}.search-btn-wrp{justify-content:flex-start}.no-child .mat-form-field{width:100%}.child .mat-form-field{flex:0 0 calc(50% - 20px)}.delete-btn-picker .mat-icon{color:#e53935!important;font-size:24px;width:auto;height:auto}.delete-btn-picker{margin:0}.product-selection-desc{text-align:left}.tabs-action{display:flex;justify-content:space-between}.tabs-action-step-one{justify-content:flex-end;display:flex}::ng-deep .product-selection-container .mat-form-field-infix{padding:10px 4px 17px!important}::ng-deep .product-selection-container .mat-form-field-flex{align-items:center}::ng-deep .product-selection-container .product-picker-icon{font-size:18px;width:auto;height:auto;color:#0000004d}::ng-deep .product-selection-container .mat-form-field-appearance-outline .mat-form-field-outline-thick,::ng-deep .product-selection-container .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#0000001f}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.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$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i15.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i15.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i15.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i15.MatStepperNext, selector: "button[matStepperNext]", inputs: ["type"] }, { kind: "directive", type: i15.MatStepperPrevious, selector: "button[matStepperPrevious]", inputs: ["type"] }, { 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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i16.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i16.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AddOnProductsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-mat-add-on-products', template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n    <div class=\"OverlayDivContent\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n</div>\r\n<div class=\"product-selector\" mat-dialog-content>\r\n    <mat-stepper labelPosition=\"bottom\" #stepper>\r\n        <mat-step [stepControl]=\"form\">\r\n            <form [formGroup]=\"form\">\r\n                <ng-template matStepLabel>Select Products</ng-template>\r\n                <div class=\"product-selection-container\">\r\n                    <!-- <h3>Select Products</h3> -->\r\n                    <p class=\"product-selection-desc\">Your ideal match is just a few preferences away. Start discovering now!</p>\r\n                    <mat-form-field class=\"global-search\" appearance=\"outline\">\r\n                        <mat-icon matPrefix class=\"material-symbols-outlined product-picker-icon\">search</mat-icon>\r\n                        <input matInput placeholder=\"Search Product Name\" formControlName=\"searchProductName\" />\r\n                    </mat-form-field>\r\n                    <div class=\"dropdown-selection\">\r\n                        <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n                            <div class=\"row\">\r\n                                <mat-form-field *ngIf=\"dropdownL1\">\r\n                                    <mat-label>{{dropdownL1Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n                                        [matAutocomplete]=\"auto3\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL2\">\r\n                                    <mat-label>{{dropdownL2Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n                                        [matAutocomplete]=\"auto4\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL3\">\r\n                                    <mat-label>{{dropdownL3Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n                                        [matAutocomplete]=\"auto3\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL4\">\r\n                                    <mat-label>{{dropdownL4Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n                                        [matAutocomplete]=\"auto4\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Search Button -->\r\n                    <div fxLayout=\"row\" fxLayoutAlign=\"left\" class=\"margin-top search-btn-wrp\">\r\n                        <button mat-button color=\"primary\" mat-raised-button\r\n                            (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n                    </div>\r\n                </div>\r\n                <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n                    (scroll)=\"onScroll($event)\">\r\n                    <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n                        *ngIf=\"dataSource && dataSource.data.length > 0; else noData\">\r\n                        <ng-container matColumnDef=\"select\">\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                            </th>\r\n                            <td mat-cell *matCellDef=\"let row\">\r\n                                <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n                                    (change)=\"$event ? toggleSelection(row) : null\"\r\n                                    [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"productName\">\r\n                            <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n                        </ng-container>\r\n                        <!-- <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                            <th mat-header-cell *matHeaderCellDef> Price </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element?.price}} </td>\r\n                        </ng-container> -->\r\n                        <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                            <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> #SkuNumber-{{element?.value}} </td>\r\n                        </ng-container>\r\n\r\n                        <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n                        <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"></tr>\r\n                    </table>\r\n                    <ng-template #noData>\r\n                        <div class=\"no-data-message\">\r\n                            No data found.\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div class=\"row-summary\">\r\n                    <p>Rows: {{ getTotalRows() }} Selected: {{ getSelectedRowsCount() }}</p>\r\n                </div>\r\n                <div class=\"tabs-action-step-one\">\r\n                    <button mat-button matStepperNext\r\n                    [disabled]=\"selection.selected.length ? false : true\" color=\"primary\" mat-raised-button>Next</button>\r\n                    <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n                </div>\r\n            </form>\r\n        </mat-step>\r\n        <mat-step [stepControl]=\"form\">\r\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n                <ng-template matStepLabel>Edit/Save</ng-template>\r\n                <div class=\"new-class\">\r\n                    <table mat-table [dataSource]=\"selectedDataSource\"\r\n                        *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n                        <ng-container matColumnDef=\"delete\">\r\n                            <th mat-header-cell *matHeaderCellDef></th>\r\n                            <td mat-cell *matCellDef=\"let element\">\r\n                                <button class=\"delete-btn-picker\" mat-button (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n                                    <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n                                </button>\r\n                            </td>\r\n                        </ng-container>\r\n                        <ng-container matColumnDef=\"productName\">\r\n                            <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n                            <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n                            <th mat-header-cell *matHeaderCellDef>Sub Category </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                            <th mat-header-cell *matHeaderCellDef>Price</th>\r\n                            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                <mat-form-field class=\"example-full-width select-price\">\r\n                                    <mat-label>Price</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n                                        placeholder=\"Please enter price\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n                                        Price is required\r\n                                    </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n                            <th mat-header-cell *matHeaderCellDef> Quantity </th>\r\n                            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                <mat-form-field class=\"example-full-width select-qunatity\">\r\n                                    <mat-label>Select quantity</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n                                        placeholder=\"Please enter quantity\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n                                        Quantity is required\r\n                                    </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n                        showSkuNumber={{showSkuNumber}}\r\n                        <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                            <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n                            <td mat-cell *matCellDef=\"let element\">#SkuNumber-{{element?.value}} </td>\r\n                        </ng-container>\r\n\r\n                        <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n                        <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n                    </table>\r\n                    <ng-template #showBlank>\r\n                        <div class=\"no-data-message\">\r\n                            No data found.\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div class=\"tabs-action\">\r\n                    <div class=\"tab-action-wrp\">\r\n                        <button mat-button matStepperPrevious>Back</button>\r\n                    </div>\r\n                    \r\n                    <div class=\"tab-action-wrp\">\r\n                        <button mat-button matStepperNext type=\"submit\" color=\"primary\" mat-raised-button>Add products</button>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </mat-step>\r\n    </mat-stepper>\r\n</div>", styles: [".dropdown-section{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;gap:16px}mat-form-field{flex:1}.new-class{margin:20px 0;border:1px solid #ddd;border-radius:5px}.mat-column-select{width:50px;text-align:center}.mat-header-cell,.mat-cell{text-align:center}button{align-self:flex-end;margin-top:20px}.row-summary{margin-top:20px;font-weight:700}.new-class td{border:1px solid #ddd;padding:10px}.new-class th{background-color:#f2f2f2;position:-webkit-sticky;position:sticky;top:0;transform:none;z-index:99;padding:10px}table{width:100%;border-collapse:collapse}.select-qunatity,.select-price{width:110px}.no-data-message{text-align:center;margin:20px 0;font-size:18px;color:#888}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused,.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:transparent}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.product-selection-container{max-width:800px;margin:0 auto;text-align:center}.global-search{width:100%;margin-bottom:20px}.dropdown-selection{display:flex;flex-direction:column;width:100%}.row{display:flex;justify-content:space-between;width:100%;margin-bottom:20px;flex-wrap:wrap}.dropdown-item{flex:1;margin-right:10px}.dropdown-item:last-child{margin-right:0}.scrollable-div{max-height:350px;overflow-y:auto;margin-top:20px;margin-bottom:20px}.mat-table{width:100%;border-collapse:collapse}.dropdown-selection>div{display:flex;justify-content:space-between;border:1px solid #ddd;border-radius:5px;padding:20px;flex-wrap:wrap}.mat-form-field:last-child{margin-right:0}.search-btn-wrp{justify-content:flex-start}.no-child .mat-form-field{width:100%}.child .mat-form-field{flex:0 0 calc(50% - 20px)}.delete-btn-picker .mat-icon{color:#e53935!important;font-size:24px;width:auto;height:auto}.delete-btn-picker{margin:0}.product-selection-desc{text-align:left}.tabs-action{display:flex;justify-content:space-between}.tabs-action-step-one{justify-content:flex-end;display:flex}::ng-deep .product-selection-container .mat-form-field-infix{padding:10px 4px 17px!important}::ng-deep .product-selection-container .mat-form-field-flex{align-items:center}::ng-deep .product-selection-container .product-picker-icon{font-size:18px;width:auto;height:auto;color:#0000004d}::ng-deep .product-selection-container .mat-form-field-appearance-outline .mat-form-field-outline-thick,::ng-deep .product-selection-container .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#0000001f}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }, { type: i2.FormBuilder }, { type: i1$1.MatDialog }, { type: CommonService }];
+    }, propDecorators: { firstscrollableDiv: [{
+                type: ViewChild,
+                args: ['firstscrollableDiv']
+            }] } });
+
+const ELEMENT_DATA = [];
 class MaterialDataGridComponent extends MaterialNestedComponent {
     constructor(element, ref, dialog, commonService) {
         super(element, ref);
@@ -3281,20 +3730,115 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
         this.dialog = dialog;
         this.commonService = commonService;
         this.dataSource = new MatTableDataSource();
+        this.dataSourceNew = ELEMENT_DATA;
+        this.displayedColumnsNew = ['productName', 'category', 'subCategory', 'quantity', 'price', 'skuNumber'];
+        this.showNewProductPicker = false;
+        this.showCategory = false;
+        this.showSubcategory = false;
+        this.showPrice = true;
+        this.showQuantity = true;
+        this.showSkuNumber = false;
+        this.hasInitialized = false;
         this.checkSubmissionStatus = false;
         this.showDataGrid = true;
         this.hasValueAndEditMode = false;
+        this.dropdownL1 = false;
+        this.dropdownL2 = false;
+        this.dropdownL3 = false;
+        this.dropdownL4 = false;
+        this.showDialogQuantity = false;
+        this.showDialogPrice = false;
+        this.showDialogCategory = false;
+        this.showDialogSkuNumber = false;
+        this.showDialogSubCategory = false;
+        this.dropdownL1Label = '';
+        this.dropdownL2Label = '';
+        this.dropdownL3Label = '';
+        this.dropdownL4Label = '';
     }
     getColumnLabel(column) {
         return column.label || column.key;
     }
+    checkIsAttributeTrue(newProductPickerFlag, attributeName) {
+        return newProductPickerFlag && Object.keys(newProductPickerFlag).some(key => key.toLocaleLowerCase() === attributeName.toLowerCase() &&
+            newProductPickerFlag[key].toLowerCase() === "true");
+    }
+    getLabelName(newProductPickerFlag, attributeName) {
+        if (newProductPickerFlag && Object.keys(newProductPickerFlag).some(key => key.toLocaleLowerCase() === attributeName.toLowerCase())) {
+            // Find the key that matches attributeName case-insensitively
+            const matchingKey = Object.keys(newProductPickerFlag).find(key => key.toLocaleLowerCase() === attributeName.toLowerCase());
+            // Return the value of the matching key
+            return newProductPickerFlag[matchingKey];
+        }
+        return '';
+    }
+    // ngOnInit(): void {
+    // }
     setInstance(instance) {
-        var _a, _b, _c;
+        var _a;
+        //const newProductPickerFlag = instance?.component?.attributes;
         const checkAttribute = (_a = instance === null || instance === void 0 ? void 0 : instance.component) === null || _a === void 0 ? void 0 : _a.attributes;
+        this.showNewProductPicker = this.checkIsAttributeTrue(checkAttribute, "newproductpicker");
+        this.showCategory = this.checkIsAttributeTrue(checkAttribute, "showCategory");
+        this.showSubcategory = this.checkIsAttributeTrue(checkAttribute, "showSubcategory");
+        this.showPrice = this.checkIsAttributeTrue(checkAttribute, "showPrice");
+        this.showQuantity = this.checkIsAttributeTrue(checkAttribute, "showQuantity");
+        this.showSkuNumber = this.checkIsAttributeTrue(checkAttribute, "showSkuNumber");
+        this.showDialogQuantity = this.checkIsAttributeTrue(checkAttribute, "showDialogQuantity");
+        this.showDialogPrice = this.checkIsAttributeTrue(checkAttribute, "showDialogPrice");
+        this.showDialogCategory = this.checkIsAttributeTrue(checkAttribute, "showDialogCategory");
+        this.showDialogSkuNumber = this.checkIsAttributeTrue(checkAttribute, "showDialogSkuNumber");
+        this.showDialogSubCategory = this.checkIsAttributeTrue(checkAttribute, "showDialogSubCategory");
+        const l1 = this.getLabelName(checkAttribute, "dropdownL1");
+        const l2 = this.getLabelName(checkAttribute, "dropdownL2");
+        const l3 = this.getLabelName(checkAttribute, "dropdownL3");
+        const l4 = this.getLabelName(checkAttribute, "dropdownL4");
+        this.dropdownL1 = l1 !== null && l1 !== undefined && (typeof l1 === 'string' ? l1.trim() !== "" : l1 !== "") ? true : false;
+        this.dropdownL2 = l2 !== null && l2 !== undefined && (typeof l2 === 'string' ? l2.trim() !== "" : l2 !== "") ? true : false;
+        this.dropdownL3 = l3 !== null && l3 !== undefined && (typeof l3 === 'string' ? l3.trim() !== "" : l3 !== "") ? true : false;
+        this.dropdownL4 = l4 !== null && l4 !== undefined && (typeof l4 === 'string' ? l4.trim() !== "" : l4 !== "") ? true : false;
+        if (this.dropdownL1) {
+            this.dropdownL1Label = l1;
+        }
+        if (this.dropdownL2) {
+            this.dropdownL2Label = l2;
+        }
+        if (this.dropdownL3) {
+            this.dropdownL3Label = l3;
+        }
+        if (this.dropdownL4) {
+            this.dropdownL4Label = l4;
+        }
         this.checkSubmissionStatus = this.commonService.checkIsAttributeTrue(checkAttribute, 'isProductOptional');
-        this.hasValueAndEditMode = (((_b = (checkAttribute === null || checkAttribute === void 0 ? void 0 : checkAttribute.hasValue) === 'yes') !== null && _b !== void 0 ? _b : false) && ((_c = (checkAttribute === null || checkAttribute === void 0 ? void 0 : checkAttribute.editMode) === 'true') !== null && _c !== void 0 ? _c : false));
+        this.hasValueAndEditMode = ((checkAttribute === null || checkAttribute === void 0 ? void 0 : checkAttribute.hasValue) === 'yes') && ((checkAttribute === null || checkAttribute === void 0 ? void 0 : checkAttribute.editMode) === 'true');
         super.setInstance(instance);
-        if (this.checkSubmissionStatus && !this.hasValueAndEditMode) {
+        if (this.showNewProductPicker && !this.hasInitialized) {
+            if (!this.showCategory) {
+                this.removeColumn('category');
+            }
+            if (!this.showQuantity) {
+                this.removeColumn('quantity');
+            }
+            if (!this.showPrice) {
+                this.removeColumn('price');
+            }
+            if (!this.showSubcategory) {
+                this.removeColumn('subCategory');
+            }
+            if (!this.showSkuNumber) {
+                this.removeColumn('skuNumber');
+            }
+            this.dealId = this.getLabelName(checkAttribute, "dealId");
+            const storedData = localStorage.getItem(`showGridPickerProducts-${this.dealId}`) || '';
+            const parsedData = JSON.parse(storedData || 'null');
+            this.dataSourceNew = Array.isArray(parsedData) ? parsedData : [];
+            // Set flag to true to prevent further execution
+            this.hasInitialized = true;
+        }
+        else {
+            this.dataSource.data = instance.dataValue;
+        }
+        if (this.checkSubmissionStatus && !this.hasValueAndEditMode && !this.showNewProductPicker) {
             this.showDataGrid = false;
             this.dataSource.data = [];
         }
@@ -3329,7 +3873,10 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
             return viewContainer ? viewContainer : null;
         };
     }
-    addAnother() {
+    removeColumn(columnName) {
+        this.displayedColumnsNew = this.displayedColumnsNew.filter(column => column !== columnName);
+    }
+    addAnotherOld() {
         this.showDataGrid = true;
         this.checkRowsNumber();
         this.instance.addRow();
@@ -3338,6 +3885,45 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
         }
         this.dataSource.data = [...this.dataSource.data];
     }
+    addAnother() {
+        if (this.showNewProductPicker) {
+            const diologeRef = this.dialog.open(AddOnProductsComponent, {
+                disableClose: true,
+                width: '90%',
+                maxWidth: '900px',
+                autoFocus: false,
+                data: { dropdownsFlag: { showNewProductPicker: this.showNewProductPicker, showDialogSubCategory: this.showDialogSubCategory, showDialogSkuNumber: this.showDialogSkuNumber, showDialogCategory: this.showDialogCategory, showDialogPrice: this.showDialogPrice, showDialogQuantity: this.showDialogQuantity, dropdownL1: this.dropdownL1, dropdownL2: this.dropdownL2, dropdownL3: this.dropdownL3, dropdownL4: this.dropdownL4, dropdownL1Label: this.dropdownL1Label, dropdownL2Label: this.dropdownL2Label, dropdownL3Label: this.dropdownL3Label, dropdownL4Label: this.dropdownL4Label }, selectedProducts: this.dataSourceNew }
+            })
+                .afterClosed().subscribe(response => {
+                var _a;
+                if ((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.status) {
+                    if (!this.showCategory) {
+                        this.removeColumn('category');
+                    }
+                    if (!this.showQuantity) {
+                        this.removeColumn('quantity');
+                    }
+                    if (!this.showPrice) {
+                        this.removeColumn('price');
+                    }
+                    if (!this.showSubcategory) {
+                        this.removeColumn('subCategory');
+                    }
+                    localStorage.setItem(`selectedProducts-${this.dealId}`, JSON.stringify(response.data.items.selectedProducts));
+                    this.dataSourceNew = response.data.items.selectedProducts;
+                    this.instance.component.defaultValue = response.data.items.selectedProducts;
+                }
+            });
+        }
+        else {
+            this.checkRowsNumber();
+            this.instance.addRow();
+            if (this.dataSource.data.length < this.instance.rows.length) {
+                this.dataSource.data.push({});
+            }
+            this.dataSource.data = [...this.dataSource.data];
+        }
+    }
     checkRowsNumber() {
         while (this.instance.rows.length < this.dataSource.data.length) {
             this.instance.addRow();
@@ -3392,7 +3978,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$2.MatDialog }, { token: CommonService }], 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$1.MatDialog }, { token: CommonService }], 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"
@@ -3411,6 +3997,8 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
               {{instance.component.addAnother || 'Add Another'}}
             </button>
           </mat-card-actions>
+<ng-container *ngIf="!showNewProductPicker">
+<div class="mat-elevation-z8">
           <table
                   mat-table
                   [dataSource]="dataSource"
@@ -3419,7 +4007,8 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
                   cdkDropList
                   [cdkDropListData]="dataSource"
                   (cdkDropListDropped)="dropTable($event)">
-            >
+                  
+            
             <ng-container *ngFor="let column of formColumns" [matColumnDef]="column">
               <th mat-header-cell *matHeaderCellDef>{{ getColumnLabel(columns[column]) }}</th>
               <td mat-cell *matCellDef="let i = index;" [attr.rowIndex]="i" [attr.component]="column">
@@ -3449,6 +4038,57 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
               <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </div>
           </table>
+          </div>
+</ng-container>
+
+    <table mat-table [dataSource]="dataSourceNew" class="mat-table" *ngIf="dataSourceNew.length > 0 && showNewProductPicker; else noData" >
+    <!-- Product Name Column -->
+    <ng-container matColumnDef="productName">
+      <th mat-header-cell *matHeaderCellDef> Product Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.text}} </td>
+    </ng-container>
+
+    <!-- Quantity Column -->
+    <ng-container matColumnDef="quantity" *ngIf="showQuantity">
+      <th mat-header-cell *matHeaderCellDef> Quantity </th>
+      <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
+    </ng-container>
+
+    <!-- Price Column -->
+    <ng-container matColumnDef="price" *ngIf="showPrice">
+      <th mat-header-cell *matHeaderCellDef> Price </th>
+      <td mat-cell *matCellDef="let element"> {{element.price}} </td>
+    </ng-container>
+
+     <!-- Category Column -->
+    <ng-container matColumnDef="category" *ngIf="showCategory">
+      <th mat-header-cell *matHeaderCellDef> Category </th>
+      <td mat-cell *matCellDef="let element"> {{element.category}} </td>
+    </ng-container>
+
+        <!-- Category Column -->
+    <ng-container matColumnDef="subCategory" *ngIf="showSubcategory">
+      <th mat-header-cell *matHeaderCellDef> Sub Category </th>
+      <td mat-cell *matCellDef="let element"> {{element.subCategory}} </td>
+    </ng-container>
+
+        <!-- SKU Column -->
+    <ng-container matColumnDef="skuNumber" *ngIf="showSkuNumber">
+      <th mat-header-cell *matHeaderCellDef> SKU Number </th>
+      <td mat-cell *matCellDef="let element"> #SkuNumber-{{element.value}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumnsNew"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumnsNew;"></tr>
+  </table>
+  <ng-template #noData>
+  <div class="no-data-message" *ngIf="showNewProductPicker">
+      No products found. Please add some products.
+    </div>
+  </ng-template>
+
+
+
         </mat-card-content>
         <mat-card-actions *ngIf="instance.hasAddButton() && instance.component.addAnotherPosition !== 'top'">
           <button mat-raised-button color="primary" (click)="addAnother()">
@@ -3464,7 +4104,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: i3$2.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: i5$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$3.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: i9.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: i9.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: i9.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}.mat-table{width:100%}.mat-header-cell,.mat-cell{padding:8px}.no-data-message{display:flex;justify-content:center;align-items:center;text-align:center;padding:20px;margin:0 20px;font-size:18px;color:#888;height:100%}\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: i3$2.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: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.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: i9.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: i9.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: i9.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: `
@@ -3485,6 +4125,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
               {{instance.component.addAnother || 'Add Another'}}
             </button>
           </mat-card-actions>
+<ng-container *ngIf="!showNewProductPicker">
+<div class="mat-elevation-z8">
           <table
                   mat-table
                   [dataSource]="dataSource"
@@ -3493,7 +4135,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                   cdkDropList
                   [cdkDropListData]="dataSource"
                   (cdkDropListDropped)="dropTable($event)">
-            >
+                  
+            
             <ng-container *ngFor="let column of formColumns" [matColumnDef]="column">
               <th mat-header-cell *matHeaderCellDef>{{ getColumnLabel(columns[column]) }}</th>
               <td mat-cell *matCellDef="let i = index;" [attr.rowIndex]="i" [attr.component]="column">
@@ -3523,6 +4166,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
               <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </div>
           </table>
+          </div>
+</ng-container>
+
+    <table mat-table [dataSource]="dataSourceNew" class="mat-table" *ngIf="dataSourceNew.length > 0 && showNewProductPicker; else noData" >
+    <!-- Product Name Column -->
+    <ng-container matColumnDef="productName">
+      <th mat-header-cell *matHeaderCellDef> Product Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.text}} </td>
+    </ng-container>
+
+    <!-- Quantity Column -->
+    <ng-container matColumnDef="quantity" *ngIf="showQuantity">
+      <th mat-header-cell *matHeaderCellDef> Quantity </th>
+      <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
+    </ng-container>
+
+    <!-- Price Column -->
+    <ng-container matColumnDef="price" *ngIf="showPrice">
+      <th mat-header-cell *matHeaderCellDef> Price </th>
+      <td mat-cell *matCellDef="let element"> {{element.price}} </td>
+    </ng-container>
+
+     <!-- Category Column -->
+    <ng-container matColumnDef="category" *ngIf="showCategory">
+      <th mat-header-cell *matHeaderCellDef> Category </th>
+      <td mat-cell *matCellDef="let element"> {{element.category}} </td>
+    </ng-container>
+
+        <!-- Category Column -->
+    <ng-container matColumnDef="subCategory" *ngIf="showSubcategory">
+      <th mat-header-cell *matHeaderCellDef> Sub Category </th>
+      <td mat-cell *matCellDef="let element"> {{element.subCategory}} </td>
+    </ng-container>
+
+        <!-- SKU Column -->
+    <ng-container matColumnDef="skuNumber" *ngIf="showSkuNumber">
+      <th mat-header-cell *matHeaderCellDef> SKU Number </th>
+      <td mat-cell *matCellDef="let element"> #SkuNumber-{{element.value}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumnsNew"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumnsNew;"></tr>
+  </table>
+  <ng-template #noData>
+  <div class="no-data-message" *ngIf="showNewProductPicker">
+      No products found. Please add some products.
+    </div>
+  </ng-template>
+
+
+
         </mat-card-content>
         <mat-card-actions *ngIf="instance.hasAddButton() && instance.component.addAnotherPosition !== 'top'">
           <button mat-raised-button color="primary" (click)="addAnother()">
@@ -3538,8 +4232,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
         <span [instance]="instance" matFormioLabel></span>
       </mat-card-title>
     </ng-template>
-  `, styles: [".datagrid-row{height:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.MatDialog }, { type: CommonService }]; } });
+  `, styles: [".datagrid-row{height:auto}.mat-table{width:100%}.mat-header-cell,.mat-cell{padding:8px}.no-data-message{display:flex;justify-content:center;align-items:center;text-align:center;padding:20px;margin:0 20px;font-size:18px;color:#888;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }, { type: CommonService }]; } });
 DataGridComponent.MaterialComponent = MaterialDataGridComponent;
 
 var EditRowState;
@@ -3922,7 +4616,7 @@ MaterialWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
           <button *ngIf="instance.hasButton('submit')" mat-raised-button color="primary" (click)="submit()">Submit</button>
         </div>
       </mat-step>
-    </mat-horizontal-stepper>`, isInline: true, styles: [":host .navigation-button-row{margin-top:8px}\n", ":host .navigation-button-row button{margin-right:8px}\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: "component", type: i3$2.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: i3$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i3$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] });
+    </mat-horizontal-stepper>`, isInline: true, styles: [":host .navigation-button-row{margin-top:8px}\n", ":host .navigation-button-row button{margin-right:8px}\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: "component", type: i3$2.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: i15.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i15.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialWizardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-formio-wizard', template: `
@@ -4092,7 +4786,7 @@ FormioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
     <div fxLayout="column" fxLayoutGap="1em">
       <ng-template #formio></ng-template>
     </div>
-  `, isInline: true, 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"], 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: "component", type: i3$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }] });
+  `, isInline: true, 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"], 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: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-formio', template: `
@@ -4164,7 +4858,8 @@ NgxRenderMaterialFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.
         FormioFormFieldComponent,
         LabelComponent,
         MaskDirective,
-        ConfirmationDialogComponent], imports: [CommonModule,
+        ConfirmationDialogComponent,
+        AddOnProductsComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         MatInputModule,
@@ -4192,7 +4887,9 @@ NgxRenderMaterialFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.
         ScrollingModule,
         NgxMatSelectSearchModule,
         MatDialogModule,
-        HttpClientModule], exports: [NgxRenderMaterialFormsComponent,
+        HttpClientModule,
+        MatAutocompleteModule], exports: [MatAutocompleteModule,
+        NgxRenderMaterialFormsComponent,
         FormioComponent,
         MatInputModule,
         MatFormFieldModule,
@@ -4246,7 +4943,9 @@ NgxRenderMaterialFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
         ScrollingModule,
         NgxMatSelectSearchModule,
         MatDialogModule,
-        HttpClientModule, MatInputModule,
+        HttpClientModule,
+        MatAutocompleteModule, MatAutocompleteModule,
+        MatInputModule,
         MatFormFieldModule,
         MatCheckboxModule,
         MatRadioModule,
@@ -4314,7 +5013,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                         FormioFormFieldComponent,
                         LabelComponent,
                         MaskDirective,
-                        ConfirmationDialogComponent
+                        ConfirmationDialogComponent,
+                        AddOnProductsComponent
                     ],
                     imports: [
                         CommonModule,
@@ -4345,9 +5045,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                         ScrollingModule,
                         NgxMatSelectSearchModule,
                         MatDialogModule,
-                        HttpClientModule
+                        HttpClientModule,
+                        MatAutocompleteModule
                     ],
                     exports: [
+                        MatAutocompleteModule,
                         NgxRenderMaterialFormsComponent,
                         FormioComponent,
                         MatInputModule,