ngx-render-material-forms 1.4.5 → 1.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/esm2020/lib/components/button/button.component.mjs +11 -15
  2. package/esm2020/lib/components/datagrid/datagrid.component.mjs +7 -198
  3. package/esm2020/lib/components/select/select.component.mjs +25 -4
  4. package/esm2020/lib/ngx-render-material-forms.module.mjs +6 -16
  5. package/fesm2015/ngx-render-material-forms.js +58 -637
  6. package/fesm2015/ngx-render-material-forms.mjs.map +1 -1
  7. package/fesm2020/ngx-render-material-forms.js +58 -628
  8. package/fesm2020/ngx-render-material-forms.mjs.map +1 -1
  9. package/lib/components/button/button.component.d.ts +0 -6
  10. package/lib/components/datagrid/datagrid.component.d.ts +0 -18
  11. package/lib/components/select/select.component.d.ts +2 -0
  12. package/lib/ngx-render-material-forms.module.d.ts +27 -29
  13. package/package.json +1 -1
  14. package/esm2020/lib/components/add-on-products/add-on-products.component.mjs +0 -329
  15. package/esm2020/lib/components/common.service.mjs +0 -85
  16. package/lib/components/add-on-products/add-on-products.component.d.ts +0 -76
  17. package/lib/components/common.service.d.ts +0 -23
package/fesm2015/ngx-render-material-forms.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Injectable, Component, Input, ViewChild, ViewContainerRef, ViewChildren, EventEmitter, Output, forwardRef, Directive, Inject, Optional, NgModule } from '@angular/core';
3
- import * as i1$2 from '@angular/common/http';
3
+ import * as i1$1 from '@angular/common/http';
4
4
  import { HttpHeaders, HttpClientModule } from '@angular/common/http';
5
5
  import * as i1 from '@angular/common';
6
6
  import { CommonModule } from '@angular/common';
7
7
  import * as i2 from '@angular/forms';
8
- import { FormControl, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
8
+ import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
9
9
  import * as i4$2 from '@angular/material/input';
10
10
  import { MAT_INPUT_VALUE_ACCESSOR, MatInputModule } from '@angular/material/input';
11
11
  import * as i3$2 from '@angular/material/button';
@@ -27,20 +27,18 @@ import * as i4 from '@angular/material/card';
27
27
  import { MatCardModule } from '@angular/material/card';
28
28
  import * as i2$2 from '@angular/material/tabs';
29
29
  import { MatTabsModule } from '@angular/material/tabs';
30
- import * as i10 from '@angular/material/table';
30
+ import * as i4$7 from '@angular/material/table';
31
31
  import { MatTableDataSource, MatTableModule } from '@angular/material/table';
32
32
  import * as i5$2 from '@angular/material/datepicker';
33
33
  import { MatDatepickerModule } from '@angular/material/datepicker';
34
- import * as i11 from '@angular/material/progress-spinner';
34
+ import * as i3$4 from '@angular/material/progress-spinner';
35
35
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
36
36
  import * as i4$1 from '@angular/material/icon';
37
37
  import { MatIconModule } from '@angular/material/icon';
38
38
  import * as i5$1 from '@angular/material/core';
39
39
  import { MatNativeDateModule } from '@angular/material/core';
40
- import * as i1$1 from '@angular/material/dialog';
40
+ import * as i1$2 from '@angular/material/dialog';
41
41
  import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
42
- import * as i14 from '@angular/material/autocomplete';
43
- import { MatAutocompleteModule } from '@angular/material/autocomplete';
44
42
  import Webform from 'formiojs/Webform.js';
45
43
  import FormioComponent$2 from 'formiojs/components/_classes/component/Component.js';
46
44
  import TextFieldComponent from 'formiojs/components/textfield/TextField.js';
@@ -83,7 +81,7 @@ import RadioComponent from 'formiojs/components/radio/Radio.js';
83
81
  import SelectBoxesComponent from 'formiojs/components/selectboxes/SelectBoxes.js';
84
82
  import SelectComponent from 'formiojs/components/select/Select.js';
85
83
  import { Subject } from 'rxjs';
86
- import { debounceTime, distinctUntilChanged, takeUntil, startWith, map } from 'rxjs/operators';
84
+ import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
87
85
  import * as CryptoJS from 'crypto-js';
88
86
  import { isNullOrUndefined } from 'util';
89
87
  import * as i9 from 'ngx-mat-select-search';
@@ -92,15 +90,14 @@ import WellComponent from 'formiojs/components/well/Well.js';
92
90
  import DataGridComponent from 'formiojs/components/datagrid/DataGrid.js';
93
91
  import * as i8 from '@angular/cdk/drag-drop';
94
92
  import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
95
- import { SelectionModel } from '@angular/cdk/collections';
96
- import * as i13 from '@angular/material/stepper';
97
- import { MatStepperModule } from '@angular/material/stepper';
98
93
  import EditGridComponent from 'formiojs/components/editgrid/EditGrid.js';
99
94
  import Components$2 from 'formiojs/components/Components';
100
95
  import isString from 'lodash/isString';
101
96
  import TableComponent from 'formiojs/components/table/Table.js';
102
97
  import Wizard from 'formiojs/Wizard';
103
98
  import Displays from 'formiojs/displays/Displays';
99
+ import * as i3$3 from '@angular/material/stepper';
100
+ import { MatStepperModule } from '@angular/material/stepper';
104
101
  import * as i1$3 from '@formio/angular';
105
102
  import { FormioBaseComponent } from '@formio/angular';
106
103
  import { FlexLayoutModule } from '@angular/flex-layout';
@@ -979,11 +976,8 @@ var AngularButtonsThemes;
979
976
  })(AngularButtonsThemes || (AngularButtonsThemes = {}));
980
977
 
