ngx-render-material-forms 1.4.9 → 1.5.0

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, Input, ViewChild, ViewContainerRef, ViewChildren, EventEmitter, Output, forwardRef, Directive, Inject, Optional, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/common/http';
+import * as i1$2 from '@angular/common/http';
 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, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, NG_VALUE_ACCESSOR, Validators, 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';
@@ -27,18 +27,20 @@ import * as i4 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i2$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i4$7 from '@angular/material/table';
+import * as i10 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i5$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i3$4 from '@angular/material/progress-spinner';
+import * as i11 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i5$1 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
-import * as i1$2 from '@angular/material/dialog';
+import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i14 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import Webform from 'formiojs/Webform.js';
 import FormioComponent$2 from 'formiojs/components/_classes/component/Component.js';
 import TextFieldComponent from 'formiojs/components/textfield/TextField.js';
@@ -81,23 +83,24 @@ import RadioComponent from 'formiojs/components/radio/Radio.js';
 import SelectBoxesComponent from 'formiojs/components/selectboxes/SelectBoxes.js';
 import SelectComponent from 'formiojs/components/select/Select.js';
 import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, takeUntil, startWith, map } from 'rxjs/operators';
 import * as CryptoJS from 'crypto-js';
 import { isNullOrUndefined } from 'util';
 import * as i9 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import WellComponent from 'formiojs/components/well/Well.js';
 import DataGridComponent from 'formiojs/components/datagrid/DataGrid.js';
-import * as i8 from '@angular/cdk/drag-drop';
+import * as i9$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i13 from '@angular/material/stepper';
+import { MatStepperModule } from '@angular/material/stepper';
 import EditGridComponent from 'formiojs/components/editgrid/EditGrid.js';
 import Components$2 from 'formiojs/components/Components';
 import isString from 'lodash/isString';
 import TableComponent from 'formiojs/components/table/Table.js';
 import Wizard from 'formiojs/Wizard';
 import Displays from 'formiojs/displays/Displays';
