ngx-render-material-forms 2.0.0 → 2.0.1
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.
- package/esm2020/lib/components/add-on-products/add-on-products.component.mjs +118 -31
- package/esm2020/lib/components/datagrid/datagrid.component.mjs +2 -13
- package/esm2020/lib/components/select/select.component.mjs +1 -7
- package/esm2020/lib/components/textarea/textarea.component.mjs +1 -7
- package/fesm2015/ngx-render-material-forms.js +122 -54
- package/fesm2015/ngx-render-material-forms.mjs.map +1 -1
- package/fesm2020/ngx-render-material-forms.js +120 -54
- package/fesm2020/ngx-render-material-forms.mjs.map +1 -1
- package/lib/components/add-on-products/add-on-products.component.d.ts +11 -1
- package/package.json +1 -1
|
@@ -39,7 +39,7 @@ import * as i5$1 from '@angular/material/core';
|
|
|
39
39
|
import { MatNativeDateModule } from '@angular/material/core';
|
|
40
40
|
import * as i1$1 from '@angular/material/dialog';
|
|
41
41
|
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
42
|
-
import * as
|
|
42
|
+
import * as i14 from '@angular/material/autocomplete';
|
|
43
43
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
44
44
|
import Webform from 'formiojs/Webform.js';
|
|
45
45
|
import FormioComponent$2 from 'formiojs/components/_classes/component/Component.js';
|
|
@@ -94,14 +94,15 @@ import DataGridComponent from 'formiojs/components/datagrid/DataGrid.js';
|
|
|
94
94
|
import * as i9 from '@angular/cdk/drag-drop';
|
|
95
95
|
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
96
96
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
97
|
-
import
|
|
98
|
-
import { MatStepperModule } from '@angular/material/stepper';
|
|
97
|
+
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
99
98
|
import EditGridComponent from 'formiojs/components/editgrid/EditGrid.js';
|
|
100
99
|
import Components$2 from 'formiojs/components/Components';
|
|
101
100
|
import isString from 'lodash/isString';
|
|
102
101
|
import TableComponent from 'formiojs/components/table/Table.js';
|
|
103
102
|
import Wizard from 'formiojs/Wizard';
|
|
104
103
|
import Displays from 'formiojs/displays/Displays';
|
|
104
|
+
import * as i3$3 from '@angular/material/stepper';
|
|
105
|
+
import { MatStepperModule } from '@angular/material/stepper';
|
|
105
106
|
import * as i1$3 from '@formio/angular';
|
|
106
107
|
import { FormioBaseComponent } from '@formio/angular';
|
|
107
108
|
import { FlexLayoutModule } from '@angular/flex-layout';
|
|
@@ -1072,12 +1073,6 @@ ButtonComponent.MaterialComponent = MaterialButtonComponent;
|
|
|
1072
1073
|
|
|
1073
1074
|
class MaterialTextareaComponent extends MaterialComponent {
|
|
1074
1075
|
ngAfterViewInit() {
|
|
1075
|
-
if (this.element && this.element.nativeElement && this.instance) {
|
|
1076
|
-
// Add custom classes to elements.
|
|
1077
|
-
if (this.instance.component.customClass) {
|
|
1078
|
-
this.element.nativeElement.classList.add(this.instance.component.customClass);
|
|
1079
|
-
}
|
|
1080
|
-
}
|
|
1081
1076
|
// Attach the element so the wysiwyg will work.
|
|
1082
1077
|
this.instance.attachElement(this.textarea.nativeElement);
|
|
1083
1078
|
}
|
|
@@ -3083,12 +3078,6 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
3083
3078
|
});
|
|
3084
3079
|
}
|
|
3085
3080
|
ngAfterViewInit() {
|
|
3086
|
-
if (this.element && this.element.nativeElement && this.instance) {
|
|
3087
|
-
// Add custom classes to elements.
|
|
3088
|
-
if (this.instance.component.customClass) {
|
|
3089
|
-
this.element.nativeElement.classList.add(this.instance.component.customClass);
|
|
3090
|
-
}
|
|
3091
|
-
}
|
|
3092
3081
|
this.selectElem.openedChange.subscribe((isOpen) => __awaiter(this, void 0, void 0, function* () {
|
|
3093
3082
|
var _a, _b, _c;
|
|
3094
3083
|
let i = 0;
|
|
@@ -3467,6 +3456,11 @@ class AddOnProductsComponent {
|
|
|
3467
3456
|
this.levelFourId = '';
|
|
3468
3457
|
this.disablePrice = true;
|
|
3469
3458
|
this.checkSubmissionStatus = false;
|
|
3459
|
+
this.currentPage = 'select-products';
|
|
3460
|
+
this.isVisible = false;
|
|
3461
|
+
this.isDisabled2 = true;
|
|
3462
|
+
this.isDisabled3 = true;
|
|
3463
|
+
this.isDisabled4 = true;
|
|
3470
3464
|
this.showCategory = data.dropdownsFlag.showDialogCategory;
|
|
3471
3465
|
this.showSubcategory = data.dropdownsFlag.showDialogSubCategory;
|
|
3472
3466
|
this.showPrice = data.dropdownsFlag.showDialogPrice;
|
|
@@ -3484,15 +3478,6 @@ class AddOnProductsComponent {
|
|
|
3484
3478
|
this.checkSubmissionStatus = data.dropdownsFlag.checkSubmissionStatus;
|
|
3485
3479
|
this.dropDownCount = this.countTrueDropdowns(data.dropdownsFlag);
|
|
3486
3480
|
this.selection = new SelectionModel(true, data.selectedProducts || []);
|
|
3487
|
-
this.form = this.fb.group({
|
|
3488
|
-
dropdownLevel1: [''],
|
|
3489
|
-
dropdownLevel2: [''],
|
|
3490
|
-
dropdownLevel3: [''],
|
|
3491
|
-
dropdownLevel4: [''],
|
|
3492
|
-
searchProductName: [''],
|
|
3493
|
-
selectedProducts: this.fb.array([])
|
|
3494
|
-
});
|
|
3495
|
-
this.initializeFormArray();
|
|
3496
3481
|
if (!this.showCategory) {
|
|
3497
3482
|
this.removeColumn('categoryName');
|
|
3498
3483
|
}
|
|
@@ -3521,8 +3506,8 @@ class AddOnProductsComponent {
|
|
|
3521
3506
|
}
|
|
3522
3507
|
this.selection.selected.forEach(product => {
|
|
3523
3508
|
selectedProductsArray.push(this.fb.group({
|
|
3524
|
-
price: [product.price || '', Validators.required],
|
|
3525
|
-
text: [product.text || ''],
|
|
3509
|
+
price: [(product === null || product === void 0 ? void 0 : product.price) || '', Validators.required],
|
|
3510
|
+
text: [(product === null || product === void 0 ? void 0 : product.text) || ''],
|
|
3526
3511
|
quantity: [product.quantity || '', Validators.required],
|
|
3527
3512
|
category: [(product === null || product === void 0 ? void 0 : product.category) || ''],
|
|
3528
3513
|
subCategory: [(product === null || product === void 0 ? void 0 : product.subCategory) || ''],
|
|
@@ -3553,10 +3538,17 @@ class AddOnProductsComponent {
|
|
|
3553
3538
|
}
|
|
3554
3539
|
}
|
|
3555
3540
|
ngAfterViewInit() {
|
|
3556
|
-
this.stepper._getIndicatorType = () => 'number';
|
|
3557
3541
|
}
|
|
3558
3542
|
ngOnInit() {
|
|
3559
|
-
|
|
3543
|
+
this.form = this.fb.group({
|
|
3544
|
+
dropdownLevel1: [{ value: '', disabled: false }],
|
|
3545
|
+
dropdownLevel2: [{ value: '', disabled: true }],
|
|
3546
|
+
dropdownLevel3: [{ value: '', disabled: true }],
|
|
3547
|
+
dropdownLevel4: [{ value: '', disabled: true }],
|
|
3548
|
+
searchProductName: [''],
|
|
3549
|
+
selectedProducts: this.fb.array([])
|
|
3550
|
+
});
|
|
3551
|
+
this.initializeFormArray();
|
|
3560
3552
|
if (this.dropdownL1) {
|
|
3561
3553
|
this.loadDropdownL1();
|
|
3562
3554
|
}
|
|
@@ -3581,9 +3573,9 @@ class AddOnProductsComponent {
|
|
|
3581
3573
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
3582
3574
|
const searchQuery = (_b = (_a = this.form.controls.searchProductName) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.trim(); // Trim to remove blank spaces
|
|
3583
3575
|
const levelOneId = (_d = (_c = this.form.controls.dropdownLevel1) === null || _c === void 0 ? void 0 : _c.value) === null || _d === void 0 ? void 0 : _d.id;
|
|
3584
|
-
this.loadingFlag = false;
|
|
3576
|
+
this.loadingFlag = false;
|
|
3585
3577
|
if (this.firstscrollableDiv) {
|
|
3586
|
-
this.firstscrollableDiv.nativeElement.scrollTop = 0;
|
|
3578
|
+
this.firstscrollableDiv.nativeElement.scrollTop = 0;
|
|
3587
3579
|
}
|
|
3588
3580
|
if ((searchQuery && searchQuery !== '') || (levelOneId && levelOneId !== null && levelOneId !== undefined)) {
|
|
3589
3581
|
this.searchQuery = (_e = this.form.controls.searchProductName) === null || _e === void 0 ? void 0 : _e.value;
|
|
@@ -3639,7 +3631,7 @@ class AddOnProductsComponent {
|
|
|
3639
3631
|
filterProducts(value, cat) {
|
|
3640
3632
|
const filterValue = typeof value === 'string' ? value === null || value === void 0 ? void 0 : value.toLowerCase() : value;
|
|
3641
3633
|
let data;
|
|
3642
|
-
|
|
3634
|
+
/*Dynamically assign the data array based on the category*/
|
|
3643
3635
|
switch (cat) {
|
|
3644
3636
|
case 'category1':
|
|
3645
3637
|
data = this.dropdownOne;
|
|
@@ -3672,6 +3664,9 @@ class AddOnProductsComponent {
|
|
|
3672
3664
|
}
|
|
3673
3665
|
});
|
|
3674
3666
|
}
|
|
3667
|
+
else {
|
|
3668
|
+
this.form.markAllAsTouched();
|
|
3669
|
+
}
|
|
3675
3670
|
}
|
|
3676
3671
|
isAllSelected() {
|
|
3677
3672
|
const numSelected = this.selection.selected.length;
|
|
@@ -3765,6 +3760,7 @@ class AddOnProductsComponent {
|
|
|
3765
3760
|
return this.selection.selected.length;
|
|
3766
3761
|
}
|
|
3767
3762
|
onOptionSelected(event, category) {
|
|
3763
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
3768
3764
|
let selectedValue;
|
|
3769
3765
|
if (event && event.option && event.option.value !== undefined) {
|
|
3770
3766
|
selectedValue = event.option.value.id;
|
|
@@ -3781,8 +3777,20 @@ class AddOnProductsComponent {
|
|
|
3781
3777
|
this.filteredDropdownThree = [];
|
|
3782
3778
|
this.filteredDropdownFour = [];
|
|
3783
3779
|
if (this.dropdownL2 && this.levelOneId) {
|
|
3780
|
+
(_a = this.form.get('dropdownLevel2')) === null || _a === void 0 ? void 0 : _a.enable();
|
|
3781
|
+
(_b = this.form.get('dropdownLevel3')) === null || _b === void 0 ? void 0 : _b.disable();
|
|
3782
|
+
(_c = this.form.get('dropdownLevel4')) === null || _c === void 0 ? void 0 : _c.disable();
|
|
3783
|
+
this.isDisabled2 = false;
|
|
3784
3784
|
this.loadDropdownL2(this.levelOneId);
|
|
3785
3785
|
}
|
|
3786
|
+
else {
|
|
3787
|
+
(_d = this.form.get('dropdownLevel2')) === null || _d === void 0 ? void 0 : _d.disable();
|
|
3788
|
+
(_e = this.form.get('dropdownLevel3')) === null || _e === void 0 ? void 0 : _e.disable();
|
|
3789
|
+
(_f = this.form.get('dropdownLevel4')) === null || _f === void 0 ? void 0 : _f.disable();
|
|
3790
|
+
this.isDisabled2 = true;
|
|
3791
|
+
this.isDisabled3 = true;
|
|
3792
|
+
this.isDisabled4 = true;
|
|
3793
|
+
}
|
|
3786
3794
|
}
|
|
3787
3795
|
if (category === 'category2') {
|
|
3788
3796
|
this.levelTwoId = selectedValue;
|
|
@@ -3790,16 +3798,31 @@ class AddOnProductsComponent {
|
|
|
3790
3798
|
this.form.get('dropdownLevel4').setValue(null);
|
|
3791
3799
|
this.filteredDropdownThree = [];
|
|
3792
3800
|
if (this.dropdownL3 && this.levelOneId && this.levelTwoId) {
|
|
3801
|
+
(_g = this.form.get('dropdownLevel3')) === null || _g === void 0 ? void 0 : _g.enable();
|
|
3802
|
+
(_h = this.form.get('dropdownLevel4')) === null || _h === void 0 ? void 0 : _h.disable();
|
|
3803
|
+
this.isDisabled3 = false;
|
|
3793
3804
|
this.loadDropdownL3(this.levelOneId, this.levelTwoId);
|
|
3794
3805
|
}
|
|
3806
|
+
else {
|
|
3807
|
+
(_j = this.form.get('dropdownLevel3')) === null || _j === void 0 ? void 0 : _j.disable();
|
|
3808
|
+
(_k = this.form.get('dropdownLevel4')) === null || _k === void 0 ? void 0 : _k.disable();
|
|
3809
|
+
this.isDisabled3 = true;
|
|
3810
|
+
this.isDisabled4 = true;
|
|
3811
|
+
}
|
|
3795
3812
|
}
|
|
3796
3813
|
if (category === 'category3') {
|
|
3797
3814
|
this.levelThreeId = selectedValue;
|
|
3798
3815
|
this.form.get('dropdownLevel4').setValue(null);
|
|
3799
3816
|
this.filteredDropdownFour = [];
|
|
3800
3817
|
if (this.dropdownL4 && this.levelOneId && this.levelTwoId && this.levelThreeId) {
|
|
3818
|
+
(_l = this.form.get('dropdownLevel4')) === null || _l === void 0 ? void 0 : _l.enable();
|
|
3819
|
+
this.isDisabled4 = false;
|
|
3801
3820
|
this.loadDropdownL4(this.levelOneId, this.levelTwoId, this.levelThreeId);
|
|
3802
3821
|
}
|
|
3822
|
+
else {
|
|
3823
|
+
(_m = this.form.get('dropdownLevel4')) === null || _m === void 0 ? void 0 : _m.disable();
|
|
3824
|
+
this.isDisabled4 = true;
|
|
3825
|
+
}
|
|
3803
3826
|
}
|
|
3804
3827
|
if (category === 'category4') {
|
|
3805
3828
|
this.levelFourId = selectedValue;
|
|
@@ -3808,11 +3831,7 @@ class AddOnProductsComponent {
|
|
|
3808
3831
|
getProducts(flag) {
|
|
3809
3832
|
this.spinnerFlag = true;
|
|
3810
3833
|
const search = this.searchQuery;
|
|
3811
|
-
|
|
3812
|
-
const levelTwoId = this.levelTwoId ? this.levelTwoId : 0;
|
|
3813
|
-
const levelThreeId = this.levelThreeId ? this.levelThreeId : 0;
|
|
3814
|
-
const levelFourId = this.levelFourId ? this.levelFourId : 0;
|
|
3815
|
-
this.commonSevice.loadProducts(this.pageNumber, this.pageSize, search, true, false, levelOneId, levelTwoId, levelThreeId, levelFourId).subscribe(response => {
|
|
3834
|
+
this.commonSevice.loadProducts(this.pageNumber, this.pageSize, search, true, false, this.levelOneId, this.levelTwoId, this.levelThreeId, this.levelFourId).subscribe(response => {
|
|
3816
3835
|
var _a;
|
|
3817
3836
|
this.spinnerFlag = false;
|
|
3818
3837
|
if (response && response.code === 200) {
|
|
@@ -3923,12 +3942,75 @@ class AddOnProductsComponent {
|
|
|
3923
3942
|
quantityControl.setErrors({ 'pattern': true });
|
|
3924
3943
|
}
|
|
3925
3944
|
}
|
|
3945
|
+
goToNextPage() {
|
|
3946
|
+
this.currentPage = 'edit-save';
|
|
3947
|
+
}
|
|
3948
|
+
goToPreviousPage() {
|
|
3949
|
+
this.currentPage = 'select-products';
|
|
3950
|
+
}
|
|
3951
|
+
toggleSection() {
|
|
3952
|
+
this.isVisible = !this.isVisible;
|
|
3953
|
+
}
|
|
3954
|
+
clearField(field, category) {
|
|
3955
|
+
var _a;
|
|
3956
|
+
(_a = this.form.get(field)) === null || _a === void 0 ? void 0 : _a.setValue(null);
|
|
3957
|
+
if (category === 'category1') {
|
|
3958
|
+
this.onOptionSelected(null, 'category1');
|
|
3959
|
+
}
|
|
3960
|
+
else if (category === 'category2') {
|
|
3961
|
+
this.onOptionSelected(null, 'category2');
|
|
3962
|
+
}
|
|
3963
|
+
else if (category === 'category3') {
|
|
3964
|
+
this.onOptionSelected(null, 'category3');
|
|
3965
|
+
}
|
|
3966
|
+
else if (category === 'category4') {
|
|
3967
|
+
this.levelFourId = null;
|
|
3968
|
+
}
|
|
3969
|
+
}
|
|
3970
|
+
onInputChange(event, category) {
|
|
3971
|
+
const inputValue = event.target.value;
|
|
3972
|
+
if (!inputValue) {
|
|
3973
|
+
// Handle case where input is cleared
|
|
3974
|
+
this.clearField(`dropdownLevel${this.getDropdownLevel(category)}`, category);
|
|
3975
|
+
}
|
|
3976
|
+
}
|
|
3977
|
+
getDropdownLevel(category) {
|
|
3978
|
+
switch (category) {
|
|
3979
|
+
case 'category1': return 1;
|
|
3980
|
+
case 'category2': return 2;
|
|
3981
|
+
case 'category3': return 3;
|
|
3982
|
+
case 'category4': return 4;
|
|
3983
|
+
default: return 0;
|
|
3984
|
+
}
|
|
3985
|
+
}
|
|
3926
3986
|
}
|
|
3927
3987
|
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 });
|
|
3928
|
-
AddOnProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: AddOnProductsComponent, selector: "ngx-mat-add-on-products", viewQueries: [{ propertyName: "firstscrollableDiv", first: true, predicate: ["firstscrollableDiv"], descendants: true }, { propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n <div class=\"OverlayDivContent\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</div>\r\n<div class=\"product-selector\" mat-dialog-content>\r\n <mat-stepper labelPosition=\"bottom\" #stepper>\r\n <mat-step [stepControl]=\"form\">\r\n <form [formGroup]=\"form\">\r\n <ng-template matStepLabel>Select Products</ng-template>\r\n <div class=\"product-selection-container\">\r\n <!-- <h3>Select Products</h3> -->\r\n <p class=\"product-selection-desc\">Your ideal match is just a few preferences away. Start discovering\r\n now!</p>\r\n <mat-form-field class=\"global-search\" appearance=\"outline\">\r\n <mat-icon matPrefix class=\"material-symbols-outlined product-picker-icon\">search</mat-icon>\r\n <input matInput placeholder=\"Search Product Name\" formControlName=\"searchProductName\" />\r\n </mat-form-field>\r\n <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n <h5>Filters</h5>\r\n <div class=\"row\">\r\n <mat-form-field *ngIf=\"dropdownL1\">\r\n <mat-label>{{dropdownL1Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n [matAutocomplete]=\"auto3\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n\r\n <mat-form-field *ngIf=\"dropdownL2\">\r\n <mat-label>{{dropdownL2Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n [matAutocomplete]=\"auto4\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n\r\n <mat-form-field *ngIf=\"dropdownL3\">\r\n <mat-label>{{dropdownL3Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n [matAutocomplete]=\"auto3\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n\r\n <mat-form-field *ngIf=\"dropdownL4\">\r\n <mat-label>{{dropdownL4Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n [matAutocomplete]=\"auto4\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Search Button -->\r\n <div fxLayout=\"row\" fxLayoutAlign=\"left\" class=\"margin-top search-btn-wrp\">\r\n <button mat-button color=\"primary\" mat-raised-button\r\n (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n </div>\r\n </div>\r\n <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n (scroll)=\"onScroll($event)\" [ngClass] =\"dataSource.data.length > 10 ? 'tbl-record-found': ''\">\r\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n *ngIf=\"dataSource && dataSource.data.length > 0; else noData\">\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? toggleSelection(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n </ng-container>\r\n <!-- <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n <th mat-header-cell *matHeaderCellDef> Price </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.price}} </td>\r\n </ng-container> -->\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\"> #SkuNumber-{{element?.value}} </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n [class.selected]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n <ng-template #noData>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"row-summary\">\r\n <p>Rows: {{ getTotalRows() }} Selected: {{ getSelectedRowsCount() }}</p>\r\n </div>\r\n <div class=\"tabs-action-step-one\">\r\n <button mat-button matStepperNext [disabled]=\"selection.selected.length ? false : true\"\r\n color=\"primary\" mat-raised-button>Next</button>\r\n <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n </div>\r\n </form>\r\n </mat-step>\r\n <mat-step [stepControl]=\"form\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n <ng-template matStepLabel>Edit/Save</ng-template>\r\n <div class=\"new-class\">\r\n <table mat-table [dataSource]=\"selectedDataSource\"\r\n *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n <ng-container matColumnDef=\"delete\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button class=\"delete-btn-picker\" mat-button\r\n (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n </button>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n <th mat-header-cell *matHeaderCellDef>Sub Category </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n <th mat-header-cell *matHeaderCellDef>Price</th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width select-price\">\r\n <mat-label>Price</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n placeholder=\"Please enter price\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n Price is required\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n <th mat-header-cell *matHeaderCellDef> Quantity </th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width\">\r\n <mat-label>Quantity</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\" type=\"number\"\r\n min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n Quantity can not be less than 1\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n Decimals not allowed\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\">#SkuNumber-{{element?.value}} </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n </table>\r\n <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"tabs-action\">\r\n <div class=\"tab-action-wrp\">\r\n <button mat-button matStepperPrevious>Back</button>\r\n </div>\r\n\r\n <div class=\"tab-action-wrp\">\r\n <button mat-button matStepperNext type=\"submit\" color=\"primary\" mat-raised-button>Add\r\n products</button>\r\n </div>\r\n </div>\r\n </form>\r\n </mat-step>\r\n </mat-stepper>\r\n</div>", styles: [".dropdown-section{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;gap:16px}mat-form-field{flex:1}.new-class{margin:20px 0;border:1px solid #ddd;border-radius:5px}.new-class.first-div.tbl-record-found{height:400px;overflow-y:auto}.mat-column-select{width:50px;text-align:center}.mat-header-cell,.mat-cell{text-align:center}button{align-self:flex-end;margin-top:20px}.row-summary{margin-top:20px;font-weight:700}.new-class td{border:1px solid #ddd;padding:10px}.new-class th{background-color:#f2f2f2;position:-webkit-sticky;position:sticky;top:0;transform:none;z-index:99;padding:10px}table{width:100%;border-collapse:collapse}.select-qunatity,.select-price{width:110px}.no-data-message{text-align:center;margin:20px 0;font-size:18px;color:#888}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused,.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:transparent}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.product-selection-container{max-width:800px;margin:0 auto;text-align:center}.global-search{width:100%;margin-bottom:20px}.dropdown-selection{display:flex;flex-direction:column;width:100%}.row{display:flex;justify-content:space-between;width:100%;margin-bottom:20px;flex-wrap:wrap}.dropdown-item{flex:1;margin-right:10px}.dropdown-item:last-child{margin-right:0}.scrollable-div{max-height:350px;overflow-y:auto;margin-top:20px;margin-bottom:20px}.mat-table{width:100%;border-collapse:collapse}.dropdown-selection>div{display:flex;justify-content:space-between;border:1px solid #ddd;border-radius:5px;padding:20px;flex-wrap:wrap}.mat-form-field:last-child{margin-right:0}.search-btn-wrp{justify-content:flex-start}.no-child .mat-form-field{width:100%}.child .mat-form-field{flex:0 0 calc(50% - 20px)}.delete-btn-picker .mat-icon{color:#e53935!important;font-size:24px;width:auto;height:auto}.delete-btn-picker{margin:0}.product-selection-desc{text-align:left}.tabs-action{display:flex;justify-content:space-between}.tabs-action-step-one{justify-content:flex-end;display:flex}.dropdown-selection h5{font-size:18px}::ng-deep .product-selection-container .mat-form-field-infix{padding:10px 4px 17px!important}::ng-deep .product-selection-container .mat-form-field-flex{align-items:center}::ng-deep .product-selection-container .product-picker-icon{font-size:18px;width:auto;height:auto;color:#0000004d}::ng-deep .product-selection-container .mat-form-field-appearance-outline .mat-form-field-outline-thick,::ng-deep .product-selection-container .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#0000001f}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i15.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i15.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i15.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i15.MatStepperNext, selector: "button[matStepperNext]", inputs: ["type"] }, { kind: "directive", type: i15.MatStepperPrevious, selector: "button[matStepperPrevious]", inputs: ["type"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i16.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i16.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }] });
|
|
3988
|
+
AddOnProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: AddOnProductsComponent, selector: "ngx-mat-add-on-products", viewQueries: [{ propertyName: "firstscrollableDiv", first: true, predicate: ["firstscrollableDiv"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n <div class=\"OverlayDivContent\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n <div class=\"mat-dialog-content\">\r\n <!--Search Start-->\r\n <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n <div class=\"bs\">\r\n <div class=\"search-icon\">\r\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n transform=\"rotate(0 0 0)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n </svg>\r\n </div>\r\n <form [formGroup]=\"form\">\r\n <div class=\"input-search\">\r\n <input type=\"text\" matInput placeholder=\"Search Product\" formControlName=\"searchProductName\">\r\n </div>\r\n </form>\r\n <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\"><mat-icon matBadge=\"4\"\r\n matBadgeSize=\"small\" class=\"material-icons-round\" aria-hidden=\"false\"\r\n aria-label=\"tune\">tune</mat-icon></button>\r\n </div>\r\n </div>\r\n <div class=\"search-btn\">\r\n <button mat-raised-button color=\"primary\"\r\n (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n </div>\r\n </div>\r\n <!--Search End-->\r\n <div class=\"product-selector\">\r\n <div [hidden]=\"currentPage !== 'select-products'\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"product-selection-container\">\r\n <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\" *ngIf=\"isVisible\">\r\n <h5>Advanced Filters</h5>\r\n <div class=\"row\">\r\n <mat-form-field *ngIf=\"dropdownL1\">\r\n <mat-label>{{dropdownL1Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n [matAutocomplete]=\"auto3\" (input)=\"onInputChange($event, 'category1')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel1').value\" (click)=\"clearField('dropdownLevel1', 'category1')\">close</mat-icon>\r\n <mat-icon matSuffix>keyboard_arrow_down</mat-icon>\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"dropdownL2\">\r\n <mat-label>{{dropdownL2Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n [matAutocomplete]=\"auto4\" (input)=\"onInputChange($event, 'category2')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel2').value\" (click)=\"clearField('dropdownLevel2', 'category2')\">close</mat-icon>\r\n <mat-icon matSuffix\r\n [ngClass]=\"{'disabled-icon': isDisabled2}\">keyboard_arrow_down</mat-icon>\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"dropdownL3\">\r\n <mat-label>{{dropdownL3Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n [matAutocomplete]=\"auto3\" (input)=\"onInputChange($event, 'category3')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel3').value\" (click)=\"clearField('dropdownLevel3', 'category3')\">close</mat-icon>\r\n <mat-icon matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled3}\">keyboard_arrow_down</mat-icon>\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"dropdownL4\">\r\n <mat-label>{{dropdownL4Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n [matAutocomplete]=\"auto4\" (input)=\"onInputChange($event, 'category4')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel4').value\" (click)=\"clearField('dropdownLevel4', 'category4')\">close</mat-icon>\r\n <mat-icon matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled4}\">keyboard_arrow_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n (scroll)=\"onScroll($event)\" [ngClass]=\"dataSource?.data?.length > 10 ? 'tbl-record-found': ''\">\r\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? toggleSelection(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\"> #SkuNumber-{{element?.value}} </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n [class.selected]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n <ng-template #noData>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n <p>Selected: {{ getSelectedRowsCount() }} Total Records: {{ getTotalRows() }} </p>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <div [hidden]=\"currentPage !== 'edit-save'\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"new-class\">\r\n <table mat-table [dataSource]=\"selectedDataSource\"\r\n *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n <ng-container matColumnDef=\"delete\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button class=\"delete-btn-picker\" mat-button\r\n (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n </button>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n <th mat-header-cell *matHeaderCellDef>Sub Category </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n <th mat-header-cell *matHeaderCellDef>Price</th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width select-price\">\r\n <mat-label>Price</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n placeholder=\"Please enter price\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n Price is required\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n <th mat-header-cell *matHeaderCellDef> Quantity </th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width\">\r\n <mat-label>Quantity</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n type=\"number\" min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n Quantity can not be less than 1\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n Decimals not allowed\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\">#SkuNumber-{{element?.value}} </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n </table>\r\n <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n color=\"primary\" mat-raised-button>Next</button>\r\n <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n </div>\r\n <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n <div class=\"tab-action-wrp\">\r\n <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add\r\n products</button>\r\n </div>\r\n </div>\r\n</mat-dialog-actions>", styles: [".basic-search{display:flex;align-items:center;width:100%}.bs{border:1px solid #DADCE0;border-radius:5px;padding:0 15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.bs mat-icon{color:#0006}.search-icon{margin:0;display:flex}.search-icon mat-icon{color:#0006}.search-icon svg{width:24px;height:24px}.search-icon svg path{fill:#999}.input-search{margin:0;border:0;width:100%}.input-search input{border:0;padding:0 15px;width:100%;font-size:15px}.input-search input:focus{border:0;outline:0 none}.advfilter{display:flex;margin-left:auto}.advfilter button{border:0;background-color:transparent;margin:0;padding:0;display:flex}.advfilter button mat-icon{color:#0006}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}::ng-deep .basic-search .mat-badge-small.mat-badge-after .mat-badge-content{background:#f44336!important}.content{background-color:#fff;border:1px solid #DADCE0;margin-top:10px;padding:10px;min-height:400px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i10$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i10$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i14.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i14.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }], animations: [
|
|
3989
|
+
trigger('slideDown', [
|
|
3990
|
+
state('hidden', style({ height: '0px', opacity: 0, overflow: 'hidden' })),
|
|
3991
|
+
state('visible', style({ height: '*', opacity: 1 })),
|
|
3992
|
+
transition('hidden => visible', [
|
|
3993
|
+
animate('300ms ease-out')
|
|
3994
|
+
]),
|
|
3995
|
+
transition('visible => hidden', [
|
|
3996
|
+
animate('300ms ease-in')
|
|
3997
|
+
])
|
|
3998
|
+
])
|
|
3999
|
+
] });
|
|
3929
4000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AddOnProductsComponent, decorators: [{
|
|
3930
4001
|
type: Component,
|
|
3931
|
-
args: [{ selector: 'ngx-mat-add-on-products', template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n <div class=\"OverlayDivContent\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</div>\r\n<div class=\"product-selector\" mat-dialog-content>\r\n <mat-stepper labelPosition=\"bottom\" #stepper>\r\n <mat-step [stepControl]=\"form\">\r\n <form [formGroup]=\"form\">\r\n <ng-template matStepLabel>Select Products</ng-template>\r\n <div class=\"product-selection-container\">\r\n <!-- <h3>Select Products</h3> -->\r\n <p class=\"product-selection-desc\">Your ideal match is just a few preferences away. Start discovering\r\n now!</p>\r\n <mat-form-field class=\"global-search\" appearance=\"outline\">\r\n <mat-icon matPrefix class=\"material-symbols-outlined product-picker-icon\">search</mat-icon>\r\n <input matInput placeholder=\"Search Product Name\" formControlName=\"searchProductName\" />\r\n </mat-form-field>\r\n <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n <h5>Filters</h5>\r\n <div class=\"row\">\r\n <mat-form-field *ngIf=\"dropdownL1\">\r\n <mat-label>{{dropdownL1Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n [matAutocomplete]=\"auto3\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n\r\n <mat-form-field *ngIf=\"dropdownL2\">\r\n <mat-label>{{dropdownL2Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n [matAutocomplete]=\"auto4\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n\r\n <mat-form-field *ngIf=\"dropdownL3\">\r\n <mat-label>{{dropdownL3Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n [matAutocomplete]=\"auto3\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n\r\n <mat-form-field *ngIf=\"dropdownL4\">\r\n <mat-label>{{dropdownL4Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n [matAutocomplete]=\"auto4\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Search Button -->\r\n <div fxLayout=\"row\" fxLayoutAlign=\"left\" class=\"margin-top search-btn-wrp\">\r\n <button mat-button color=\"primary\" mat-raised-button\r\n (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n </div>\r\n </div>\r\n <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n (scroll)=\"onScroll($event)\" [ngClass] =\"dataSource.data.length > 10 ? 'tbl-record-found': ''\">\r\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n *ngIf=\"dataSource && dataSource.data.length > 0; else noData\">\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? toggleSelection(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n </ng-container>\r\n <!-- <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n <th mat-header-cell *matHeaderCellDef> Price </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.price}} </td>\r\n </ng-container> -->\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\"> #SkuNumber-{{element?.value}} </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n [class.selected]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n <ng-template #noData>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"row-summary\">\r\n <p>Rows: {{ getTotalRows() }} Selected: {{ getSelectedRowsCount() }}</p>\r\n </div>\r\n <div class=\"tabs-action-step-one\">\r\n <button mat-button matStepperNext [disabled]=\"selection.selected.length ? false : true\"\r\n color=\"primary\" mat-raised-button>Next</button>\r\n <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n </div>\r\n </form>\r\n </mat-step>\r\n <mat-step [stepControl]=\"form\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n <ng-template matStepLabel>Edit/Save</ng-template>\r\n <div class=\"new-class\">\r\n <table mat-table [dataSource]=\"selectedDataSource\"\r\n *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n <ng-container matColumnDef=\"delete\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button class=\"delete-btn-picker\" mat-button\r\n (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n </button>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n <th mat-header-cell *matHeaderCellDef>Sub Category </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n <th mat-header-cell *matHeaderCellDef>Price</th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width select-price\">\r\n <mat-label>Price</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n placeholder=\"Please enter price\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n Price is required\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n <th mat-header-cell *matHeaderCellDef> Quantity </th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width\">\r\n <mat-label>Quantity</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\" type=\"number\"\r\n min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n Quantity can not be less than 1\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n Decimals not allowed\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\">#SkuNumber-{{element?.value}} </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n </table>\r\n <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"tabs-action\">\r\n <div class=\"tab-action-wrp\">\r\n <button mat-button matStepperPrevious>Back</button>\r\n </div>\r\n\r\n <div class=\"tab-action-wrp\">\r\n <button mat-button matStepperNext type=\"submit\" color=\"primary\" mat-raised-button>Add\r\n products</button>\r\n </div>\r\n </div>\r\n </form>\r\n </mat-step>\r\n </mat-stepper>\r\n</div>", styles: [".dropdown-section{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;gap:16px}mat-form-field{flex:1}.new-class{margin:20px 0;border:1px solid #ddd;border-radius:5px}.new-class.first-div.tbl-record-found{height:400px;overflow-y:auto}.mat-column-select{width:50px;text-align:center}.mat-header-cell,.mat-cell{text-align:center}button{align-self:flex-end;margin-top:20px}.row-summary{margin-top:20px;font-weight:700}.new-class td{border:1px solid #ddd;padding:10px}.new-class th{background-color:#f2f2f2;position:-webkit-sticky;position:sticky;top:0;transform:none;z-index:99;padding:10px}table{width:100%;border-collapse:collapse}.select-qunatity,.select-price{width:110px}.no-data-message{text-align:center;margin:20px 0;font-size:18px;color:#888}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused,.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:transparent}.OverlayDiv{position:fixed;display:block;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:500;cursor:pointer}.OverlayDivContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.product-selection-container{max-width:800px;margin:0 auto;text-align:center}.global-search{width:100%;margin-bottom:20px}.dropdown-selection{display:flex;flex-direction:column;width:100%}.row{display:flex;justify-content:space-between;width:100%;margin-bottom:20px;flex-wrap:wrap}.dropdown-item{flex:1;margin-right:10px}.dropdown-item:last-child{margin-right:0}.scrollable-div{max-height:350px;overflow-y:auto;margin-top:20px;margin-bottom:20px}.mat-table{width:100%;border-collapse:collapse}.dropdown-selection>div{display:flex;justify-content:space-between;border:1px solid #ddd;border-radius:5px;padding:20px;flex-wrap:wrap}.mat-form-field:last-child{margin-right:0}.search-btn-wrp{justify-content:flex-start}.no-child .mat-form-field{width:100%}.child .mat-form-field{flex:0 0 calc(50% - 20px)}.delete-btn-picker .mat-icon{color:#e53935!important;font-size:24px;width:auto;height:auto}.delete-btn-picker{margin:0}.product-selection-desc{text-align:left}.tabs-action{display:flex;justify-content:space-between}.tabs-action-step-one{justify-content:flex-end;display:flex}.dropdown-selection h5{font-size:18px}::ng-deep .product-selection-container .mat-form-field-infix{padding:10px 4px 17px!important}::ng-deep .product-selection-container .mat-form-field-flex{align-items:center}::ng-deep .product-selection-container .product-picker-icon{font-size:18px;width:auto;height:auto;color:#0000004d}::ng-deep .product-selection-container .mat-form-field-appearance-outline .mat-form-field-outline-thick,::ng-deep .product-selection-container .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#0000001f}\n"] }]
|
|
4002
|
+
args: [{ selector: 'ngx-mat-add-on-products', animations: [
|
|
4003
|
+
trigger('slideDown', [
|
|
4004
|
+
state('hidden', style({ height: '0px', opacity: 0, overflow: 'hidden' })),
|
|
4005
|
+
state('visible', style({ height: '*', opacity: 1 })),
|
|
4006
|
+
transition('hidden => visible', [
|
|
4007
|
+
animate('300ms ease-out')
|
|
4008
|
+
]),
|
|
4009
|
+
transition('visible => hidden', [
|
|
4010
|
+
animate('300ms ease-in')
|
|
4011
|
+
])
|
|
4012
|
+
])
|
|
4013
|
+
], template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n <div class=\"OverlayDivContent\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n <div class=\"mat-dialog-content\">\r\n <!--Search Start-->\r\n <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n <div class=\"bs\">\r\n <div class=\"search-icon\">\r\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n transform=\"rotate(0 0 0)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n </svg>\r\n </div>\r\n <form [formGroup]=\"form\">\r\n <div class=\"input-search\">\r\n <input type=\"text\" matInput placeholder=\"Search Product\" formControlName=\"searchProductName\">\r\n </div>\r\n </form>\r\n <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\"><mat-icon matBadge=\"4\"\r\n matBadgeSize=\"small\" class=\"material-icons-round\" aria-hidden=\"false\"\r\n aria-label=\"tune\">tune</mat-icon></button>\r\n </div>\r\n </div>\r\n <div class=\"search-btn\">\r\n <button mat-raised-button color=\"primary\"\r\n (click)=\"handleDropdownFilter();$event.stopPropagation();\">Search</button>\r\n </div>\r\n </div>\r\n <!--Search End-->\r\n <div class=\"product-selector\">\r\n <div [hidden]=\"currentPage !== 'select-products'\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"product-selection-container\">\r\n <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\" *ngIf=\"isVisible\">\r\n <h5>Advanced Filters</h5>\r\n <div class=\"row\">\r\n <mat-form-field *ngIf=\"dropdownL1\">\r\n <mat-label>{{dropdownL1Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n [matAutocomplete]=\"auto3\" (input)=\"onInputChange($event, 'category1')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category1')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownOne\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel1').value\" (click)=\"clearField('dropdownLevel1', 'category1')\">close</mat-icon>\r\n <mat-icon matSuffix>keyboard_arrow_down</mat-icon>\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"dropdownL2\">\r\n <mat-label>{{dropdownL2Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n [matAutocomplete]=\"auto4\" (input)=\"onInputChange($event, 'category2')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category2')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownTwo\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel2').value\" (click)=\"clearField('dropdownLevel2', 'category2')\">close</mat-icon>\r\n <mat-icon matSuffix\r\n [ngClass]=\"{'disabled-icon': isDisabled2}\">keyboard_arrow_down</mat-icon>\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"dropdownL3\">\r\n <mat-label>{{dropdownL3Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n [matAutocomplete]=\"auto3\" (input)=\"onInputChange($event, 'category3')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto3=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category3')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownThree\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel3').value\" (click)=\"clearField('dropdownLevel3', 'category3')\">close</mat-icon>\r\n <mat-icon matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled3}\">keyboard_arrow_down</mat-icon>\r\n </mat-form-field>\r\n <mat-form-field *ngIf=\"dropdownL4\">\r\n <mat-label>{{dropdownL4Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n [matAutocomplete]=\"auto4\" (input)=\"onInputChange($event, 'category4')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto4=\"matAutocomplete\"\r\n (optionSelected)=\"onOptionSelected($event, 'category4')\">\r\n <mat-option *ngFor=\"let option of filteredDropdownFour\"\r\n [value]=\"option\">{{option.name}}</mat-option>\r\n </mat-autocomplete>\r\n <mat-icon matSuffix *ngIf=\"form.get('dropdownLevel4').value\" (click)=\"clearField('dropdownLevel4', 'category4')\">close</mat-icon>\r\n <mat-icon matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled4}\">keyboard_arrow_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div #firstscrollableDiv id=\"firstscrollableDiv\" class=\"new-class first-div\"\r\n (scroll)=\"onScroll($event)\" [ngClass]=\"dataSource?.data?.length > 10 ? 'tbl-record-found': ''\">\r\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? toggleSelection(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\"> #SkuNumber-{{element?.value}} </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"addProductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: addProductsColumns;\"\r\n (click)=\"$event.stopPropagation();toggleSelection(row)\"\r\n [class.selected]=\"selection.isSelected(row)\"></tr>\r\n </table>\r\n <ng-template #noData>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n <p>Selected: {{ getSelectedRowsCount() }} Total Records: {{ getTotalRows() }} </p>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <div [hidden]=\"currentPage !== 'edit-save'\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"new-class\">\r\n <table mat-table [dataSource]=\"selectedDataSource\"\r\n *ngIf=\"selectedDataSource && selectedDataSource.data.length > 0; else showBlank\">\r\n <ng-container matColumnDef=\"delete\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let element\">\r\n <button class=\"delete-btn-picker\" mat-button\r\n (click)=\"$event.stopPropagation();removeRow($event, element)\">\r\n <mat-icon aria-hidden=\"false\" aria-label=\"Remove row\">delete</mat-icon>\r\n </button>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"categoryName\" *ngIf=\"showCategory\">\r\n <th mat-header-cell *matHeaderCellDef> Category Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.category}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"subCategory\" *ngIf=\"showSubcategory\">\r\n <th mat-header-cell *matHeaderCellDef>Sub Category </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element.subCategory}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"price\" *ngIf=\"showPrice\">\r\n <th mat-header-cell *matHeaderCellDef>Price</th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width select-price\">\r\n <mat-label>Price</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('price')\"\r\n placeholder=\"Please enter price\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('price').hasError('required')\">\r\n Price is required\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"Quantity\" *ngIf=\"showQuantity\">\r\n <th mat-header-cell *matHeaderCellDef> Quantity </th>\r\n <td mat-cell *matCellDef=\"let element; let i = index\">\r\n <mat-form-field class=\"example-full-width\">\r\n <mat-label>Quantity</mat-label>\r\n <input matInput [formControl]=\"selectedProducts.at(i).get('quantity')\"\r\n type=\"number\" min=\"1\" step=\"1\" (input)=\"onQuantityChange($event, i)\">\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('required')\">\r\n This field is required\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('min')\">\r\n Quantity can not be less than 1\r\n </mat-error>\r\n <mat-error *ngIf=\"selectedProducts.at(i).get('quantity').hasError('pattern')\">\r\n Decimals not allowed\r\n </mat-error>\r\n </mat-form-field>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\">#SkuNumber-{{element?.value}} </td>\r\n </ng-container>\r\n <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n </table>\r\n <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n color=\"primary\" mat-raised-button>Next</button>\r\n <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n </div>\r\n <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n <div class=\"tab-action-wrp\">\r\n <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add\r\n products</button>\r\n </div>\r\n </div>\r\n</mat-dialog-actions>", styles: [".basic-search{display:flex;align-items:center;width:100%}.bs{border:1px solid #DADCE0;border-radius:5px;padding:0 15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.bs mat-icon{color:#0006}.search-icon{margin:0;display:flex}.search-icon mat-icon{color:#0006}.search-icon svg{width:24px;height:24px}.search-icon svg path{fill:#999}.input-search{margin:0;border:0;width:100%}.input-search input{border:0;padding:0 15px;width:100%;font-size:15px}.input-search input:focus{border:0;outline:0 none}.advfilter{display:flex;margin-left:auto}.advfilter button{border:0;background-color:transparent;margin:0;padding:0;display:flex}.advfilter button mat-icon{color:#0006}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}::ng-deep .basic-search .mat-badge-small.mat-badge-after .mat-badge-content{background:#f44336!important}.content{background-color:#fff;border:1px solid #DADCE0;margin-top:10px;padding:10px;min-height:400px}\n"] }]
|
|
3932
4014
|
}], ctorParameters: function () {
|
|
3933
4015
|
return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
3934
4016
|
type: Inject,
|
|
@@ -3937,9 +4019,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
|
|
|
3937
4019
|
}, propDecorators: { firstscrollableDiv: [{
|
|
3938
4020
|
type: ViewChild,
|
|
3939
4021
|
args: ['firstscrollableDiv']
|
|
3940
|
-
}], stepper: [{
|
|
3941
|
-
type: ViewChild,
|
|
3942
|
-
args: ['stepper']
|
|
3943
4022
|
}] } });
|
|
3944
4023
|
|
|
3945
4024
|
const ELEMENT_DATA = [];
|
|
@@ -3978,12 +4057,6 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
|
|
|
3978
4057
|
this.dropdownL4Label = '';
|
|
3979
4058
|
this.isCustomerCountryFiltered = false;
|
|
3980
4059
|
this.emptyArray = false;
|
|
3981
|
-
if (this.element && this.element.nativeElement && this.instance) {
|
|
3982
|
-
// Add custom classes to elements.
|
|
3983
|
-
if (this.instance.component.customClass) {
|
|
3984
|
-
this.element.nativeElement.classList.add(this.instance.component.customClass);
|
|
3985
|
-
}
|
|
3986
|
-
}
|
|
3987
4060
|
}
|
|
3988
4061
|
getColumnLabel(column) {
|
|
3989
4062
|
return column.label || column.key;
|
|
@@ -4001,6 +4074,7 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
|
|
|
4001
4074
|
// }
|
|
4002
4075
|
setInstance(instance) {
|
|
4003
4076
|
var _a, _b;
|
|
4077
|
+
//const newProductPickerFlag = instance?.component?.attributes;
|
|
4004
4078
|
const checkAttribute = (_a = instance === null || instance === void 0 ? void 0 : instance.component) === null || _a === void 0 ? void 0 : _a.attributes;
|
|
4005
4079
|
this.showNewProductPicker = this.commonService.checkIsAttributeTrue(checkAttribute, "newproductpicker");
|
|
4006
4080
|
this.showCategory = this.commonService.checkIsAttributeTrue(checkAttribute, "showCategory");
|
|
@@ -4099,12 +4173,6 @@ class MaterialDataGridComponent extends MaterialNestedComponent {
|
|
|
4099
4173
|
});
|
|
4100
4174
|
return viewContainer ? viewContainer : null;
|
|
4101
4175
|
};
|
|
4102
|
-
if (this.element && this.element.nativeElement && this.instance) {
|
|
4103
|
-
// Add custom classes to elements.
|
|
4104
|
-
if (this.instance.component.customClass) {
|
|
4105
|
-
this.element.nativeElement.classList.add(this.instance.component.customClass);
|
|
4106
|
-
}
|
|
4107
|
-
}
|
|
4108
4176
|
}
|
|
4109
4177
|
removeColumn(columnName) {
|
|
4110
4178
|
this.displayedColumnsNew = this.displayedColumnsNew.filter(column => column !== columnName);
|
|
@@ -4885,7 +4953,7 @@ MaterialWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
4885
4953
|
<button *ngIf="instance.hasButton('submit')" mat-raised-button color="primary" (click)="submit()">Submit</button>
|
|
4886
4954
|
</div>
|
|
4887
4955
|
</mat-step>
|
|
4888
|
-
</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:
|
|
4956
|
+
</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"] }] });
|
|
4889
4957
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialWizardComponent, decorators: [{
|
|
4890
4958
|
type: Component,
|
|
4891
4959
|
args: [{ selector: 'mat-formio-wizard', template: `
|