981
978
  class MaterialButtonComponent extends MaterialComponent {
982
- constructor(element, ref, dialog) {
983
- super(element, ref);
984
- this.element = element;
985
- this.ref = ref;
986
- this.dialog = dialog;
979
+ constructor() {
980
+ super(...arguments);
987
981
  this.loading = false;
988
982
  this.done = false;
989
983
  this.error = false;
@@ -1054,12 +1048,12 @@ class MaterialButtonComponent extends MaterialComponent {
1054
1048
  return retVal;
1055
1049
  }
1056
1050
  }
1057
- 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 });
1058
- 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"] }] });
1051
+ MaterialButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1052
+ 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"] }] });
1059
1053
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, decorators: [{
1060
1054
  type: Component,
1061
- 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"] }]
1062
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }]; } });
1055
+ 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"] }]
1056
+ }] });
1063
1057
  ButtonComponent.MaterialComponent = MaterialButtonComponent;
1064
1058
 
1065
1059
  class MaterialTextareaComponent extends MaterialComponent {
@@ -2757,7 +2751,7 @@ class MaterialSelectComponent extends MaterialComponent {
2757
2751
  if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
2758
2752
  this.selectElem.openedChange.subscribe((isOpen) => {
2759
2753
  if (isOpen) {
2760
- this.pageNumber = 2;
2754
+ this.pageNumber = 1;
2761
2755
  this.pageSize = 20;
2762
2756
  this.searchQuery = '';
2763
2757
  this.searching = false;
@@ -2816,11 +2810,32 @@ class MaterialSelectComponent extends MaterialComponent {
2816
2810
  });
2817
2811
  this.filteredOptions = this.selectOptions;
2818
2812
  }
2813
+ isError() {
2814
+ this.control.setErrors(this.instance.component.validate);
2815
+ return true;
2816
+ }
2817
+ getErrorMessage() {
2818
+ if (this.instance.error && this.instance.error.messages) {
2819
+ const { messages } = this.instance.error;
2820
+ if (messages.length) {
2821
+ for (const msg of messages) {
2822
+ if (msg.context) {
2823
+ if (this.instance && this.instance.parent && this.instance.parent._data) {
2824
+ if (this.instance.parent._data.submit) {
2825
+ this.control.markAllAsTouched();
2826
+ }
2827
+ }
2828
+ return this.instance.error ? this.instance.error.message : '';
2829
+ }
2830
+ }
2831
+ }
2832
+ }
2833
+ }
2819
2834
  compareObjects(o1, o2) {
2820
2835
  return _.isEqual(o1, o2);
2821
2836
  }
2822
2837
  }
2823
- 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 });
2838
+ 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 });
2824
2839
  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: `
2825
2840
  <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2826
2841
  <ng-template #componentTemplate let-hasLabel>
@@ -2858,7 +2873,7 @@ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
2858
2873
  <span *ngIf="instance.component.suffix" matSuffix>
2859
2874
  {{ instance.component.suffix }}
2860
2875
  </span>
2861
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2876
+ <mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
2862
2877
  </mat-form-field>
2863
2878
  </ng-template>
2864
2879
  `, 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" }] });
@@ -2901,11 +2916,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
2901
2916
  <span *ngIf="instance.component.suffix" matSuffix>
2902
2917
  {{ instance.component.suffix }}
2903
2918
  </span>
2904
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2919
+ <mat-error *ngIf="isError()" >{{ getErrorMessage() }}</mat-error>
2905
2920
  </mat-form-field>
2906
2921
  </ng-template>