-import * as i3$3 from '@angular/material/stepper';
-import { MatStepperModule } from '@angular/material/stepper';
 import * as i1$3 from '@formio/angular';
 import { FormioBaseComponent } from '@formio/angular';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -976,8 +979,11 @@ var AngularButtonsThemes;
 })(AngularButtonsThemes || (AngularButtonsThemes = {}));
 
 class MaterialButtonComponent extends MaterialComponent {
-    constructor() {
-        super(...arguments);
+    constructor(element, ref, dialog) {
+        super(element, ref);
+        this.element = element;
+        this.ref = ref;
+        this.dialog = dialog;
         this.loading = false;
         this.done = false;
         this.error = false;
@@ -1048,12 +1054,12 @@ class MaterialButtonComponent extends MaterialComponent {
         return retVal;
     }
 }
-MaterialButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-MaterialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialButtonComponent, selector: "mat-formio-button", usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"instance\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+MaterialButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+MaterialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialButtonComponent, selector: "mat-formio-button", usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-formio-button', template: "<button *ngIf=\"instance\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"] }]
-        }] });
+            args: [{ selector: 'mat-formio-button', template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }]; } });
 ButtonComponent.MaterialComponent = MaterialButtonComponent;
 
 class MaterialTextareaComponent extends MaterialComponent {
@@ -2751,7 +2757,7 @@ class MaterialSelectComponent extends MaterialComponent {
         if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
             this.selectElem.openedChange.subscribe((isOpen) => {
                 if (isOpen) {
-                    this.pageNumber = 1;
+                    this.pageNumber = 2;
                     this.pageSize = 20;
                     this.searchQuery = '';
                     this.searching = false;
@@ -2810,37 +2816,11 @@ class MaterialSelectComponent extends MaterialComponent {
         });
         this.filteredOptions = this.selectOptions;
     }
-    isError() {
-        if (this.instance.error) {
-            this.control.setErrors(this.instance.component.validate);
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    getErrorMessage() {
-        if (this.instance.error && this.instance.error.messages) {
-            const { messages } = this.instance.error;
-            if (messages.length) {
-                for (const msg of messages) {
-                    if (msg.context) {
-                        if (this.instance && this.instance.parent && this.instance.parent._data) {
-                            if (this.instance.parent._data.submit) {
-                                this.control.markAllAsTouched();
-                            }
-                        }
-                        return this.instance.error ? this.instance.error.message : '';
-                    }
-                }
-            }
-        }
-    }
     compareObjects(o1, o2) {
         return _.isEqual(o1, o2);
     }
 }
-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$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
+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 }], target: i0.ɵɵFactoryTarget.Component });
 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: `
     <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
     <ng-template #componentTemplate let-hasLabel>
@@ -2878,7 +2858,7 @@ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         <span *ngIf="instance.component.suffix" matSuffix>
           {{ instance.component.suffix }}
         </span>
-          <mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
+        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
       </mat-form-field>
     </ng-template>
   `, isInline: true, styles: [".example-viewport{height:200px}.product-picker{overflow-x:hidden}.virtual-full-view{height:auto!important;white-space:normal!important;line-height:1.4!important;text-overflow:initial!important;min-height:48px!important;overflow:visible!important;overflow:initial!important;padding-top:10px!important;padding-bottom:10px!important}::ng-deep .product-picker .cdk-virtual-scroll-content-wrapper{width:100%!important}.virtual-full-view .mat-pseudo-checkbox{align-self:top!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i9.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: i9.MatSelectSearchClearDirective, selector: "[ngxMatSelectSearchClear]" }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
@@ -2921,11 +2901,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
         <span *ngIf="instance.component.suffix" matSuffix>
           {{ instance.component.suffix }}
         </span>
-          <mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
+        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
       </mat-form-field>
     </ng-template>
   `, styles: [".example-viewport{height:200px}.product-picker{overflow-x:hidden}.virtual-full-view{height:auto!important;white-space:normal!important;line-height:1.4!important;text-overflow:initial!important;min-height:48px!important;overflow:visible!important;overflow:initial!important;padding-top:10px!important;padding-bottom:10px!important}::ng-deep .product-picker .cdk-virtual-scroll-content-wrapper{width:100%!important}.virtual-full-view .mat-pseudo-checkbox{align-self:top!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }]; }, propDecorators: { multiSelect: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.HttpClient }]; }, propDecorators: { multiSelect: [{
                 type: ViewChild,
                 args: ['multiSelect', { static: true }]
             }], selectElem: [{
@@ -2984,32 +2964,477 @@ class ConfirmationDialogComponent {
     ngOnInit() {
     }
 }
-ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ConfirmationDialogComponent, selector: "NgxMat-confirmation-dialog", ngImport: i0, template: "<div class=\"dialog-container\">\r\n<h2 mat-dialog-title class=\"data-grid-alert\">Alert</h2>\r\n<mat-dialog-content class=\"data-grid-popup-body\">\r\n   {{data.message}}\r\n</mat-dialog-content>\r\n<mat-dialog-actions class=\"data-grid-popup-footer\">\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"warn\" *ngIf=\"data.buttonStatus\">Delete</button>\r\n    <button mat-button [mat-dialog-close]=\"false\" [ngClass]=\"{'data-grid-closed-btn': !data.buttonStatus}\">{{data.buttonStatus ? 'Cancel': 'Close'}}</button>\r\n</mat-dialog-actions>\r\n</div>", styles: ["::ng-deep .data-grid-closed-btn .mat-button-focus-overlay{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
+ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ConfirmationDialogComponent, selector: "NgxMat-confirmation-dialog", ngImport: i0, template: "<div class=\"dialog-container\">\r\n<h2 mat-dialog-title class=\"data-grid-alert\">Alert</h2>\r\n<mat-dialog-content class=\"data-grid-popup-body\">\r\n   {{data.message}}\r\n</mat-dialog-content>\r\n<mat-dialog-actions class=\"data-grid-popup-footer\">\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"warn\" *ngIf=\"data.buttonStatus\">Delete</button>\r\n    <button mat-button [mat-dialog-close]=\"false\" [ngClass]=\"{'data-grid-closed-btn': !data.buttonStatus}\">{{data.buttonStatus ? 'Cancel': 'Close'}}</button>\r\n</mat-dialog-actions>\r\n</div>", styles: ["::ng-deep .data-grid-closed-btn .mat-button-focus-overlay{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'NgxMat-confirmation-dialog', template: "<div class=\"dialog-container\">\r\n<h2 mat-dialog-title class=\"data-grid-alert\">Alert</h2>\r\n<mat-dialog-content class=\"data-grid-popup-body\">\r\n   {{data.message}}\r\n</mat-dialog-content>\r\n<mat-dialog-actions class=\"data-grid-popup-footer\">\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"warn\" *ngIf=\"data.buttonStatus\">Delete</button>\r\n    <button mat-button [mat-dialog-close]=\"false\" [ngClass]=\"{'data-grid-closed-btn': !data.buttonStatus}\">{{data.buttonStatus ? 'Cancel': 'Close'}}</button>\r\n</mat-dialog-actions>\r\n</div>", styles: ["::ng-deep .data-grid-closed-btn .mat-button-focus-overlay{background-color:transparent}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+        return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [MAT_DIALOG_DATA]
                     }] }];
     } });
 
+class CommonService {
+    constructor(http) {
+        this.http = http;
+        this.holy = '';
+        this.grail = '';
+        this.holy = CryptoJS.enc.Base64.parse('8F/2+T2NXqUBQERR12R4sw==');
+        this.grail = CryptoJS.enc.Base64.parse('yE0CgQbYzK5wqeoKTVzhOQ==');
+        this.paramsData = JSON.parse(localStorage.getItem('productPickerParams'));
+        this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
+    }
+    scrumble(msg) {
+        if (!isNullOrUndefined(msg)) {
+            var conceal = this.getcampaign(msg, this.holy, this.grail);
+            var sha256 = CryptoJS.HmacSHA256(CryptoJS.enc.Base64.stringify(this.grail) + conceal.toString(), CryptoJS.enc.Base64.stringify(this.holy));
+            var hashInBase64 = CryptoJS.enc.Base64.stringify(sha256);
+            let keyValue = {
+                "value": conceal.toString(),
+                "mac": hashInBase64
+            };
+            var result = JSON.stringify(keyValue);
+            var jumbled = CryptoJS.enc.Utf8.parse(result);
+            return CryptoJS.enc.Base64.stringify(jumbled);
+        }
+    }
+    getcampaign(data, holy, grail) {
+        return CryptoJS.AES.encrypt(data.toString(), holy, {
+            blockSize: 128,
+            iv: grail,
+            mode: CryptoJS.mode.CBC,
+            padding: CryptoJS.pad.Pkcs7
+        });
+    }
+    getBaseApiUrl() {
+        const baseUrlMapping = {
+            'localhost': 'http://localhost:58504',
+            'lincoln.vartopia.com': 'https://lincoln-api.vartopia.com',
+            'stage.vartopia.com': 'https://stage-api.vartopia.com',
+            'my.vartopia.com': 'https://reagan-api.vartopia.com',
+            'jackson.vartopia.com': 'https://jackson-api.vartopia.com'
+        };
+        // Get the current hostname
+        const hostname = window.location.hostname;
+        return baseUrlMapping[hostname] || null;
+    }
+    listProductCategory() {
+        const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
+        const baseApiUrl = this.getBaseApiUrl();
+        return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetProductsCategory?vendorId=${vendorId}`);
+    }
+    listSubCategory(category) {
+        const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
+        const baseApiUrl = this.getBaseApiUrl();
+        return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetProductsSubCategory?vendorId=${vendorId}&categoryName=${category}`);
+    }
+    // Function to get value by key from the array
+    getValueByKey(data, key) {
+        if (!data || data.length === 0) {
+            return null; // Return null if data is empty or undefined
+        }
+        const item = data.find(kv => kv.key.toLowerCase() === key.toLowerCase());
+        return item ? item.value : null;
+    }
+    // this.http.get<VendorProductsResponse>(`${baseApiUrl}/api/VendorFormBuilder/GetVendorProducts?vendorId=${envendorId}&pageNumber=${enpageNumber}&pageSize=${enpageSize}&search=${ensearchQuery}&onlyActive=${enactive}&includeDescription=${endescription}`, { headers }).subscribe(response => {
+    loadProducts(pageNumber, pazeSize, search = '', onlyActive = true, description = false, category, subCategory) {
+        const baseApiUrl = this.getBaseApiUrl();
+        const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
+        const encodeCat = encodeURIComponent(category);
+        const encodeSubCat = encodeURIComponent(subCategory);
+        return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetVendorProducts?vendorId=${vendorId}&pageNumber=${pageNumber}&pageSize=${pazeSize}&search=${search}&onlyActive=${onlyActive}&includeDescription=${description}&category=${encodeCat}&subCategory=${encodeSubCat}`);
+    }
+}
+CommonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CommonService, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+CommonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CommonService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CommonService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
+
+class AddOnProductsComponent {
+    constructor(matDialogRef, data, fb, dialog, commonSevice) {
+        this.matDialogRef = matDialogRef;
+        this.fb = fb;
+        this.dialog = dialog;
+        this.commonSevice = commonSevice;
+        this.category = [];
+        this.subCategory = [];
+        this.filteredCategories = [];
+        this.filteredSubCategories = [];
+        this.addProductsColumns = ['select', 'productName', 'price'];
+        this.showAllproductsColumns = ['delete', 'productName', 'categoryName', 'subCategory', 'Quantity', 'price'];
+        this.quantityList = [5, 10, 15, 20, 25];
+        this.ELEMENT_DATA = [];
+        this.dataSource = new MatTableDataSource();
+        this.selection = new SelectionModel(true, []);
+        this.selectedDataSource = new MatTableDataSource([]);
+        this.selectedCategory = null;
+        this.selectedSubCategory = null;
+        this.showCategory = false;
+        this.showSubcategory = false;
+        this.showPrice = true;
+        this.showQuantity = true;
+        this.showNewProductPicker = true;
+        this.setCategory = '';
+        this.setSubCategory = '';
+        this.loadingFlag = false;
+        this.pageNumber = 1;
+        this.pageSize = 20;
+        this.totalPages = 0;
+        this.searchQuery = '';
+        this.itemList = [];
+        this.prevScrollPosition = 0; // Track the previous scroll position
+        this.spinnerFlag = false;
+        this.showCategory = data.attributesFlag.showCategory;
+        this.showSubcategory = data.attributesFlag.showSubcategory;
+        this.showPrice = data.attributesFlag.showPrice;
+        this.showQuantity = data.attributesFlag.showQuantity;
+        this.showNewProductPicker = data.showNewProductPicker;
+        this.setCategory = data.category || '';
+        this.setSubCategory = data.subCategory || '';
+        this.selection = new SelectionModel(true, data.selectedProducts || []);
+        this.form = this.fb.group({
+            productCategory: [''],
+            productSubcategory: [''],
+            selectedProducts: this.fb.array([])
+        });
+        this.initializeFormArray();
+        if (!this.showCategory) {
+            this.removeColumn('categoryName');
+        }
+        if (!this.showPrice) {
+            this.removeColumn('price');
+        }
+        if (!this.showSubcategory) {
+            this.removeColumn('subCategory');
+        }
+        if (!this.showQuantity) {
+            this.removeColumn('Quantity');
+        }
+    }
+    removeColumn(columnName) {
+        this.showAllproductsColumns = this.showAllproductsColumns.filter(column => column !== columnName);
+        this.addProductsColumns = this.addProductsColumns.filter(column => column !== columnName);
+    }
+    initializeFormArray() {
+        const selectedProductsArray = this.form.get('selectedProducts');
+        this.selection.selected.forEach(product => {
+            selectedProductsArray.push(this.fb.group({
+                price: [product.price || '', Validators.required],
+                text: [product.text || ''],
+                quantity: [product.quantity || '', Validators.required],
+                category: [(product === null || product === void 0 ? void 0 : product.category) || ''],
+                subCategory: [(product === null || product === void 0 ? void 0 : product.subCategory) || ''],
+                value: [(product === null || product === void 0 ? void 0 : product.value) || '']
+            }));
+        });
+        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 => {
+                const index = this.dataSource.data.findIndex(product => product.value === selectedProduct.value);
+                if (index >= 0) {
+                    this.dataSource.data[index] = selectedProduct;
+                }
+            });
+            this.selectedDataSource.data = [...this.selection.selected];
+        }
+        else {
+            console.warn('No selected products found.');
+        }
+    }
+    ngAfterViewInit() {
+    }
+    ngOnInit() {
+        this.loadProductCategory();
+        this.form.get('productCategory').valueChanges
+            .pipe(startWith(''), map(value => this.filterProducts(value, 'category1'))).subscribe(filterCat => {
+            this.filteredCategories = filterCat;
+        });
+        this.form.get('productSubcategory').valueChanges
+            .pipe(startWith(''), map(value => this.filterProducts(value, 'subCategory'))).subscribe(subCat => {
+            this.filteredSubCategories = subCat;
+        });
+    }
+    loadProductCategory() {
+        this.spinnerFlag = true;
+        this.commonSevice.listProductCategory().subscribe(response => {
+            this.spinnerFlag = false;
+            if (response && response.code === 200) {
+                this.category = response.data;
+                this.filteredCategories = this.filterProducts(this.setCategory, 'category1');
+                this.form.get('productCategory').setValue(this.setCategory);
+                if (this.setCategory !== '') {
+                    this.onOptionSelected(this.setCategory, 'category1');
+                    this.form.get('productSubcategory').setValue(this.setSubCategory);
+                }
+            }
+        });
+    }
+    filterProducts(value, cat) {
+        const filterValue = value.toLowerCase();
+        const data = cat === 'category1' ? this.category : this.subCategory;
+        if (!filterValue) {
+            return data;
+        }
+        else {
+            return data.filter(option => option.toLowerCase().includes(filterValue));
+        }
+    }
+    onSubmit() {
+        if (this.form.valid) {
+            this.matDialogRef.close({
+                data: {
+                    status: true,
+                    items: this.form.value
+                }
+            });
+        }
+    }
+    isAllSelected() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
+    isIndeterminate() {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected > 0 && numSelected < numRows;
+    }
+    masterToggle() {
+        this.isAllSelected()
+            ? this.selection.clear()
+            : this.dataSource.data.forEach(row => this.selection.select(row));
+        this.updateSelectedProducts();
+    }
+    toggleSelection(row) {
+        this.selection.toggle(row);
+        this.updateSelectedProducts();
+    }
+    // Getter for the FormArray
+    get selectedProducts() {
+        return this.form.get('selectedProducts');
+    }
+    updateSelectedProducts() {
+        var _a, _b;
+        if (Array.isArray(this.selection.selected)) {
+            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 => {
+                var _a, _b;
+                selectedProductsArray === null || selectedProductsArray === void 0 ? void 0 : selectedProductsArray.push(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 : []],
+                    category: [(product === null || product === void 0 ? void 0 : product.category) || ''],
+                    subCategory: [(product === null || product === void 0 ? void 0 : product.subCategory) || ''],
+                    value: [(product === null || product === void 0 ? void 0 : product.value) || '']
+                }));
+            });
+        }
+        else {
+            console.error('Selection.selected is not an array:', this.selection.selected);
+        }
+    }
+    getTotalRows() {
+        return this.dataSource.data.length;
+    }
+    getSelectedRowsCount() {
+        return this.selection.selected.length;
+    }
+    onOptionSelected(event, category) {
+        let selectedValue;
+        if (event && event.option && event.option.value !== undefined) {
+            selectedValue = event.option.value;
+        }
+        else {
+            selectedValue = event;
+        }
+        if (category === 'category1') {
+            this.selectedCategory = selectedValue;
+            this.spinnerFlag = true;
+            this.commonSevice.listSubCategory(selectedValue).subscribe(response => {
+                this.spinnerFlag = false;
+                if (response && response.code === 200) {
+                    this.subCategory = response.data;
+                    this.filteredSubCategories = this.filterProducts(this.setCategory, 'subCategory');
+                    if (this.setSubCategory !== '') {
+                        this.selectedSubCategory = this.setSubCategory;
+                        this.getProducts();
+                    }
+                }
+            });
+        }
+        else {
+            if (category === 'subCategory') {
+                this.selectedSubCategory = event.option.value;
+                this.getProducts();
+            }
+        }
+    }
+    getProducts() {
+        this.spinnerFlag = true;
+        this.commonSevice.loadProducts(this.pageNumber, this.pageSize, '', true, false, this.selectedCategory, this.selectedSubCategory).subscribe(response => {
+            var _a;
+            this.spinnerFlag = false;
+            if (response && response.code === 200) {
+                //this.dataSource.data = response.data.dataSource;
+                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;
+                if (this.dataSource.data.length > 0) {
+                    data.forEach(item => this.dataSource.data.push(item));
+                    this.dataSource.data = [...this.dataSource.data];
+                }
+                else {
+                    this.dataSource.data = data;
+                }
+                this.loadingFlag = true;
+                setTimeout(() => {
+                    const middlePosition = this.trackHeight / 2 - 50;
+                    if (this.firstscrollableDiv && this.firstscrollableDiv.nativeElement) {
+                        this.firstscrollableDiv.nativeElement.scrollTo({ top: middlePosition, behavior: 'auto' });
+                    }
+                }, 250);
+                this.initializeDataSources();
+            }
+        });
+    }
+    removeRow(event, element) {
+        event.stopPropagation();
+        event.preventDefault();
+        let message = 'Are you sure you want to delete this product?';
+        let showButton = true;
+        const index = this.selectedDataSource.data.indexOf(element);
+        if (index >= 0) {
+            if (this.selectedDataSource.data.length === 1) {
+                message = 'Please select at least one product.';
+                showButton = false;
+            }
+            const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+                disableClose: true,
+                width: '90%',
+                maxWidth: '400px',
+                data: { message: message, buttonStatus: showButton }
+            });
+            dialogRef.afterClosed().subscribe(result => {
+                if (result) {
+                    this.selectedDataSource.data.splice(index, 1);
+                    this.selectedDataSource._updateChangeSubscription();
+                    this.selection.deselect(element);
+                    const selectedProductsArray = this.form.get('selectedProducts');
+                    const productIndex = selectedProductsArray.controls.findIndex(control => control.value.productName === element.productName);
+                    if (productIndex >= 0) {
+                        selectedProductsArray.removeAt(productIndex);
+                    }
+                }
+            });
+        }
+    }
+    onScroll(event) {
+        this.trackHeight = event.target.scrollHeight - event.target.offsetHeight;
+        if (this.loadingFlag && (Math.floor(event.target.scrollTop / this.trackHeight * 100) > 50)) {
+            this.loadingFlag = false;
+            if (this.pageNumber < this.totalPages) {
+                this.pageNumber = this.pageNumber + 1;
+                this.getProducts();
+            }
+            else {
+                this.loadingFlag = true;
+            }
+        }
+        this.prevScrollPosition = event.target.scrollTop;
+    }
+}
+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\">\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=\"dropdown-selection\">\r\n                <div class=\"row-one\">\r\n                    <mat-form-field>\r\n                        <mat-label>Product Category</mat-label>\r\n                        <input type=\"text\" matInput formControlName=\"productCategory\" [matAutocomplete]=\"auto3\">\r\n                        <mat-autocomplete #auto3=\"matAutocomplete\"\r\n                            (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n                            <mat-option *ngFor=\"let option of filteredCategories\"\r\n                                [value]=\"option\">{{option}}</mat-option>\r\n                        </mat-autocomplete>\r\n                    </mat-form-field>&nbsp;&nbsp;\r\n\r\n                    <mat-form-field>\r\n                        <mat-label>Subcategory</mat-label>\r\n                        <input type=\"text\" matInput formControlName=\"productSubcategory\" [matAutocomplete]=\"auto4\">\r\n                        <mat-autocomplete #auto4=\"matAutocomplete\"\r\n                            (optionSelected)=\"onOptionSelected($event, 'subCategory')\">\r\n                            <mat-option *ngFor=\"let option of filteredSubCategories\"\r\n                                [value]=\"option\">{{option}}</mat-option>\r\n                        </mat-autocomplete>\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n            <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class mat-elevation-z8 first-div\" (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                            <!-- <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"isAllSelected()\"\r\n                                [indeterminate]=\"isIndeterminate()\"></mat-checkbox> -->\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\r\n                    <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n                    <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"></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>\r\n                <button mat-button [mat-dialog-close]=\"false\">Close</button>\r\n                <button mat-button matStepperNext [disabled]=\"selection.selected.length ? false : true\">Next</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 mat-elevation-z8\">\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 mat-button (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n                                <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n                            </button>\r\n                        </td>\r\n                    </ng-container>\r\n                    <ng-container matColumnDef=\"productName\">\r\n                        <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                        <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n                    </ng-container>\r\n\r\n                    <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n                        <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n                        <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n                    </ng-container>\r\n\r\n                    <ng-container matColumnDef=\"subCategory\" *ngIf=\"subCategory\">\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 select-qunatity\">\r\n                                <mat-label>Select quantity</mat-label>\r\n                                <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n                                    placeholder=\"Please enter quantity\">\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\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>\r\n                <button mat-button matStepperPrevious>Back</button>\r\n                <button mat-button matStepperNext type=\"submit\">Add products</button>\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.mat-elevation-z8{margin-top:20px;max-height:350px;overflow-y:auto;margin-bottom:20px}.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%)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: 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.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.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: "component", type: i13.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i13.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i13.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: i13.MatStepperNext, selector: "button[matStepperNext]", inputs: ["type"] }, { kind: "directive", type: i13.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: "component", type: i14.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i14.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\">\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=\"dropdown-selection\">\r\n                <div class=\"row-one\">\r\n                    <mat-form-field>\r\n                        <mat-label>Product Category</mat-label>\r\n                        <input type=\"text\" matInput formControlName=\"productCategory\" [matAutocomplete]=\"auto3\">\r\n                        <mat-autocomplete #auto3=\"matAutocomplete\"\r\n                            (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n                            <mat-option *ngFor=\"let option of filteredCategories\"\r\n                                [value]=\"option\">{{option}}</mat-option>\r\n                        </mat-autocomplete>\r\n                    </mat-form-field>&nbsp;&nbsp;\r\n\r\n                    <mat-form-field>\r\n                        <mat-label>Subcategory</mat-label>\r\n                        <input type=\"text\" matInput formControlName=\"productSubcategory\" [matAutocomplete]=\"auto4\">\r\n                        <mat-autocomplete #auto4=\"matAutocomplete\"\r\n                            (optionSelected)=\"onOptionSelected($event, 'subCategory')\">\r\n                            <mat-option *ngFor=\"let option of filteredSubCategories\"\r\n                                [value]=\"option\">{{option}}</mat-option>\r\n                        </mat-autocomplete>\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n            <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class mat-elevation-z8 first-div\" (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                            <!-- <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"isAllSelected()\"\r\n                                [indeterminate]=\"isIndeterminate()\"></mat-checkbox> -->\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\r\n                    <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n                    <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"></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>\r\n                <button mat-button [mat-dialog-close]=\"false\">Close</button>\r\n                <button mat-button matStepperNext [disabled]=\"selection.selected.length ? false : true\">Next</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 mat-elevation-z8\">\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 mat-button (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n                                <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n                            </button>\r\n                        </td>\r\n                    </ng-container>\r\n                    <ng-container matColumnDef=\"productName\">\r\n                        <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n                        <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n                    </ng-container>\r\n\r\n                    <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n                        <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n                        <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n                    </ng-container>\r\n\r\n                    <ng-container matColumnDef=\"subCategory\" *ngIf=\"subCategory\">\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 select-qunatity\">\r\n                                <mat-label>Select quantity</mat-label>\r\n                                <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n                                    placeholder=\"Please enter quantity\">\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\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>\r\n                <button mat-button matStepperPrevious>Back</button>\r\n                <button mat-button matStepperNext type=\"submit\">Add products</button>\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.mat-elevation-z8{margin-top:20px;max-height:350px;overflow-y:auto;margin-bottom:20px}.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%)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }, { type: i2.FormBuilder }, { type: i1$1.MatDialog }, { type: CommonService }];
+    }, propDecorators: { firstscrollableDiv: [{
+                type: ViewChild,
+                args: ['firstscrollableDiv']
+            }] } });
+
+const ELEMENT_DATA = [];
 class MaterialDataGridComponent extends MaterialNestedComponent {
-    constructor(element, ref, dialog) {
+    constructor(element, ref, dialog, commonService) {
         super(element, ref);
         this.element = element;
         this.ref = ref;
         this.dialog = dialog;
+        this.commonService = commonService;
         this.dataSource = new MatTableDataSource();
+        this.dataSourceNew = ELEMENT_DATA;
+        this.displayedColumnsNew = ['productName', 'category', 'subCategory', 'quantity', 'price'];
+        this.showNewProductPicker = false;
+        this.showCategory = false;
+        this.showSubcategory = false;
+        this.showPrice = true;
+        this.showQuantity = true;
+        this.category = '';
+        this.subCategory = '';
+        this.hasInitialized = false;
     }
     getColumnLabel(column) {
         return column.label || column.key;
     }
+    checkIsAttributeTrue(newProductPickerFlag, attributeName) {
+        return newProductPickerFlag && Object.keys(newProductPickerFlag).some(key => key.toLocaleLowerCase() === attributeName.toLowerCase() &&
+            newProductPickerFlag[key].toLowerCase() === "true");
+    }
+    // ngOnInit(): void {
+    // }
     setInstance(instance) {
+        var _a;
+        const newProductPickerFlag = (_a = instance === null || instance === void 0 ? void 0 : instance.component) === null || _a === void 0 ? void 0 : _a.attributes;
+        this.showNewProductPicker = this.checkIsAttributeTrue(newProductPickerFlag, "newproductpicker");
+        this.showCategory = this.checkIsAttributeTrue(newProductPickerFlag, "showCategory");
+        this.showSubcategory = this.checkIsAttributeTrue(newProductPickerFlag, "showSubcategory");
+        this.showPrice = this.checkIsAttributeTrue(newProductPickerFlag, "showPrice");
+        this.showQuantity = this.checkIsAttributeTrue(newProductPickerFlag, "showQuantity");
         super.setInstance(instance);
-        this.dataSource.data = instance.dataValue;
+        if (this.showNewProductPicker && !this.hasInitialized) {
+            if (!this.showCategory) {
+                this.removeColumn('category');
+            }
+            if (!this.showQuantity) {
+                this.removeColumn('quantity');
+            }
+            if (!this.showPrice) {
+                this.removeColumn('price');
+            }
+            if (!this.showSubcategory) {
+                this.removeColumn('subCategory');
+            }
+            const checkProducts = JSON.parse(localStorage.getItem('dealData')) || [];
+            const dealId = checkProducts === null || checkProducts === void 0 ? void 0 : checkProducts.dealId;
+            const storedData = localStorage.getItem(`selectedProducts-${dealId}`);
+            if (storedData === null || storedData === void 0 ? void 0 : storedData.length) {
+                this.dataSourceNew = JSON.parse(storedData);
+            }
+            else {
+                this.dataSourceNew = [];
+            }
+            // Set flag to true to prevent further execution
+            this.hasInitialized = true;
+        }
+        else {
+            this.dataSource.data = instance.dataValue;
+        }
         this.columns = {};
         this.displayedColumns = [];
         this.formColumns = [];
@@ -3037,7 +3462,10 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
             return viewContainer ? viewContainer : null;
         };
     }
-    addAnother() {
+    removeColumn(columnName) {
+        this.displayedColumnsNew = this.displayedColumnsNew.filter(column => column !== columnName);
+    }
+    addAnotherOld() {
         this.checkRowsNumber();
         this.instance.addRow();
         if (this.dataSource.data.length < this.instance.rows.length) {
@@ -3045,6 +3473,60 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
         }
         this.dataSource.data = [...this.dataSource.data];
     }
+    addAnother() {
+        var _a, _b;
+        if (this.showNewProductPicker) {
+            const savedData = JSON.parse(localStorage.getItem('saveCat'));
+            const checkProducts = JSON.parse(localStorage.getItem('dealData')) || [];
+            // Use optional chaining and nullish coalescing to set the values
+            this.category = (_a = savedData === null || savedData === void 0 ? void 0 : savedData.category) !== null && _a !== void 0 ? _a : this.category;
+            this.subCategory = (_b = savedData === null || savedData === void 0 ? void 0 : savedData.subCategory) !== null && _b !== void 0 ? _b : this.subCategory;
+            const diologeRef = this.dialog.open(AddOnProductsComponent, {
+                disableClose: true,
+                width: '90%',
+                maxWidth: '900px',
+                autoFocus: false,
+                data: { attributesFlag: { showNewProductPicker: this.showNewProductPicker, showCategory: this.showCategory, showSubcategory: this.showSubcategory, showPrice: this.showPrice, showQuantity: this.showQuantity }, selectedProducts: this.dataSourceNew, category: this.category, subCategory: this.subCategory }
+            })
+                .afterClosed().subscribe(response => {
+                var _a;
+                if ((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.status) {
+                    if (!this.showCategory) {
+                        this.removeColumn('category');
+                    }
+                    if (!this.showQuantity) {
+                        this.removeColumn('quantity');
+                    }
+                    if (!this.showPrice) {
+                        this.removeColumn('price');
+                    }
+                    if (!this.showSubcategory) {
+                        this.removeColumn('subCategory');
+                    }
+                    //localStorage.setItem('selectedProducts', JSON.stringify(response.data.items.selectedProducts))
+                    const dealId = checkProducts === null || checkProducts === void 0 ? void 0 : checkProducts.dealId;
+                    localStorage.setItem(`selectedProducts-${dealId}`, JSON.stringify(response.data.items.selectedProducts));
+                    this.dataSourceNew = response.data.items.selectedProducts;
+                    this.category = response.data.items.productCategory;
+                    this.subCategory = response.data.items.productSubcategory;
+                    const catObject = {
+                        category: this.category,
+                        subCategory: this.subCategory
+                    };
+                    localStorage.setItem('saveCat', JSON.stringify(catObject));
+                    this.instance.component.defaultValue = response.data.items.selectedProducts;
+                }
+            });
+        }
+        else {
+            this.checkRowsNumber();
+            this.instance.addRow();
+            if (this.dataSource.data.length < this.instance.rows.length) {
+                this.dataSource.data.push({});
+            }
+            this.dataSource.data = [...this.dataSource.data];
+        }
+    }
     checkRowsNumber() {
         while (this.instance.rows.length < this.dataSource.data.length) {
             this.instance.addRow();
@@ -3095,7 +3577,7 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
         super.setValue(value);
     }
 }
-MaterialDataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDataGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+MaterialDataGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDataGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.MatDialog }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
 MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDataGridComponent, selector: "mat-formio-datagrid", usesInheritance: true, ngImport: i0, template: `
     <mat-formio-form-field [instance]="instance"
                            [componentTemplate]="componentTemplate"
@@ -3114,6 +3596,8 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
               {{instance.component.addAnother || 'Add Another'}}
             </button>
           </mat-card-actions>
+<ng-container *ngIf="!showNewProductPicker">
+<div class="mat-elevation-z8">
           <table
                   mat-table
                   [dataSource]="dataSource"
@@ -3122,7 +3606,8 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
                   cdkDropList
                   [cdkDropListData]="dataSource"
                   (cdkDropListDropped)="dropTable($event)">
-            >
+                  
+            
             <ng-container *ngFor="let column of formColumns" [matColumnDef]="column">
               <th mat-header-cell *matHeaderCellDef>{{ getColumnLabel(columns[column]) }}</th>
               <td mat-cell *matCellDef="let i = index;" [attr.rowIndex]="i" [attr.component]="column">
@@ -3152,6 +3637,51 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
               <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </div>
           </table>
+          </div>
+</ng-container>
+
+    <table mat-table [dataSource]="dataSourceNew" class="mat-table" *ngIf="dataSourceNew.length > 0 && showNewProductPicker; else noData" >
+    <!-- Product Name Column -->
+    <ng-container matColumnDef="productName">
+      <th mat-header-cell *matHeaderCellDef> Product Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.text}} </td>
+    </ng-container>
+
+    <!-- Quantity Column -->
+    <ng-container matColumnDef="quantity" *ngIf="showQuantity">
+      <th mat-header-cell *matHeaderCellDef> Quantity </th>
+      <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
+    </ng-container>
+
+    <!-- Price Column -->
+    <ng-container matColumnDef="price" *ngIf="showPrice">
+      <th mat-header-cell *matHeaderCellDef> Price </th>
+      <td mat-cell *matCellDef="let element"> {{element.price}} </td>
+    </ng-container>
+
+     <!-- Category Column -->
+    <ng-container matColumnDef="category" *ngIf="showCategory">
+      <th mat-header-cell *matHeaderCellDef> Category </th>
+      <td mat-cell *matCellDef="let element"> {{element.category}} </td>
+    </ng-container>
+
+        <!-- Category Column -->
+    <ng-container matColumnDef="subCategory" *ngIf="showSubcategory">
+      <th mat-header-cell *matHeaderCellDef> Sub Category </th>
+      <td mat-cell *matCellDef="let element"> {{element.subCategory}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumnsNew"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumnsNew;"></tr>
+  </table>
+  <ng-template #noData>
+  <div class="no-data-message" *ngIf="showNewProductPicker">
+      No product found please add some products.
+    </div>
+  </ng-template>
+
+
+
         </mat-card-content>
         <mat-card-actions *ngIf="instance.hasAddButton() && instance.component.addAnotherPosition !== 'top'">
           <button mat-raised-button color="primary" (click)="addAnother()">
@@ -3167,7 +3697,7 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
         <span [instance]="instance" matFormioLabel></span>
       </mat-card-title>
     </ng-template>
-  `, isInline: true, styles: [".datagrid-row{height:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
+  `, isInline: true, styles: [".datagrid-row{height:auto}.mat-table{width:100%}.mat-header-cell,.mat-cell{padding:8px}.no-data-message{text-align:center;margin:20px 0;font-size:18px;color:#888}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i9$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDataGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-formio-datagrid', template: `
@@ -3188,6 +3718,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
               {{instance.component.addAnother || 'Add Another'}}
             </button>
           </mat-card-actions>
+<ng-container *ngIf="!showNewProductPicker">
+<div class="mat-elevation-z8">
           <table
                   mat-table
                   [dataSource]="dataSource"
@@ -3196,7 +3728,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                   cdkDropList
                   [cdkDropListData]="dataSource"
                   (cdkDropListDropped)="dropTable($event)">
-            >
+                  
+            
             <ng-container *ngFor="let column of formColumns" [matColumnDef]="column">
               <th mat-header-cell *matHeaderCellDef>{{ getColumnLabel(columns[column]) }}</th>
               <td mat-cell *matCellDef="let i = index;" [attr.rowIndex]="i" [attr.component]="column">
@@ -3226,6 +3759,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
               <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
             </div>
           </table>
+          </div>
+</ng-container>
+
+    <table mat-table [dataSource]="dataSourceNew" class="mat-table" *ngIf="dataSourceNew.length > 0 && showNewProductPicker; else noData" >
+    <!-- Product Name Column -->
+    <ng-container matColumnDef="productName">
+      <th mat-header-cell *matHeaderCellDef> Product Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.text}} </td>
+    </ng-container>
+
+    <!-- Quantity Column -->
+    <ng-container matColumnDef="quantity" *ngIf="showQuantity">
+      <th mat-header-cell *matHeaderCellDef> Quantity </th>
+      <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
+    </ng-container>
+
+    <!-- Price Column -->
+    <ng-container matColumnDef="price" *ngIf="showPrice">
+      <th mat-header-cell *matHeaderCellDef> Price </th>
+      <td mat-cell *matCellDef="let element"> {{element.price}} </td>
+    </ng-container>
+
+     <!-- Category Column -->
+    <ng-container matColumnDef="category" *ngIf="showCategory">
+      <th mat-header-cell *matHeaderCellDef> Category </th>
+      <td mat-cell *matCellDef="let element"> {{element.category}} </td>
+    </ng-container>
+
+        <!-- Category Column -->
+    <ng-container matColumnDef="subCategory" *ngIf="showSubcategory">
+      <th mat-header-cell *matHeaderCellDef> Sub Category </th>
+      <td mat-cell *matCellDef="let element"> {{element.subCategory}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumnsNew"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumnsNew;"></tr>
+  </table>
+  <ng-template #noData>
+  <div class="no-data-message" *ngIf="showNewProductPicker">
+      No product found please add some products.
+    </div>
+  </ng-template>
+
+
+
         </mat-card-content>
         <mat-card-actions *ngIf="instance.hasAddButton() && instance.component.addAnotherPosition !== 'top'">
           <button mat-raised-button color="primary" (click)="addAnother()">
@@ -3241,8 +3819,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
         <span [instance]="instance" matFormioLabel></span>
       </mat-card-title>
     </ng-template>
-  `, styles: [".datagrid-row{height:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.MatDialog }]; } });
+  `, styles: [".datagrid-row{height:auto}.mat-table{width:100%}.mat-header-cell,.mat-cell{padding:8px}.no-data-message{text-align:center;margin:20px 0;font-size:18px;color:#888}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }, { type: CommonService }]; } });
 DataGridComponent.MaterialComponent = MaterialDataGridComponent;
 
 var EditRowState;
@@ -3625,7 +4203,7 @@ MaterialWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
           <button *ngIf="instance.hasButton('submit')" mat-raised-button color="primary" (click)="submit()">Submit</button>
         </div>
       </mat-step>
-    </mat-horizontal-stepper>`, isInline: true, styles: [":host .navigation-button-row{margin-top:8px}\n", ":host .navigation-button-row button{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i3$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] });
+    </mat-horizontal-stepper>`, isInline: true, styles: [":host .navigation-button-row{margin-top:8px}\n", ":host .navigation-button-row button{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i13.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i13.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialWizardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-formio-wizard', template: `
@@ -3795,7 +4373,7 @@ FormioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
     <div fxLayout="column" fxLayoutGap="1em">
       <ng-template #formio></ng-template>
     </div>
-  `, isInline: true, styles: [".alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:.5rem;border:1px solid transparent;border-radius:.25rem}::ng-deep mat-card{box-sizing:border-box;-moz-box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { 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.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }] });
+  `, isInline: true, styles: [".alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:.5rem;border:1px solid transparent;border-radius:.25rem}::ng-deep mat-card{box-sizing:border-box;-moz-box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { 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.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-formio', template: `
@@ -3867,7 +4445,8 @@ NgxRenderMaterialFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.
         FormioFormFieldComponent,
         LabelComponent,
         MaskDirective,
-        ConfirmationDialogComponent], imports: [CommonModule,
+        ConfirmationDialogComponent,
+        AddOnProductsComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         MatInputModule,
@@ -3895,7 +4474,9 @@ NgxRenderMaterialFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.
         ScrollingModule,
         NgxMatSelectSearchModule,
         MatDialogModule,
-        HttpClientModule], exports: [NgxRenderMaterialFormsComponent,
+        HttpClientModule,
+        MatAutocompleteModule], exports: [MatAutocompleteModule,
+        NgxRenderMaterialFormsComponent,
         FormioComponent,
         MatInputModule,
         MatFormFieldModule,
@@ -3949,7 +4530,9 @@ NgxRenderMaterialFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
         ScrollingModule,
         NgxMatSelectSearchModule,
         MatDialogModule,
-        HttpClientModule, MatInputModule,
+        HttpClientModule,
+        MatAutocompleteModule, MatAutocompleteModule,
+        MatInputModule,
         MatFormFieldModule,
         MatCheckboxModule,
         MatRadioModule,
@@ -4017,7 +4600,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                         FormioFormFieldComponent,
                         LabelComponent,
                         MaskDirective,
-                        ConfirmationDialogComponent
+                        ConfirmationDialogComponent,
+                        AddOnProductsComponent
                     ],
                     imports: [
                         CommonModule,
@@ -4048,9 +4632,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
                         ScrollingModule,
                         NgxMatSelectSearchModule,
                         MatDialogModule,
-                        HttpClientModule
+                        HttpClientModule,
+                        MatAutocompleteModule
                     ],
                     exports: [
+                        MatAutocompleteModule,
                         NgxRenderMaterialFormsComponent,
                         FormioComponent,
                         MatInputModule,