ngx-render-material-forms 2.1.1 → 2.1.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 +3 -10
- package/esm2020/lib/components/select/select.component.mjs +6 -1
- package/fesm2015/ngx-render-material-forms.js +7 -9
- package/fesm2015/ngx-render-material-forms.mjs.map +1 -1
- package/fesm2020/ngx-render-material-forms.js +7 -9
- package/fesm2020/ngx-render-material-forms.mjs.map +1 -1
- package/lib/components/select/select.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -2839,6 +2839,9 @@ class MaterialSelectComponent extends MaterialComponent {
|
|
|
2839
2839
|
this.currentPanelElement.addEventListener('scroll', this.onScroll.bind(this));
|
|
2840
2840
|
}
|
|
2841
2841
|
}
|
|
2842
|
+
addCustomClass(key) {
|
|
2843
|
+
return 'walkme_select_' + key;
|
|
2844
|
+
}
|
|
2842
2845
|
onScroll(event) {
|
|
2843
2846
|
if (this.instance.component.key.toLowerCase() === 'vendorproductid') {
|
|
2844
2847
|
const scrollElement = event.target;
|
|
@@ -3269,6 +3272,7 @@ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
3269
3272
|
(selectionChange)="onChange()"
|
|
3270
3273
|
[compareWith]="compareObjects"
|
|
3271
3274
|
#productSelect
|
|
3275
|
+
[panelClass]="addCustomClass(instance.component.key)"
|
|
3272
3276
|
>
|
|
3273
3277
|
<mat-option>
|
|
3274
3278
|
<ngx-mat-select-search [searching]="instance.component.key.toLowerCase() === 'vendorproductid' ? searching : false" (input)="onInputChange($event)" placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl">
|
|
@@ -3312,6 +3316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
|
|
|
3312
3316
|
(selectionChange)="onChange()"
|
|
3313
3317
|
[compareWith]="compareObjects"
|
|
3314
3318
|
#productSelect
|
|
3319
|
+
[panelClass]="addCustomClass(instance.component.key)"
|
|
3315
3320
|
>
|
|
3316
3321
|
<mat-option>
|
|
3317
3322
|
<ngx-mat-select-search [searching]="instance.component.key.toLowerCase() === 'vendorproductid' ? searching : false" (input)="onInputChange($event)" placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl">
|
|
@@ -3836,13 +3841,6 @@ class AddOnProductsComponent {
|
|
|
3836
3841
|
const levelTwoId = this.levelTwoId ? this.levelTwoId : 0;
|
|
3837
3842
|
const levelThreeId = this.levelThreeId ? this.levelThreeId : 0;
|
|
3838
3843
|
const levelFourId = this.levelFourId ? this.levelFourId : 0;
|
|
3839
|
-
console.log('pageNumber=>', this.pageNumber);
|
|
3840
|
-
console.log('pageSize=>', this.pageSize);
|
|
3841
|
-
console.log('levelOneId=>', levelOneId);
|
|
3842
|
-
console.log('levelTwoId=>', levelTwoId);
|
|
3843
|
-
console.log('levelThreeId=>', levelThreeId);
|
|
3844
|
-
console.log('levelFourId=>', levelFourId);
|
|
3845
|
-
debugger;
|
|
3846
3844
|
this.commonSevice.loadProducts(this.pageNumber, this.pageSize, search, true, false, levelOneId, levelTwoId, levelThreeId, levelFourId).subscribe(response => {
|
|
3847
3845
|
this.spinnerFlag = false;
|
|
3848
3846
|
if (response && response.code === 200) {
|
|
@@ -4008,7 +4006,7 @@ class AddOnProductsComponent {
|
|
|
4008
4006
|
}
|
|
4009
4007
|
}
|
|
4010
4008
|
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 });
|
|
4011
|
-
AddOnProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: AddOnProductsComponent, selector: "ngx-mat-add-on-products", viewQueries: [{ propertyName: "firstscrollableDiv", first: true, predicate: ["firstscrollableDiv"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n <div class=\"OverlayDivContent\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n <div class=\"mat-dialog-content\">\r\n <!--Search Start-->\r\n <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n <div class=\"bs\">\r\n <div class=\"search-icon\">\r\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n transform=\"rotate(0 0 0)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n </svg>\r\n </div>\r\n <form [formGroup]=\"form\">\r\n <div class=\"input-search\">\r\n <input (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput placeholder=\"Search Product\" formControlName=\"searchProductName\">\r\n </div>\r\n </form>\r\n <!-- <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\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 <h5>Advanced Filters</h5>\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')\">close</mat-icon>\r\n <mat-icon 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')\">close</mat-icon>\r\n <mat-icon 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')\">close</mat-icon>\r\n <mat-icon 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')\">close</mat-icon>\r\n <mat-icon 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 > 10 ? 'tbl-record-found': ''\">\r\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? toggleSelection(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.skuNumber}} </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\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 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 <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n </table>\r\n <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n color=\"primary\" mat-raised-button>Next</button>\r\n <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n </div>\r\n <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n <div class=\"tab-action-wrp\">\r\n <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add</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-stroked-button.mat-primary{color:#0078d6}.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:25px}.bs{border:1px solid #DADCE0;border-radius:5px;padding:0 15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.bs mat-icon{color:#0006}.bs 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%}.input-search input{border:0;padding:0 15px;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:25px;border-radius:5px}.product-selection-container h5{margin:0 0 15px;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:10px}.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:80vh}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;height:441px;overflow-y:auto}.tbl-record-found table{border-collapse:separate}.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;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,button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker mat-icon{color:#f44336!important}.added-products{border:1px solid #0000001f;border-radius:5px;height:447px;overflow-y:auto}.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}\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: [
|
|
4009
|
+
AddOnProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: AddOnProductsComponent, selector: "ngx-mat-add-on-products", viewQueries: [{ propertyName: "firstscrollableDiv", first: true, predicate: ["firstscrollableDiv"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n <div class=\"OverlayDivContent\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n <div class=\"mat-dialog-content\">\r\n <!--Search Start-->\r\n <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n <div class=\"bs\">\r\n <div class=\"search-icon\">\r\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n transform=\"rotate(0 0 0)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n </svg>\r\n </div>\r\n <form [formGroup]=\"form\">\r\n <div class=\"input-search\">\r\n <input (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput placeholder=\"Search Product\" formControlName=\"searchProductName\">\r\n </div>\r\n </form>\r\n <!-- <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\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 <h5>Advanced Filters</h5>\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')\" 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')\">close</mat-icon>\r\n <mat-icon 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')\">close</mat-icon>\r\n <mat-icon 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')\">close</mat-icon>\r\n <mat-icon 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 > 10 ? 'tbl-record-found': ''\">\r\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? toggleSelection(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.skuNumber}} </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 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 <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 <!--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 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-stroked-button.mat-primary{color:#0078d6}.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}.bs{border:1px solid #DADCE0;border-radius:5px;padding:0 15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.bs mat-icon{color:#0006}.bs 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%}.input-search input{border:0;padding:0 15px;width:96%;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 0 15px;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:10px}.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}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;height:298px;overflow-y:auto}.tbl-record-found table{border-collapse:separate}.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,button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.8!important;font-size:130%!important}mat-icon.iconclose{line-height:1.6!important}.added-products{border:1px solid #0000001f;border-radius:5px;height:447px;overflow-y:auto}.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}\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: [
|
|
4012
4010
|
trigger('slideDown', [
|
|
4013
4011
|
state('hidden', style({ height: '0px', opacity: 0, overflow: 'hidden' })),
|
|
4014
4012
|
state('visible', style({ height: '*', opacity: 1 })),
|
|
@@ -4033,7 +4031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
|
|
|
4033
4031
|
animate('300ms ease-in')
|
|
4034
4032
|
])
|
|
4035
4033
|
])
|
|
4036
|
-
], template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n <div class=\"OverlayDivContent\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n <div class=\"mat-dialog-content\">\r\n <!--Search Start-->\r\n <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n <div class=\"bs\">\r\n <div class=\"search-icon\">\r\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n transform=\"rotate(0 0 0)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n </svg>\r\n </div>\r\n <form [formGroup]=\"form\">\r\n <div class=\"input-search\">\r\n <input (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput placeholder=\"Search Product\" formControlName=\"searchProductName\">\r\n </div>\r\n </form>\r\n <!-- <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\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 <h5>Advanced Filters</h5>\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')\">close</mat-icon>\r\n <mat-icon 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')\">close</mat-icon>\r\n <mat-icon 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')\">close</mat-icon>\r\n <mat-icon 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')\">close</mat-icon>\r\n <mat-icon 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 > 10 ? 'tbl-record-found': ''\">\r\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? toggleSelection(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.skuNumber}} </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\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 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 <tr mat-header-row *matHeaderRowDef=\"showAllproductsColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: showAllproductsColumns;\"></tr>\r\n </table>\r\n <ng-template #showBlank>\r\n <div class=\"no-data-message\">\r\n No data found.\r\n </div>\r\n </ng-template>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n <div class=\"tabs-action-step-one\" *ngIf=\"currentPage === 'select-products'\">\r\n <button mat-button (click)=\"goToNextPage()\" [disabled]=\"selection.selected.length ? false : true\"\r\n color=\"primary\" mat-raised-button>Next</button>\r\n <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\r\n </div>\r\n <div class=\"tabs-action\" *ngIf=\"currentPage === 'edit-save'\">\r\n <div class=\"tab-action-wrp\">\r\n <button mat-button (click)=\"goToPreviousPage()\">Back</button>\r\n <button mat-button type=\"submit\" color=\"primary\" mat-raised-button (click)=\"onSubmit()\">Add</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-stroked-button.mat-primary{color:#0078d6}.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:25px}.bs{border:1px solid #DADCE0;border-radius:5px;padding:0 15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.bs mat-icon{color:#0006}.bs 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%}.input-search input{border:0;padding:0 15px;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:25px;border-radius:5px}.product-selection-container h5{margin:0 0 15px;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:10px}.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:80vh}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;height:441px;overflow-y:auto}.tbl-record-found table{border-collapse:separate}.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;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,button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker mat-icon{color:#f44336!important}.added-products{border:1px solid #0000001f;border-radius:5px;height:447px;overflow-y:auto}.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}\n"] }]
|
|
4034
|
+
], template: "<div *ngIf=\"spinnerFlag\" class=\"OverlayDiv\">\r\n <div class=\"OverlayDivContent\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n</div>\r\n<div class=\"mat-dialog-heading\">\r\n <h1 mat-dialog-title>Add Products</h1>\r\n</div>\r\n\r\n<mat-dialog-content>\r\n <div class=\"mat-dialog-content\">\r\n <!--Search Start-->\r\n <div class=\"basic-search\" [hidden]=\"currentPage !== 'select-products'\">\r\n <div class=\"bs\">\r\n <div class=\"search-icon\">\r\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 24 25\" xmlns=\"http://www.w3.org/2000/svg\"\r\n transform=\"rotate(0 0 0)\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z\" />\r\n </svg>\r\n </div>\r\n <form [formGroup]=\"form\">\r\n <div class=\"input-search\">\r\n <input (keydown.enter)=\"handleDropdownFilter(); $event.stopPropagation()\" type=\"text\" matInput placeholder=\"Search Product\" formControlName=\"searchProductName\">\r\n </div>\r\n </form>\r\n <!-- <div class=\"advfilter\">\r\n <button class=\"adv\" (click)=\"toggleSection();$event.stopPropagation();\">\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 <h5>Advanced Filters</h5>\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')\" 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')\">close</mat-icon>\r\n <mat-icon 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')\">close</mat-icon>\r\n <mat-icon 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')\">close</mat-icon>\r\n <mat-icon 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 > 10 ? 'tbl-record-found': ''\">\r\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-table abc\"\r\n *ngIf=\"dataSource && dataSource?.data?.length > 0; else noData\">\r\n <ng-container matColumnDef=\"select\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox color=\"primary\" (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? toggleSelection(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"></mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"productName\">\r\n <th mat-header-cell *matHeaderCellDef> Product Name </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.text}} </td>\r\n </ng-container>\r\n <ng-container matColumnDef=\"skuNumber\" *ngIf=\"showSkuNumber\">\r\n <th mat-header-cell *matHeaderCellDef> SKU Number </th>\r\n <td mat-cell *matCellDef=\"let element\"> {{element?.skuNumber}} </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 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 <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 <!--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 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-stroked-button.mat-primary{color:#0078d6}.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}.bs{border:1px solid #DADCE0;border-radius:5px;padding:0 15px;height:46px;display:flex;align-items:center;flex:1;margin-right:20px}.bs mat-icon{color:#0006}.bs 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%}.input-search input{border:0;padding:0 15px;width:96%;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 0 15px;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:10px}.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}.tbl-record-found{border-left:1px solid #0000001f;border-right:1px solid #0000001f;border-top:1px solid #0000001f;border-radius:5px 5px 0 0;height:298px;overflow-y:auto}.tbl-record-found table{border-collapse:separate}.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,button.delete-btn-picker:hover{background:transparent!important}button.delete-btn-picker mat-icon{color:#f44336!important}mat-icon.icondropdown{line-height:1.8!important;font-size:130%!important}mat-icon.iconclose{line-height:1.6!important}.added-products{border:1px solid #0000001f;border-radius:5px;height:447px;overflow-y:auto}.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}\n"] }]
|
|
4037
4035
|
}], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
4038
4036
|
type: Inject,
|
|
4039
4037
|
args: [MAT_DIALOG_DATA]
|