ngx-render-material-forms 1.7.9 → 1.8.1

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

@@ -85,8 +85,8 @@ import { __awaiter } from 'tslib';
 import SelectComponent from 'formiojs/components/select/Select.js';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil, startWith, map } from 'rxjs/operators';
-import * as CryptoJS from 'crypto-js';
 import { isNullOrUndefined } from 'util';
+import * as CryptoJS from 'crypto-js';
 import * as i10 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import WellComponent from 'formiojs/components/well/Well.js';
@@ -2559,9 +2559,60 @@ class CommonService {
         this.dropdownflag$ = this.setFlag.asObservable(); // Observable that emits the boolean value
         this.holy = '';
         this.grail = '';
+        //static sort_5 = '4sw==';
+        this.sort_5 = 'oOA==';
+        this.Lsort_5 = 'L/w==';
+        this.Jsort_5 = 'BaQ==';
+        this.Psort_5 = 'WVQ==';
+        //static sales_2 = '2+T2NX';
+        this.sales_2 = 'gupVC1';
+        this.Lsales_2 = 'DyLI+G';
+        this.Jsales_2 = '5g63ak';
+        this.Psales_2 = 'HFQDgE';
+        //static Mobile_4 = 'RR12R';
+        this.Mobile_4 = 'NV9VK';
+        this.LMobile_4 = '+P91l';
+        this.JMobile_4 = 'N+Bxw';
+        this.PMobile_4 = 'j4UMt';
+        //static Id_2 = 'qUBQE';
+        this.Id_2 = 'W7TJv';
+        this.LId_2 = 'kAJ87';
+        this.JId_2 = 'I4PMB';
+        this.PId_2 = '4Ha4U';
+        // static Name_1 = '8F/';
+        this.Name_1 = 'd3u';
+        this.LName_1 = 'UwX';
+        this.JName_1 = 'mCc';
+        this.PName_1 = 'nyP';
+        this.city = 'Vq'; //1
+        this.state = 'drA2'; //4
+        this.region = 'E/f'; //2
+        this.territory = 'gZnA=='; //6
+        this.country = '2sMK'; //5
+        this.continent = 'Q5N2X'; //3
+        this.Jcity = 'lk'; //1
+        this.Jstate = 'rswL'; //4
+        this.Jregion = 'xsH'; //2
+        this.Jterritory = 'Xsow=='; //6
+        this.Jcountry = 'n0bs'; //5
+        this.Jcontinent = 'hQOoI'; //3
+        this.Lcity = 'Aw'; //1
+        this.Lstate = 'hrmx'; //4
+        this.Lregion = 'MMC'; //2
+        this.Lterritory = 'vVGQ=='; //6
+        this.Lcountry = 'IqPc'; //5
+        this.Lcontinent = 'CttR+'; //3
+        this.Pcity = '7h'; //1
+        this.Pstate = 'JtNz'; //4
+        this.Pregion = 'FTl'; //2
+        this.Pterritory = '/v+g=='; //6
+        this.Pcountry = 'WFDd'; //5
+        this.Pcontinent = 'sDt6N'; //3
         this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
-        this.holy = CryptoJS.enc.Base64.parse('8F/2+T2NXqUBQERR12R4sw==');
-        this.grail = CryptoJS.enc.Base64.parse('yE0CgQbYzK5wqeoKTVzhOQ==');
+        // this.holy = CryptoJS.enc.Base64.parse('8F/2+T2NXqUBQERR12R4sw==');
+        //this.grail = CryptoJS.enc.Base64.parse('yE0CgQbYzK5wqeoKTVzhOQ==');
+        this.holy = CryptoJS.enc.Base64.parse(this.getcombodeal());
+        this.grail = CryptoJS.enc.Base64.parse(this.getglobedata());
         this.paramsData = JSON.parse(localStorage.getItem('productPickerParams'));
     }
     getBaseApiUrl() {
@@ -2704,6 +2755,28 @@ class CommonService {
         return newProductPickerFlag && Object.keys(newProductPickerFlag).some(key => key.toLocaleLowerCase() === attributeName.toLowerCase() &&
             newProductPickerFlag[key].toLowerCase() === "true");
     }
+    getglobedata() {
+        const hostMappings = {
+            'stage.vartopia.com': this.city + this.region + this.continent + this.state + this.country + this.territory,
+            'lincoln.vartopia.com': this.Lcity + this.Lregion + this.Lcontinent + this.Lstate + this.Lcountry + this.Lterritory,
+            'jackson.vartopia.com': this.Jcity + this.Jregion + this.Jcontinent + this.Jstate + this.Jcountry + this.Jterritory,
+            'my.vartopia.com': this.Pcity + this.Pregion + this.Pcontinent + this.Pstate + this.Pcountry + this.Pterritory,
+            'localhost': this.city + this.region + this.continent + this.state + this.country + this.territory,
+        };
+        const hostname = window.location.hostname;
+        return hostMappings[hostname] || '';
+    }
+    getcombodeal() {
+        const hostMappings = {
+            'stage.vartopia.com': this.Name_1 + this.sales_2 + this.Id_2 + this.Mobile_4 + this.sort_5,
+            'lincoln.vartopia.com': this.LName_1 + this.Lsales_2 + this.LId_2 + this.LMobile_4 + this.Lsort_5,
+            'jackson.vartopia.com': this.JName_1 + this.Jsales_2 + this.JId_2 + this.JMobile_4 + this.Jsort_5,
+            'my.vartopia.com': this.PName_1 + this.Psales_2 + this.PId_2 + this.PMobile_4 + this.Psort_5,
+            'localhost': this.Name_1 + this.sales_2 + this.Id_2 + this.Mobile_4 + this.sort_5,
+        };
+        const hostname = window.location.hostname;
+        return hostMappings[hostname] || '';
+    }
 }
 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' });