2907
2922
  `, 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"] }]
2908
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.HttpClient }]; }, propDecorators: { multiSelect: [{
2923
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }]; }, propDecorators: { multiSelect: [{
2909
2924
  type: ViewChild,
2910
2925
  args: ['multiSelect', { static: true }]
2911
2926
  }], selectElem: [{
@@ -2964,412 +2979,18 @@ class ConfirmationDialogComponent {
2964
2979
  ngOnInit() {
2965
2980
  }
2966
2981
  }
2967
- 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 });
2968
- 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"] }] });
2982
+ 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 });
2983
+ 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"] }] });
2969
2984
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
2970
2985
  type: Component,
2971
2986
  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"] }]
2972
2987
  }], ctorParameters: function () {
2973
- return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
2988
+ return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
2974
2989
  type: Inject,
2975
2990
  args: [MAT_DIALOG_DATA]
2976
2991
  }] }];
2977
2992
  } });
2978
2993
 
2979
- class CommonService {
2980
- constructor(http) {
2981
- this.http = http;
2982
- this.holy = '';
2983
- this.grail = '';
2984
- this.holy = CryptoJS.enc.Base64.parse('8F/2+T2NXqUBQERR12R4sw==');
2985
- this.grail = CryptoJS.enc.Base64.parse('yE0CgQbYzK5wqeoKTVzhOQ==');
2986
- this.paramsData = JSON.parse(localStorage.getItem('productPickerParams'));
2987
- this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
2988
- }
2989
- scrumble(msg) {
2990
- if (!isNullOrUndefined(msg)) {
2991
- var conceal = this.getcampaign(msg, this.holy, this.grail);
2992
- var sha256 = CryptoJS.HmacSHA256(CryptoJS.enc.Base64.stringify(this.grail) + conceal.toString(), CryptoJS.enc.Base64.stringify(this.holy));
2993
- var hashInBase64 = CryptoJS.enc.Base64.stringify(sha256);
2994
- let keyValue = {
2995
- "value": conceal.toString(),
2996
- "mac": hashInBase64
2997
- };
2998
- var result = JSON.stringify(keyValue);
2999
- var jumbled = CryptoJS.enc.Utf8.parse(result);
3000
- return CryptoJS.enc.Base64.stringify(jumbled);
3001
- }
3002
- }
3003
- getcampaign(data, holy, grail) {
3004
- return CryptoJS.AES.encrypt(data.toString(), holy, {
3005
- blockSize: 128,
3006
- iv: grail,
3007
- mode: CryptoJS.mode.CBC,
3008
- padding: CryptoJS.pad.Pkcs7
3009
- });
3010
- }
3011
- getBaseApiUrl() {
3012
- const baseUrlMapping = {
3013
- 'localhost': 'http://localhost:58504',
3014
- 'lincoln.vartopia.com': 'https://lincoln-api.vartopia.com',
3015
- 'stage.vartopia.com': 'https://stage-api.vartopia.com',
3016
- 'my.vartopia.com': 'https://reagan-api.vartopia.com',
3017
- 'jackson.vartopia.com': 'https://jackson-api.vartopia.com'
3018
- };
3019
- // Get the current hostname
3020
- const hostname = window.location.hostname;
3021
- return baseUrlMapping[hostname] || null;
3022
- }
3023
- listProductCategory() {
3024
- const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
3025
- const baseApiUrl = this.getBaseApiUrl();
3026
- return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetProductsCategory?vendorId=${vendorId}`);
3027
- }
3028
- listSubCategory(category) {
3029
- const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
3030
- const baseApiUrl = this.getBaseApiUrl();
3031
- return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetProductsSubCategory?vendorId=${vendorId}&categoryName=${category}`);
3032
- }
3033
- // Function to get value by key from the array
3034
- getValueByKey(data, key) {
3035
- if (!data || data.length === 0) {
3036
- return null; // Return null if data is empty or undefined
3037
- }
3038
- const item = data.find(kv => kv.key.toLowerCase() === key.toLowerCase());
3039
- return item ? item.value : null;
3040
- }
3041
- // this.http.get<VendorProductsResponse>(`${baseApiUrl}/api/VendorFormBuilder/GetVendorProducts?vendorId=${envendorId}&pageNumber=${enpageNumber}&pageSize=${enpageSize}&search=${ensearchQuery}&onlyActive=${enactive}&includeDescription=${endescription}`, { headers }).subscribe(response => {
3042
- loadProducts(pageNumber, pazeSize, search = '', onlyActive = true, description = false, category, subCategory) {
3043
- const baseApiUrl = this.getBaseApiUrl();
3044
- const vendorId = this.getValueByKey(this.paramsData, 'vendorId');
3045
- const encodeCat = encodeURIComponent(category);
3046
- const encodeSubCat = encodeURIComponent(subCategory);
3047
- return this.http.get(`${baseApiUrl}/api/VendorFormBuilder/GetVendorProducts?vendorId=${vendorId}&pageNumber=${pageNumber}&pageSize=${pazeSize}&search=${search}&onlyActive=${onlyActive}&includeDescription=${description}&category=${encodeCat}&subCategory=${encodeSubCat}`);
3048
- }
3049
- }
3050
- 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 });
3051
- CommonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CommonService, providedIn: 'root' });
3052
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CommonService, decorators: [{
3053
- type: Injectable,
3054
- args: [{
3055
- providedIn: 'root'
3056
- }]
3057
- }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; } });
3058
-
3059
- class AddOnProductsComponent {
3060
- constructor(matDialogRef, data, fb, dialog, commonSevice) {
3061
- this.matDialogRef = matDialogRef;
3062
- this.fb = fb;
3063
- this.dialog = dialog;
3064
- this.commonSevice = commonSevice;
3065
- this.category = [];
3066
- this.subCategory = [];
3067
- this.filteredCategories = [];
3068
- this.filteredSubCategories = [];
3069
- this.addProductsColumns = ['select', 'productName', 'price'];
3070
- this.showAllproductsColumns = ['delete', 'productName', 'categoryName', 'subCategory', 'Quantity', 'price'];
3071
- this.quantityList = [5, 10, 15, 20, 25];
3072
- this.ELEMENT_DATA = [];
3073
- this.dataSource = new MatTableDataSource();
3074
- this.selection = new SelectionModel(true, []);
3075
- this.selectedDataSource = new MatTableDataSource([]);
3076
- this.selectedCategory = null;
3077
- this.selectedSubCategory = null;
3078
- this.showCategory = false;
3079
- this.showSubcategory = false;
3080
- this.showPrice = true;
3081
- this.showQuantity = true;
3082
- this.showNewProductPicker = true;
3083
- this.setCategory = '';
3084
- this.setSubCategory = '';
3085
- this.loadingFlag = false;
3086
- this.pageNumber = 1;
3087
- this.pageSize = 20;
3088
- this.totalPages = 0;
3089
- this.searchQuery = '';
3090
- this.itemList = [];
3091
- this.prevScrollPosition = 0; // Track the previous scroll position
3092
- this.spinnerFlag = false;
3093
- this.showCategory = data.attributesFlag.showCategory;
3094
- this.showSubcategory = data.attributesFlag.showSubcategory;
3095
- this.showPrice = data.attributesFlag.showPrice;
3096
- this.showQuantity = data.attributesFlag.showQuantity;
3097
- this.showNewProductPicker = data.showNewProductPicker;
3098
- this.setCategory = data.category || '';
3099
- this.setSubCategory = data.subCategory || '';
3100
- this.selection = new SelectionModel(true, data.selectedProducts || []);
3101
- this.form = this.fb.group({
3102
- productCategory: [''],
3103
- productSubcategory: [''],
3104
- selectedProducts: this.fb.array([])
3105
- });
3106
- this.initializeFormArray();
3107
- if (!this.showCategory) {
3108
- this.removeColumn('categoryName');
3109
- }
3110
- if (!this.showPrice) {
3111
- this.removeColumn('price');
3112
- }
3113
- if (!this.showSubcategory) {
3114
- this.removeColumn('subCategory');
3115
- }
3116
- if (!this.showQuantity) {
3117
- this.removeColumn('Quantity');
3118
- }
3119
- }
3120
- removeColumn(columnName) {
3121
- this.showAllproductsColumns = this.showAllproductsColumns.filter(column => column !== columnName);
3122
- this.addProductsColumns = this.addProductsColumns.filter(column => column !== columnName);
3123
- }
3124
- initializeFormArray() {
3125
- const selectedProductsArray = this.form.get('selectedProducts');
3126
- this.selection.selected.forEach(product => {
3127
- selectedProductsArray.push(this.fb.group({
3128
- price: [product.price || '', Validators.required],
3129
- text: [product.text || ''],
3130
- quantity: [product.quantity || '', Validators.required],
3131
- category: [(product === null || product === void 0 ? void 0 : product.category) || ''],
3132
- subCategory: [(product === null || product === void 0 ? void 0 : product.subCategory) || ''],
3133
- value: [(product === null || product === void 0 ? void 0 : product.value) || '']
3134
- }));
3135
- });
3136
- this.selectedDataSource.data = [...this.selection.selected];
3137
- }
3138
- initializeDataSources() {
3139
- var _a, _b, _c, _d;
3140
- // Ensure selected items are marked in the main data source
3141
- if ((_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.length) {
3142
- (_d = (_c = this.selection) === null || _c === void 0 ? void 0 : _c.selected) === null || _d === void 0 ? void 0 : _d.forEach(selectedProduct => {
3143
- const index = this.dataSource.data.findIndex(product => product.value === selectedProduct.value);
3144
- if (index >= 0) {
3145
- this.dataSource.data[index] = selectedProduct;
3146
- }
3147
- });
3148
- this.selectedDataSource.data = [...this.selection.selected];
3149
- }
3150
- else {
3151
- console.warn('No selected products found.');
3152
- }
3153
- }
3154
- ngAfterViewInit() {
3155
- }
3156
- ngOnInit() {
3157
- this.loadProductCategory();
3158
- this.form.get('productCategory').valueChanges
3159
- .pipe(startWith(''), map(value => this.filterProducts(value, 'category1'))).subscribe(filterCat => {
3160
- this.filteredCategories = filterCat;
3161
- });
3162
- this.form.get('productSubcategory').valueChanges
3163
- .pipe(startWith(''), map(value => this.filterProducts(value, 'subCategory'))).subscribe(subCat => {
3164
- this.filteredSubCategories = subCat;
3165
- });
3166
- }
3167
- loadProductCategory() {
3168
- this.spinnerFlag = true;
3169
- this.commonSevice.listProductCategory().subscribe(response => {
3170
- this.spinnerFlag = false;
3171
- if (response && response.code === 200) {
3172
- this.category = response.data;
3173
- this.filteredCategories = this.filterProducts(this.setCategory, 'category1');
3174
- this.form.get('productCategory').setValue(this.setCategory);
3175
- if (this.setCategory !== '') {
3176
- this.onOptionSelected(this.setCategory, 'category1');
3177
- this.form.get('productSubcategory').setValue(this.setSubCategory);
3178
- }
3179
- }
3180
- });
3181
- }
3182
- filterProducts(value, cat) {
3183
- const filterValue = value.toLowerCase();
3184
- const data = cat === 'category1' ? this.category : this.subCategory;
3185
- if (!filterValue) {
3186
- return data;
3187
- }
3188
- else {
3189
- return data.filter(option => option.toLowerCase().includes(filterValue));
3190
- }
3191
- }
3192
- onSubmit() {
3193
- if (this.form.valid) {
3194
- this.matDialogRef.close({
3195
- data: {
3196
- status: true,
3197
- items: this.form.value
3198
- }
3199
- });
3200
- }
3201
- }
3202
- isAllSelected() {
3203
- const numSelected = this.selection.selected.length;
3204
- const numRows = this.dataSource.data.length;
3205
- return numSelected === numRows;
3206
- }
3207
- isIndeterminate() {
3208
- const numSelected = this.selection.selected.length;
3209
- const numRows = this.dataSource.data.length;
3210
- return numSelected > 0 && numSelected < numRows;
3211
- }
3212
- masterToggle() {
3213
- this.isAllSelected()
3214
- ? this.selection.clear()
3215
- : this.dataSource.data.forEach(row => this.selection.select(row));
3216
- this.updateSelectedProducts();
3217
- }
3218
- toggleSelection(row) {
3219
- this.selection.toggle(row);
3220
- this.updateSelectedProducts();
3221
- }
3222
- // Getter for the FormArray
3223
- get selectedProducts() {
3224
- return this.form.get('selectedProducts');
3225
- }
3226
- updateSelectedProducts() {
3227
- var _a, _b;
3228
- if (Array.isArray(this.selection.selected)) {
3229
- this.selectedDataSource.data = [...this.selection.selected];
3230
- const selectedProductsArray = this.selectedProducts;
3231
- selectedProductsArray.clear();
3232
- (_b = (_a = this.selection) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.forEach(product => {
3233
- var _a, _b;
3234
- selectedProductsArray === null || selectedProductsArray === void 0 ? void 0 : selectedProductsArray.push(this.fb.group({
3235
- price: [(_a = product === null || product === void 0 ? void 0 : product.price) !== null && _a !== void 0 ? _a : '', this.showPrice ? Validators.required : []],
3236
- text: [(product === null || product === void 0 ? void 0 : product.text) || ''],
3237
- quantity: [(_b = product === null || product === void 0 ? void 0 : product.quantity) !== null && _b !== void 0 ? _b : '', this.showQuantity ? Validators.required : []],
3238
- category: [(product === null || product === void 0 ? void 0 : product.category) || ''],
3239
- subCategory: [(product === null || product === void 0 ? void 0 : product.subCategory) || ''],
3240
- value: [(product === null || product === void 0 ? void 0 : product.value) || '']
3241
- }));
3242
- });
3243
- }
3244
- else {
3245
- console.error('Selection.selected is not an array:', this.selection.selected);
3246
- }
3247
- }
3248
- getTotalRows() {
3249
- return this.dataSource.data.length;
3250
- }
3251
- getSelectedRowsCount() {
3252
- return this.selection.selected.length;
3253
- }
3254
- onOptionSelected(event, category) {
3255
- let selectedValue;
3256
- if (event && event.option && event.option.value !== undefined) {
3257
- selectedValue = event.option.value;
3258
- }
3259
- else {
3260
- selectedValue = event;
3261
- }
3262
- if (category === 'category1') {
3263
- this.selectedCategory = selectedValue;
3264
- this.spinnerFlag = true;
3265
- this.commonSevice.listSubCategory(selectedValue).subscribe(response => {
3266
- this.spinnerFlag = false;
3267
- if (response && response.code === 200) {
3268
- this.subCategory = response.data;
3269
- this.filteredSubCategories = this.filterProducts(this.setCategory, 'subCategory');
3270
- if (this.setSubCategory !== '') {
3271
- this.selectedSubCategory = this.setSubCategory;
3272
- this.getProducts();
3273
- }
3274
- }
3275
- });
3276
- }
3277
- else {
3278
- if (category === 'subCategory') {
3279
- this.selectedSubCategory = event.option.value;
3280
- this.getProducts();
3281
- }
3282
- }
3283
- }
3284
- getProducts() {
3285
- this.spinnerFlag = true;
3286
- this.commonSevice.loadProducts(this.pageNumber, this.pageSize, '', true, false, this.selectedCategory, this.selectedSubCategory).subscribe(response => {
3287
- var _a;
3288
- this.spinnerFlag = false;
3289
- if (response && response.code === 200) {
3290
- //this.dataSource.data = response.data.dataSource;
3291
- this.totalPages = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.totalPages;
3292
- const data = response.data.dataSource;
3293
- if (this.dataSource.data.length > 0) {
3294
- data.forEach(item => this.dataSource.data.push(item));
3295
- this.dataSource.data = [...this.dataSource.data];
3296
- }
3297
- else {
3298
- this.dataSource.data = data;
3299
- }
3300
- this.loadingFlag = true;
3301
- setTimeout(() => {
3302
- const middlePosition = this.trackHeight / 2 - 50;
3303
- if (this.firstscrollableDiv && this.firstscrollableDiv.nativeElement) {
3304
- this.firstscrollableDiv.nativeElement.scrollTo({ top: middlePosition, behavior: 'auto' });
3305
- }
3306
- }, 250);
3307
- this.initializeDataSources();
3308
- }
3309
- });
3310
- }
3311
- removeRow(event, element) {
3312
- event.stopPropagation();
3313
- event.preventDefault();
3314
- let message = 'Are you sure you want to delete this product?';
3315
- let showButton = true;
3316
- const index = this.selectedDataSource.data.indexOf(element);
3317
- if (index >= 0) {
3318
- if (this.selectedDataSource.data.length === 1) {
3319
- message = 'Please select at least one product.';
3320
- showButton = false;
3321
- }
3322
- const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
3323
- disableClose: true,
3324
- width: '90%',
3325
- maxWidth: '400px',
3326
- data: { message: message, buttonStatus: showButton }
3327
- });
3328
- dialogRef.afterClosed().subscribe(result => {
3329
- if (result) {
3330
- this.selectedDataSource.data.splice(index, 1);
3331
- this.selectedDataSource._updateChangeSubscription();
3332
- this.selection.deselect(element);
3333
- const selectedProductsArray = this.form.get('selectedProducts');
3334
- const productIndex = selectedProductsArray.controls.findIndex(control => control.value.productName === element.productName);
3335
- if (productIndex >= 0) {
3336
- selectedProductsArray.removeAt(productIndex);
3337
- }
3338
- }
3339
- });
3340
- }
3341
- }
3342
- onScroll(event) {
3343
- this.trackHeight = event.target.scrollHeight - event.target.offsetHeight;
3344
- if (this.loadingFlag && (Math.floor(event.target.scrollTop / this.trackHeight * 100) > 50)) {
3345
- this.loadingFlag = false;
3346
- if (this.pageNumber < this.totalPages) {
3347
- this.pageNumber = this.pageNumber + 1;
3348
- this.getProducts();
3349
- }
3350
- else {
3351
- this.loadingFlag = true;
3352
- }
3353
- }
3354
- this.prevScrollPosition = event.target.scrollTop;
3355
- }
3356
- }
3357
- 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 });
3358
- 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"] }] });
3359
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AddOnProductsComponent, decorators: [{
3360
- type: Component,
3361
- 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"] }]
3362
- }], ctorParameters: function () {
3363
- return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
3364
- type: Inject,
3365
- args: [MAT_DIALOG_DATA]
3366
- }] }, { type: i2.FormBuilder }, { type: i1$1.MatDialog }, { type: CommonService }];
3367
- }, propDecorators: { firstscrollableDiv: [{
3368
- type: ViewChild,
3369
- args: ['firstscrollableDiv']
3370
- }] } });
3371
-
3372
- const ELEMENT_DATA = [];
3373
2994
  class MaterialDataGridComponent extends MaterialNestedComponent {
3374
2995
  constructor(element, ref, dialog) {
3375
2996
  super(element, ref);
@@ -3377,55 +2998,13 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
3377
2998
  this.ref = ref;
3378
2999
  this.dialog = dialog;
3379
3000
  this.dataSource = new MatTableDataSource();
3380
- this.dataSourceNew = ELEMENT_DATA;
3381
- this.displayedColumnsNew = ['productName', 'category', 'subCategory', 'quantity', 'price'];
3382
- this.showNewProductPicker = false;
3383
- this.showCategory = false;
3384
- this.showSubcategory = false;
3385
- this.showPrice = true;
3386
- this.showQuantity = true;
3387
- this.category = '';
3388
- this.subCategory = '';
3389
- this.hasInitialized = false;
3390
3001
  }
3391
3002
  getColumnLabel(column) {
3392
3003
  return column.label || column.key;
3393
3004
  }
3394
- checkIsAttributeTrue(newProductPickerFlag, attributeName) {
3395
- return newProductPickerFlag && Object.keys(newProductPickerFlag).some(key => key.toLocaleLowerCase() === attributeName.toLowerCase() &&
3396
- newProductPickerFlag[key].toLowerCase() === "true");
3397
- }
3398
- // ngOnInit(): void {
3399
- // }
3400
3005
  setInstance(instance) {
3401
- var _a;
3402
- const newProductPickerFlag = (_a = instance === null || instance === void 0 ? void 0 : instance.component) === null || _a === void 0 ? void 0 : _a.attributes;
3403
- this.showNewProductPicker = this.checkIsAttributeTrue(newProductPickerFlag, "newproductpicker");
3404
- this.showCategory = this.checkIsAttributeTrue(newProductPickerFlag, "showCategory");
3405
- this.showSubcategory = this.checkIsAttributeTrue(newProductPickerFlag, "showSubcategory");
3406
- this.showPrice = this.checkIsAttributeTrue(newProductPickerFlag, "showPrice");
3407
- this.showQuantity = this.checkIsAttributeTrue(newProductPickerFlag, "showQuantity");
3408
3006
  super.setInstance(instance);
3409
- if (this.showNewProductPicker && !this.hasInitialized) {
3410
- if (!this.showCategory) {
3411
- this.removeColumn('category');
3412
- }
3413
- if (!this.showQuantity) {
3414
- this.removeColumn('quantity');
3415
- }
3416
- if (!this.showPrice) {
3417
- this.removeColumn('price');
3418
- }
3419
- if (!this.showSubcategory) {
3420
- this.removeColumn('subCategory');
3421
- }
3422
- this.dataSourceNew = JSON.parse(localStorage.getItem('selectedProducts')) || [];
3423
- // Set flag to true to prevent further execution
3424
- this.hasInitialized = true;
3425
- }
3426
- else {
3427
- this.dataSource.data = instance.dataValue;
3428
- }
3007
+ this.dataSource.data = instance.dataValue;
3429
3008
  this.columns = {};
3430
3009
  this.displayedColumns = [];
3431
3010
  this.formColumns = [];
@@ -3453,10 +3032,7 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
3453
3032
  return viewContainer ? viewContainer : null;
3454
3033
  };
3455
3034
  }
3456
- removeColumn(columnName) {
3457
- this.displayedColumnsNew = this.displayedColumnsNew.filter(column => column !== columnName);
3458
- }
3459
- addAnotherOld() {
3035
+ addAnother() {
3460
3036
  this.checkRowsNumber();
3461
3037
  this.instance.addRow();
3462
3038
  if (this.dataSource.data.length < this.instance.rows.length) {
@@ -3464,57 +3040,6 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
3464
3040
  }
3465
3041
  this.dataSource.data = [...this.dataSource.data];
3466
3042
  }
3467
- addAnother() {
3468
- var _a, _b;
3469
- if (this.showNewProductPicker) {
3470
- const savedData = JSON.parse(localStorage.getItem('saveCat'));
3471
- // Use optional chaining and nullish coalescing to set the values
3472
- this.category = (_a = savedData === null || savedData === void 0 ? void 0 : savedData.category) !== null && _a !== void 0 ? _a : this.category;
3473
- this.subCategory = (_b = savedData === null || savedData === void 0 ? void 0 : savedData.subCategory) !== null && _b !== void 0 ? _b : this.subCategory;
3474
- const diologeRef = this.dialog.open(AddOnProductsComponent, {
3475
- disableClose: true,
3476
- width: '90%',
3477
- maxWidth: '900px',
3478
- autoFocus: false,
3479
- 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 }
3480
- })
3481
- .afterClosed().subscribe(response => {
3482
- var _a;
3483
- if ((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.status) {
3484
- if (!this.showCategory) {
3485
- this.removeColumn('category');
3486
- }
3487
- if (!this.showQuantity) {
3488
- this.removeColumn('quantity');
3489
- }
3490
- if (!this.showPrice) {
3491
- this.removeColumn('price');
3492
- }
3493
- if (!this.showSubcategory) {
3494
- this.removeColumn('subCategory');
3495
- }
3496
- localStorage.setItem('selectedProducts', JSON.stringify(response.data.items.selectedProducts));
3497
- this.dataSourceNew = response.data.items.selectedProducts;
3498
- this.category = response.data.items.productCategory;
3499
- this.subCategory = response.data.items.productSubcategory;
3500
- const catObject = {
3501
- category: this.category,
3502
- subCategory: this.subCategory
3503
- };
3504
- localStorage.setItem('saveCat', JSON.stringify(catObject));
3505
- this.instance.component.defaultValue = response.data.items.selectedProducts;
3506
- }
3507
- });
3508
- }
3509
- else {
3510
- this.checkRowsNumber();
3511
- this.instance.addRow();
3512
- if (this.dataSource.data.length < this.instance.rows.length) {
3513
- this.dataSource.data.push({});
3514
- }
3515
- this.dataSource.data = [...this.dataSource.data];
3516
- }
3517
- }
3518
3043
  checkRowsNumber() {
3519
3044
  while (this.instance.rows.length < this.dataSource.data.length) {
3520
3045
  this.instance.addRow();
@@ -3565,7 +3090,7 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
3565
3090
  super.setValue(value);
3566
3091
  }
3567
3092
  }
3568
- 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 }], target: i0.ɵɵFactoryTarget.Component });
3093
+ 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 });
3569
3094
  MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDataGridComponent, selector: "mat-formio-datagrid", usesInheritance: true, ngImport: i0, template: `
3570
3095
  <mat-formio-form-field [instance]="instance"
3571
3096
  [componentTemplate]="componentTemplate"
@@ -3584,8 +3109,6 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
3584
3109
  {{instance.component.addAnother || 'Add Another'}}
3585
3110
  </button>
3586
3111
  </mat-card-actions>
3587
- <ng-container *ngIf="!showNewProductPicker">
3588
- <div class="mat-elevation-z8">
3589
3112
  <table
3590
3113
  mat-table
3591
3114
  [dataSource]="dataSource"
@@ -3594,8 +3117,7 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
3594
3117
  cdkDropList
3595
3118
  [cdkDropListData]="dataSource"
3596
3119
  (cdkDropListDropped)="dropTable($event)">
3597
-
3598
-
3120
+ >
3599
3121
  <ng-container *ngFor="let column of formColumns" [matColumnDef]="column">
3600
3122
  <th mat-header-cell *matHeaderCellDef>{{ getColumnLabel(columns[column]) }}</th>
3601
3123
  <td mat-cell *matCellDef="let i = index;" [attr.rowIndex]="i" [attr.component]="column">
@@ -3625,51 +3147,6 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
3625
3147
  <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
3626
3148
  </div>
3627
3149
  </table>
3628
- </div>
3629
- </ng-container>
3630
-
3631
- <table mat-table [dataSource]="dataSourceNew" class="mat-table" *ngIf="dataSourceNew.length > 0 && showNewProductPicker; else noData" >
3632
- <!-- Product Name Column -->
3633
- <ng-container matColumnDef="productName">
3634
- <th mat-header-cell *matHeaderCellDef> Product Name </th>
3635
- <td mat-cell *matCellDef="let element"> {{element.text}} </td>
3636
- </ng-container>
3637
-
3638
- <!-- Quantity Column -->
3639
- <ng-container matColumnDef="quantity" *ngIf="showQuantity">
3640
- <th mat-header-cell *matHeaderCellDef> Quantity </th>
3641
- <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
3642
- </ng-container>
3643
-
3644
- <!-- Price Column -->
3645
- <ng-container matColumnDef="price" *ngIf="showPrice">
3646
- <th mat-header-cell *matHeaderCellDef> Price </th>
3647
- <td mat-cell *matCellDef="let element"> {{element.price}} </td>
3648
- </ng-container>
3649
-
3650
- <!-- Category Column -->
3651
- <ng-container matColumnDef="category" *ngIf="showCategory">
3652
- <th mat-header-cell *matHeaderCellDef> Category </th>
3653
- <td mat-cell *matCellDef="let element"> {{element.category}} </td>
3654
- </ng-container>
3655
-
3656
- <!-- Category Column -->
3657
- <ng-container matColumnDef="subCategory" *ngIf="showSubcategory">
3658
- <th mat-header-cell *matHeaderCellDef> Sub Category </th>
3659
- <td mat-cell *matCellDef="let element"> {{element.subCategory}} </td>
3660
- </ng-container>
3661
-
3662
- <tr mat-header-row *matHeaderRowDef="displayedColumnsNew"></tr>
3663
- <tr mat-row *matRowDef="let row; columns: displayedColumnsNew;"></tr>
3664
- </table>
3665
- <ng-template #noData>
3666
- <div class="no-data-message" *ngIf="showNewProductPicker">
3667
- No product found please add some products.
3668
- </div>
3669
- </ng-template>
3670
-
3671
-
3672
-
3673
3150
  </mat-card-content>
3674
3151
  <mat-card-actions *ngIf="instance.hasAddButton() && instance.component.addAnotherPosition !== 'top'">
3675
3152
  <button mat-raised-button color="primary" (click)="addAnother()">
@@ -3685,7 +3162,7 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
3685
3162
  <span [instance]="instance" matFormioLabel></span>
3686
3163
  </mat-card-title>
3687
3164
  </ng-template>
3688
- `, 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: 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"] }] });
3165
+ `, 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"] }] });
3689
3166
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDataGridComponent, decorators: [{
3690
3167
  type: Component,
3691
3168
  args: [{ selector: 'mat-formio-datagrid', template: `
@@ -3706,8 +3183,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
3706
3183
  {{instance.component.addAnother || 'Add Another'}}
3707
3184
  </button>
3708
3185
  </mat-card-actions>
3709
- <ng-container *ngIf="!showNewProductPicker">
3710
- <div class="mat-elevation-z8">
3711
3186
  <table
3712
3187
  mat-table
3713
3188
  [dataSource]="dataSource"
@@ -3716,8 +3191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
3716
3191
  cdkDropList
3717
3192
  [cdkDropListData]="dataSource"
3718
3193
  (cdkDropListDropped)="dropTable($event)">
3719
-
3720
-
3194
+ >
3721
3195
  <ng-container *ngFor="let column of formColumns" [matColumnDef]="column">
3722
3196
  <th mat-header-cell *matHeaderCellDef>{{ getColumnLabel(columns[column]) }}</th>
3723
3197
  <td mat-cell *matCellDef="let i = index;" [attr.rowIndex]="i" [attr.component]="column">
@@ -3747,51 +3221,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
3747
3221
  <tr class="datagrid-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
3748
3222
  </div>
3749
3223
  </table>
3750
- </div>
3751
- </ng-container>
3752
-
3753
- <table mat-table [dataSource]="dataSourceNew" class="mat-table" *ngIf="dataSourceNew.length > 0 && showNewProductPicker; else noData" >
3754
- <!-- Product Name Column -->
3755
- <ng-container matColumnDef="productName">
3756
- <th mat-header-cell *matHeaderCellDef> Product Name </th>
3757
- <td mat-cell *matCellDef="let element"> {{element.text}} </td>
3758
- </ng-container>
3759
-
3760
- <!-- Quantity Column -->
3761
- <ng-container matColumnDef="quantity" *ngIf="showQuantity">
3762
- <th mat-header-cell *matHeaderCellDef> Quantity </th>
3763
- <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
3764
- </ng-container>
3765
-
3766
- <!-- Price Column -->
3767
- <ng-container matColumnDef="price" *ngIf="showPrice">
3768
- <th mat-header-cell *matHeaderCellDef> Price </th>
3769
- <td mat-cell *matCellDef="let element"> {{element.price}} </td>
3770
- </ng-container>
3771
-
3772
- <!-- Category Column -->
3773
- <ng-container matColumnDef="category" *ngIf="showCategory">
3774
- <th mat-header-cell *matHeaderCellDef> Category </th>
3775
- <td mat-cell *matCellDef="let element"> {{element.category}} </td>
3776
- </ng-container>
3777
-
3778
- <!-- Category Column -->
3779
- <ng-container matColumnDef="subCategory" *ngIf="showSubcategory">
3780
- <th mat-header-cell *matHeaderCellDef> Sub Category </th>
3781
- <td mat-cell *matCellDef="let element"> {{element.subCategory}} </td>
3782
- </ng-container>
3783
-
3784
- <tr mat-header-row *matHeaderRowDef="displayedColumnsNew"></tr>
3785
- <tr mat-row *matRowDef="let row; columns: displayedColumnsNew;"></tr>
3786
- </table>
3787
- <ng-template #noData>
3788
- <div class="no-data-message" *ngIf="showNewProductPicker">
3789
- No product found please add some products.
3790
- </div>
3791
- </ng-template>
3792
-
3793
-
3794
-
3795
3224
  </mat-card-content>
3796
3225
  <mat-card-actions *ngIf="instance.hasAddButton() && instance.component.addAnotherPosition !== 'top'">
3797
3226
  <button mat-raised-button color="primary" (click)="addAnother()">
@@ -3807,8 +3236,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
3807
3236
  <span [instance]="instance" matFormioLabel></span>
3808
3237
  </mat-card-title>
3809
3238
  </ng-template>
3810
- `, 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"] }]
3811
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }]; } });
3239
+ `, styles: [".datagrid-row{height:auto}\n"] }]
3240
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.MatDialog }]; } });
3812
3241
  DataGridComponent.MaterialComponent = MaterialDataGridComponent;
3813
3242
 
3814
3243
  var EditRowState;
@@ -4191,7 +3620,7 @@ MaterialWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
4191
3620
  <button *ngIf="instance.hasButton('submit')" mat-raised-button color="primary" (click)="submit()">Submit</button>
4192
3621
  </div>
4193
3622
  </mat-step>
4194
- </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"] }] });
3623
+ </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"] }] });
4195
3624
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialWizardComponent, decorators: [{
4196
3625
  type: Component,
4197
3626
  args: [{ selector: 'mat-formio-wizard', template: `
