ngx-render-material-forms 1.8.1 → 1.8.3

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 (11) hide show
  1. package/esm2020/lib/components/add-on-products/add-on-products.component.mjs +90 -14
  2. package/esm2020/lib/components/datagrid/datagrid.component.mjs +47 -18
  3. package/esm2020/lib/components/select/select.component.mjs +19 -33
  4. package/fesm2015/ngx-render-material-forms.js +156 -66
  5. package/fesm2015/ngx-render-material-forms.mjs.map +1 -1
  6. package/fesm2020/ngx-render-material-forms.js +153 -62
  7. package/fesm2020/ngx-render-material-forms.mjs.map +1 -1
  8. package/lib/components/add-on-products/add-on-products.component.d.ts +1 -0
  9. package/lib/components/datagrid/datagrid.component.d.ts +2 -1
  10. package/lib/components/select/select.component.d.ts +2 -0
  11. package/package.json +1 -1
package/fesm2020/ngx-render-material-forms.js CHANGED
@@ -5,7 +5,7 @@ import { HttpHeaders, HttpClientModule } from '@angular/common/http';
5
5
  import * as i1 from '@angular/common';
6
6
  import { CommonModule } from '@angular/common';
7
7
  import * as i2 from '@angular/forms';
8
- import { FormControl, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
8
+ import { FormControl, NG_VALUE_ACCESSOR, Validators, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
9
9
  import * as i4$2 from '@angular/material/input';
10
10
  import { MAT_INPUT_VALUE_ACCESSOR, MatInputModule } from '@angular/material/input';
11
11
  import * as i3$2 from '@angular/material/button';
@@ -2817,10 +2817,6 @@ class MaterialSelectComponent extends MaterialComponent {
2817
2817
  this.storeDependentItems = [];
2818
2818
  this.executionFlag = false;
2819
2819
  this.apiCounter = 0;
2820
- // this.holy = CryptoJS.enc.Base64.parse('8F/2+T2NXqUBQERR12R4sw==');
2821
- // this.grail = CryptoJS.enc.Base64.parse('yE0CgQbYzK5wqeoKTVzhOQ==');
2822
- //this.holy = CryptoJS.enc.Base64.parse(this.commonService.getcombodeal());
2823
- //this.grail = CryptoJS.enc.Base64.parse(this.commonService.getglobedata());
2824
2820
  }
2825
2821
  onInputChange(event) {
2826
2822
  if (this.instance.component.key.toLowerCase() === 'vendorproductid' && event.target.value === '') {
@@ -2833,29 +2829,6 @@ class MaterialSelectComponent extends MaterialComponent {
2833
2829
  this.searchItem = "";
2834
2830
  }
2835
2831
  }
2836
- // scrumble(msg) {
2837
- // if (!isNullOrUndefined(msg)) {
2838
- // var conceal = this.getcampaign(msg, this.holy, this.grail);
2839
- // var sha256 = CryptoJS.HmacSHA256(CryptoJS.enc.Base64.stringify(this.grail) + conceal.toString(), CryptoJS.enc.Base64.stringify(this.holy));
2840
- // var hashInBase64 = CryptoJS.enc.Base64.stringify(sha256);
2841
- // let keyValue = {
2842
- // "value": conceal.toString(),
2843
- // "mac": hashInBase64
2844
- // };
2845
- // var result = JSON.stringify(keyValue);
2846
- // var jumbled = CryptoJS.enc.Utf8.parse(result);
2847
- // return CryptoJS.enc.Base64.stringify(jumbled);
2848
- // }
2849
- // }
2850
- // getcampaign(data: any, holy: any, grail: any) {
2851
- // return CryptoJS.AES.encrypt(data.toString(), holy,
2852
- // {
2853
- // blockSize: 128,
2854
- // iv: grail,
2855
- // mode: CryptoJS.mode.CBC,
2856
- // padding: CryptoJS.pad.Pkcs7
2857
- // });
2858
- // }
2859
2832
  registerPanelScrollEvent(selectElem) {
2860
2833
  if (selectElem && selectElem?.panel) {
2861
2834
  // const panelElement = selectElem.panel.nativeElement;
@@ -2905,7 +2878,7 @@ class MaterialSelectComponent extends MaterialComponent {
2905
2878
  const includeDescription = this.getValueByKey(paramsData, 'includeDescription');
2906
2879
  const vendorId = this.getValueByKey(paramsData, 'vendorId');
2907
2880
  const onlyActive = this.getValueByKey(paramsData, 'onlyActive');
2908
- const includeCurrencyId = this.getValueByKey(paramsData, 'includeCurrencyId');
2881
+ const includeCountry = this.getValueByKey(paramsData, 'filterProductBasedOnCustomerCountry');
2909
2882
  var currentUser = JSON.parse(localStorage.getItem('currentUser'));
2910
2883
  let headers;
2911
2884
  if (currentUser && currentUser.Tokens && currentUser.Tokens.AccessToken) {
@@ -2922,7 +2895,7 @@ class MaterialSelectComponent extends MaterialComponent {
2922
2895
  const enpageNumber = this.commonService.scrumble(pageNumber);
2923
2896
  const enpageSize = this.commonService.scrumble(pageSize);
2924
2897
  const ensearchQuery = this.commonService.scrumble(searchQuery);
2925
- const encodeIncludeCurrencyId = this.commonService.scrumble(includeCurrencyId);
2898
+ const encodeIncludeCountry = this.commonService.scrumble(includeCountry);
2926
2899
  let enactive = this.commonService.scrumble(onlyActive);
2927
2900
  //Check if enactive is undefined, null, or blank
2928
2901
  if (enactive === undefined || enactive === null || enactive === '') {
@@ -2944,9 +2917,9 @@ class MaterialSelectComponent extends MaterialComponent {
2944
2917
  const hostname = window.location.hostname;
2945
2918
  const baseApiUrl = baseUrlMapping[hostname] || null;
2946
2919
  let url = `${baseApiUrl}/api/VendorFormBuilder/GetVendorProducts?vendorId=${envendorId}&pageNumber=${enpageNumber}&pageSize=${enpageSize}&search=${ensearchQuery}&onlyActive=${enactive}&includeDescription=${endescription}`;
2947
- // Only add includeCurrencyId if it has a valid value
2948
- if (encodeIncludeCurrencyId !== null && encodeIncludeCurrencyId !== undefined) {
2949
- url += `&includeCurrencyId=${encodeIncludeCurrencyId}`;
2920
+ // Only add includeCountryId if it has a valid value
2921
+ if (encodeIncludeCountry !== null && encodeIncludeCountry !== undefined && this.isFilterProductBasedOnCustomerCountryValid(this.instance.component.data)) {
2922
+ url += `&filterProductBasedOnCustomerCountry=${encodeIncludeCountry}`;
2950
2923
  }
2951
2924
  this.http.get(url, { headers }).subscribe(response => {
2952
2925
  if (response && response.code === 200) {
@@ -3204,6 +3177,19 @@ class MaterialSelectComponent extends MaterialComponent {
3204
3177
  compareObjects(o1, o2) {
3205
3178
  return _.isEqual(o1, o2);
3206
3179
  }
3180
+ isFilterProductBasedOnCustomerCountryValid(data) {
3181
+ if (data && data.headers && Array.isArray(data.headers)) {
3182
+ const header = data.headers.find(h => h.key === 'filterProductBasedOnCustomerCountry');
3183
+ if (header &&
3184
+ header.value !== null &&
3185
+ header.value !== undefined &&
3186
+ header.value.trim() !== "" &&
3187
+ header.value.trim().toLowerCase() === "true") {
3188
+ return true;
3189
+ }
3190
+ }
3191
+ return false;
3192
+ }
3207
3193
  }
3208
3194
  MaterialSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.HttpClient }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
3209
3195
  MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectComponent, selector: "mat-formio-select", viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }, { propertyName: "selectElem", first: true, predicate: ["productSelect"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
@@ -3457,6 +3443,10 @@ class AddOnProductsComponent {
3457
3443
  }
3458
3444
  initializeFormArray() {
3459
3445
  const selectedProductsArray = this.form.get('selectedProducts');
3446
+ if (!selectedProductsArray) {
3447
+ console.error('selectedProducts FormArray not initialized.');
3448
+ return;
3449
+ }
3460
3450
  this.selection.selected.forEach(product => {
3461
3451
  selectedProductsArray.push(this.fb.group({
3462
3452
  price: [product.price || '', Validators.required],
@@ -3474,8 +3464,8 @@ class AddOnProductsComponent {
3474
3464
  this.selectedDataSource.data = [...this.selection.selected];
3475
3465
  }
3476
3466
  initializeDataSources() {
3477
- // Ensure selected items are marked in the main data source
3478
- if (this.selection?.selected?.length) {
3467
+ // Debugging logs to trace issues
3468
+ if (Array.isArray(this.selection?.selected) && Array.isArray(this.dataSource?.data) && this.selection?.selected?.length) {
3479
3469
  this.selection?.selected?.forEach(selectedProduct => {
3480
3470
  const index = this.dataSource.data.findIndex(product => product.value === selectedProduct.value);
3481
3471
  if (index >= 0) {
@@ -3616,7 +3606,17 @@ class AddOnProductsComponent {
3616
3606
  this.updateSelectedProducts();
3617
3607
  }
3618
3608
  toggleSelection(row) {
3619
- this.selection.toggle(row);
3609
+ // Check if the product is already selected
3610
+ const alreadySelected = this.selection.selected.some(selected => selected.value === row.value);
3611
+ if (alreadySelected) {
3612
+ // If the product is already selected, deselect it
3613
+ this.selection.deselect(row);
3614
+ }
3615
+ else {
3616
+ // If not already selected, select it
3617
+ this.selection.select(row);
3618
+ }
3619
+ // Update selected products to ensure no duplicates
3620
3620
  this.updateSelectedProducts();
3621
3621
  }
3622
3622
  // Getter for the FormArray
@@ -3625,11 +3625,19 @@ class AddOnProductsComponent {
3625
3625
  }
3626
3626
  updateSelectedProducts() {
3627
3627
  if (Array.isArray(this.selection.selected)) {
3628
+ // Deduplicate selected products
3629
+ const uniqueProducts = Array.from(new Map(this.selection.selected.map(product => [product.value, product])).values());
3630
+ this.selection.clear();
3631
+ uniqueProducts.forEach(product => this.selection.select(product));
3628
3632
  this.selectedDataSource.data = [...this.selection.selected];
3629
3633
  const selectedProductsArray = this.selectedProducts;
3630
3634
  selectedProductsArray.clear();
3631
- this.selection?.selected?.forEach(product => {
3632
- selectedProductsArray?.push(this.fb.group({
3635
+ this.selection?.selected?.forEach((product, index) => {
3636
+ if (!product?.value) {
3637
+ console.error('Product value (SKU) is missing at index:', index, product);
3638
+ return;
3639
+ }
3640
+ const productFormGroup = this.fb.group({
3633
3641
  price: [product?.price ?? '', this.showPrice ? Validators.required : []],
3634
3642
  text: [product?.text || ''],
3635
3643
  quantity: [product?.quantity ?? '', this.showQuantity ? Validators.required : []],
@@ -3637,10 +3645,27 @@ class AddOnProductsComponent {
3637
3645
  subCategory: [product?.subCategory || ''],
3638
3646
  value: [product?.value || ''],
3639
3647
  skuNumber: [product?.value || '']
3640
- }));
3648
+ });
3649
+ if (productFormGroup) {
3650
+ selectedProductsArray.push(productFormGroup);
3651
+ }
3652
+ else {
3653
+ console.error(`Failed to create FormGroup for product at index ${index}.`);
3654
+ }
3641
3655
  });
3642
- selectedProductsArray.controls.forEach(control => {
3643
- control.get('price')?.disable();
3656
+ selectedProductsArray.controls.forEach((control, index) => {
3657
+ if (control instanceof FormGroup) {
3658
+ const priceControl = control.get('price');
3659
+ if (priceControl) {
3660
+ priceControl.disable();
3661
+ }
3662
+ else {
3663
+ console.error(`Price control is missing in FormGroup at index ${index}.`);
3664
+ }
3665
+ }
3666
+ else {
3667
+ console.error(`Unexpected control type at index ${index}:`, control);
3668
+ }
3644
3669
  });
3645
3670
  }
3646
3671
  else {
@@ -3703,9 +3728,22 @@ class AddOnProductsComponent {
3703
3728
  if (response && response.code === 200) {
3704
3729
  this.totalPages = response?.data?.totalPages;
3705
3730
  const data = response.data.dataSource;
3731
+ // Sync selection state with new data
3732
+ data.forEach(product => {
3733
+ const existingProduct = this.selection.selected.find(p => p.value === product.value);
3734
+ if (existingProduct) {
3735
+ Object.assign(product, existingProduct); // Replace product with existing reference
3736
+ this.selection.select(product); // Mark as selected
3737
+ //this.toggleSelection(product)
3738
+ this.updateSelectedProducts();
3739
+ }
3740
+ });
3741
+ // Avoid duplicates in the dataSource
3742
+ const existingProductValues = new Set(this.dataSource.data.map(product => product.value));
3743
+ const uniqueNewData = data.filter(product => !existingProductValues.has(product.value));
3706
3744
  if (this.dataSource.data.length > 0 && flag) {
3707
3745
  data.forEach(item => this.dataSource.data.push(item));
3708
- this.dataSource.data = [...this.dataSource.data, ...data];
3746
+ this.dataSource.data = [...this.dataSource.data, ...uniqueNewData];
3709
3747
  }
3710
3748
  else {
3711
3749
  this.dataSource.data = data;
@@ -3744,7 +3782,7 @@ class AddOnProductsComponent {
3744
3782
  this.selectedDataSource._updateChangeSubscription();
3745
3783
  this.selection.deselect(element);
3746
3784
  const selectedProductsArray = this.form.get('selectedProducts');
3747
- const productIndex = selectedProductsArray.controls.findIndex(control => control.value.productName === element.productName);
3785
+ const productIndex = selectedProductsArray.controls.findIndex(control => control.value.value === element.value);
3748
3786
  if (productIndex >= 0) {
3749
3787
  selectedProductsArray.removeAt(productIndex);
3750
3788
  }
@@ -3776,12 +3814,36 @@ class AddOnProductsComponent {
3776
3814
  displayFn(option) {
3777
3815
  return option ? option.name : '';
3778
3816
  }
3817
+ onQuantityChange(event, index) {
3818
+ const value = event.target.value;
3819
+ const quantityControl = this.selectedProducts.at(index).get('quantity');
3820
+ if (!quantityControl)
3821
+ return;
3822
+ // Clear any previous errors
3823
+ quantityControl.setErrors(null);
3824
+ // If the value is empty, set 'required' error
3825
+ if (value === '' || value === null) {
3826
+ quantityControl.setErrors({ 'required': true });
3827
+ }
3828
+ // If the value is less than 1, set 'min' error
3829
+ else if (Number(value) < 1) {
3830
+ quantityControl.setErrors({ 'min': true });
3831
+ }
3832
+ // If the value is not an integer, set 'pattern' error
3833
+ else if (!Number.isInteger(Number(value))) {
3834
+ quantityControl.setErrors({ 'pattern': true });
3835
+ }
3836
+ // Otherwise, set the valid value
3837
+ else {
3838
+ quantityControl.setValue(Number(value));
3839
+ }
3840
+ }
3779
3841
  }
3780
3842
  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 });
3781
- 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"] }] });
3843
+ 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"] }] });
3782
3844
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AddOnProductsComponent, decorators: [{
3783
3845
  type: Component,
3784
- 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"] }]
3846
+ 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"] }]
3785
3847
  }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
3786
3848
  type: Inject,
3787
3849
  args: [MAT_DIALOG_DATA]
@@ -3824,14 +3886,12 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
3824
3886
  this.dropdownL2Label = '';
3825
3887
  this.dropdownL3Label = '';
3826
3888
  this.dropdownL4Label = '';
3889
+ this.isCustomerCountryFiltered = false;
3890
+ this.emptyArray = false;
3827
3891
  }
3828
3892
  getColumnLabel(column) {
3829
3893
  return column.label || column.key;
3830
3894
  }
3831
- checkIsAttributeTrue(newProductPickerFlag, attributeName) {
3832
- return newProductPickerFlag && Object.keys(newProductPickerFlag).some(key => key.toLocaleLowerCase() === attributeName.toLowerCase() &&
3833
- newProductPickerFlag[key].toLowerCase() === "true");
3834
- }
3835
3895
  getLabelName(newProductPickerFlag, attributeName) {
3836
3896
  if (newProductPickerFlag && Object.keys(newProductPickerFlag).some(key => key.toLocaleLowerCase() === attributeName.toLowerCase())) {
3837
3897
  // Find the key that matches attributeName case-insensitively
@@ -3846,17 +3906,18 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
3846
3906
  setInstance(instance) {
3847
3907
  //const newProductPickerFlag = instance?.component?.attributes;
3848
3908
  const checkAttribute = instance?.component?.attributes;
3849
- this.showNewProductPicker = this.checkIsAttributeTrue(checkAttribute, "newproductpicker");
3850
- this.showCategory = this.checkIsAttributeTrue(checkAttribute, "showCategory");
3851
- this.showSubcategory = this.checkIsAttributeTrue(checkAttribute, "showSubcategory");
3852
- this.showPrice = this.checkIsAttributeTrue(checkAttribute, "showPrice");
3853
- this.showQuantity = this.checkIsAttributeTrue(checkAttribute, "showQuantity");
3854
- this.showSkuNumber = this.checkIsAttributeTrue(checkAttribute, "showSkuNumber");
3855
- this.showDialogQuantity = this.checkIsAttributeTrue(checkAttribute, "showDialogQuantity");
3856
- this.showDialogPrice = this.checkIsAttributeTrue(checkAttribute, "showDialogPrice");
3857
- this.showDialogCategory = this.checkIsAttributeTrue(checkAttribute, "showDialogCategory");
3858
- this.showDialogSkuNumber = this.checkIsAttributeTrue(checkAttribute, "showDialogSkuNumber");
3859
- this.showDialogSubCategory = this.checkIsAttributeTrue(checkAttribute, "showDialogSubCategory");
3909
+ this.showNewProductPicker = this.commonService.checkIsAttributeTrue(checkAttribute, "newproductpicker");
3910
+ this.showCategory = this.commonService.checkIsAttributeTrue(checkAttribute, "showCategory");
3911
+ this.showSubcategory = this.commonService.checkIsAttributeTrue(checkAttribute, "showSubcategory");
3912
+ this.showPrice = this.commonService.checkIsAttributeTrue(checkAttribute, "showPrice");
3913
+ this.showQuantity = this.commonService.checkIsAttributeTrue(checkAttribute, "showQuantity");
3914
+ this.showSkuNumber = this.commonService.checkIsAttributeTrue(checkAttribute, "showSkuNumber");
3915
+ this.showDialogQuantity = this.commonService.checkIsAttributeTrue(checkAttribute, "showDialogQuantity");
3916
+ this.showDialogPrice = this.commonService.checkIsAttributeTrue(checkAttribute, "showDialogPrice");
3917
+ this.showDialogCategory = this.commonService.checkIsAttributeTrue(checkAttribute, "showDialogCategory");
3918
+ this.showDialogSkuNumber = this.commonService.checkIsAttributeTrue(checkAttribute, "showDialogSkuNumber");
3919
+ this.showDialogSubCategory = this.commonService.checkIsAttributeTrue(checkAttribute, "showDialogSubCategory");
3920
+ this.isCustomerCountryFiltered = this.commonService.checkIsAttributeTrue(checkAttribute, "filterProductBasedOnCustomerCountry");
3860
3921
  const l1 = this.getLabelName(checkAttribute, "dropdownL1");
3861
3922
  const l2 = this.getLabelName(checkAttribute, "dropdownL2");
3862
3923
  const l3 = this.getLabelName(checkAttribute, "dropdownL3");
@@ -3879,6 +3940,8 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
3879
3940
  }
3880
3941
  this.checkSubmissionStatus = this.commonService.checkIsAttributeTrue(checkAttribute, 'isProductOptional');
3881
3942
  this.hasValueAndEditMode = (checkAttribute?.hasValue === 'yes') && (checkAttribute?.editMode === 'true');
3943
+ const retrievedObject = JSON.parse(localStorage.getItem('storageObject'));
3944
+ this.emptyArray = retrievedObject?.dataSource?.length < 1 ? true : false;
3882
3945
  super.setInstance(instance);
3883
3946
  if (this.showNewProductPicker && !this.hasInitialized) {
3884
3947
  if (!this.showCategory) {
@@ -4073,7 +4136,7 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
4073
4136
  fxFill
4074
4137
  cdkDropList
4075
4138
  [cdkDropListData]="dataSource"
4076
- (cdkDropListDropped)="dropTable($event)">
4139
+ (cdkDropListDropped)="dropTable($event)" *ngIf="!isCustomerCountryFiltered || !emptyArray; else noDataMessage">
4077
4140
 
4078
4141
 
4079
4142
  <ng-container *ngFor="let column of formColumns" [matColumnDef]="column">
@@ -4108,6 +4171,15 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
4108
4171
  </div>
4109
4172
  </ng-container>
4110
4173
 
4174
+ <!-- Default Message -->
4175
+ <ng-template #noDataMessage>
4176
+ <div class="no-data-message" *ngIf="isCustomerCountryFiltered && emptyArray">
4177
+ <span>
4178
+ No Product found with selected Customer country.
4179
+ </span>
4180
+ </div>
4181
+ </ng-template>
4182
+
4111
4183
  <table mat-table [dataSource]="dataSourceNew" class="mat-table" *ngIf="dataSourceNew.length > 0 && showNewProductPicker; else noData" >
4112
4184
  <!-- Product Name Column -->
4113
4185
  <ng-container matColumnDef="productName">
@@ -4150,7 +4222,12 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
4150
4222
  </table>
4151
4223
  <ng-template #noData>
4152
4224
  <div class="no-data-message" *ngIf="showNewProductPicker">
4225
+ <ng-container *ngIf="showNewProductPicker && !isCustomerCountryFiltered">
4153
4226
  No products found. Please add some products.
4227
+ </ng-container>
4228
+ <ng-container *ngIf="showNewProductPicker && isCustomerCountryFiltered">
4229
+ No Product found with selected Customeer country.
4230
+ </ng-container>
4154
4231
  </div>
4155
4232
  </ng-template>
4156
4233
 
@@ -4201,7 +4278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
4201
4278
  fxFill
4202
4279
  cdkDropList
4203
4280
  [cdkDropListData]="dataSource"
4204
- (cdkDropListDropped)="dropTable($event)">
4281
+ (cdkDropListDropped)="dropTable($event)" *ngIf="!isCustomerCountryFiltered || !emptyArray; else noDataMessage">
4205
4282
 
4206
4283
 
4207
4284
  <ng-container *ngFor="let column of formColumns" [matColumnDef]="column">
@@ -4236,6 +4313,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
4236
4313
  </div>
4237
4314
  </ng-container>
4238
4315
 
4316
+ <!-- Default Message -->
4317
+ <ng-template #noDataMessage>
4318
+ <div class="no-data-message" *ngIf="isCustomerCountryFiltered && emptyArray">
4319
+ <span>
4320
+ No Product found with selected Customer country.
4321
+ </span>
4322
+ </div>
4323
+ </ng-template>
4324
+
4239
4325
  <table mat-table [dataSource]="dataSourceNew" class="mat-table" *ngIf="dataSourceNew.length > 0 && showNewProductPicker; else noData" >
4240
4326
  <!-- Product Name Column -->
4241
4327
  <ng-container matColumnDef="productName">
@@ -4278,7 +4364,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
4278
4364
  </table>
4279
4365
  <ng-template #noData>
4280
4366
  <div class="no-data-message" *ngIf="showNewProductPicker">
4367
+ <ng-container *ngIf="showNewProductPicker && !isCustomerCountryFiltered">
4281
4368
  No products found. Please add some products.
4369
+ </ng-container>
4370
+ <ng-container *ngIf="showNewProductPicker && isCustomerCountryFiltered">
4371
+ No Product found with selected Customeer country.
4372
+ </ng-container>
4282
4373
  </div>
4283
4374
  </ng-template>
4284
4375