ngx-render-material-forms 2.2.1 → 2.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/esm2020/lib/components/add-on-products/add-on-products.component.mjs +7 -7
  2. package/fesm2015/ngx-render-material-forms.js +6 -6
  3. package/fesm2015/ngx-render-material-forms.mjs.map +1 -1
  4. package/fesm2020/ngx-render-material-forms.js +6 -6
  5. package/fesm2020/ngx-render-material-forms.mjs.map +1 -1
  6. package/package.json +1 -1
package/fesm2020/ngx-render-material-forms.js CHANGED
@@ -3528,8 +3528,8 @@ class AddOnProductsComponent {
3528
3528
  category: [product?.category || ''],
3529
3529
  subCategory: [product?.subCategory || ''],
3530
3530
  value: [product?.value || ''],
3531
- skuNumber: [product?.skuNumber || ''],
3532
- inventory: [product?.inventory || '']
3531
+ skuNumber: [product?.otherInformation0 || ''],
3532
+ inventory: [product?.otherInformation1 || '']
3533
3533
  }));
3534
3534
  });
3535
3535
  selectedProductsArray.controls.forEach(control => {
@@ -3744,8 +3744,8 @@ class AddOnProductsComponent {
3744
3744
  category: [product?.category || ''],
3745
3745
  subCategory: [product?.subCategory || ''],
3746
3746
  value: [product?.value || ''],
3747
- skuNumber: [product?.skuNumber || ''],
3748
- inventory: [product?.inventory || '']
3747
+ skuNumber: [product?.otherInformation0 || ''],
3748
+ inventory: [product?.otherInformation1 || '']
3749
3749
  });
3750
3750
  if (productFormGroup) {
3751
3751
  selectedProductsArray.push(productFormGroup);
@@ -4078,7 +4078,7 @@ class AddOnProductsComponent {
4078
4078
  }
4079
4079
  }
4080
4080
  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 });
4081
- 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: [
4081
+ 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?.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: [
4082
4082
  trigger('slideDown', [
4083
4083
  state('hidden', style({ height: '0px', opacity: 0, overflow: 'hidden' })),
4084
4084
  state('visible', style({ height: '*', opacity: 1 })),
@@ -4103,7 +4103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
4103
4103
  animate('300ms ease-in')
4104
4104
  ])
4105
4105
  ])
4106
- ], 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"] }]
4106
+ ], 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?.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"] }]
4107
4107
  }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
4108
4108
  type: Inject,
4109
4109
  args: [MAT_DIALOG_DATA]