@@ -4361,7 +3790,7 @@ FormioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
4361
3790
  <div fxLayout="column" fxLayoutGap="1em">
4362
3791
  <ng-template #formio></ng-template>
4363
3792
  </div>
4364
- `, 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"] }] });
3793
+ `, 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"] }] });
4365
3794
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormioComponent, decorators: [{
4366
3795
  type: Component,
4367
3796
  args: [{ selector: 'mat-formio', template: `
@@ -4433,8 +3862,7 @@ NgxRenderMaterialFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.
4433
3862
  FormioFormFieldComponent,
4434
3863
  LabelComponent,
4435
3864
  MaskDirective,
4436
- ConfirmationDialogComponent,
4437
- AddOnProductsComponent], imports: [CommonModule,
3865
+ ConfirmationDialogComponent], imports: [CommonModule,
4438
3866
  FormsModule,
4439
3867
  ReactiveFormsModule,
4440
3868
  MatInputModule,
@@ -4462,9 +3890,7 @@ NgxRenderMaterialFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.
4462
3890
  ScrollingModule,
4463
3891
  NgxMatSelectSearchModule,
4464
3892
  MatDialogModule,
4465
- HttpClientModule,
4466
- MatAutocompleteModule], exports: [MatAutocompleteModule,
4467
- NgxRenderMaterialFormsComponent,
3893
+ HttpClientModule], exports: [NgxRenderMaterialFormsComponent,
4468
3894
  FormioComponent,
4469
3895
  MatInputModule,
4470
3896
  MatFormFieldModule,
@@ -4518,9 +3944,7 @@ NgxRenderMaterialFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
4518
3944
  ScrollingModule,
4519
3945
  NgxMatSelectSearchModule,
4520
3946
  MatDialogModule,
4521
- HttpClientModule,
4522
- MatAutocompleteModule, MatAutocompleteModule,
4523
- MatInputModule,
3947
+ HttpClientModule, MatInputModule,
4524
3948
  MatFormFieldModule,
4525
3949
  MatCheckboxModule,
4526
3950
  MatRadioModule,
@@ -4588,8 +4012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
4588
4012
  FormioFormFieldComponent,
4589
4013
  LabelComponent,
4590
4014
  MaskDirective,
4591
- ConfirmationDialogComponent,
4592
- AddOnProductsComponent
4015
+ ConfirmationDialogComponent
4593
4016
  ],
4594
4017
  imports: [
4595
4018
  CommonModule,
@@ -4620,11 +4043,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
4620
4043
  ScrollingModule,
4621
4044
  NgxMatSelectSearchModule,
4622
4045
  MatDialogModule,
4623
- HttpClientModule,
4624
- MatAutocompleteModule
4046
+ HttpClientModule
4625
4047
  ],
4626
4048
  exports: [
4627
- MatAutocompleteModule,
4628
4049
  NgxRenderMaterialFormsComponent,
4629
4050
  FormioComponent,
4630
4051
  MatInputModule,