ngx-render-material-forms 1.8.0 → 1.8.2

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

@@ -5,7 +5,7 @@ import { HttpHeaders, HttpClientModule } from '@angular/common/http';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormControl, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, NG_VALUE_ACCESSOR, Validators, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i4$2 from '@angular/material/input';
 import { MAT_INPUT_VALUE_ACCESSOR, MatInputModule } from '@angular/material/input';
 import * as i3$2 from '@angular/material/button';
@@ -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;
@@ -2830,7 +2906,7 @@ class MaterialSelectComponent extends MaterialComponent {
         const includeDescription = this.getValueByKey(paramsData, 'includeDescription');
         const vendorId = this.getValueByKey(paramsData, 'vendorId');
         const onlyActive = this.getValueByKey(paramsData, 'onlyActive');
-        const includeCurrencyId = this.getValueByKey(paramsData, 'includeCurrencyId');
+        const includeCountry = this.getValueByKey(paramsData, 'includeCountry');
         var currentUser = JSON.parse(localStorage.getItem('currentUser'));
         let headers;
         if (currentUser && currentUser.Tokens && currentUser.Tokens.AccessToken) {
@@ -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 encodeIncludeCountry = this.commonService.scrumble(includeCountry);
+        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',
@@ -2869,9 +2945,9 @@ class MaterialSelectComponent extends MaterialComponent {
         const hostname = window.location.hostname;
         const baseApiUrl = baseUrlMapping[hostname] || null;
         let url = `${baseApiUrl}/api/VendorFormBuilder/GetVendorProducts?vendorId=${envendorId}&pageNumber=${enpageNumber}&pageSize=${enpageSize}&search=${ensearchQuery}&onlyActive=${enactive}&includeDescription=${endescription}`;
-        // Only add includeCurrencyId if it has a valid value
-        if (encodeIncludeCurrencyId !== null && encodeIncludeCurrencyId !== undefined) {
-            url += `&includeCurrencyId=${encodeIncludeCurrencyId}`;
+        // Only add includeCountryId if it has a valid value
+        if (encodeIncludeCountry !== null && encodeIncludeCountry !== undefined) {
+            url += `&includeCountry=${encodeIncludeCountry}`;
         }
         this.http.get(url, { headers }).subscribe(response => {
             var _a;
@@ -3390,6 +3466,10 @@ class AddOnProductsComponent {
     }
     initializeFormArray() {
         const selectedProductsArray = this.form.get('selectedProducts');
+        if (!selectedProductsArray) {
+            console.error('selectedProducts FormArray not initialized.');
+            return;
+        }
         this.selection.selected.forEach(product => {
             selectedProductsArray.push(this.fb.group({
                 price: [product.price || '', Validators.required],
@@ -3408,10 +3488,10 @@ class AddOnProductsComponent {
         this.selectedDataSource.data = [...this.selection.selected];
     }
     initializeDataSources() {
-        var _a, _b, _c, _d;
-        // Ensure selected items are marked in the main data source
-        if ((_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.length) {
-            (_d = (_c = this.selection) === null || _c === void 0 ? void 0 : _c.selected) === null || _d === void 0 ? void 0 : _d.forEach(selectedProduct => {
+        var _a, _b, _c, _d, _e, _f;
+        // Debugging logs to trace issues
+        if (Array.isArray((_a = this.selection) === null || _a === void 0 ? void 0 : _a.selected) && Array.isArray((_b = this.dataSource) === null || _b === void 0 ? void 0 : _b.data) && ((_d = (_c = this.selection) === null || _c === void 0 ? void 0 : _c.selected) === null || _d === void 0 ? void 0 : _d.length)) {
+            (_f = (_e = this.selection) === null || _e === void 0 ? void 0 : _e.selected) === null || _f === void 0 ? void 0 : _f.forEach(selectedProduct => {
                 const index = this.dataSource.data.findIndex(product => product.value === selectedProduct.value);
                 if (index >= 0) {
                     this.dataSource.data[index] = selectedProduct;
@@ -3427,7 +3507,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;
@@ -3550,7 +3632,17 @@ class AddOnProductsComponent {
         this.updateSelectedProducts();
     }
     toggleSelection(row) {
-        this.selection.toggle(row);
+        // Check if the product is already selected
+        const alreadySelected = this.selection.selected.some(selected => selected.value === row.value);
+        if (alreadySelected) {
+            // If the product is already selected, deselect it
+            this.selection.deselect(row);
+        }
+        else {
+            // If not already selected, select it
+            this.selection.select(row);
+        }
+        // Update selected products to ensure no duplicates
         this.updateSelectedProducts();
     }
     // Getter for the FormArray
@@ -3560,12 +3652,20 @@ class AddOnProductsComponent {
     updateSelectedProducts() {
         var _a, _b;
         if (Array.isArray(this.selection.selected)) {
+            // Deduplicate selected products
+            const uniqueProducts = Array.from(new Map(this.selection.selected.map(product => [product.value, product])).values());
+            this.selection.clear();
+            uniqueProducts.forEach(product => this.selection.select(product));
             this.selectedDataSource.data = [...this.selection.selected];
             const selectedProductsArray = this.selectedProducts;
             selectedProductsArray.clear();
-            (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.forEach(product => {
+            (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.forEach((product, index) => {
                 var _a, _b;
-                selectedProductsArray === null || selectedProductsArray === void 0 ? void 0 : selectedProductsArray.push(this.fb.group({
+                if (!(product === null || product === void 0 ? void 0 : product.value)) {
+                    console.error('Product value (SKU) is missing at index:', index, product);
+                    return;
+                }
+                const productFormGroup = this.fb.group({
                     price: [(_a = product === null || product === void 0 ? void 0 : product.price) !== null && _a !== void 0 ? _a : '', this.showPrice ? Validators.required : []],
                     text: [(product === null || product === void 0 ? void 0 : product.text) || ''],
                     quantity: [(_b = product === null || product === void 0 ? void 0 : product.quantity) !== null && _b !== void 0 ? _b : '', this.showQuantity ? Validators.required : []],
@@ -3573,11 +3673,27 @@ class AddOnProductsComponent {
                     subCategory: [(product === null || product === void 0 ? void 0 : product.subCategory) || ''],
                     value: [(product === null || product === void 0 ? void 0 : product.value) || ''],
                     skuNumber: [(product === null || product === void 0 ? void 0 : product.value) || '']
-                }));
+                });
+                if (productFormGroup) {
+                    selectedProductsArray.push(productFormGroup);
+                }
+                else {
+                    console.error(`Failed to create FormGroup for product at index ${index}.`);
+                }
             });
-            selectedProductsArray.controls.forEach(control => {
-                var _a;
-                (_a = control.get('price')) === null || _a === void 0 ? void 0 : _a.disable();
+            selectedProductsArray.controls.forEach((control, index) => {
+                if (control instanceof FormGroup) {
+                    const priceControl = control.get('price');
+                    if (priceControl) {
+                        priceControl.disable();
+                    }
+                    else {
+                        console.error(`Price control is missing in FormGroup at index ${index}.`);
+                    }
+                }
+                else {
+                    console.error(`Unexpected control type at index ${index}:`, control);
+                }
             });
         }
         else {
@@ -3641,9 +3757,22 @@ class AddOnProductsComponent {
             if (response && response.code === 200) {
                 this.totalPages = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.totalPages;
                 const data = response.data.dataSource;
+                // Sync selection state with new data
+                data.forEach(product => {
+                    const existingProduct = this.selection.selected.find(p => p.value === product.value);
+                    if (existingProduct) {
+                        Object.assign(product, existingProduct); // Replace product with existing reference
+                        this.selection.select(product); // Mark as selected
+                        //this.toggleSelection(product)
+                        this.updateSelectedProducts();
+                    }
+                });
+                // Avoid duplicates in the dataSource
+                const existingProductValues = new Set(this.dataSource.data.map(product => product.value));
+                const uniqueNewData = data.filter(product => !existingProductValues.has(product.value));
                 if (this.dataSource.data.length > 0 && flag) {
                     data.forEach(item => this.dataSource.data.push(item));
-                    this.dataSource.data = [...this.dataSource.data, ...data];
+                    this.dataSource.data = [...this.dataSource.data, ...uniqueNewData];
                 }
                 else {
                     this.dataSource.data = data;
@@ -3682,7 +3811,7 @@ class AddOnProductsComponent {
                     this.selectedDataSource._updateChangeSubscription();
                     this.selection.deselect(element);
                     const selectedProductsArray = this.form.get('selectedProducts');
-                    const productIndex = selectedProductsArray.controls.findIndex(control => control.value.productName === element.productName);
+                    const productIndex = selectedProductsArray.controls.findIndex(control => control.value.value === element.value);
                     if (productIndex >= 0) {
                         selectedProductsArray.removeAt(productIndex);
                     }
@@ -3714,12 +3843,36 @@ class AddOnProductsComponent {
     displayFn(option) {
         return option ? option.name : '';
     }
+    onQuantityChange(event, index) {
+        const value = event.target.value;
+        const quantityControl = this.selectedProducts.at(index).get('quantity');
+        if (!quantityControl)
+            return;
+        // Clear any previous errors
+        quantityControl.setErrors(null);
+        // If the value is empty, set 'required' error
+        if (value === '' || value === null) {
+            quantityControl.setErrors({ 'required': true });
+        }
+        // If the value is less than 1, set 'min' error
+        else if (Number(value) < 1) {
+            quantityControl.setErrors({ 'min': true });
+        }
+        // If the value is not an integer, set 'pattern' error
+        else if (!Number.isInteger(Number(value))) {
+            quantityControl.setErrors({ 'pattern': true });
+        }
+        // Otherwise, set the valid value
+        else {
+            quantityControl.setValue(Number(value));
+        }
+    }
 }
 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\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\">\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"] }] });
+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>Quantity</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\" type=\"number\"\r\n                                        min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n                                        This field is required\r\n                                    </mat-error>\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n                                        Quantity can not be less than 1\r\n                                    </mat-error>\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n                                        Decimals not allowed\r\n                                      </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n\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\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\">\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"] }]
+            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>Quantity</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\" type=\"number\"\r\n                                        min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n                                        This field is required\r\n                                    </mat-error>\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n                                        Quantity can not be less than 1\r\n                                    </mat-error>\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n                                        Decimals not allowed\r\n                                      </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n\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,