ngx-render-material-forms 2.2.1 → 2.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/add-on-products/add-on-products.component.mjs +16 -11
- package/esm2020/lib/components/datagrid/datagrid.component.mjs +5 -5
- package/fesm2015/ngx-render-material-forms.js +19 -14
- package/fesm2015/ngx-render-material-forms.mjs.map +1 -1
- package/fesm2020/ngx-render-material-forms.js +19 -14
- package/fesm2020/ngx-render-material-forms.mjs.map +1 -1
- package/lib/components/add-on-products/add-on-products.component.d.ts +2 -2
- package/package.json +1 -1
|
@@ -3539,8 +3539,8 @@ class AddOnProductsComponent {
|
|
|
3539
3539
|
category: [(product === null || product === void 0 ? void 0 : product.category) || ''],
|
|
3540
3540
|
subCategory: [(product === null || product === void 0 ? void 0 : product.subCategory) || ''],
|
|
3541
3541
|
value: [(product === null || product === void 0 ? void 0 : product.value) || ''],
|
|
3542
|
-
|
|
3543
|
-
|
|
3542
|
+
otherInformation0: [(product === null || product === void 0 ? void 0 : product.otherInformation0) || ''],
|
|
3543
|
+
otherInformation1: [(product === null || product === void 0 ? void 0 : product.otherInformation1) || '']
|
|
3544
3544
|
}));
|
|
3545
3545
|
});
|
|
3546
3546
|
selectedProductsArray.controls.forEach(control => {
|
|
@@ -3690,7 +3690,6 @@ class AddOnProductsComponent {
|
|
|
3690
3690
|
}
|
|
3691
3691
|
}
|
|
3692
3692
|
onSubmit() {
|
|
3693
|
-
console.log('this.form=>', this.form);
|
|
3694
3693
|
if (this.form.valid) {
|
|
3695
3694
|
this.matDialogRef.close({
|
|
3696
3695
|
data: {
|
|
@@ -3760,8 +3759,8 @@ class AddOnProductsComponent {
|
|
|
3760
3759
|
category: [(product === null || product === void 0 ? void 0 : product.category) || ''],
|
|
3761
3760
|
subCategory: [(product === null || product === void 0 ? void 0 : product.subCategory) || ''],
|
|
3762
3761
|
value: [(product === null || product === void 0 ? void 0 : product.value) || ''],
|
|
3763
|
-
|
|
3764
|
-
|
|
3762
|
+
otherInformation0: [(product === null || product === void 0 ? void 0 : product.otherInformation0) || ''],
|
|
3763
|
+
otherInformation1: [(product === null || product === void 0 ? void 0 : product.otherInformation1) || '']
|
|
3765
3764
|
});
|
|
3766
3765
|
if (productFormGroup) {
|
|
3767
3766
|
selectedProductsArray.push(productFormGroup);
|
|
@@ -4077,8 +4076,6 @@ class AddOnProductsComponent {
|
|
|
4077
4076
|
}
|
|
4078
4077
|
resetTable() {
|
|
4079
4078
|
var _a, _b, _c;
|
|
4080
|
-
this.dataSource.data = [];
|
|
4081
|
-
this.spinnerFlag = false;
|
|
4082
4079
|
this.form.get('dropdownLevel1').setValue(null);
|
|
4083
4080
|
this.form.get('dropdownLevel2').setValue(null);
|
|
4084
4081
|
this.form.get('dropdownLevel3').setValue(null);
|
|
@@ -4086,19 +4083,27 @@ class AddOnProductsComponent {
|
|
|
4086
4083
|
(_a = this.form.get('dropdownLevel2')) === null || _a === void 0 ? void 0 : _a.disable();
|
|
4087
4084
|
(_b = this.form.get('dropdownLevel3')) === null || _b === void 0 ? void 0 : _b.disable();
|
|
4088
4085
|
(_c = this.form.get('dropdownLevel4')) === null || _c === void 0 ? void 0 : _c.disable();
|
|
4089
|
-
this.searchQuery = '';
|
|
4090
4086
|
this.levelOneId = 0;
|
|
4091
4087
|
this.levelTwoId = 0;
|
|
4092
4088
|
this.levelThreeId = 0;
|
|
4093
4089
|
this.levelFourId = 0;
|
|
4090
|
+
this.pageNumber = 1;
|
|
4091
|
+
this.pageSize = 20;
|
|
4094
4092
|
this.updateActiveFiltersCount();
|
|
4093
|
+
if (this.searchQuery === '') {
|
|
4094
|
+
this.dataSource.data = [];
|
|
4095
|
+
this.spinnerFlag = false;
|
|
4096
|
+
}
|
|
4097
|
+
else {
|
|
4098
|
+
this.getProducts(false);
|
|
4099
|
+
}
|
|
4095
4100
|
}
|
|
4096
4101
|
shouldResetTable(search, levelOneId, levelTwoId, levelThreeId, levelFourId) {
|
|
4097
4102
|
return search === '' && levelOneId === 0 && levelTwoId === 0 && levelThreeId === 0 && levelFourId === 0;
|
|
4098
4103
|
}
|
|
4099
4104
|
}
|
|
4100
4105
|
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 });
|
|
4101
|
-
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 [ngClass]=\"dataSource?.data?.length > 0 ? 'products-scroll-visible': ''\">\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=\"basic-search-wrp\">\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 (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput\r\n placeholder=\"Search Product\" formControlName=\"searchProductName\"\r\n (input)=\"clearIfEmpty($event)\">\r\n </div>\r\n </form>\r\n <!-- <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n <mat-icon class=\"material-icons-round\" aria-hidden=\"false\"\r\n aria-label=\"tune\">tune\r\n </mat-icon>\r\n <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n </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\" *ngIf=\"isVisible && dropdownL1\">\r\n <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n <div class=\"title-adv\">\r\n <h5>Advanced Filters</h5>\r\n <button class=\"clr-all-picker\" type=\"button\" (click)=\"resetTable()\" *ngIf=\"activeFiltersCount > 0\">Clear All</button>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL1Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n [matAutocomplete]=\"auto3\"\r\n (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\"\r\n (click)=\"clearField('dropdownLevel1', 'category1')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix>arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL2Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n [matAutocomplete]=\"auto4\"\r\n (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\"\r\n (click)=\"clearField('dropdownLevel2', 'category2')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disabled-icon': isDisabled2}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL3Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n [matAutocomplete]=\"auto3\"\r\n (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\"\r\n (click)=\"clearField('dropdownLevel3', 'category3')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled3}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL4Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n [matAutocomplete]=\"auto4\"\r\n (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\"\r\n (click)=\"clearField('dropdownLevel4', 'category4')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled4}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\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 > 0 ? '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\"> {{element?.skuNumber}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> Inventory </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.inventory}} </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 class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No records to show at the moment</h3>\r\n <p>Please modify your search criteria to find the desired result</p>\r\n </div>\r\n\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n <div>Selected: <strong>{{ getSelectedRowsCount() }}</strong> </div>\r\n <div>Total Records: <strong>{{ getTotalRecords }}</strong></div>\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 [ngClass]=\"selectedDataSource && selectedDataSource.data.length > 0 ? 'added-products': ''\">\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\">{{element?.skuNumber}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> Inventory </th>\r\n <td mat-cell *matCellDef=\"let element\">{{element?.inventory}} </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 <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n <div class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No Product added</h3>\r\n <p>Please go back and start adding products</p>\r\n </div>\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</button>\r\n </div>\r\n </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.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%)}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:20px}.basic-search-wrp{border:1px solid #DADCE0;border-radius:5px;padding-left:15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.basic-search-wrp mat-icon{color:#0006}.basic-search-wrp form{width:100%}.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%;padding:0 18px 0 10px}.input-search input{border:0;width:100%;font-size:15px;line-height:1}.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;position:relative}.advfilter button mat-icon{color:#0006}.advfilter button span{font-weight:600;font-size:10px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;width:20px;height:20px;color:#fff!important;border-radius:50%;background-color:#f44336!important;position:absolute;top:-5px;right:-10px}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}.product-selection-container{border:1px solid #DADCE0;padding:20px;margin-bottom:20px;border-radius:5px}.product-selection-container h5{margin:0;color:#202020!important;font-size:16px!important}.pp-empty-state{max-width:420px;margin:0 auto;padding:50px 0;text-align:center}.img-empty-state{width:100%;margin-bottom:20px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px!important;margin:0 0 5px;padding:0;font-weight:400;color:#202020!important}.pp-empty-state p{font-size:15px!important;margin:0 0 20px!important;padding:0;color:#656667!important}.mat-dialog-content{max-height:none!important;overflow:hidden!important}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;min-height:104px;max-height:296px;overflow-y:auto;height:100%}.tbl-record-found table{border-collapse:separate}.tbl-record-found tr:last-child td{border-bottom:none}.tbl-record-found thead,.tbl-record-found th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.tbl-record-found th.mat-header-cell:first-of-type,.tbl-record-found td.mat-cell:first-of-type,.tbl-record-found td.mat-footer-cell:first-of-type{width:70px}.row-summary{padding:15px 25px;border-left:1px solid #0000001f;border-top:1px solid #0000001f;display:flex;justify-content:space-between;border-right:1px solid #0000001f;border-bottom:1px solid #0000001f;border-radius:0 0 5px 5px}.row-summary div{margin-right:30px}button.delete-btn-picker{background:transparent!important;padding:0!important;min-width:auto!important}button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker:hover .mat-button-focus-overlay{opacity:0!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.6!important}mat-icon.iconclose{line-height:2!important;font-size:120%!important}.added-products{border:1px solid #0000001f;border-bottom:none;border-radius:5px;min-height:133px;max-height:444px;overflow-y:auto;height:100%}.added-products table{border-collapse:separate}.added-products thead,.added-products th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.added-products th.mat-header-cell:first-of-type,.added-products td.mat-cell:first-of-type,.added-products td.mat-footer-cell:first-of-type{width:70px}.mat-header-cell{font-weight:500!important;color:#0000008a!important}.clr-all-picker{display:inline-block;border:0;outline:0 none;padding:0;background-color:transparent;color:#2196f3;margin-left:20px}.title-adv{display:flex;align-items:center;margin-bottom:15px}@media only screen and (max-width:1545px){.pp-empty-state h3{font-size:18px}.pp-empty-state p{font-size:14px}.pp-empty-state{padding:20px 0;max-width:392px}.product-selection-container h5{font-size:14px;margin-bottom:5px}.product-selection-container{padding:15px 20px}.basic-search{margin-bottom:20px}.mat-dialog-heading{margin-bottom:10px}.mat-dialog-title{font-size:18px}.mat-dialog-content{max-height:60vh!important;overflow:auto!important}}\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: [
|
|
4106
|
+
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 [ngClass]=\"dataSource?.data?.length > 0 ? 'products-scroll-visible': ''\">\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=\"basic-search-wrp\">\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 (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput\r\n placeholder=\"Search Product\" formControlName=\"searchProductName\"\r\n (input)=\"clearIfEmpty($event)\">\r\n </div>\r\n </form>\r\n <!-- <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n <mat-icon class=\"material-icons-round\" aria-hidden=\"false\"\r\n aria-label=\"tune\">tune\r\n </mat-icon>\r\n <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n </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\" *ngIf=\"isVisible && dropdownL1\">\r\n <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n <div class=\"title-adv\">\r\n <h5>Advanced Filters</h5>\r\n <button class=\"clr-all-picker\" type=\"button\" (click)=\"resetTable()\" *ngIf=\"activeFiltersCount > 0\">Clear All</button>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL1Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n [matAutocomplete]=\"auto3\"\r\n (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\"\r\n (click)=\"clearField('dropdownLevel1', 'category1')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix>arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL2Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n [matAutocomplete]=\"auto4\"\r\n (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\"\r\n (click)=\"clearField('dropdownLevel2', 'category2')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disabled-icon': isDisabled2}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL3Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n [matAutocomplete]=\"auto5\"\r\n (input)=\"onInputChange($event, 'category3')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto5=\"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\"\r\n (click)=\"clearField('dropdownLevel3', 'category3')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled3}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL4Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n [matAutocomplete]=\"auto6\"\r\n (input)=\"onInputChange($event, 'category4')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto6=\"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\"\r\n (click)=\"clearField('dropdownLevel4', 'category4')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled4}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\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 > 0 ? '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\"> {{element?.otherInformation0}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> Inventory </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation1}} </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 class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No records to show at the moment</h3>\r\n <p>Please modify your search criteria to find the desired result</p>\r\n </div>\r\n\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n <div>Selected: <strong>{{ getSelectedRowsCount() }}</strong> </div>\r\n <div>Total Records: <strong>{{ getTotalRecords }}</strong></div>\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 [ngClass]=\"selectedDataSource && selectedDataSource.data.length > 0 ? 'added-products': ''\">\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\">{{element?.otherInformation0}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> Inventory </th>\r\n <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation1}} </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 <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n <div class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No Product added</h3>\r\n <p>Please go back and start adding products</p>\r\n </div>\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</button>\r\n </div>\r\n </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.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%)}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:20px}.basic-search-wrp{border:1px solid #DADCE0;border-radius:5px;padding-left:15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.basic-search-wrp mat-icon{color:#0006}.basic-search-wrp form{width:100%}.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%;padding:0 18px 0 10px}.input-search input{border:0;width:100%;font-size:15px;line-height:1}.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;position:relative}.advfilter button mat-icon{color:#0006}.advfilter button span{font-weight:600;font-size:10px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;width:20px;height:20px;color:#fff!important;border-radius:50%;background-color:#f44336!important;position:absolute;top:-5px;right:-10px}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}.product-selection-container{border:1px solid #DADCE0;padding:20px;margin-bottom:20px;border-radius:5px}.product-selection-container h5{margin:0;color:#202020!important;font-size:16px!important}.pp-empty-state{max-width:420px;margin:0 auto;padding:50px 0;text-align:center}.img-empty-state{width:100%;margin-bottom:20px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px!important;margin:0 0 5px;padding:0;font-weight:400;color:#202020!important}.pp-empty-state p{font-size:15px!important;margin:0 0 20px!important;padding:0;color:#656667!important}.mat-dialog-content{max-height:none!important;overflow:hidden!important}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;min-height:104px;max-height:296px;overflow-y:auto;height:100%}.tbl-record-found table{border-collapse:separate}.tbl-record-found tr:last-child td{border-bottom:none}.tbl-record-found thead,.tbl-record-found th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.tbl-record-found th.mat-header-cell:first-of-type,.tbl-record-found td.mat-cell:first-of-type,.tbl-record-found td.mat-footer-cell:first-of-type{width:70px}.row-summary{padding:15px 25px;border-left:1px solid #0000001f;border-top:1px solid #0000001f;display:flex;justify-content:space-between;border-right:1px solid #0000001f;border-bottom:1px solid #0000001f;border-radius:0 0 5px 5px}.row-summary div{margin-right:30px}button.delete-btn-picker{background:transparent!important;padding:0!important;min-width:auto!important}button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker:hover .mat-button-focus-overlay{opacity:0!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.6!important}mat-icon.iconclose{line-height:2!important;font-size:120%!important}.added-products{border:1px solid #0000001f;border-bottom:none;border-radius:5px;min-height:133px;max-height:444px;overflow-y:auto;height:100%}.added-products table{border-collapse:separate}.added-products thead,.added-products th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.added-products th.mat-header-cell:first-of-type,.added-products td.mat-cell:first-of-type,.added-products td.mat-footer-cell:first-of-type{width:70px}.mat-header-cell{font-weight:500!important;color:#0000008a!important}.clr-all-picker{display:inline-block;border:0;outline:0 none;padding:0;background-color:transparent;color:#2196f3;margin-left:20px}.title-adv{display:flex;align-items:center;margin-bottom:15px}@media only screen and (max-width:1545px){.pp-empty-state h3{font-size:18px}.pp-empty-state p{font-size:14px}.pp-empty-state{padding:20px 0;max-width:392px}.product-selection-container h5{font-size:14px;margin-bottom:5px}.product-selection-container{padding:15px 20px}.basic-search{margin-bottom:20px}.mat-dialog-heading{margin-bottom:10px}.mat-dialog-title{font-size:18px}.mat-dialog-content{max-height:60vh!important;overflow:auto!important}}\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: [
|
|
4102
4107
|
trigger('slideDown', [
|
|
4103
4108
|
state('hidden', style({ height: '0px', opacity: 0, overflow: 'hidden' })),
|
|
4104
4109
|
state('visible', style({ height: '*', opacity: 1 })),
|
|
@@ -4123,7 +4128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
|
|
|
4123
4128
|
animate('300ms ease-in')
|
|
4124
4129
|
])
|
|
4125
4130
|
])
|
|
4126
|
-
], 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 [ngClass]=\"dataSource?.data?.length > 0 ? 'products-scroll-visible': ''\">\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=\"basic-search-wrp\">\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 (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput\r\n placeholder=\"Search Product\" formControlName=\"searchProductName\"\r\n (input)=\"clearIfEmpty($event)\">\r\n </div>\r\n </form>\r\n <!-- <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n <mat-icon class=\"material-icons-round\" aria-hidden=\"false\"\r\n aria-label=\"tune\">tune\r\n </mat-icon>\r\n <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n </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\" *ngIf=\"isVisible && dropdownL1\">\r\n <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n <div class=\"title-adv\">\r\n <h5>Advanced Filters</h5>\r\n <button class=\"clr-all-picker\" type=\"button\" (click)=\"resetTable()\" *ngIf=\"activeFiltersCount > 0\">Clear All</button>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL1Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n [matAutocomplete]=\"auto3\"\r\n (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\"\r\n (click)=\"clearField('dropdownLevel1', 'category1')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix>arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL2Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n [matAutocomplete]=\"auto4\"\r\n (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\"\r\n (click)=\"clearField('dropdownLevel2', 'category2')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disabled-icon': isDisabled2}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL3Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n [matAutocomplete]=\"auto3\"\r\n (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\"\r\n (click)=\"clearField('dropdownLevel3', 'category3')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled3}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL4Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n [matAutocomplete]=\"auto4\"\r\n (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\"\r\n (click)=\"clearField('dropdownLevel4', 'category4')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled4}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\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 > 0 ? '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\"> {{element?.skuNumber}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> Inventory </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.inventory}} </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 class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No records to show at the moment</h3>\r\n <p>Please modify your search criteria to find the desired result</p>\r\n </div>\r\n\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n <div>Selected: <strong>{{ getSelectedRowsCount() }}</strong> </div>\r\n <div>Total Records: <strong>{{ getTotalRecords }}</strong></div>\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 [ngClass]=\"selectedDataSource && selectedDataSource.data.length > 0 ? 'added-products': ''\">\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\">{{element?.skuNumber}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> Inventory </th>\r\n <td mat-cell *matCellDef=\"let element\">{{element?.inventory}} </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 <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n <div class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No Product added</h3>\r\n <p>Please go back and start adding products</p>\r\n </div>\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</button>\r\n </div>\r\n </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.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%)}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:20px}.basic-search-wrp{border:1px solid #DADCE0;border-radius:5px;padding-left:15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.basic-search-wrp mat-icon{color:#0006}.basic-search-wrp form{width:100%}.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%;padding:0 18px 0 10px}.input-search input{border:0;width:100%;font-size:15px;line-height:1}.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;position:relative}.advfilter button mat-icon{color:#0006}.advfilter button span{font-weight:600;font-size:10px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;width:20px;height:20px;color:#fff!important;border-radius:50%;background-color:#f44336!important;position:absolute;top:-5px;right:-10px}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}.product-selection-container{border:1px solid #DADCE0;padding:20px;margin-bottom:20px;border-radius:5px}.product-selection-container h5{margin:0;color:#202020!important;font-size:16px!important}.pp-empty-state{max-width:420px;margin:0 auto;padding:50px 0;text-align:center}.img-empty-state{width:100%;margin-bottom:20px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px!important;margin:0 0 5px;padding:0;font-weight:400;color:#202020!important}.pp-empty-state p{font-size:15px!important;margin:0 0 20px!important;padding:0;color:#656667!important}.mat-dialog-content{max-height:none!important;overflow:hidden!important}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;min-height:104px;max-height:296px;overflow-y:auto;height:100%}.tbl-record-found table{border-collapse:separate}.tbl-record-found tr:last-child td{border-bottom:none}.tbl-record-found thead,.tbl-record-found th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.tbl-record-found th.mat-header-cell:first-of-type,.tbl-record-found td.mat-cell:first-of-type,.tbl-record-found td.mat-footer-cell:first-of-type{width:70px}.row-summary{padding:15px 25px;border-left:1px solid #0000001f;border-top:1px solid #0000001f;display:flex;justify-content:space-between;border-right:1px solid #0000001f;border-bottom:1px solid #0000001f;border-radius:0 0 5px 5px}.row-summary div{margin-right:30px}button.delete-btn-picker{background:transparent!important;padding:0!important;min-width:auto!important}button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker:hover .mat-button-focus-overlay{opacity:0!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.6!important}mat-icon.iconclose{line-height:2!important;font-size:120%!important}.added-products{border:1px solid #0000001f;border-bottom:none;border-radius:5px;min-height:133px;max-height:444px;overflow-y:auto;height:100%}.added-products table{border-collapse:separate}.added-products thead,.added-products th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.added-products th.mat-header-cell:first-of-type,.added-products td.mat-cell:first-of-type,.added-products td.mat-footer-cell:first-of-type{width:70px}.mat-header-cell{font-weight:500!important;color:#0000008a!important}.clr-all-picker{display:inline-block;border:0;outline:0 none;padding:0;background-color:transparent;color:#2196f3;margin-left:20px}.title-adv{display:flex;align-items:center;margin-bottom:15px}@media only screen and (max-width:1545px){.pp-empty-state h3{font-size:18px}.pp-empty-state p{font-size:14px}.pp-empty-state{padding:20px 0;max-width:392px}.product-selection-container h5{font-size:14px;margin-bottom:5px}.product-selection-container{padding:15px 20px}.basic-search{margin-bottom:20px}.mat-dialog-heading{margin-bottom:10px}.mat-dialog-title{font-size:18px}.mat-dialog-content{max-height:60vh!important;overflow:auto!important}}\n"] }]
|
|
4131
|
+
], 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 [ngClass]=\"dataSource?.data?.length > 0 ? 'products-scroll-visible': ''\">\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=\"basic-search-wrp\">\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 (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput\r\n placeholder=\"Search Product\" formControlName=\"searchProductName\"\r\n (input)=\"clearIfEmpty($event)\">\r\n </div>\r\n </form>\r\n <!-- <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\r\n <mat-icon class=\"material-icons-round\" aria-hidden=\"false\"\r\n aria-label=\"tune\">tune\r\n </mat-icon>\r\n <span *ngIf=\"activeFiltersCount > 0\" class=\"custom-badge\">{{ activeFiltersCount }}</span>\r\n </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\" *ngIf=\"isVisible && dropdownL1\">\r\n <div class=\"dropdown-selection\" *ngIf=\"dropdownL1\">\r\n <div [ngClass]=\"dropDownCount === 1 ? 'no-child': 'child'\">\r\n <div class=\"title-adv\">\r\n <h5>Advanced Filters</h5>\r\n <button class=\"clr-all-picker\" type=\"button\" (click)=\"resetTable()\" *ngIf=\"activeFiltersCount > 0\">Clear All</button>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL1\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL1Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel1\"\r\n [matAutocomplete]=\"auto3\"\r\n (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\"\r\n (click)=\"clearField('dropdownLevel1', 'category1')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix>arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL2\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL2Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel2\"\r\n [matAutocomplete]=\"auto4\"\r\n (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\"\r\n (click)=\"clearField('dropdownLevel2', 'category2')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disabled-icon': isDisabled2}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL3\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL3Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel3\"\r\n [matAutocomplete]=\"auto5\"\r\n (input)=\"onInputChange($event, 'category3')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto5=\"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\"\r\n (click)=\"clearField('dropdownLevel3', 'category3')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled3}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"example-full-width\">\r\n <mat-form-field *ngIf=\"dropdownL4\" class=\"example-full-width\">\r\n <mat-label>{{dropdownL4Label}}</mat-label>\r\n <input type=\"text\" matInput formControlName=\"dropdownLevel4\"\r\n [matAutocomplete]=\"auto6\"\r\n (input)=\"onInputChange($event, 'category4')\">\r\n <mat-autocomplete [displayWith]=\"displayFn\" #auto6=\"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\"\r\n (click)=\"clearField('dropdownLevel4', 'category4')\"\r\n class=\"iconclose\">close</mat-icon>\r\n <mat-icon class=\"icondropdown\" matSuffix\r\n [ngClass]=\"{'disable-icon': isDisabled4}\">arrow_drop_down</mat-icon>\r\n </mat-form-field>\r\n </div>\r\n </div>\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 > 0 ? '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\"> {{element?.otherInformation0}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> Inventory </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.otherInformation1}} </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 class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No records to show at the moment</h3>\r\n <p>Please modify your search criteria to find the desired result</p>\r\n </div>\r\n\r\n </div>\r\n </ng-template>\r\n </div>\r\n <div class=\"row-summary\" *ngIf=\"dataSource && dataSource?.data?.length > 0\">\r\n <div>Selected: <strong>{{ getSelectedRowsCount() }}</strong> </div>\r\n <div>Total Records: <strong>{{ getTotalRecords }}</strong></div>\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 [ngClass]=\"selectedDataSource && selectedDataSource.data.length > 0 ? 'added-products': ''\">\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\">{{element?.otherInformation0}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"inventory\" *ngIf=\"showInventory\">\r\n <th mat-header-cell *matHeaderCellDef> Inventory </th>\r\n <td mat-cell *matCellDef=\"let element\">{{element?.otherInformation1}} </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 <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n <div class=\"pp-empty-state\">\r\n <div class=\"img-empty-state\">\r\n <img [src]=\"emptyImage\" alt=\"\">\r\n </div>\r\n <h3>No Product added</h3>\r\n <p>Please go back and start adding products</p>\r\n </div>\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</button>\r\n </div>\r\n </div>\r\n</mat-dialog-actions>", styles: [".mat-dialog-heading{margin:0 0 20px;position:relative;display:flex;align-items:center}:host ::ng-deep .mat-dialog-title{width:100%;padding:0 40px;margin:0;font-family:Inter,sans-serif;font-size:20px;color:#000;letter-spacing:normal;text-align:center}.mat-dialog-close mat-icon{color:#000}.example-full-width{width:100%}.mat-dialog-content p{margin-bottom:15px;font-family:Inter,sans-serif}.mat-dialog-content a{color:#2196f3}.mat-dialog-content a:hover{text-decoration:none}:host ::ng-deep .mat-dialog-actions{justify-content:flex-end}.mat-stroked-button.mat-primary{color:#0078d6}.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%)}.basic-search{display:flex;align-items:center;width:100%;margin-bottom:20px}.basic-search-wrp{border:1px solid #DADCE0;border-radius:5px;padding-left:15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.basic-search-wrp mat-icon{color:#0006}.basic-search-wrp form{width:100%}.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%;padding:0 18px 0 10px}.input-search input{border:0;width:100%;font-size:15px;line-height:1}.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;position:relative}.advfilter button mat-icon{color:#0006}.advfilter button span{font-weight:600;font-size:10px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;justify-content:center;width:20px;height:20px;color:#fff!important;border-radius:50%;background-color:#f44336!important;position:absolute;top:-5px;right:-10px}.search-btn{margin-left:auto;min-width:137px}.search-btn button{box-shadow:none;height:46px;width:100%}.product-selection-container{border:1px solid #DADCE0;padding:20px;margin-bottom:20px;border-radius:5px}.product-selection-container h5{margin:0;color:#202020!important;font-size:16px!important}.pp-empty-state{max-width:420px;margin:0 auto;padding:50px 0;text-align:center}.img-empty-state{width:100%;margin-bottom:20px}.img-empty-state img{width:100%}.pp-empty-state h3{font-size:20px!important;margin:0 0 5px;padding:0;font-weight:400;color:#202020!important}.pp-empty-state p{font-size:15px!important;margin:0 0 20px!important;padding:0;color:#656667!important}.mat-dialog-content{max-height:none!important;overflow:hidden!important}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;min-height:104px;max-height:296px;overflow-y:auto;height:100%}.tbl-record-found table{border-collapse:separate}.tbl-record-found tr:last-child td{border-bottom:none}.tbl-record-found thead,.tbl-record-found th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.tbl-record-found th.mat-header-cell:first-of-type,.tbl-record-found td.mat-cell:first-of-type,.tbl-record-found td.mat-footer-cell:first-of-type{width:70px}.row-summary{padding:15px 25px;border-left:1px solid #0000001f;border-top:1px solid #0000001f;display:flex;justify-content:space-between;border-right:1px solid #0000001f;border-bottom:1px solid #0000001f;border-radius:0 0 5px 5px}.row-summary div{margin-right:30px}button.delete-btn-picker{background:transparent!important;padding:0!important;min-width:auto!important}button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker:hover .mat-button-focus-overlay{opacity:0!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.6!important}mat-icon.iconclose{line-height:2!important;font-size:120%!important}.added-products{border:1px solid #0000001f;border-bottom:none;border-radius:5px;min-height:133px;max-height:444px;overflow-y:auto;height:100%}.added-products table{border-collapse:separate}.added-products thead,.added-products th{position:-webkit-sticky;position:sticky;top:0;z-index:100;background-color:#fff}.added-products th.mat-header-cell:first-of-type,.added-products td.mat-cell:first-of-type,.added-products td.mat-footer-cell:first-of-type{width:70px}.mat-header-cell{font-weight:500!important;color:#0000008a!important}.clr-all-picker{display:inline-block;border:0;outline:0 none;padding:0;background-color:transparent;color:#2196f3;margin-left:20px}.title-adv{display:flex;align-items:center;margin-bottom:15px}@media only screen and (max-width:1545px){.pp-empty-state h3{font-size:18px}.pp-empty-state p{font-size:14px}.pp-empty-state{padding:20px 0;max-width:392px}.product-selection-container h5{font-size:14px;margin-bottom:5px}.product-selection-container{padding:15px 20px}.basic-search{margin-bottom:20px}.mat-dialog-heading{margin-bottom:10px}.mat-dialog-title{font-size:18px}.mat-dialog-content{max-height:60vh!important;overflow:auto!important}}\n"] }]
|
|
4127
4132
|
}], ctorParameters: function () {
|
|
4128
4133
|
return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
4129
4134
|
type: Inject,
|
|
@@ -4531,13 +4536,13 @@ MaterialDataGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
|
|
|
4531
4536
|
<!-- SKU Column -->
|
|
4532
4537
|
<ng-container matColumnDef="skuNumber" *ngIf="showSkuNumber">
|
|
4533
4538
|
<th mat-header-cell *matHeaderCellDef> SKU Number </th>
|
|
4534
|
-
<td mat-cell *matCellDef="let element"> {{element?.
|
|
4539
|
+
<td mat-cell *matCellDef="let element"> {{element?.otherInformation0}} </td>
|
|
4535
4540
|
</ng-container>
|
|
4536
4541
|
|
|
4537
4542
|
<!-- Inventory Column -->
|
|
4538
4543
|
<ng-container matColumnDef="inventory" *ngIf="showInventory">
|
|
4539
4544
|
<th mat-header-cell *matHeaderCellDef> Inventory </th>
|
|
4540
|
-
<td mat-cell *matCellDef="let element"> {{element?.
|
|
4545
|
+
<td mat-cell *matCellDef="let element"> {{element?.otherInformation1}} </td>
|
|
4541
4546
|
</ng-container>
|
|
4542
4547
|
|
|
4543
4548
|
<tr mat-header-row *matHeaderRowDef="displayedColumnsNew"></tr>
|
|
@@ -4679,13 +4684,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
|
|
|
4679
4684
|
<!-- SKU Column -->
|
|
4680
4685
|
<ng-container matColumnDef="skuNumber" *ngIf="showSkuNumber">
|
|
4681
4686
|
<th mat-header-cell *matHeaderCellDef> SKU Number </th>
|
|
4682
|
-
<td mat-cell *matCellDef="let element"> {{element?.
|
|
4687
|
+
<td mat-cell *matCellDef="let element"> {{element?.otherInformation0}} </td>
|
|
4683
4688
|
</ng-container>
|
|
4684
4689
|
|
|
4685
4690
|
<!-- Inventory Column -->
|
|
4686
4691
|
<ng-container matColumnDef="inventory" *ngIf="showInventory">
|
|
4687
4692
|
<th mat-header-cell *matHeaderCellDef> Inventory </th>
|
|
4688
|
-
<td mat-cell *matCellDef="let element"> {{element?.
|
|
4693
|
+
<td mat-cell *matCellDef="let element"> {{element?.otherInformation1}} </td>
|
|
4689
4694
|
</ng-container>
|
|
4690
4695
|
|
|
4691
4696
|
<tr mat-header-row *matHeaderRowDef="displayedColumnsNew"></tr>
|