npm - ngx-render-material-forms - Versions diffs - 1.8.1 → 1.8.2 - Mend

ngx-render-material-forms 1.8.1 → 1.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

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

@@ -5,7 +5,7 @@ import { HttpHeaders, HttpClientModule } from '@angular/common/http';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormControl, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, NG_VALUE_ACCESSOR, Validators, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i4$2 from '@angular/material/input';
 import { MAT_INPUT_VALUE_ACCESSOR, MatInputModule } from '@angular/material/input';
 import * as i3$2 from '@angular/material/button';
@@ -2906,7 +2906,7 @@ class MaterialSelectComponent extends MaterialComponent {
         const includeDescription = this.getValueByKey(paramsData, 'includeDescription');
         const vendorId = this.getValueByKey(paramsData, 'vendorId');
         const onlyActive = this.getValueByKey(paramsData, 'onlyActive');
-        const includeCurrencyId = this.getValueByKey(paramsData, 'includeCurrencyId');
+        const includeCountry = this.getValueByKey(paramsData, 'includeCountry');
         var currentUser = JSON.parse(localStorage.getItem('currentUser'));
         let headers;
         if (currentUser && currentUser.Tokens && currentUser.Tokens.AccessToken) {
@@ -2923,7 +2923,7 @@ class MaterialSelectComponent extends MaterialComponent {
         const enpageNumber = this.commonService.scrumble(pageNumber);
         const enpageSize = this.commonService.scrumble(pageSize);
         const ensearchQuery = this.commonService.scrumble(searchQuery);
-        const encodeIncludeCurrencyId = this.commonService.scrumble(includeCurrencyId);
+        const encodeIncludeCountry = this.commonService.scrumble(includeCountry);
         let enactive = this.commonService.scrumble(onlyActive);
         //Check if enactive is undefined, null, or blank
         if (enactive === undefined || enactive === null || enactive === '') {
@@ -2945,9 +2945,9 @@ class MaterialSelectComponent extends MaterialComponent {
         const hostname = window.location.hostname;
         const baseApiUrl = baseUrlMapping[hostname] || null;
         let url = `${baseApiUrl}/api/VendorFormBuilder/GetVendorProducts?vendorId=${envendorId}&pageNumber=${enpageNumber}&pageSize=${enpageSize}&search=${ensearchQuery}&onlyActive=${enactive}&includeDescription=${endescription}`;
-        // Only add includeCurrencyId if it has a valid value
-        if (encodeIncludeCurrencyId !== null && encodeIncludeCurrencyId !== undefined) {
-            url += `&includeCurrencyId=${encodeIncludeCurrencyId}`;
+        // Only add includeCountryId if it has a valid value
+        if (encodeIncludeCountry !== null && encodeIncludeCountry !== undefined) {
+            url += `&includeCountry=${encodeIncludeCountry}`;
         }
         this.http.get(url, { headers }).subscribe(response => {
             var _a;
@@ -3466,6 +3466,10 @@ class AddOnProductsComponent {
     }
     initializeFormArray() {
         const selectedProductsArray = this.form.get('selectedProducts');
+        if (!selectedProductsArray) {
+            console.error('selectedProducts FormArray not initialized.');
+            return;
+        }
         this.selection.selected.forEach(product => {
             selectedProductsArray.push(this.fb.group({
                 price: [product.price || '', Validators.required],
@@ -3484,10 +3488,10 @@ class AddOnProductsComponent {
         this.selectedDataSource.data = [...this.selection.selected];
     }
     initializeDataSources() {
-        var _a, _b, _c, _d;
-        // Ensure selected items are marked in the main data source
-        if ((_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.length) {
-            (_d = (_c = this.selection) === null || _c === void 0 ? void 0 : _c.selected) === null || _d === void 0 ? void 0 : _d.forEach(selectedProduct => {
+        var _a, _b, _c, _d, _e, _f;
+        // Debugging logs to trace issues
+        if (Array.isArray((_a = this.selection) === null || _a === void 0 ? void 0 : _a.selected) && Array.isArray((_b = this.dataSource) === null || _b === void 0 ? void 0 : _b.data) && ((_d = (_c = this.selection) === null || _c === void 0 ? void 0 : _c.selected) === null || _d === void 0 ? void 0 : _d.length)) {
+            (_f = (_e = this.selection) === null || _e === void 0 ? void 0 : _e.selected) === null || _f === void 0 ? void 0 : _f.forEach(selectedProduct => {
                 const index = this.dataSource.data.findIndex(product => product.value === selectedProduct.value);
                 if (index >= 0) {
                     this.dataSource.data[index] = selectedProduct;
@@ -3628,7 +3632,17 @@ class AddOnProductsComponent {
         this.updateSelectedProducts();
     }
     toggleSelection(row) {
-        this.selection.toggle(row);
+        // Check if the product is already selected
+        const alreadySelected = this.selection.selected.some(selected => selected.value === row.value);
+        if (alreadySelected) {
+            // If the product is already selected, deselect it
+            this.selection.deselect(row);
+        }
+        else {
+            // If not already selected, select it
+            this.selection.select(row);
+        }
+        // Update selected products to ensure no duplicates
         this.updateSelectedProducts();
     }
     // Getter for the FormArray
@@ -3638,12 +3652,20 @@ class AddOnProductsComponent {
     updateSelectedProducts() {
         var _a, _b;
         if (Array.isArray(this.selection.selected)) {
+            // Deduplicate selected products
+            const uniqueProducts = Array.from(new Map(this.selection.selected.map(product => [product.value, product])).values());
+            this.selection.clear();
+            uniqueProducts.forEach(product => this.selection.select(product));
             this.selectedDataSource.data = [...this.selection.selected];
             const selectedProductsArray = this.selectedProducts;
             selectedProductsArray.clear();
-            (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.forEach(product => {
+            (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.forEach((product, index) => {
                 var _a, _b;
-                selectedProductsArray === null || selectedProductsArray === void 0 ? void 0 : selectedProductsArray.push(this.fb.group({
+                if (!(product === null || product === void 0 ? void 0 : product.value)) {
+                    console.error('Product value (SKU) is missing at index:', index, product);
+                    return;
+                }
+                const productFormGroup = this.fb.group({
                     price: [(_a = product === null || product === void 0 ? void 0 : product.price) !== null && _a !== void 0 ? _a : '', this.showPrice ? Validators.required : []],
                     text: [(product === null || product === void 0 ? void 0 : product.text) || ''],
                     quantity: [(_b = product === null || product === void 0 ? void 0 : product.quantity) !== null && _b !== void 0 ? _b : '', this.showQuantity ? Validators.required : []],
@@ -3651,11 +3673,27 @@ class AddOnProductsComponent {
                     subCategory: [(product === null || product === void 0 ? void 0 : product.subCategory) || ''],
                     value: [(product === null || product === void 0 ? void 0 : product.value) || ''],
                     skuNumber: [(product === null || product === void 0 ? void 0 : product.value) || '']
-                }));
+                });
+                if (productFormGroup) {
+                    selectedProductsArray.push(productFormGroup);
+                }
+                else {
+                    console.error(`Failed to create FormGroup for product at index ${index}.`);
+                }
             });
-            selectedProductsArray.controls.forEach(control => {
-                var _a;
-                (_a = control.get('price')) === null || _a === void 0 ? void 0 : _a.disable();
+            selectedProductsArray.controls.forEach((control, index) => {
+                if (control instanceof FormGroup) {
+                    const priceControl = control.get('price');
+                    if (priceControl) {
+                        priceControl.disable();
+                    }
+                    else {
+                        console.error(`Price control is missing in FormGroup at index ${index}.`);
+                    }
+                }
+                else {
+                    console.error(`Unexpected control type at index ${index}:`, control);
+                }
             });
         }
         else {
@@ -3719,9 +3757,22 @@ class AddOnProductsComponent {
             if (response && response.code === 200) {
                 this.totalPages = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.totalPages;
                 const data = response.data.dataSource;
+                // Sync selection state with new data
+                data.forEach(product => {
+                    const existingProduct = this.selection.selected.find(p => p.value === product.value);
+                    if (existingProduct) {
+                        Object.assign(product, existingProduct); // Replace product with existing reference
+                        this.selection.select(product); // Mark as selected
+                        //this.toggleSelection(product)
+                        this.updateSelectedProducts();
+                    }
+                });
+                // Avoid duplicates in the dataSource
+                const existingProductValues = new Set(this.dataSource.data.map(product => product.value));
+                const uniqueNewData = data.filter(product => !existingProductValues.has(product.value));
                 if (this.dataSource.data.length > 0 && flag) {
                     data.forEach(item => this.dataSource.data.push(item));
-                    this.dataSource.data = [...this.dataSource.data, ...data];
+                    this.dataSource.data = [...this.dataSource.data, ...uniqueNewData];
                 }
                 else {
                     this.dataSource.data = data;
@@ -3760,7 +3811,7 @@ class AddOnProductsComponent {
                     this.selectedDataSource._updateChangeSubscription();
                     this.selection.deselect(element);
                     const selectedProductsArray = this.form.get('selectedProducts');
-                    const productIndex = selectedProductsArray.controls.findIndex(control => control.value.productName === element.productName);
+                    const productIndex = selectedProductsArray.controls.findIndex(control => control.value.value === element.value);
                     if (productIndex >= 0) {
                         selectedProductsArray.removeAt(productIndex);
                     }
@@ -3792,12 +3843,36 @@ class AddOnProductsComponent {
     displayFn(option) {
         return option ? option.name : '';
     }
+    onQuantityChange(event, index) {
+        const value = event.target.value;
+        const quantityControl = this.selectedProducts.at(index).get('quantity');
+        if (!quantityControl)
+            return;
+        // Clear any previous errors
+        quantityControl.setErrors(null);
+        // If the value is empty, set 'required' error
+        if (value === '' || value === null) {
+            quantityControl.setErrors({ 'required': true });
+        }
+        // If the value is less than 1, set 'min' error
+        else if (Number(value) < 1) {
+            quantityControl.setErrors({ 'min': true });
+        }
+        // If the value is not an integer, set 'pattern' error
+        else if (!Number.isInteger(Number(value))) {
+            quantityControl.setErrors({ 'pattern': true });
+        }
+        // Otherwise, set the valid value
+        else {
+            quantityControl.setValue(Number(value));
+        }
+    }
 }
 AddOnProductsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AddOnProductsComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: i1$1.MatDialog }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
-AddOnProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: AddOnProductsComponent, selector: "ngx-mat-add-on-products", viewQueries: [{ propertyName: "firstscrollableDiv", first: true, predicate: ["firstscrollableDiv"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n    <div class=\"OverlayDivContent\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n</div>\r\n<div class=\"product-selector\" mat-dialog-content>\r\n    <mat-stepper labelPosition=\"bottom\" #stepper>\r\n        <mat-step [stepControl]=\"form\">\r\n            <form [formGroup]=\"form\">\r\n                <ng-template matStepLabel>Select Products</ng-template>\r\n                <div class=\"product-selection-container\">\r\n                    <!-- <h3>Select Products</h3> -->\r\n                    <p class=\"product-selection-desc\">Your ideal match is just a few preferences away. Start discovering\r\n                        now!</p>\r\n                    <mat-form-field class=\"global-search\" appearance=\"outline\">\r\n                        <mat-icon matPrefix class=\"material-symbols-outlined product-picker-icon\">search</mat-icon>\r\n                        <input matInput placeholder=\"Search Product Name\" formControlName=\"searchProductName\" />\r\n                    </mat-form-field>\r\n                    <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n                        <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n                            <h5>Filters</h5>\r\n                            <div class=\"row\">\r\n                                <mat-form-field *ngIf=\"dropdownL1\">\r\n                                    <mat-label>{{dropdownL1Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n                                        [matAutocomplete]=\"auto3\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL2\">\r\n                                    <mat-label>{{dropdownL2Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n                                        [matAutocomplete]=\"auto4\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL3\">\r\n                                    <mat-label>{{dropdownL3Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n                                        [matAutocomplete]=\"auto3\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL4\">\r\n                                    <mat-label>{{dropdownL4Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n                                        [matAutocomplete]=\"auto4\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Search Button -->\r\n                    <div fxLayout=\"row\" fxLayoutAlign=\"left\" class=\"margin-top search-btn-wrp\">\r\n                        <button mat-button color=\"primary\" mat-raised-button\r\n                            (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n                    </div>\r\n                </div>\r\n                <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n                    (scroll)=\"onScroll($event)\">\r\n                    <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n                        *ngIf=\"dataSource && dataSource.data.length > 0; else noData\">\r\n                        <ng-container matColumnDef=\"select\">\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                            </th>\r\n                            <td mat-cell *matCellDef=\"let row\">\r\n                                <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n                                    (change)=\"$event ? toggleSelection(row) : null\"\r\n                                    [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"productName\">\r\n                            <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n                        </ng-container>\r\n                        <!-- <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                            <th mat-header-cell *matHeaderCellDef> Price </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element?.price}} </td>\r\n                        </ng-container> -->\r\n                        <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                            <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> #SkuNumber-{{element?.value}} </td>\r\n                        </ng-container>\r\n\r\n                        <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n                        <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n                            (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n                            [class.selected]=\"selection.isSelected(row)\"></tr>\r\n                    </table>\r\n                    <ng-template #noData>\r\n                        <div class=\"no-data-message\">\r\n                            No data found.\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div class=\"row-summary\">\r\n                    <p>Rows: {{ getTotalRows() }} Selected: {{ getSelectedRowsCount() }}</p>\r\n                </div>\r\n                <div class=\"tabs-action-step-one\">\r\n                    <button mat-button matStepperNext [disabled]=\"selection.selected.length ? false : true\"\r\n                        color=\"primary\" mat-raised-button>Next</button>\r\n                    <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n                </div>\r\n            </form>\r\n        </mat-step>\r\n        <mat-step [stepControl]=\"form\">\r\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n                <ng-template matStepLabel>Edit/Save</ng-template>\r\n                <div class=\"new-class\">\r\n                    <table mat-table [dataSource]=\"selectedDataSource\"\r\n                        *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n                        <ng-container matColumnDef=\"delete\">\r\n                            <th mat-header-cell *matHeaderCellDef></th>\r\n                            <td mat-cell *matCellDef=\"let element\">\r\n                                <button class=\"delete-btn-picker\" mat-button\r\n                                    (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n                                    <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n                                </button>\r\n                            </td>\r\n                        </ng-container>\r\n                        <ng-container matColumnDef=\"productName\">\r\n                            <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n                            <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n                            <th mat-header-cell *matHeaderCellDef>Sub Category </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                            <th mat-header-cell *matHeaderCellDef>Price</th>\r\n                            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                <mat-form-field class=\"example-full-width select-price\">\r\n                                    <mat-label>Price</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n                                        placeholder=\"Please enter price\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n                                        Price is required\r\n                                    </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n                            <th mat-header-cell *matHeaderCellDef> Quantity </th>\r\n                            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                <mat-form-field class=\"example-full-width\">\r\n                                    <mat-label>Please enter quantity</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\" type=\"number\"\r\n                                        min=\"1\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n                                        Quantity is required\r\n                                    </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n                        showSkuNumber={{showSkuNumber}}\r\n                        <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                            <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n                            <td mat-cell *matCellDef=\"let element\">#SkuNumber-{{element?.value}} </td>\r\n                        </ng-container>\r\n\r\n                        <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n                        <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n                    </table>\r\n                    <ng-template #showBlank>\r\n                        <div class=\"no-data-message\">\r\n                            No data found.\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div class=\"tabs-action\">\r\n                    <div class=\"tab-action-wrp\">\r\n                        <button mat-button matStepperPrevious>Back</button>\r\n                    </div>\r\n\r\n                    <div class=\"tab-action-wrp\">\r\n                        <button mat-button matStepperNext type=\"submit\" color=\"primary\" mat-raised-button>Add\r\n                            products</button>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </mat-step>\r\n    </mat-stepper>\r\n</div>", styles: [".dropdown-section{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;gap:16px}mat-form-field{flex:1}.new-class{margin:20px 0;border:1px solid #ddd;border-radius:5px}.mat-column-select{width:50px;text-align:center}.mat-header-cell,.mat-cell{text-align:center}button{align-self:flex-end;margin-top:20px}.row-summary{margin-top:20px;font-weight:700}.new-class td{border:1px solid #ddd;padding:10px}.new-class th{background-color:#f2f2f2;position:-webkit-sticky;position:sticky;top:0;transform:none;z-index:99;padding:10px}table{width:100%;border-collapse:collapse}.select-qunatity,.select-price{width:110px}.no-data-message{text-align:center;margin:20px 0;font-size:18px;color:#888}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused,.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:transparent}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.product-selection-container{max-width:800px;margin:0 auto;text-align:center}.global-search{width:100%;margin-bottom:20px}.dropdown-selection{display:flex;flex-direction:column;width:100%}.row{display:flex;justify-content:space-between;width:100%;margin-bottom:20px;flex-wrap:wrap}.dropdown-item{flex:1;margin-right:10px}.dropdown-item:last-child{margin-right:0}.scrollable-div{max-height:350px;overflow-y:auto;margin-top:20px;margin-bottom:20px}.mat-table{width:100%;border-collapse:collapse}.dropdown-selection>div{display:flex;justify-content:space-between;border:1px solid #ddd;border-radius:5px;padding:20px;flex-wrap:wrap}.mat-form-field:last-child{margin-right:0}.search-btn-wrp{justify-content:flex-start}.no-child .mat-form-field{width:100%}.child .mat-form-field{flex:0 0 calc(50% - 20px)}.delete-btn-picker .mat-icon{color:#e53935!important;font-size:24px;width:auto;height:auto}.delete-btn-picker{margin:0}.product-selection-desc{text-align:left}.tabs-action{display:flex;justify-content:space-between}.tabs-action-step-one{justify-content:flex-end;display:flex}.dropdown-selection h5{font-size:18px}::ng-deep .product-selection-container .mat-form-field-infix{padding:10px 4px 17px!important}::ng-deep .product-selection-container .mat-form-field-flex{align-items:center}::ng-deep .product-selection-container .product-picker-icon{font-size:18px;width:auto;height:auto;color:#0000004d}::ng-deep .product-selection-container .mat-form-field-appearance-outline .mat-form-field-outline-thick,::ng-deep .product-selection-container .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#0000001f}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i15.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i15.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i15.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i15.MatStepperNext, selector: "button[matStepperNext]", inputs: ["type"] }, { kind: "directive", type: i15.MatStepperPrevious, selector: "button[matStepperPrevious]", inputs: ["type"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i16.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i16.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }] });
+AddOnProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: AddOnProductsComponent, selector: "ngx-mat-add-on-products", viewQueries: [{ propertyName: "firstscrollableDiv", first: true, predicate: ["firstscrollableDiv"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n    <div class=\"OverlayDivContent\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n</div>\r\n<div class=\"product-selector\" mat-dialog-content>\r\n    <mat-stepper labelPosition=\"bottom\" #stepper>\r\n        <mat-step [stepControl]=\"form\">\r\n            <form [formGroup]=\"form\">\r\n                <ng-template matStepLabel>Select Products</ng-template>\r\n                <div class=\"product-selection-container\">\r\n                    <!-- <h3>Select Products</h3> -->\r\n                    <p class=\"product-selection-desc\">Your ideal match is just a few preferences away. Start discovering\r\n                        now!</p>\r\n                    <mat-form-field class=\"global-search\" appearance=\"outline\">\r\n                        <mat-icon matPrefix class=\"material-symbols-outlined product-picker-icon\">search</mat-icon>\r\n                        <input matInput placeholder=\"Search Product Name\" formControlName=\"searchProductName\" />\r\n                    </mat-form-field>\r\n                    <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n                        <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n                            <h5>Filters</h5>\r\n                            <div class=\"row\">\r\n                                <mat-form-field *ngIf=\"dropdownL1\">\r\n                                    <mat-label>{{dropdownL1Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n                                        [matAutocomplete]=\"auto3\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL2\">\r\n                                    <mat-label>{{dropdownL2Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n                                        [matAutocomplete]=\"auto4\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL3\">\r\n                                    <mat-label>{{dropdownL3Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n                                        [matAutocomplete]=\"auto3\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL4\">\r\n                                    <mat-label>{{dropdownL4Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n                                        [matAutocomplete]=\"auto4\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Search Button -->\r\n                    <div fxLayout=\"row\" fxLayoutAlign=\"left\" class=\"margin-top search-btn-wrp\">\r\n                        <button mat-button color=\"primary\" mat-raised-button\r\n                            (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n                    </div>\r\n                </div>\r\n                <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n                    (scroll)=\"onScroll($event)\">\r\n                    <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n                        *ngIf=\"dataSource && dataSource.data.length > 0; else noData\">\r\n                        <ng-container matColumnDef=\"select\">\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                            </th>\r\n                            <td mat-cell *matCellDef=\"let row\">\r\n                                <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n                                    (change)=\"$event ? toggleSelection(row) : null\"\r\n                                    [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"productName\">\r\n                            <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n                        </ng-container>\r\n                        <!-- <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                            <th mat-header-cell *matHeaderCellDef> Price </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element?.price}} </td>\r\n                        </ng-container> -->\r\n                        <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                            <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> #SkuNumber-{{element?.value}} </td>\r\n                        </ng-container>\r\n\r\n                        <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n                        <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n                            (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n                            [class.selected]=\"selection.isSelected(row)\"></tr>\r\n                    </table>\r\n                    <ng-template #noData>\r\n                        <div class=\"no-data-message\">\r\n                            No data found.\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div class=\"row-summary\">\r\n                    <p>Rows: {{ getTotalRows() }} Selected: {{ getSelectedRowsCount() }}</p>\r\n                </div>\r\n                <div class=\"tabs-action-step-one\">\r\n                    <button mat-button matStepperNext [disabled]=\"selection.selected.length ? false : true\"\r\n                        color=\"primary\" mat-raised-button>Next</button>\r\n                    <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n                </div>\r\n            </form>\r\n        </mat-step>\r\n        <mat-step [stepControl]=\"form\">\r\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n                <ng-template matStepLabel>Edit/Save</ng-template>\r\n                <div class=\"new-class\">\r\n                    <table mat-table [dataSource]=\"selectedDataSource\"\r\n                        *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n                        <ng-container matColumnDef=\"delete\">\r\n                            <th mat-header-cell *matHeaderCellDef></th>\r\n                            <td mat-cell *matCellDef=\"let element\">\r\n                                <button class=\"delete-btn-picker\" mat-button\r\n                                    (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n                                    <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n                                </button>\r\n                            </td>\r\n                        </ng-container>\r\n                        <ng-container matColumnDef=\"productName\">\r\n                            <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n                            <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n                            <th mat-header-cell *matHeaderCellDef>Sub Category </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                            <th mat-header-cell *matHeaderCellDef>Price</th>\r\n                            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                <mat-form-field class=\"example-full-width select-price\">\r\n                                    <mat-label>Price</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n                                        placeholder=\"Please enter price\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n                                        Price is required\r\n                                    </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n                            <th mat-header-cell *matHeaderCellDef> Quantity </th>\r\n                            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                <mat-form-field class=\"example-full-width\">\r\n                                    <mat-label>Quantity</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\" type=\"number\"\r\n                                        min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n                                        This field is required\r\n                                    </mat-error>\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n                                        Quantity can not be less than 1\r\n                                    </mat-error>\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n                                        Decimals not allowed\r\n                                      </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                            <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n                            <td mat-cell *matCellDef=\"let element\">#SkuNumber-{{element?.value}} </td>\r\n                        </ng-container>\r\n\r\n                        <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n                        <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n                    </table>\r\n                    <ng-template #showBlank>\r\n                        <div class=\"no-data-message\">\r\n                            No data found.\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div class=\"tabs-action\">\r\n                    <div class=\"tab-action-wrp\">\r\n                        <button mat-button matStepperPrevious>Back</button>\r\n                    </div>\r\n\r\n                    <div class=\"tab-action-wrp\">\r\n                        <button mat-button matStepperNext type=\"submit\" color=\"primary\" mat-raised-button>Add\r\n                            products</button>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </mat-step>\r\n    </mat-stepper>\r\n</div>", styles: [".dropdown-section{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;gap:16px}mat-form-field{flex:1}.new-class{margin:20px 0;border:1px solid #ddd;border-radius:5px}.mat-column-select{width:50px;text-align:center}.mat-header-cell,.mat-cell{text-align:center}button{align-self:flex-end;margin-top:20px}.row-summary{margin-top:20px;font-weight:700}.new-class td{border:1px solid #ddd;padding:10px}.new-class th{background-color:#f2f2f2;position:-webkit-sticky;position:sticky;top:0;transform:none;z-index:99;padding:10px}table{width:100%;border-collapse:collapse}.select-qunatity,.select-price{width:110px}.no-data-message{text-align:center;margin:20px 0;font-size:18px;color:#888}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused,.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:transparent}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.product-selection-container{max-width:800px;margin:0 auto;text-align:center}.global-search{width:100%;margin-bottom:20px}.dropdown-selection{display:flex;flex-direction:column;width:100%}.row{display:flex;justify-content:space-between;width:100%;margin-bottom:20px;flex-wrap:wrap}.dropdown-item{flex:1;margin-right:10px}.dropdown-item:last-child{margin-right:0}.scrollable-div{max-height:350px;overflow-y:auto;margin-top:20px;margin-bottom:20px}.mat-table{width:100%;border-collapse:collapse}.dropdown-selection>div{display:flex;justify-content:space-between;border:1px solid #ddd;border-radius:5px;padding:20px;flex-wrap:wrap}.mat-form-field:last-child{margin-right:0}.search-btn-wrp{justify-content:flex-start}.no-child .mat-form-field{width:100%}.child .mat-form-field{flex:0 0 calc(50% - 20px)}.delete-btn-picker .mat-icon{color:#e53935!important;font-size:24px;width:auto;height:auto}.delete-btn-picker{margin:0}.product-selection-desc{text-align:left}.tabs-action{display:flex;justify-content:space-between}.tabs-action-step-one{justify-content:flex-end;display:flex}.dropdown-selection h5{font-size:18px}::ng-deep .product-selection-container .mat-form-field-infix{padding:10px 4px 17px!important}::ng-deep .product-selection-container .mat-form-field-flex{align-items:center}::ng-deep .product-selection-container .product-picker-icon{font-size:18px;width:auto;height:auto;color:#0000004d}::ng-deep .product-selection-container .mat-form-field-appearance-outline .mat-form-field-outline-thick,::ng-deep .product-selection-container .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#0000001f}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i15.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i15.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i15.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i15.MatStepperNext, selector: "button[matStepperNext]", inputs: ["type"] }, { kind: "directive", type: i15.MatStepperPrevious, selector: "button[matStepperPrevious]", inputs: ["type"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i16.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i16.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AddOnProductsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-mat-add-on-products', template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n    <div class=\"OverlayDivContent\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n</div>\r\n<div class=\"product-selector\" mat-dialog-content>\r\n    <mat-stepper labelPosition=\"bottom\" #stepper>\r\n        <mat-step [stepControl]=\"form\">\r\n            <form [formGroup]=\"form\">\r\n                <ng-template matStepLabel>Select Products</ng-template>\r\n                <div class=\"product-selection-container\">\r\n                    <!-- <h3>Select Products</h3> -->\r\n                    <p class=\"product-selection-desc\">Your ideal match is just a few preferences away. Start discovering\r\n                        now!</p>\r\n                    <mat-form-field class=\"global-search\" appearance=\"outline\">\r\n                        <mat-icon matPrefix class=\"material-symbols-outlined product-picker-icon\">search</mat-icon>\r\n                        <input matInput placeholder=\"Search Product Name\" formControlName=\"searchProductName\" />\r\n                    </mat-form-field>\r\n                    <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n                        <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n                            <h5>Filters</h5>\r\n                            <div class=\"row\">\r\n                                <mat-form-field *ngIf=\"dropdownL1\">\r\n                                    <mat-label>{{dropdownL1Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n                                        [matAutocomplete]=\"auto3\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL2\">\r\n                                    <mat-label>{{dropdownL2Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n                                        [matAutocomplete]=\"auto4\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL3\">\r\n                                    <mat-label>{{dropdownL3Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n                                        [matAutocomplete]=\"auto3\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL4\">\r\n                                    <mat-label>{{dropdownL4Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n                                        [matAutocomplete]=\"auto4\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Search Button -->\r\n                    <div fxLayout=\"row\" fxLayoutAlign=\"left\" class=\"margin-top search-btn-wrp\">\r\n                        <button mat-button color=\"primary\" mat-raised-button\r\n                            (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n                    </div>\r\n                </div>\r\n                <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n                    (scroll)=\"onScroll($event)\">\r\n                    <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n                        *ngIf=\"dataSource && dataSource.data.length > 0; else noData\">\r\n                        <ng-container matColumnDef=\"select\">\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                            </th>\r\n                            <td mat-cell *matCellDef=\"let row\">\r\n                                <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n                                    (change)=\"$event ? toggleSelection(row) : null\"\r\n                                    [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"productName\">\r\n                            <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n                        </ng-container>\r\n                        <!-- <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                            <th mat-header-cell *matHeaderCellDef> Price </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element?.price}} </td>\r\n                        </ng-container> -->\r\n                        <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                            <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> #SkuNumber-{{element?.value}} </td>\r\n                        </ng-container>\r\n\r\n                        <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n                        <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n                            (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n                            [class.selected]=\"selection.isSelected(row)\"></tr>\r\n                    </table>\r\n                    <ng-template #noData>\r\n                        <div class=\"no-data-message\">\r\n                            No data found.\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div class=\"row-summary\">\r\n                    <p>Rows: {{ getTotalRows() }} Selected: {{ getSelectedRowsCount() }}</p>\r\n                </div>\r\n                <div class=\"tabs-action-step-one\">\r\n                    <button mat-button matStepperNext [disabled]=\"selection.selected.length ? false : true\"\r\n                        color=\"primary\" mat-raised-button>Next</button>\r\n                    <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n                </div>\r\n            </form>\r\n        </mat-step>\r\n        <mat-step [stepControl]=\"form\">\r\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n                <ng-template matStepLabel>Edit/Save</ng-template>\r\n                <div class=\"new-class\">\r\n                    <table mat-table [dataSource]=\"selectedDataSource\"\r\n                        *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n                        <ng-container matColumnDef=\"delete\">\r\n                            <th mat-header-cell *matHeaderCellDef></th>\r\n                            <td mat-cell *matCellDef=\"let element\">\r\n                                <button class=\"delete-btn-picker\" mat-button\r\n                                    (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n                                    <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n                                </button>\r\n                            </td>\r\n                        </ng-container>\r\n                        <ng-container matColumnDef=\"productName\">\r\n                            <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n                            <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n                            <th mat-header-cell *matHeaderCellDef>Sub Category </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                            <th mat-header-cell *matHeaderCellDef>Price</th>\r\n                            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                <mat-form-field class=\"example-full-width select-price\">\r\n                                    <mat-label>Price</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n                                        placeholder=\"Please enter price\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n                                        Price is required\r\n                                    </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n                            <th mat-header-cell *matHeaderCellDef> Quantity </th>\r\n                            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                <mat-form-field class=\"example-full-width\">\r\n                                    <mat-label>Please enter quantity</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\" type=\"number\"\r\n                                        min=\"1\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n                                        Quantity is required\r\n                                    </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n                        showSkuNumber={{showSkuNumber}}\r\n                        <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                            <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n                            <td mat-cell *matCellDef=\"let element\">#SkuNumber-{{element?.value}} </td>\r\n                        </ng-container>\r\n\r\n                        <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n                        <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n                    </table>\r\n                    <ng-template #showBlank>\r\n                        <div class=\"no-data-message\">\r\n                            No data found.\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div class=\"tabs-action\">\r\n                    <div class=\"tab-action-wrp\">\r\n                        <button mat-button matStepperPrevious>Back</button>\r\n                    </div>\r\n\r\n                    <div class=\"tab-action-wrp\">\r\n                        <button mat-button matStepperNext type=\"submit\" color=\"primary\" mat-raised-button>Add\r\n                            products</button>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </mat-step>\r\n    </mat-stepper>\r\n</div>", styles: [".dropdown-section{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;gap:16px}mat-form-field{flex:1}.new-class{margin:20px 0;border:1px solid #ddd;border-radius:5px}.mat-column-select{width:50px;text-align:center}.mat-header-cell,.mat-cell{text-align:center}button{align-self:flex-end;margin-top:20px}.row-summary{margin-top:20px;font-weight:700}.new-class td{border:1px solid #ddd;padding:10px}.new-class th{background-color:#f2f2f2;position:-webkit-sticky;position:sticky;top:0;transform:none;z-index:99;padding:10px}table{width:100%;border-collapse:collapse}.select-qunatity,.select-price{width:110px}.no-data-message{text-align:center;margin:20px 0;font-size:18px;color:#888}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused,.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:transparent}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.product-selection-container{max-width:800px;margin:0 auto;text-align:center}.global-search{width:100%;margin-bottom:20px}.dropdown-selection{display:flex;flex-direction:column;width:100%}.row{display:flex;justify-content:space-between;width:100%;margin-bottom:20px;flex-wrap:wrap}.dropdown-item{flex:1;margin-right:10px}.dropdown-item:last-child{margin-right:0}.scrollable-div{max-height:350px;overflow-y:auto;margin-top:20px;margin-bottom:20px}.mat-table{width:100%;border-collapse:collapse}.dropdown-selection>div{display:flex;justify-content:space-between;border:1px solid #ddd;border-radius:5px;padding:20px;flex-wrap:wrap}.mat-form-field:last-child{margin-right:0}.search-btn-wrp{justify-content:flex-start}.no-child .mat-form-field{width:100%}.child .mat-form-field{flex:0 0 calc(50% - 20px)}.delete-btn-picker .mat-icon{color:#e53935!important;font-size:24px;width:auto;height:auto}.delete-btn-picker{margin:0}.product-selection-desc{text-align:left}.tabs-action{display:flex;justify-content:space-between}.tabs-action-step-one{justify-content:flex-end;display:flex}.dropdown-selection h5{font-size:18px}::ng-deep .product-selection-container .mat-form-field-infix{padding:10px 4px 17px!important}::ng-deep .product-selection-container .mat-form-field-flex{align-items:center}::ng-deep .product-selection-container .product-picker-icon{font-size:18px;width:auto;height:auto;color:#0000004d}::ng-deep .product-selection-container .mat-form-field-appearance-outline .mat-form-field-outline-thick,::ng-deep .product-selection-container .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#0000001f}\n"] }]
+            args: [{ selector: 'ngx-mat-add-on-products', template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n    <div class=\"OverlayDivContent\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n</div>\r\n<div class=\"product-selector\" mat-dialog-content>\r\n    <mat-stepper labelPosition=\"bottom\" #stepper>\r\n        <mat-step [stepControl]=\"form\">\r\n            <form [formGroup]=\"form\">\r\n                <ng-template matStepLabel>Select Products</ng-template>\r\n                <div class=\"product-selection-container\">\r\n                    <!-- <h3>Select Products</h3> -->\r\n                    <p class=\"product-selection-desc\">Your ideal match is just a few preferences away. Start discovering\r\n                        now!</p>\r\n                    <mat-form-field class=\"global-search\" appearance=\"outline\">\r\n                        <mat-icon matPrefix class=\"material-symbols-outlined product-picker-icon\">search</mat-icon>\r\n                        <input matInput placeholder=\"Search Product Name\" formControlName=\"searchProductName\" />\r\n                    </mat-form-field>\r\n                    <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n                        <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n                            <h5>Filters</h5>\r\n                            <div class=\"row\">\r\n                                <mat-form-field *ngIf=\"dropdownL1\">\r\n                                    <mat-label>{{dropdownL1Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n                                        [matAutocomplete]=\"auto3\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL2\">\r\n                                    <mat-label>{{dropdownL2Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n                                        [matAutocomplete]=\"auto4\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL3\">\r\n                                    <mat-label>{{dropdownL3Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n                                        [matAutocomplete]=\"auto3\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n\r\n                                <mat-form-field *ngIf=\"dropdownL4\">\r\n                                    <mat-label>{{dropdownL4Label}}</mat-label>\r\n                                    <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n                                        [matAutocomplete]=\"auto4\">\r\n                                    <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n                                        (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n                                        <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n                                            [value]=\"option\">{{option.name}}</mat-option>\r\n                                    </mat-autocomplete>\r\n                                </mat-form-field>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <!-- Search Button -->\r\n                    <div fxLayout=\"row\" fxLayoutAlign=\"left\" class=\"margin-top search-btn-wrp\">\r\n                        <button mat-button color=\"primary\" mat-raised-button\r\n                            (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n                    </div>\r\n                </div>\r\n                <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n                    (scroll)=\"onScroll($event)\">\r\n                    <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n                        *ngIf=\"dataSource && dataSource.data.length > 0; else noData\">\r\n                        <ng-container matColumnDef=\"select\">\r\n                            <th mat-header-cell *matHeaderCellDef>\r\n                            </th>\r\n                            <td mat-cell *matCellDef=\"let row\">\r\n                                <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n                                    (change)=\"$event ? toggleSelection(row) : null\"\r\n                                    [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"productName\">\r\n                            <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n                        </ng-container>\r\n                        <!-- <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                            <th mat-header-cell *matHeaderCellDef> Price </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element?.price}} </td>\r\n                        </ng-container> -->\r\n                        <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                            <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> #SkuNumber-{{element?.value}} </td>\r\n                        </ng-container>\r\n\r\n                        <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n                        <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n                            (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n                            [class.selected]=\"selection.isSelected(row)\"></tr>\r\n                    </table>\r\n                    <ng-template #noData>\r\n                        <div class=\"no-data-message\">\r\n                            No data found.\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div class=\"row-summary\">\r\n                    <p>Rows: {{ getTotalRows() }} Selected: {{ getSelectedRowsCount() }}</p>\r\n                </div>\r\n                <div class=\"tabs-action-step-one\">\r\n                    <button mat-button matStepperNext [disabled]=\"selection.selected.length ? false : true\"\r\n                        color=\"primary\" mat-raised-button>Next</button>\r\n                    <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n                </div>\r\n            </form>\r\n        </mat-step>\r\n        <mat-step [stepControl]=\"form\">\r\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n                <ng-template matStepLabel>Edit/Save</ng-template>\r\n                <div class=\"new-class\">\r\n                    <table mat-table [dataSource]=\"selectedDataSource\"\r\n                        *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n                        <ng-container matColumnDef=\"delete\">\r\n                            <th mat-header-cell *matHeaderCellDef></th>\r\n                            <td mat-cell *matCellDef=\"let element\">\r\n                                <button class=\"delete-btn-picker\" mat-button\r\n                                    (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n                                    <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n                                </button>\r\n                            </td>\r\n                        </ng-container>\r\n                        <ng-container matColumnDef=\"productName\">\r\n                            <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n                            <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n                            <th mat-header-cell *matHeaderCellDef>Sub Category </th>\r\n                            <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n                            <th mat-header-cell *matHeaderCellDef>Price</th>\r\n                            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                <mat-form-field class=\"example-full-width select-price\">\r\n                                    <mat-label>Price</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n                                        placeholder=\"Please enter price\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n                                        Price is required\r\n                                    </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n                            <th mat-header-cell *matHeaderCellDef> Quantity </th>\r\n                            <td mat-cell *matCellDef=\"let element; let i = index\">\r\n                                <mat-form-field class=\"example-full-width\">\r\n                                    <mat-label>Quantity</mat-label>\r\n                                    <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\" type=\"number\"\r\n                                        min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n                                        This field is required\r\n                                    </mat-error>\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n                                        Quantity can not be less than 1\r\n                                    </mat-error>\r\n                                    <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n                                        Decimals not allowed\r\n                                      </mat-error>\r\n                                </mat-form-field>\r\n                            </td>\r\n                        </ng-container>\r\n\r\n                        <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n                            <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n                            <td mat-cell *matCellDef=\"let element\">#SkuNumber-{{element?.value}} </td>\r\n                        </ng-container>\r\n\r\n                        <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n                        <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n                    </table>\r\n                    <ng-template #showBlank>\r\n                        <div class=\"no-data-message\">\r\n                            No data found.\r\n                        </div>\r\n                    </ng-template>\r\n                </div>\r\n                <div class=\"tabs-action\">\r\n                    <div class=\"tab-action-wrp\">\r\n                        <button mat-button matStepperPrevious>Back</button>\r\n                    </div>\r\n\r\n                    <div class=\"tab-action-wrp\">\r\n                        <button mat-button matStepperNext type=\"submit\" color=\"primary\" mat-raised-button>Add\r\n                            products</button>\r\n                    </div>\r\n                </div>\r\n            </form>\r\n        </mat-step>\r\n    </mat-stepper>\r\n</div>", styles: [".dropdown-section{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;gap:16px}mat-form-field{flex:1}.new-class{margin:20px 0;border:1px solid #ddd;border-radius:5px}.mat-column-select{width:50px;text-align:center}.mat-header-cell,.mat-cell{text-align:center}button{align-self:flex-end;margin-top:20px}.row-summary{margin-top:20px;font-weight:700}.new-class td{border:1px solid #ddd;padding:10px}.new-class th{background-color:#f2f2f2;position:-webkit-sticky;position:sticky;top:0;transform:none;z-index:99;padding:10px}table{width:100%;border-collapse:collapse}.select-qunatity,.select-price{width:110px}.no-data-message{text-align:center;margin:20px 0;font-size:18px;color:#888}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused,.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:transparent}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.product-selection-container{max-width:800px;margin:0 auto;text-align:center}.global-search{width:100%;margin-bottom:20px}.dropdown-selection{display:flex;flex-direction:column;width:100%}.row{display:flex;justify-content:space-between;width:100%;margin-bottom:20px;flex-wrap:wrap}.dropdown-item{flex:1;margin-right:10px}.dropdown-item:last-child{margin-right:0}.scrollable-div{max-height:350px;overflow-y:auto;margin-top:20px;margin-bottom:20px}.mat-table{width:100%;border-collapse:collapse}.dropdown-selection>div{display:flex;justify-content:space-between;border:1px solid #ddd;border-radius:5px;padding:20px;flex-wrap:wrap}.mat-form-field:last-child{margin-right:0}.search-btn-wrp{justify-content:flex-start}.no-child .mat-form-field{width:100%}.child .mat-form-field{flex:0 0 calc(50% - 20px)}.delete-btn-picker .mat-icon{color:#e53935!important;font-size:24px;width:auto;height:auto}.delete-btn-picker{margin:0}.product-selection-desc{text-align:left}.tabs-action{display:flex;justify-content:space-between}.tabs-action-step-one{justify-content:flex-end;display:flex}.dropdown-selection h5{font-size:18px}::ng-deep .product-selection-container .mat-form-field-infix{padding:10px 4px 17px!important}::ng-deep .product-selection-container .mat-form-field-flex{align-items:center}::ng-deep .product-selection-container .product-picker-icon{font-size:18px;width:auto;height:auto;color:#0000004d}::ng-deep .product-selection-container .mat-form-field-appearance-outline .mat-form-field-outline-thick,::ng-deep .product-selection-container .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#0000001f}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,