@@ -2729,8 +2802,8 @@ class MaterialSelectComponent extends MaterialComponent {
         this.pageSize = 20;
         this.totalPages = 0;
         this.searchQuery = '';
-        this.holy = '';
-        this.grail = '';
+        // holy: any = '';
+        // grail: any = '';
         this.productsloadingFlag = false;
         this.searching = false;
         this.productList = [];
@@ -2745,8 +2818,10 @@ class MaterialSelectComponent extends MaterialComponent {
         this.storeDependentItems = [];
         this.executionFlag = false;
         this.apiCounter = 0;
-        this.holy = CryptoJS.enc.Base64.parse('8F/2+T2NXqUBQERR12R4sw==');
-        this.grail = CryptoJS.enc.Base64.parse('yE0CgQbYzK5wqeoKTVzhOQ==');
+        // this.holy = CryptoJS.enc.Base64.parse('8F/2+T2NXqUBQERR12R4sw==');
+        // this.grail = CryptoJS.enc.Base64.parse('yE0CgQbYzK5wqeoKTVzhOQ==');
+        //this.holy = CryptoJS.enc.Base64.parse(this.commonService.getcombodeal());
+        //this.grail = CryptoJS.enc.Base64.parse(this.commonService.getglobedata());
     }
     onInputChange(event) {
         if (this.instance.component.key.toLowerCase() === 'vendorproductid' && event.target.value === '') {
@@ -2759,28 +2834,29 @@ class MaterialSelectComponent extends MaterialComponent {
             this.searchItem = "";
         }
     }
-    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
-        });
-    }
+    // 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: any, holy: any, grail: any) {
+    //   return CryptoJS.AES.encrypt(data.toString(), holy,
+    //     {
+    //       blockSize: 128,
+    //       iv: grail,
+    //       mode: CryptoJS.mode.CBC,
+    //       padding: CryptoJS.pad.Pkcs7
+    //     });
+    // }
     registerPanelScrollEvent(selectElem) {
         if (selectElem && (selectElem === null || selectElem === void 0 ? void 0 : selectElem.panel)) {
             // const panelElement = selectElem.panel.nativeElement;
@@ -2843,20 +2919,20 @@ class MaterialSelectComponent extends MaterialComponent {
         else {
             console.error('User not authenticated or tokens missing.');
         }
-        const envendorId = this.scrumble(vendorId);
-        const enpageNumber = this.scrumble(pageNumber);
-        const enpageSize = this.scrumble(pageSize);
-        const ensearchQuery = this.scrumble(searchQuery);
-        const encodeIncludeCurrencyId = this.scrumble(includeCurrencyId);
-        let enactive = this.scrumble(onlyActive);
+        const envendorId = this.commonService.scrumble(vendorId);
+        const enpageNumber = this.commonService.scrumble(pageNumber);
+        const enpageSize = this.commonService.scrumble(pageSize);
+        const ensearchQuery = this.commonService.scrumble(searchQuery);
+        const encodeIncludeCurrencyId = this.commonService.scrumble(includeCurrencyId);
+        let enactive = this.commonService.scrumble(onlyActive);
         //Check if enactive is undefined, null, or blank
         if (enactive === undefined || enactive === null || enactive === '') {
-            enactive = this.scrumble(true); // Set default value to true
+            enactive = this.commonService.scrumble(true); // Set default value to true
         }
         // Scrumble and handle the includeDescription parameter
-        let endescription = this.scrumble(includeDescription);
+        let endescription = this.commonService.scrumble(includeDescription);
         if (!endescription) {
-            endescription = this.scrumble(false); // Set to 'false' if undefined, null, or blank
+            endescription = this.commonService.scrumble(false); // Set to 'false' if undefined, null, or blank
         }
         const baseUrlMapping = {
             'localhost': 'http://localhost:58504',
@@ -3341,6 +3417,7 @@ class AddOnProductsComponent {
         this.dropdownL4Label = '';
         this.dropDownCount = 0;
         this.disablePrice = true;
+        this.checkSubmissionStatus = false;
         this.showCategory = data.dropdownsFlag.showDialogCategory;
         this.showSubcategory = data.dropdownsFlag.showDialogSubCategory;
         this.showPrice = data.dropdownsFlag.showDialogPrice;
@@ -3355,6 +3432,7 @@ class AddOnProductsComponent {
         this.dropdownL2Label = data.dropdownsFlag.dropdownL2Label;
         this.dropdownL3Label = data.dropdownsFlag.dropdownL3Label;
         this.dropdownL4Label = data.dropdownsFlag.dropdownL4Label;
+        this.checkSubmissionStatus = data.dropdownsFlag.checkSubmissionStatus;
         this.dropDownCount = this.countTrueDropdowns(data.dropdownsFlag);
         this.selection = new SelectionModel(true, data.selectedProducts || []);
         this.form = this.fb.group({
@@ -3425,7 +3503,9 @@ class AddOnProductsComponent {
     }
     ngOnInit() {
         // this.loadProductCategory();
-        this.loadDropdownL1();
+        if (this.dropdownL1) {
+            this.loadDropdownL1();
+        }
         this.form.get('dropdownLevel1').valueChanges
             .pipe(startWith(''), map(value => this.filterProducts(value, 'category1'))).subscribe(l1 => {
             this.filteredDropdownOne = l1;
@@ -3664,7 +3744,7 @@ class AddOnProductsComponent {
         let showButton = true;
         const index = this.selectedDataSource.data.indexOf(element);
         if (index >= 0) {
-            if (this.selectedDataSource.data.length === 1) {
+            if (this.selectedDataSource.data.length === 1 && !this.checkSubmissionStatus) {
                 message = 'Please select at least one product.';
                 showButton = false;
             }
@@ -3714,10 +3794,10 @@ class AddOnProductsComponent {
     }
 }
 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                            <h5>Filters</h5>\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;\" (click)=\"$event.stopPropagation();toggleSelection(row)\" [class.selected]=\"selection.isSelected(row)\"></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\">\r\n                                    <mat-label>Please enter quantity</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n                                        placeholder=\"Please enter quantity\" type=\"number\" min=\"0\">\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}.dropdown-selection h5{font-size:18px}::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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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"] }] });
+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\r\n                        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\" *ngIf=\"dropdownL1\">\r\n                        <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n                            <h5>Filters</h5>\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;\"\r\n                            (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n                            [class.selected]=\"selection.isSelected(row)\"></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 [disabled]=\"selection.selected.length ? false : true\"\r\n                        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\r\n                                    (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\">\r\n                                    <mat-label>Please enter quantity</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\" type=\"number\"\r\n                                        min=\"1\">\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\r\n                            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}.dropdown-selection h5{font-size:18px}::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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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                            <h5>Filters</h5>\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;\" (click)=\"$event.stopPropagation();toggleSelection(row)\" [class.selected]=\"selection.isSelected(row)\"></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\">\r\n                                    <mat-label>Please enter quantity</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n                                        placeholder=\"Please enter quantity\" type=\"number\" min=\"0\">\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}.dropdown-selection h5{font-size:18px}::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"] }]
+            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\r\n                        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\" *ngIf=\"dropdownL1\">\r\n                        <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n                            <h5>Filters</h5>\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;\"\r\n                            (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n                            [class.selected]=\"selection.isSelected(row)\"></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 [disabled]=\"selection.selected.length ? false : true\"\r\n                        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\r\n                                    (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\">\r\n                                    <mat-label>Please enter quantity</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\" type=\"number\"\r\n                                        min=\"1\">\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\r\n                            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}.dropdown-selection h5{font-size:18px}::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,
@@ -3900,7 +3980,7 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
                 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 }
+                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, checkSubmissionStatus: this.checkSubmissionStatus }, selectedProducts: this.dataSourceNew }
             })
                 .afterClosed().subscribe(response => {
                 var _a;