ngx-render-material-forms 2.0.0 → 2.0.2

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

@@ -39,7 +39,7 @@ import * as i5$1 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i16 from '@angular/material/autocomplete';
+import * as i14 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import Webform from 'formiojs/Webform.js';
 import FormioComponent$2 from 'formiojs/components/_classes/component/Component.js';
@@ -94,14 +94,15 @@ import DataGridComponent from 'formiojs/components/datagrid/DataGrid.js';
 import * as i9 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { SelectionModel } from '@angular/cdk/collections';
-import * as i15 from '@angular/material/stepper';
-import { MatStepperModule } from '@angular/material/stepper';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import EditGridComponent from 'formiojs/components/editgrid/EditGrid.js';
 import Components$2 from 'formiojs/components/Components';
 import isString from 'lodash/isString';
 import TableComponent from 'formiojs/components/table/Table.js';
 import Wizard from 'formiojs/Wizard';
 import Displays from 'formiojs/displays/Displays';
+import * as i3$3 from '@angular/material/stepper';
+import { MatStepperModule } from '@angular/material/stepper';
 import * as i1$3 from '@formio/angular';
 import { FormioBaseComponent } from '@formio/angular';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -1072,12 +1073,6 @@ ButtonComponent.MaterialComponent = MaterialButtonComponent;
 
 class MaterialTextareaComponent extends MaterialComponent {
     ngAfterViewInit() {
-        if (this.element && this.element.nativeElement && this.instance) {
-            // Add custom classes to elements.
-            if (this.instance.component.customClass) {
-                this.element.nativeElement.classList.add(this.instance.component.customClass);
-            }
-        }
         // Attach the element so the wysiwyg will work.
         this.instance.attachElement(this.textarea.nativeElement);
     }
@@ -3083,12 +3078,6 @@ class MaterialSelectComponent extends MaterialComponent {
         });
     }
     ngAfterViewInit() {
-        if (this.element && this.element.nativeElement && this.instance) {
-            // Add custom classes to elements.
-            if (this.instance.component.customClass) {
-                this.element.nativeElement.classList.add(this.instance.component.customClass);
-            }
-        }
         this.selectElem.openedChange.subscribe((isOpen) => __awaiter(this, void 0, void 0, function* () {
             var _a, _b, _c;
             let i = 0;
@@ -3467,6 +3456,14 @@ class AddOnProductsComponent {
         this.levelFourId = '';
         this.disablePrice = true;
         this.checkSubmissionStatus = false;
+        this.currentPage = 'select-products';
+        this.isVisible = false;
+        this.isDisabled2 = true;
+        this.isDisabled3 = true;
+        this.isDisabled4 = true;
+        this.isPriceDisable = true;
+        this.activeFiltersCount = 0;
+        this.emptyImage = '/i/table-grid-empty-state.svg';
         this.showCategory = data.dropdownsFlag.showDialogCategory;
         this.showSubcategory = data.dropdownsFlag.showDialogSubCategory;
         this.showPrice = data.dropdownsFlag.showDialogPrice;
@@ -3484,15 +3481,7 @@ class AddOnProductsComponent {
         this.checkSubmissionStatus = data.dropdownsFlag.checkSubmissionStatus;
         this.dropDownCount = this.countTrueDropdowns(data.dropdownsFlag);
         this.selection = new SelectionModel(true, data.selectedProducts || []);
-        this.form = this.fb.group({
-            dropdownLevel1: [''],
-            dropdownLevel2: [''],
-            dropdownLevel3: [''],
-            dropdownLevel4: [''],
-            searchProductName: [''],
-            selectedProducts: this.fb.array([])
-        });
-        this.initializeFormArray();
+        this.isPriceDisable = data.dropdownsFlag.priceDisable;
         if (!this.showCategory) {
             this.removeColumn('categoryName');
         }
@@ -3521,8 +3510,8 @@ class AddOnProductsComponent {
         }
         this.selection.selected.forEach(product => {
             selectedProductsArray.push(this.fb.group({
-                price: [product.price || '', Validators.required],
-                text: [product.text || ''],
+                price: [(product === null || product === void 0 ? void 0 : product.price) || '', Validators.required],
+                text: [(product === null || product === void 0 ? void 0 : product.text) || ''],
                 quantity: [product.quantity || '', Validators.required],
                 category: [(product === null || product === void 0 ? void 0 : product.category) || ''],
                 subCategory: [(product === null || product === void 0 ? void 0 : product.subCategory) || ''],
@@ -3531,8 +3520,8 @@ class AddOnProductsComponent {
             }));
         });
         selectedProductsArray.controls.forEach(control => {
-            var _a;
-            (_a = control.get('price')) === null || _a === void 0 ? void 0 : _a.disable();
+            var _a, _b;
+            this.isPriceDisable ? (_a = control.get('price')) === null || _a === void 0 ? void 0 : _a.disable() : (_b = control.get('price')) === null || _b === void 0 ? void 0 : _b.enable();
         });
         this.selectedDataSource.data = [...this.selection.selected];
     }
@@ -3553,10 +3542,17 @@ class AddOnProductsComponent {
         }
     }
     ngAfterViewInit() {
-        this.stepper._getIndicatorType = () => 'number';
     }
     ngOnInit() {
-        // this.loadProductCategory();
+        this.form = this.fb.group({
+            dropdownLevel1: [{ value: '', disabled: false }],
+            dropdownLevel2: [{ value: '', disabled: true }],
+            dropdownLevel3: [{ value: '', disabled: true }],
+            dropdownLevel4: [{ value: '', disabled: true }],
+            searchProductName: [''],
+            selectedProducts: this.fb.array([])
+        });
+        this.initializeFormArray();
         if (this.dropdownL1) {
             this.loadDropdownL1();
         }
@@ -3581,9 +3577,9 @@ class AddOnProductsComponent {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const searchQuery = (_b = (_a = this.form.controls.searchProductName) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim(); // Trim to remove blank spaces
         const levelOneId = (_d = (_c = this.form.controls.dropdownLevel1) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.id;
-        this.loadingFlag = false; // Disable scroll-based loading during search
+        this.loadingFlag = false;
         if (this.firstscrollableDiv) {
-            this.firstscrollableDiv.nativeElement.scrollTop = 0; // Reset scroll position
+            this.firstscrollableDiv.nativeElement.scrollTop = 0;
         }
         if ((searchQuery && searchQuery !== '') || (levelOneId && levelOneId !== null && levelOneId !== undefined)) {
             this.searchQuery = (_e = this.form.controls.searchProductName) === null || _e === void 0 ? void 0 : _e.value;
@@ -3595,6 +3591,7 @@ class AddOnProductsComponent {
             this.pageSize = 20;
             this.getProducts(false);
         }
+        this.updateActiveFiltersCount();
     }
     loadDropdownL1() {
         this.spinnerFlag = true;
@@ -3639,7 +3636,7 @@ class AddOnProductsComponent {
     filterProducts(value, cat) {
         const filterValue = typeof value === 'string' ? value === null || value === void 0 ? void 0 : value.toLowerCase() : value;
         let data;
-        // Dynamically assign the data array based on the category
+        /*Dynamically assign the data array based on the category*/
         switch (cat) {
             case 'category1':
                 data = this.dropdownOne;
@@ -3672,6 +3669,9 @@ class AddOnProductsComponent {
                 }
             });
         }
+        else {
+            this.form.markAllAsTouched();
+        }
     }
     isAllSelected() {
         const numSelected = this.selection.selected.length;
@@ -3743,7 +3743,7 @@ class AddOnProductsComponent {
                 if (control instanceof FormGroup) {
                     const priceControl = control.get('price');
                     if (priceControl) {
-                        priceControl.disable();
+                        this.isPriceDisable ? priceControl.disable() : priceControl.enable();
                     }
                     else {
                         console.error(`Price control is missing in FormGroup at index ${index}.`);
@@ -3765,6 +3765,7 @@ class AddOnProductsComponent {
         return this.selection.selected.length;
     }
     onOptionSelected(event, category) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         let selectedValue;
         if (event && event.option && event.option.value !== undefined) {
             selectedValue = event.option.value.id;
@@ -3781,8 +3782,20 @@ class AddOnProductsComponent {
             this.filteredDropdownThree = [];
             this.filteredDropdownFour = [];
             if (this.dropdownL2 && this.levelOneId) {
+                (_a = this.form.get('dropdownLevel2')) === null || _a === void 0 ? void 0 : _a.enable();
+                (_b = this.form.get('dropdownLevel3')) === null || _b === void 0 ? void 0 : _b.disable();
+                (_c = this.form.get('dropdownLevel4')) === null || _c === void 0 ? void 0 : _c.disable();
+                this.isDisabled2 = false;
                 this.loadDropdownL2(this.levelOneId);
             }
+            else {
+                (_d = this.form.get('dropdownLevel2')) === null || _d === void 0 ? void 0 : _d.disable();
+                (_e = this.form.get('dropdownLevel3')) === null || _e === void 0 ? void 0 : _e.disable();
+                (_f = this.form.get('dropdownLevel4')) === null || _f === void 0 ? void 0 : _f.disable();
+                this.isDisabled2 = true;
+                this.isDisabled3 = true;
+                this.isDisabled4 = true;
+            }
         }
         if (category === 'category2') {
             this.levelTwoId = selectedValue;
@@ -3790,16 +3803,31 @@ class AddOnProductsComponent {
             this.form.get('dropdownLevel4').setValue(null);
             this.filteredDropdownThree = [];
             if (this.dropdownL3 && this.levelOneId && this.levelTwoId) {
+                (_g = this.form.get('dropdownLevel3')) === null || _g === void 0 ? void 0 : _g.enable();
+                (_h = this.form.get('dropdownLevel4')) === null || _h === void 0 ? void 0 : _h.disable();
+                this.isDisabled3 = false;
                 this.loadDropdownL3(this.levelOneId, this.levelTwoId);
             }
+            else {
+                (_j = this.form.get('dropdownLevel3')) === null || _j === void 0 ? void 0 : _j.disable();
+                (_k = this.form.get('dropdownLevel4')) === null || _k === void 0 ? void 0 : _k.disable();
+                this.isDisabled3 = true;
+                this.isDisabled4 = true;
+            }
         }
         if (category === 'category3') {
             this.levelThreeId = selectedValue;
             this.form.get('dropdownLevel4').setValue(null);
             this.filteredDropdownFour = [];
             if (this.dropdownL4 && this.levelOneId && this.levelTwoId && this.levelThreeId) {
+                (_l = this.form.get('dropdownLevel4')) === null || _l === void 0 ? void 0 : _l.enable();
+                this.isDisabled4 = false;
                 this.loadDropdownL4(this.levelOneId, this.levelTwoId, this.levelThreeId);
             }
+            else {
+                (_m = this.form.get('dropdownLevel4')) === null || _m === void 0 ? void 0 : _m.disable();
+                this.isDisabled4 = true;
+            }
         }
         if (category === 'category4') {
             this.levelFourId = selectedValue;
@@ -3808,11 +3836,7 @@ class AddOnProductsComponent {
     getProducts(flag) {
         this.spinnerFlag = true;
         const search = this.searchQuery;
-        const levelOneId = this.levelOneId ? this.levelOneId : 0;
-        const levelTwoId = this.levelTwoId ? this.levelTwoId : 0;
-        const levelThreeId = this.levelThreeId ? this.levelThreeId : 0;
-        const levelFourId = this.levelFourId ? this.levelFourId : 0;
-        this.commonSevice.loadProducts(this.pageNumber, this.pageSize, search, true, false, levelOneId, levelTwoId, levelThreeId, levelFourId).subscribe(response => {
+        this.commonSevice.loadProducts(this.pageNumber, this.pageSize, search, true, false, this.levelOneId, this.levelTwoId, this.levelThreeId, this.levelFourId).subscribe(response => {
             var _a;
             this.spinnerFlag = false;
             if (response && response.code === 200) {
@@ -3923,12 +3947,87 @@ class AddOnProductsComponent {
             quantityControl.setErrors({ 'pattern': true });
         }
     }
+    goToNextPage() {
+        this.currentPage = 'edit-save';
+    }
+    goToPreviousPage() {
+        this.currentPage = 'select-products';
+    }
+    toggleSection() {
+        this.isVisible = !this.isVisible;
+    }
+    clearField(field, category) {
+        var _a;
+        (_a = this.form.get(field)) === null || _a === void 0 ? void 0 : _a.setValue(null);
+        if (category === 'category1') {
+            this.onOptionSelected(null, 'category1');
+        }
+        else if (category === 'category2') {
+            this.onOptionSelected(null, 'category2');
+        }
+        else if (category === 'category3') {
+            this.onOptionSelected(null, 'category3');
+        }
+        else if (category === 'category4') {
+            this.levelFourId = null;
+        }
+        this.updateActiveFiltersCount();
+    }
+    onInputChange(event, category) {
+        const inputValue = event.target.value;
+        if (!inputValue) {
+            // Handle case where input is cleared
+            this.clearField(`dropdownLevel${this.getDropdownLevel(category)}`, category);
+        }
+    }
+    getDropdownLevel(category) {
+        switch (category) {
+            case 'category1': return 1;
+            case 'category2': return 2;
+            case 'category3': return 3;
+            case 'category4': return 4;
+            default: return 0;
+        }
+    }
+    updateActiveFiltersCount() {
+        this.activeFiltersCount = 0;
+        if (this.form.get('dropdownLevel1').value)
+            this.activeFiltersCount++;
+        if (this.form.get('dropdownLevel2').value)
+            this.activeFiltersCount++;
+        if (this.form.get('dropdownLevel3').value)
+            this.activeFiltersCount++;
+        if (this.form.get('dropdownLevel4').value)
+            this.activeFiltersCount++;
+    }
 }
 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 }, { propertyName: "stepper", first: true, predicate: ["stepper"], 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)\" [ngClass] =\"dataSource.data.length > 10 ? 'tbl-record-found': ''\">\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}.new-class.first-div.tbl-record-found{height:400px;overflow-y:auto}.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=\"mat-dialog-heading\">\r\n    <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n    <div class=\"mat-dialog-content\">\r\n        <!--Search Start-->\r\n        <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n            <div class=\"bs\">\r\n                <div class=\"search-icon\">\r\n                    <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                        transform=\"rotate(0 0 0)\">\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                            d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n                    </svg>\r\n                </div>\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"input-search\">\r\n                        <input type=\"text\" matInput placeholder=\"Search Product\" formControlName=\"searchProductName\">\r\n                    </div>\r\n                </form>\r\n                <div class=\"advfilter\">\r\n                    <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n                        <mat-icon matBadge=\"4\"\r\n                            matBadgeSize=\"small\" class=\"material-icons-round\" aria-hidden=\"false\"\r\n                            aria-label=\"tune\">tune\r\n                        </mat-icon>\r\n                        <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div class=\"search-btn\">\r\n                <button mat-raised-button color=\"primary\"\r\n                    (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n            </div>\r\n        </div>\r\n        <!--Search End-->\r\n        <div class=\"product-selector\">\r\n            <div [hidden]=\"currentPage !== 'select-products'\">\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"product-selection-container\">\r\n                        <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n                            <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\" *ngIf=\"isVisible\">\r\n                                <h5>Advanced Filters</h5>\r\n                                <div class=\"row\">\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL1Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n                                                    [matAutocomplete]=\"auto3\"\r\n                                                    (input)=\"onInputChange($event, 'category1')\">\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-icon matSuffix *ngIf=\"form.get('dropdownLevel1').value\"\r\n                                                    (click)=\"clearField('dropdownLevel1', 'category1')\">close</mat-icon>\r\n                                                <mat-icon matSuffix>keyboard_arrow_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL2Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n                                                    [matAutocomplete]=\"auto4\"\r\n                                                    (input)=\"onInputChange($event, 'category2')\">\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-icon matSuffix *ngIf=\"form.get('dropdownLevel2').value\"\r\n                                                    (click)=\"clearField('dropdownLevel2', 'category2')\">close</mat-icon>\r\n                                                <mat-icon matSuffix\r\n                                                    [ngClass]=\"{'disabled-icon': isDisabled2}\">keyboard_arrow_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL3Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n                                                    [matAutocomplete]=\"auto3\"\r\n                                                    (input)=\"onInputChange($event, 'category3')\">\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-icon matSuffix *ngIf=\"form.get('dropdownLevel3').value\"\r\n                                                    (click)=\"clearField('dropdownLevel3', 'category3')\">close</mat-icon>\r\n                                                <mat-icon matSuffix\r\n                                                    [ngClass]=\"{'disable-icon': isDisabled3}\">keyboard_arrow_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL4Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n                                                    [matAutocomplete]=\"auto4\"\r\n                                                    (input)=\"onInputChange($event, 'category4')\">\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-icon matSuffix *ngIf=\"form.get('dropdownLevel4').value\"\r\n                                                    (click)=\"clearField('dropdownLevel4', 'category4')\">close</mat-icon>\r\n                                                <mat-icon matSuffix\r\n                                                    [ngClass]=\"{'disable-icon': isDisabled4}\">keyboard_arrow_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n                        (scroll)=\"onScroll($event)\" [ngClass]=\"dataSource?.data?.length > 10 ? 'tbl-record-found': ''\">\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                            <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=\"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                            <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\r\n                                <div class=\"pr-empty-state\">\r\n                                    <div class=\"img-empty-state\">\r\n                                        <img [src]=\"emptyImage\" alt=\"\">\r\n                                    </div>\r\n                                    <h3>No records to show at the moment</h3>\r\n                                    <p>Please modify your search criteria to find the desired result</p>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                    <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n                        <p>Selected: {{ getSelectedRowsCount() }} Total Records: {{ getTotalRows() }} </p>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n\r\n            <div [hidden]=\"currentPage !== 'edit-save'\">\r\n                <form [formGroup]=\"form\">\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                            <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                            <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                            <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                            <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')\"\r\n                                            type=\"number\" 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                            <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                            <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                </form>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n    <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n        <button mat-button (click)=\"goToNextPage()\" [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    <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n        <div class=\"tab-action-wrp\">\r\n            <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n            <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add\r\n                products</button>\r\n        </div>\r\n    </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:25px}.bs{border:1px solid #DADCE0;border-radius:5px;padding:0 15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.bs mat-icon{color:#0006}.search-icon{margin:0;display:flex}.search-icon mat-icon{color:#0006}.search-icon svg{width:24px;height:24px}.search-icon svg path{fill:#999}.input-search{margin:0;border:0;width:100%}.input-search input{border:0;padding:0 15px;width:100%;font-size:15px}.input-search input:focus{border:0;outline:0 none}.advfilter{display:flex;margin-left:auto}.advfilter button{border:0;background-color:transparent;margin:0;padding:0;display:flex}.advfilter button mat-icon{color:#0006}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}::ng-deep .basic-search .mat-badge-small.mat-badge-after .mat-badge-content{background:#f44336!important}.content{background-color:#fff;border:1px solid #DADCE0;margin-top:10px;padding:10px;min-height:400px}.product-selection-container{border:1px solid #DADCE0;padding:20px;border-radius:5px}.product-selection-container h5{margin:0 0 15px}.pp-empty-state{max-width:420px;margin:0 auto;padding:100px 0 0;text-align:center}.img-empty-state{width:100%;margin-bottom:10px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px;margin:0 0 5px;padding:0;font-weight:400}\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.MatSuffix, selector: "[matSuffix]" }, { 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: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i14.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i14.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }], animations: [
+        trigger('slideDown', [
+            state('hidden', style({ height: '0px', opacity: 0, overflow: 'hidden' })),
+            state('visible', style({ height: '*', opacity: 1 })),
+            transition('hidden => visible', [
+                animate('300ms ease-out')
+            ]),
+            transition('visible => hidden', [
+                animate('300ms ease-in')
+            ])
+        ])
+    ] });
 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\" *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)\" [ngClass] =\"dataSource.data.length > 10 ? 'tbl-record-found': ''\">\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}.new-class.first-div.tbl-record-found{height:400px;overflow-y:auto}.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', animations: [
+                        trigger('slideDown', [
+                            state('hidden', style({ height: '0px', opacity: 0, overflow: 'hidden' })),
+                            state('visible', style({ height: '*', opacity: 1 })),
+                            transition('hidden => visible', [
+                                animate('300ms ease-out')
+                            ]),
+                            transition('visible => hidden', [
+                                animate('300ms ease-in')
+                            ])
+                        ])
+                    ], 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=\"mat-dialog-heading\">\r\n    <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n    <div class=\"mat-dialog-content\">\r\n        <!--Search Start-->\r\n        <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n            <div class=\"bs\">\r\n                <div class=\"search-icon\">\r\n                    <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                        transform=\"rotate(0 0 0)\">\r\n                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                            d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n                    </svg>\r\n                </div>\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"input-search\">\r\n                        <input type=\"text\" matInput placeholder=\"Search Product\" formControlName=\"searchProductName\">\r\n                    </div>\r\n                </form>\r\n                <div class=\"advfilter\">\r\n                    <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n                        <mat-icon matBadge=\"4\"\r\n                            matBadgeSize=\"small\" class=\"material-icons-round\" aria-hidden=\"false\"\r\n                            aria-label=\"tune\">tune\r\n                        </mat-icon>\r\n                        <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div class=\"search-btn\">\r\n                <button mat-raised-button color=\"primary\"\r\n                    (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n            </div>\r\n        </div>\r\n        <!--Search End-->\r\n        <div class=\"product-selector\">\r\n            <div [hidden]=\"currentPage !== 'select-products'\">\r\n                <form [formGroup]=\"form\">\r\n                    <div class=\"product-selection-container\">\r\n                        <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n                            <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\" *ngIf=\"isVisible\">\r\n                                <h5>Advanced Filters</h5>\r\n                                <div class=\"row\">\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL1Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n                                                    [matAutocomplete]=\"auto3\"\r\n                                                    (input)=\"onInputChange($event, 'category1')\">\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-icon matSuffix *ngIf=\"form.get('dropdownLevel1').value\"\r\n                                                    (click)=\"clearField('dropdownLevel1', 'category1')\">close</mat-icon>\r\n                                                <mat-icon matSuffix>keyboard_arrow_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL2Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n                                                    [matAutocomplete]=\"auto4\"\r\n                                                    (input)=\"onInputChange($event, 'category2')\">\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-icon matSuffix *ngIf=\"form.get('dropdownLevel2').value\"\r\n                                                    (click)=\"clearField('dropdownLevel2', 'category2')\">close</mat-icon>\r\n                                                <mat-icon matSuffix\r\n                                                    [ngClass]=\"{'disabled-icon': isDisabled2}\">keyboard_arrow_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL3Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n                                                    [matAutocomplete]=\"auto3\"\r\n                                                    (input)=\"onInputChange($event, 'category3')\">\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-icon matSuffix *ngIf=\"form.get('dropdownLevel3').value\"\r\n                                                    (click)=\"clearField('dropdownLevel3', 'category3')\">close</mat-icon>\r\n                                                <mat-icon matSuffix\r\n                                                    [ngClass]=\"{'disable-icon': isDisabled3}\">keyboard_arrow_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"col-lg-6\">\r\n                                        <div class=\"example-full-width\">\r\n                                            <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n                                                <mat-label>{{dropdownL4Label}}</mat-label>\r\n                                                <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n                                                    [matAutocomplete]=\"auto4\"\r\n                                                    (input)=\"onInputChange($event, 'category4')\">\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-icon matSuffix *ngIf=\"form.get('dropdownLevel4').value\"\r\n                                                    (click)=\"clearField('dropdownLevel4', 'category4')\">close</mat-icon>\r\n                                                <mat-icon matSuffix\r\n                                                    [ngClass]=\"{'disable-icon': isDisabled4}\">keyboard_arrow_down</mat-icon>\r\n                                            </mat-form-field>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n                        (scroll)=\"onScroll($event)\" [ngClass]=\"dataSource?.data?.length > 10 ? 'tbl-record-found': ''\">\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                            <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=\"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                            <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\r\n                                <div class=\"pr-empty-state\">\r\n                                    <div class=\"img-empty-state\">\r\n                                        <img [src]=\"emptyImage\" alt=\"\">\r\n                                    </div>\r\n                                    <h3>No records to show at the moment</h3>\r\n                                    <p>Please modify your search criteria to find the desired result</p>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                    <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n                        <p>Selected: {{ getSelectedRowsCount() }} Total Records: {{ getTotalRows() }} </p>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n\r\n            <div [hidden]=\"currentPage !== 'edit-save'\">\r\n                <form [formGroup]=\"form\">\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                            <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                            <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                            <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                            <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')\"\r\n                                            type=\"number\" 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                            <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                            <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                </form>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n    <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n        <button mat-button (click)=\"goToNextPage()\" [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    <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n        <div class=\"tab-action-wrp\">\r\n            <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n            <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add\r\n                products</button>\r\n        </div>\r\n    </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:25px}.bs{border:1px solid #DADCE0;border-radius:5px;padding:0 15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.bs mat-icon{color:#0006}.search-icon{margin:0;display:flex}.search-icon mat-icon{color:#0006}.search-icon svg{width:24px;height:24px}.search-icon svg path{fill:#999}.input-search{margin:0;border:0;width:100%}.input-search input{border:0;padding:0 15px;width:100%;font-size:15px}.input-search input:focus{border:0;outline:0 none}.advfilter{display:flex;margin-left:auto}.advfilter button{border:0;background-color:transparent;margin:0;padding:0;display:flex}.advfilter button mat-icon{color:#0006}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}::ng-deep .basic-search .mat-badge-small.mat-badge-after .mat-badge-content{background:#f44336!important}.content{background-color:#fff;border:1px solid #DADCE0;margin-top:10px;padding:10px;min-height:400px}.product-selection-container{border:1px solid #DADCE0;padding:20px;border-radius:5px}.product-selection-container h5{margin:0 0 15px}.pp-empty-state{max-width:420px;margin:0 auto;padding:100px 0 0;text-align:center}.img-empty-state{width:100%;margin-bottom:10px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px;margin:0 0 5px;padding:0;font-weight:400}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -3937,9 +4036,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
     }, propDecorators: { firstscrollableDiv: [{
                 type: ViewChild,
                 args: ['firstscrollableDiv']
-            }], stepper: [{
-                type: ViewChild,
-                args: ['stepper']
             }] } });
 
 const ELEMENT_DATA = [];
@@ -3978,12 +4074,7 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
         this.dropdownL4Label = '';
         this.isCustomerCountryFiltered = false;
         this.emptyArray = false;
-        if (this.element && this.element.nativeElement && this.instance) {
-            // Add custom classes to elements.
-            if (this.instance.component.customClass) {
-                this.element.nativeElement.classList.add(this.instance.component.customClass);
-            }
-        }
+        this.isPriceDisable = true;
     }
     getColumnLabel(column) {
         return column.label || column.key;
@@ -4001,6 +4092,7 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
     // }
     setInstance(instance) {
         var _a, _b;
+        //const newProductPickerFlag = instance?.component?.attributes;
         const checkAttribute = (_a = instance === null || instance === void 0 ? void 0 : instance.component) === null || _a === void 0 ? void 0 : _a.attributes;
         this.showNewProductPicker = this.commonService.checkIsAttributeTrue(checkAttribute, "newproductpicker");
         this.showCategory = this.commonService.checkIsAttributeTrue(checkAttribute, "showCategory");
@@ -4014,6 +4106,7 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
         this.showDialogSkuNumber = this.commonService.checkIsAttributeTrue(checkAttribute, "showDialogSkuNumber");
         this.showDialogSubCategory = this.commonService.checkIsAttributeTrue(checkAttribute, "showDialogSubCategory");
         this.isCustomerCountryFiltered = this.commonService.checkIsAttributeTrue(checkAttribute, "filterProductBasedOnCustomerCountry");
+        this.isPriceDisable = this.commonService.checkIsAttributeTrue(checkAttribute, "isPriceDisable");
         const l1 = this.getLabelName(checkAttribute, "dropdownL1");
         const l2 = this.getLabelName(checkAttribute, "dropdownL2");
         const l3 = this.getLabelName(checkAttribute, "dropdownL3");
@@ -4099,12 +4192,6 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
             });
             return viewContainer ? viewContainer : null;
         };
-        if (this.element && this.element.nativeElement && this.instance) {
-            // Add custom classes to elements.
-            if (this.instance.component.customClass) {
-                this.element.nativeElement.classList.add(this.instance.component.customClass);
-            }
-        }
     }
     removeColumn(columnName) {
         this.displayedColumnsNew = this.displayedColumnsNew.filter(column => column !== columnName);
@@ -4124,9 +4211,9 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
             const diologeRef = this.dialog.open(AddOnProductsComponent, {
                 disableClose: true,
                 width: '90%',
-                maxWidth: '900px',
+                maxWidth: '1000px',
                 autoFocus: false,
-                data: { dropdownsFlag: { showNewProductPicker: this.showNewProductPicker, showDialogSubCategory: this.showDialogSubCategory, showDialogSkuNumber: this.showDialogSkuNumber, showDialogCategory: this.showDialogCategory, showDialogPrice: this.showDialogPrice, showDialogQuantity: this.showDialogQuantity, dropdownL1: this.dropdownL1, dropdownL2: this.dropdownL2, dropdownL3: this.dropdownL3, dropdownL4: this.dropdownL4, dropdownL1Label: this.dropdownL1Label, dropdownL2Label: this.dropdownL2Label, dropdownL3Label: this.dropdownL3Label, dropdownL4Label: this.dropdownL4Label, checkSubmissionStatus: this.checkSubmissionStatus }, selectedProducts: this.dataSourceNew }
+                data: { dropdownsFlag: { showNewProductPicker: this.showNewProductPicker, showDialogSubCategory: this.showDialogSubCategory, showDialogSkuNumber: this.showDialogSkuNumber, showDialogCategory: this.showDialogCategory, showDialogPrice: this.showDialogPrice, showDialogQuantity: this.showDialogQuantity, dropdownL1: this.dropdownL1, dropdownL2: this.dropdownL2, dropdownL3: this.dropdownL3, dropdownL4: this.dropdownL4, dropdownL1Label: this.dropdownL1Label, dropdownL2Label: this.dropdownL2Label, dropdownL3Label: this.dropdownL3Label, dropdownL4Label: this.dropdownL4Label, checkSubmissionStatus: this.checkSubmissionStatus, priceDisable: this.isPriceDisable }, selectedProducts: this.dataSourceNew }
             })
                 .afterClosed().subscribe(response => {
                 var _a;
@@ -4162,7 +4249,7 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
     }
     addPriceProperty(selectedProducts) {
         return selectedProducts.map(products => {
-            return Object.assign(Object.assign({}, products), { priceDisable: true });
+            return Object.assign(Object.assign({}, products), { priceDisable: this.isPriceDisable ? true : false });
         });
     }
     checkRowsNumber() {
@@ -4885,7 +4972,7 @@ MaterialWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
           <button *ngIf="instance.hasButton('submit')" mat-raised-button color="primary" (click)="submit()">Submit</button>
         </div>
       </mat-step>
-    </mat-horizontal-stepper>`, isInline: true, styles: [":host .navigation-button-row{margin-top:8px}\n", ":host .navigation-button-row button{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i15.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i15.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] });
+    </mat-horizontal-stepper>`, isInline: true, styles: [":host .navigation-button-row{margin-top:8px}\n", ":host .navigation-button-row button{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i3$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialWizardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-formio-wizard', template: `