techlify-inventory-common 18.36.1 → 18.37.1

package/fesm2022/{techlify-inventory-common-techlify-inventory-common-CqakmnCI.mjs → techlify-inventory-common-techlify-inventory-common-CQSzjNhk.mjs}

@@ -11,31 +11,27 @@ import * as i4 from '@angular/material/card';
 import { MatCard, MatCardContent, MatCardModule } from '@angular/material/card';
 import * as i3 from '@angular/common';
 import { NgIf, CommonModule, NgForOf, CurrencyPipe, DatePipe } from '@angular/common';
-import * as i6 from '@angular/material/table';
-import { MatTableDataSource, MatTableModule, MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderRow, MatTable, MatHeaderCellDef, MatHeaderRowDef, MatRowDef, MatRow, MatFooterCell, MatFooterRow, MatFooterRowDef, MatFooterCellDef } from '@angular/material/table';
+import * as i8 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule, MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef, MatTable, MatHeaderCellDef, MatFooterCell, MatFooterRow, MatFooterRowDef, MatFooterCellDef } from '@angular/material/table';
 import * as i9 from '@angular/material/progress-bar';
 import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i11 from 'ngx-infinite-scroll';
 import { InfiniteScrollDirective, InfiniteScrollModule } from 'ngx-infinite-scroll';
 import * as i2 from 'angular-google-charts';
 import { ChartType, GoogleChartsModule } from 'angular-google-charts';
-import * as i6$2 from '@angular/material/form-field';
-import { MatFormFieldModule, MatFormField, MatLabel, MatSuffix, MatError, MatHint } from '@angular/material/form-field';
-import * as i8 from '@angular/material/input';
-import { MatInputModule, MatInput } from '@angular/material/input';
 import * as i2$1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { BehaviorSubject, debounceTime as debounceTime$1, distinctUntilChanged, lastValueFrom, startWith } from 'rxjs';
-import * as i10 from '@angular/material/sort';
-import { MatSortModule, MatSortHeader, MatSort } from '@angular/material/sort';
-import * as i13 from '@angular/material/tooltip';
-import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { __decorate } from 'tslib';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogTitle, MatDialogContent } from '@angular/material/dialog';
 import * as i4$2 from 'ngx-spinner';
-import * as i6$1 from '@angular/material/button';
+import * as i6 from '@angular/material/button';
 import { MatButtonModule, MatButton } from '@angular/material/button';
+import * as i6$1 from '@angular/material/form-field';
+import { MatFormFieldModule, MatFormField, MatLabel, MatSuffix, MatError, MatHint } from '@angular/material/form-field';
+import * as i8$1 from '@angular/material/input';
+import { MatInputModule, MatInput } from '@angular/material/input';
 import * as i16 from '@angular/flex-layout';
 import { FlexLayoutModule, FlexModule } from '@angular/flex-layout';
 import { debounceTime, map, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
@@ -44,16 +40,20 @@ import * as i11$2 from '@angular/material/core';
 import { MatCommonModule, MatLineModule, MatNativeDateModule, MatOptionModule, MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
 import * as i12 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import * as i10 from '@angular/material/sort';
+import { MatSortModule, MatSort, MatSortHeader } from '@angular/material/sort';
 import { SelectionModel } from '@angular/cdk/collections';
-import * as i8$1 from '@angular/material/checkbox';
+import * as i8$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i9$1 from '@angular/material/tooltip';
+import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import * as XLSX from 'xlsx';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import * as i3$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i9$1 from '@angular/material/datepicker';
+import * as i9$2 from '@angular/material/datepicker';
 import { MatDatepickerModule, MatDatepickerInput, MatDatepickerToggle, MatDatepicker } from '@angular/material/datepicker';
 import * as i5 from '@angular/material/divider';
 import { MatDividerModule, MatDivider } from '@angular/material/divider';
@@ -70,17 +70,17 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatStepperModule } from '@angular/material/stepper';
-import * as i6$4 from '@angular/material/tabs';
+import * as i6$3 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTreeModule } from '@angular/material/tree';
 import moment from 'moment/moment';
 import * as i5$1 from 'angularx-qrcode';
 import { QRCodeComponent } from 'angularx-qrcode';
-import * as i6$3 from 'ngx-barcode6';
+import * as i6$2 from 'ngx-barcode6';
 import { NgxBarcode6 } from 'ngx-barcode6';
 import { toSignal } from '@angular/core/rxjs-interop';
-import * as i5$2 from 'ngx-permissions';
+import * as i13 from 'ngx-permissions';
 import { NgxPermissionsModule } from 'ngx-permissions';
 
 class ProductSummaryService extends TechlifyServiceBaseClass {
@@ -145,7 +145,7 @@ class LowStockProductsWidgetComponent extends TechlifyListingControllerInterface
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LowStockProductsWidgetComponent, deps: [{ token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LowStockProductsWidgetComponent, selector: "app-low-stock-products-widget", usesInheritance: true, ngImport: i0, template: "<mat-card style=\"max-height: 460px; overflow: auto\">\n  <mat-card-content>\n    <h3>Low Stock Products</h3>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"models\"\n      class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    >\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"Product\">\n        <th mat-header-cell *matHeaderCellDef>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n            {{ element?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Stock Column -->\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef>Stock</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.current_stock }}</td>\n      </ng-container>\n\n      <!-- Reorder Point Column -->\n      <ng-container matColumnDef=\"Reorder Point\">\n        <th mat-header-cell *matHeaderCellDef>Reorder Point</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.reorder_point }}</td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LowStockProductsWidgetComponent, selector: "app-low-stock-products-widget", usesInheritance: true, ngImport: i0, template: "<mat-card style=\"max-height: 460px; overflow: auto\">\n  <mat-card-content>\n    <h3>Low Stock Products</h3>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"models\"\n      class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    >\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"Product\">\n        <th mat-header-cell *matHeaderCellDef>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n            {{ element?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Stock Column -->\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef>Stock</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.current_stock }}</td>\n      </ng-container>\n\n      <!-- Reorder Point Column -->\n      <ng-container matColumnDef=\"Reorder Point\">\n        <th mat-header-cell *matHeaderCellDef>Reorder Point</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.reorder_point }}</td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LowStockProductsWidgetComponent, decorators: [{
             type: Component,
@@ -292,7 +292,7 @@ class ProductMeasureFormComponent {
         return this.formValidatorService.getErrorMessage(field, this.productMeasureForm, errorMessages);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductMeasureFormComponent, deps: [{ token: MeasureService }, { token: i2$1.FormBuilder }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i4$2.NgxSpinnerService }, { token: i1.FormValidatorService }, { token: i1.ErrorHandlerService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductMeasureFormComponent, selector: "app-product-measure-form", ngImport: i0, template: "<div>\n  <form [formGroup]=\"productMeasureForm\" (ngSubmit)=\"save()\">\n    <h3 class=\"text-center\">Create/Update Product Measure</h3>\n    <div fxLayout=\"column\">\n      <div fxLayout=\"column\">\n        <mat-form-field>\n          <input matInput placeholder=\"Title\" formControlName=\"title\" required />\n          <mat-error *ngIf=\"isFieldValid('title')\">{{ getErrorMessage('title') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <input matInput placeholder=\"Description\" formControlName=\"description\" required />\n          <mat-error *ngIf=\"isFieldValid('description')\">{{ getErrorMessage('description') }} </mat-error>\n        </mat-form-field>\n        <div fxFlex=\"100%\" fxLayout fxLayoutGap=\"1rem\">\n          <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">Cancel</button>\n          <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.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: "directive", type: i16.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i16.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i16.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductMeasureFormComponent, selector: "app-product-measure-form", ngImport: i0, template: "<div>\n  <form [formGroup]=\"productMeasureForm\" (ngSubmit)=\"save()\">\n    <h3 class=\"text-center\">Create/Update Product Measure</h3>\n    <div fxLayout=\"column\">\n      <div fxLayout=\"column\">\n        <mat-form-field>\n          <input matInput placeholder=\"Title\" formControlName=\"title\" required />\n          <mat-error *ngIf=\"isFieldValid('title')\">{{ getErrorMessage('title') }} </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <input matInput placeholder=\"Description\" formControlName=\"description\" required />\n          <mat-error *ngIf=\"isFieldValid('description')\">{{ getErrorMessage('description') }} </mat-error>\n        </mat-form-field>\n        <div fxFlex=\"100%\" fxLayout fxLayoutGap=\"1rem\">\n          <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">Cancel</button>\n          <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$1.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: "directive", type: i16.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i16.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i16.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductMeasureFormComponent, decorators: [{
             type: Component,
@@ -413,7 +413,7 @@ let ProductMeasuresListComponent = class ProductMeasuresListComponent {
         //Add 'implements OnDestroy' to the class.
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductMeasuresListComponent, deps: [{ token: i2$1.FormBuilder }, { token: i1$1.MatDialog }, { token: i1.FilterService }, { token: i4$1.ActivatedRoute }, { token: MeasureService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductMeasuresListComponent, selector: "app-product-measure-list", ngImport: i0, template: "<div fxLayout=\"column\">\n  <div class=\"text-center\" fxLayoutAlign=\"center center\">\n    <h3 fxLayout>\n      <span class=\"mt-1\"> Product Measures </span>\n      <button mat-raised-button class=\"ml-2\" color=\"primary\" (click)=\"modifyProductMeasure()\">\n        <mat-icon>add</mat-icon>\n        Product Measure\n      </button>\n    </h3>\n  </div>\n\n  <div fxLayout>\n    <form [formGroup]=\"filterFormGroup\" fxLayout fxLayoutGap=\"0.5rem\">\n      <mat-form-field>\n        <input matInput placeholder=\"Item Name, Description, etc.\" formControlName=\"search\" />\n      </mat-form-field>\n    </form>\n\n    <mat-form-field class=\"ml-2\" fxFlex=\"0 1 calc(11.11% - 0.5rem)\">\n      <mat-label>Columns</mat-label>\n      <mat-select [(ngModel)]=\"displayedColumns\" multiple name=\"column\">\n        <mat-option *ngFor=\"let column of columnDefinitions\" [value]=\"column.def\" [disabled]=\"!column.isShow\">\n          {{ column?.def }}</mat-option\n        >\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <table\n    mat-table\n    #table\n    [dataSource]=\"dataSource\"\n    class=\"mat-elevation-z8 w-100 mt-4 table-hover\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\"\n    [fromRoot]=\"true\"\n    infiniteScrollContainer=\"mat-sidenav-content\"\n    matSort\n    (matSortChange)=\"sortColumn($event)\"\n    matSortDisableClear=\"true\"\n  >\n    <!-- # Column -->\n    <ng-container matColumnDef=\"#\">\n      <th mat-header-cell *matHeaderCellDef>#</th>\n      <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n    </ng-container>\n\n    <!-- Title Column -->\n    <ng-container matColumnDef=\"Title\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>Title</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element.title }}</td>\n    </ng-container>\n\n    <!-- Description Column -->\n    <ng-container matColumnDef=\"Description\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>Description</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element.description }}</td>\n    </ng-container>\n\n    <!-- Actions Column -->\n    <ng-container matColumnDef=\"Actions\">\n      <th mat-header-cell *matHeaderCellDef>Actions</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <div class=\"text-secondary\" fxLayoutGap=\"1rem\">\n          <button mat-icon-button (click)=\"modifyProductMeasure(element)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: i11$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i16.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i16.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i16.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i16.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductMeasuresListComponent, selector: "app-product-measure-list", ngImport: i0, template: "<div fxLayout=\"column\">\n  <div class=\"text-center\" fxLayoutAlign=\"center center\">\n    <h3 fxLayout>\n      <span class=\"mt-1\"> Product Measures </span>\n      <button mat-raised-button class=\"ml-2\" color=\"primary\" (click)=\"modifyProductMeasure()\">\n        <mat-icon>add</mat-icon>\n        Product Measure\n      </button>\n    </h3>\n  </div>\n\n  <div fxLayout>\n    <form [formGroup]=\"filterFormGroup\" fxLayout fxLayoutGap=\"0.5rem\">\n      <mat-form-field>\n        <input matInput placeholder=\"Item Name, Description, etc.\" formControlName=\"search\" />\n      </mat-form-field>\n    </form>\n\n    <mat-form-field class=\"ml-2\" fxFlex=\"0 1 calc(11.11% - 0.5rem)\">\n      <mat-label>Columns</mat-label>\n      <mat-select [(ngModel)]=\"displayedColumns\" multiple name=\"column\">\n        <mat-option *ngFor=\"let column of columnDefinitions\" [value]=\"column.def\" [disabled]=\"!column.isShow\">\n          {{ column?.def }}</mat-option\n        >\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <table\n    mat-table\n    #table\n    [dataSource]=\"dataSource\"\n    class=\"mat-elevation-z8 w-100 mt-4 table-hover\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\"\n    [fromRoot]=\"true\"\n    infiniteScrollContainer=\"mat-sidenav-content\"\n    matSort\n    (matSortChange)=\"sortColumn($event)\"\n    matSortDisableClear=\"true\"\n  >\n    <!-- # Column -->\n    <ng-container matColumnDef=\"#\">\n      <th mat-header-cell *matHeaderCellDef>#</th>\n      <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n    </ng-container>\n\n    <!-- Title Column -->\n    <ng-container matColumnDef=\"Title\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>Title</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element.title }}</td>\n    </ng-container>\n\n    <!-- Description Column -->\n    <ng-container matColumnDef=\"Description\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>Description</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element.description }}</td>\n    </ng-container>\n\n    <!-- Actions Column -->\n    <ng-container matColumnDef=\"Actions\">\n      <th mat-header-cell *matHeaderCellDef>Actions</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <div class=\"text-secondary\" fxLayoutGap=\"1rem\">\n          <button mat-icon-button (click)=\"modifyProductMeasure(element)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.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: i11$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i16.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i16.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i16.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i16.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], preserveWhitespaces: true });
 };
 ProductMeasuresListComponent = __decorate([
     UntilDestroy()
@@ -696,7 +696,7 @@ class ProductBatchUpdateFormComponent extends TechlifyFormComponentInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductBatchUpdateFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: ProductBatchService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductBatchUpdateFormComponent, selector: "app-product-batch-update-form", inputs: { selection: "selection" }, outputs: { updated: "updated" }, usesInheritance: true, ngImport: i0, template: "<p class=\"text-primary fw-bold\">{{ selection.selected.length }} Product(s) Selected</p>\n<form [formGroup]=\"form\" class=\"d-flex flex-column justify-content-start\" (submit)=\"save()\">\n  <mat-form-field>\n    <mat-label>Type</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Category</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Reorder Point</mat-label>\n    <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2 mt-3\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Update</button>\n    <button [disabled]=\"isSaving\" mat-flat-button type=\"button\" (click)=\"selection.clear()\">Cancel</button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.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: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductBatchUpdateFormComponent, selector: "app-product-batch-update-form", inputs: { selection: "selection" }, outputs: { updated: "updated" }, usesInheritance: true, ngImport: i0, template: "<p class=\"text-primary fw-bold\">{{ selection.selected.length }} Product(s) Selected</p>\n<form [formGroup]=\"form\" class=\"d-flex flex-column justify-content-start\" (submit)=\"save()\">\n  <mat-form-field>\n    <mat-label>Type</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Category</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Reorder Point</mat-label>\n    <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2 mt-3\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Update</button>\n    <button [disabled]=\"isSaving\" mat-flat-button type=\"button\" (click)=\"selection.clear()\">Cancel</button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.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: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductBatchUpdateFormComponent, decorators: [{
             type: Component,
@@ -858,7 +858,7 @@ let ProductListComponent = class ProductListComponent extends TechlifyListingCon
         this.exportInProgress = hideColumns;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductListComponent, deps: [{ token: i2$1.FormBuilder }, { token: i1$1.MatDialog }, { token: i4$1.ActivatedRoute }, { token: ProductService }, { token: ProductFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductListComponent, selector: "app-product-list", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button></app-product-form-button>\n        <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer material-symbols-outlined\">\n          file_upload\n        </span>\n        <app-export-to-excel-button tableId=\"productTable\" fileName=\"products\" (onExportStart)=\"handleExport(true)\"\n          (onExportEnd)=\"handleExport(false)\">\n        </app-export-to-excel-button>\n        <app-column-selector mode=\"icon\" class=\"d-print-none\" [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field class='fl-md'>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field class='fl-sm'>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field class='fl-sm'>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_ids\" titleField=\"title\"\n            [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<div class=\"d-flex justify-content-start gap-3\">\n  <mat-card [class.flex-fill]=\"!selection.isEmpty()\" [class.w-100]=\"selection.isEmpty()\">\n    <mat-card-content class=\"p-0\">\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n        (matSortChange)=\"sortColumn($event)\" matSortDisableClear=\"true\" aria-describedby=\"Products List\"\n        id=\"productTable\">\n        <!-- # Column -->\n        <ng-container matColumnDef=\"#\">\n          <th mat-header-cell *matHeaderCellDef>#</th>\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a class=\"text-decoration-none text-dark\" [routerLink]=\"[element?.id, 'view']\">{{ element.name }}</a>\n              <small class=\"text-secondary\" *ngIf=\"element.type && !exportInProgress\">\n                {{ element.type?.title }}\n              </small>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"type\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Type</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.type?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Categories Column -->\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n            <div *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\">\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- SKU Column -->\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"description\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Description</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.description }}</td>\n        </ng-container>\n\n        <!-- Initial Quantity Column -->\n        <ng-container matColumnDef=\"initial_quantity\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Initial Quantity</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element.initial_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.initial_quantity_date\">\n              on {{ element?.initial_quantity_date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Receipts Column -->\n        <ng-container matColumnDef=\"stock_receipts\">\n          <th mat-header-cell mat-sort-header=\"stock_receipts_sum_quantity\" *matHeaderCellDef>Stock Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_receipts_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt && !exportInProgress\">\n              Latest on {{ element?.last_stock_receipt?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Issues Column -->\n        <ng-container matColumnDef=\"stock_issues\">\n          <th mat-header-cell mat-sort-header=\"stock_issues_sum_quantity\" *matHeaderCellDef>Stock Issues</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_issues_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_issue && !exportInProgress\">\n              Latest on {{ element?.last_stock_issue?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- On Hand Column -->\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell mat-sort-header='stock_on_hand' *matHeaderCellDef>On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_on_hand }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"measure\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Measure</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.measure?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Reorder Point Column -->\n        <ng-container matColumnDef=\"reorder_point\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.reorder_point }}\n          </td>\n        </ng-container>\n\n        <!-- Selling Price Column -->\n        <ng-container matColumnDef=\"sale_price\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.sale_price | currency }}\n          </td>\n        </ng-container>\n\n        <!-- Income Account Column -->\n        <ng-container matColumnDef=\"income_account\">\n          <th mat-header-cell *matHeaderCellDef>Income Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.income_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Expense Account Column -->\n        <ng-container matColumnDef=\"expense_account\">\n          <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.expense_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Creator Column -->\n        <ng-container matColumnDef=\"creator\">\n          <th mat-header-cell *matHeaderCellDef>Creator</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n            <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n          </td>\n        </ng-container>\n\n        <!-- Actions Column -->\n        <ng-container matColumnDef=\"Actions\">\n          <th mat-header-cell *matHeaderCellDef>Actions</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"text-secondary d-flex gap-1\">\n              <app-techlify-icon name='view' [routerLink]=\"[element.id, 'view']\"\n                routerLinkActive=\"route-link-active\"></app-techlify-icon>\n\n              <app-product-form-button [product]=\"element\"></app-product-form-button>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"Select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllRowsSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllRowsSelected()\" [aria-label]=\"checkboxLabel()\">\n            </mat-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let row\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\"\n              [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\n            </mat-checkbox>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n  <mat-card *ngIf=\"!selection.isEmpty()\" class=\"batch-update-card\">\n    <mat-card-content>\n      <app-product-batch-update-form [selection]=\"selection\" (updated)=\"reload()\"></app-product-batch-update-form>\n    </mat-card-content>\n  </mat-card>\n</div>", styles: [".batch-update-card{width:15%;min-width:300px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i8$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.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: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns", "isExportWorking"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: ExportToExcelButtonComponent, selector: "app-export-to-excel-button", inputs: ["tableId", "fileName"], outputs: ["onExportStart", "onExportEnd"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"] }, { kind: "component", type: ProductBatchUpdateFormComponent, selector: "app-product-batch-update-form", inputs: ["selection"], outputs: ["updated"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductListComponent, selector: "app-product-list", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button></app-product-form-button>\n        <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer material-symbols-outlined\">\n          file_upload\n        </span>\n        <app-export-to-excel-button tableId=\"productTable\" fileName=\"products\" (onExportStart)=\"handleExport(true)\"\n          (onExportEnd)=\"handleExport(false)\">\n        </app-export-to-excel-button>\n        <app-column-selector mode=\"icon\" class=\"d-print-none\" [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field class='fl-md'>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field class='fl-sm'>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field class='fl-sm'>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_ids\" titleField=\"title\"\n            [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<div class=\"d-flex justify-content-start gap-3\">\n  <mat-card [class.flex-fill]=\"!selection.isEmpty()\" [class.w-100]=\"selection.isEmpty()\">\n    <mat-card-content class=\"p-0\">\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n        (matSortChange)=\"sortColumn($event)\" matSortDisableClear=\"true\" aria-describedby=\"Products List\"\n        id=\"productTable\">\n        <!-- # Column -->\n        <ng-container matColumnDef=\"#\">\n          <th mat-header-cell *matHeaderCellDef>#</th>\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a class=\"text-decoration-none text-dark\" [routerLink]=\"[element?.id, 'view']\">{{ element.name }}</a>\n              <small class=\"text-secondary\" *ngIf=\"element.type && !exportInProgress\">\n                {{ element.type?.title }}\n              </small>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"type\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Type</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.type?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Categories Column -->\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n            <div *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\">\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- SKU Column -->\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"description\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Description</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.description }}</td>\n        </ng-container>\n\n        <!-- Initial Quantity Column -->\n        <ng-container matColumnDef=\"initial_quantity\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Initial Quantity</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element.initial_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.initial_quantity_date\">\n              on {{ element?.initial_quantity_date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Receipts Column -->\n        <ng-container matColumnDef=\"stock_receipts\">\n          <th mat-header-cell mat-sort-header=\"stock_receipts_sum_quantity\" *matHeaderCellDef>Stock Receipts</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_receipts_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt && !exportInProgress\">\n              Latest on {{ element?.last_stock_receipt?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- Stock Issues Column -->\n        <ng-container matColumnDef=\"stock_issues\">\n          <th mat-header-cell mat-sort-header=\"stock_issues_sum_quantity\" *matHeaderCellDef>Stock Issues</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.stock_issues_sum_quantity }}</p>\n            <small class=\"text-secondary\" *ngIf=\"element?.last_stock_issue && !exportInProgress\">\n              Latest on {{ element?.last_stock_issue?.date | date }}\n            </small>\n          </td>\n        </ng-container>\n\n        <!-- On Hand Column -->\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell mat-sort-header='stock_on_hand' *matHeaderCellDef>On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_on_hand }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"measure\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Measure</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.measure?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Reorder Point Column -->\n        <ng-container matColumnDef=\"reorder_point\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.reorder_point }}\n          </td>\n        </ng-container>\n\n        <!-- Selling Price Column -->\n        <ng-container matColumnDef=\"sale_price\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element.sale_price | currency }}\n          </td>\n        </ng-container>\n\n        <!-- Income Account Column -->\n        <ng-container matColumnDef=\"income_account\">\n          <th mat-header-cell *matHeaderCellDef>Income Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.income_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Expense Account Column -->\n        <ng-container matColumnDef=\"expense_account\">\n          <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.expense_account?.title }}\n          </td>\n        </ng-container>\n\n        <!-- Creator Column -->\n        <ng-container matColumnDef=\"creator\">\n          <th mat-header-cell *matHeaderCellDef>Creator</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n            <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n          </td>\n        </ng-container>\n\n        <!-- Actions Column -->\n        <ng-container matColumnDef=\"Actions\">\n          <th mat-header-cell *matHeaderCellDef>Actions</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"text-secondary d-flex gap-1\">\n              <app-techlify-icon name='view' [routerLink]=\"[element.id, 'view']\"\n                routerLinkActive=\"route-link-active\"></app-techlify-icon>\n\n              <app-product-form-button [product]=\"element\"></app-product-form-button>\n            </div>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"Select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllRowsSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllRowsSelected()\" [aria-label]=\"checkboxLabel()\">\n            </mat-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let row\">\n            <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(row) : null\"\n              [checked]=\"selection.isSelected(row)\" [aria-label]=\"checkboxLabel(row)\">\n            </mat-checkbox>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n  <mat-card *ngIf=\"!selection.isEmpty()\" class=\"batch-update-card\">\n    <mat-card-content>\n      <app-product-batch-update-form [selection]=\"selection\" (updated)=\"reload()\"></app-product-batch-update-form>\n    </mat-card-content>\n  </mat-card>\n</div>", styles: [".batch-update-card{width:15%;min-width:300px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i8$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.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: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns", "isExportWorking"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: ExportToExcelButtonComponent, selector: "app-export-to-excel-button", inputs: ["tableId", "fileName"], outputs: ["onExportStart", "onExportEnd"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"] }, { kind: "component", type: ProductBatchUpdateFormComponent, selector: "app-product-batch-update-form", inputs: ["selection"], outputs: ["updated"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 ProductListComponent = __decorate([
     UntilDestroy()
@@ -950,7 +950,7 @@ class StockReceiptProductFormComponent extends TechlifyFormComponentInterface {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptProductFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: StockReceiptProductService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockReceiptProductFormComponent, isStandalone: true, selector: "app-stock-receipt-product-form", usesInheritance: true, ngImport: i0, template: "<h3 mat-dialog-title class='text-center'>Stock Receipt Product Form</h3>\n\n<mat-dialog-content>\n    <form [formGroup]=\"form\" (submit)=\"submit(form.getRawValue())\" class=\"d-flex flex-column gap-3 mt-2\">\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Product</mat-label>\n            <app-searchable-selector formControlName=\"product_id\" apiUrl=\"api/products\" titleField=\"name\"\n                [selectedValue]=\"data.stockReceiptProduct.product\" [cache]=\"true\"></app-searchable-selector>\n            <mat-error *ngIf=\"isFieldValid('product_id')\">{{ getErrorMessage('product_id') }}</mat-error>\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Quantity</mat-label>\n            <input matInput type=\"number\" formControlName=\"quantity\" min=\"0.01\" step=\"any\">\n            <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Purchase Price</mat-label>\n            <input matInput type=\"number\" formControlName=\"purchase_price\" min=\"0\" step=\"any\">\n            <mat-error *ngIf=\"isFieldValid('purchase_price')\">{{ getErrorMessage('purchase_price') }}</mat-error>\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Total Amount</mat-label>\n            <input matInput type=\"number\" formControlName=\"amount\">\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Location</mat-label>\n            <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations\"\n                [selectedValue]=\"data.stockReceiptProduct.location\" titleField=\"title\"></app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Particulars</mat-label>\n            <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n        </mat-form-field>\n\n        <div class=\"d-flex justify-content-end gap-2\">\n            <button mat-flat-button type=\"button\" [disabled]=\"isWorking\" (click)=\"cancel()\">Cancel</button>\n            <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"isWorking\">Save</button>\n        </div>\n\n    </form>\n</mat-dialog-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.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: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockReceiptProductFormComponent, isStandalone: true, selector: "app-stock-receipt-product-form", usesInheritance: true, ngImport: i0, template: "<h3 mat-dialog-title class='text-center'>Stock Receipt Product Form</h3>\n\n<mat-dialog-content>\n    <form [formGroup]=\"form\" (submit)=\"submit(form.getRawValue())\" class=\"d-flex flex-column gap-3 mt-2\">\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Product</mat-label>\n            <app-searchable-selector formControlName=\"product_id\" apiUrl=\"api/products\" titleField=\"name\"\n                [selectedValue]=\"data.stockReceiptProduct.product\" [cache]=\"true\"></app-searchable-selector>\n            <mat-error *ngIf=\"isFieldValid('product_id')\">{{ getErrorMessage('product_id') }}</mat-error>\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Quantity</mat-label>\n            <input matInput type=\"number\" formControlName=\"quantity\" min=\"0.01\" step=\"any\">\n            <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Purchase Price</mat-label>\n            <input matInput type=\"number\" formControlName=\"purchase_price\" min=\"0\" step=\"any\">\n            <mat-error *ngIf=\"isFieldValid('purchase_price')\">{{ getErrorMessage('purchase_price') }}</mat-error>\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Total Amount</mat-label>\n            <input matInput type=\"number\" formControlName=\"amount\">\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Location</mat-label>\n            <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations\"\n                [selectedValue]=\"data.stockReceiptProduct.location\" titleField=\"title\"></app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Particulars</mat-label>\n            <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n        </mat-form-field>\n\n        <div class=\"d-flex justify-content-end gap-2\">\n            <button mat-flat-button type=\"button\" [disabled]=\"isWorking\" (click)=\"cancel()\">Cancel</button>\n            <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"isWorking\">Save</button>\n        </div>\n\n    </form>\n</mat-dialog-content>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$1.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: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptProductFormComponent, decorators: [{
             type: Component,
@@ -1115,14 +1115,14 @@ let StockReceiptProductsListComponent = class StockReceiptProductsListComponent
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptProductsListComponent, deps: [{ token: StockReceiptProductService }, { token: i2$1.FormBuilder }, { token: i1.TechlifyFeatureService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockReceiptProductsListComponent, selector: "app-stock-receipt-product-list", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, isProductView: { classPropertyName: "isProductView", publicName: "isProductView", isSignal: true, isRequired: false, transformFunction: null }, selectedColumns: { classPropertyName: "selectedColumns", publicName: "selectedColumns", isSignal: true, isRequired: false, transformFunction: null }, exportInProgress: { classPropertyName: "exportInProgress", publicName: "exportInProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Receipts</mat-card-title>\n    <app-techlify-icon role='button' name='add' [routerLink]=\"['/inventory/stock-receipts/batch-form']\"\n      class='ms-2'></app-techlify-icon>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipt Products\" infiniteScroll\n      id=\"stockReceiptTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"receipt_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Receipt ID\">Receipt #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-receipts', element?.stock_receipt_id, 'view']\">\n            {{ element?.stock_receipt_id }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.purchase_price | currency }}</td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.amount | currency }}</td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.company_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Contact Column -->\n      <ng-container matColumnDef=\"supplier_contact\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Contact</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.contact_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Phone Column -->\n      <ng-container matColumnDef=\"supplier_phone\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.phone }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_receipt?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_receipt?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon role='button' name='view' class='text-secondary'\n              [routerLink]=\"['/inventory', 'stock-receipts', element?.id, 'view']\"></app-techlify-icon>\n            <app-stock-receipt-product-form-button [stockReceiptId]=\"element?.stock_receipt_id\"\n              [stockReceiptProduct]=\"element\" (saved)=\"reload(); listUpdated.emit(true)\">\n            </app-stock-receipt-product-form-button>\n            <app-techlify-delete-button [model]=\"element\" [service]=\"service\"\n              [data]=\"{ title: element?.product?.name, type: 'Stock Receipt Product' }\"\n              (deleted)=\"reload(); listUpdated.emit(true)\">\n            </app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-receipt_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-purchase_price\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalPurchasePrice | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-amount\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalValue | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_contact\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_phone\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: StockReceiptProductFormButtonComponent, selector: "app-stock-receipt-product-form-button", inputs: ["stockReceiptProduct", "stockReceiptId"], outputs: ["saved"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockReceiptProductsListComponent, selector: "app-stock-receipt-product-list", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, isProductView: { classPropertyName: "isProductView", publicName: "isProductView", isSignal: true, isRequired: false, transformFunction: null }, selectedColumns: { classPropertyName: "selectedColumns", publicName: "selectedColumns", isSignal: true, isRequired: false, transformFunction: null }, exportInProgress: { classPropertyName: "exportInProgress", publicName: "exportInProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Receipts</mat-card-title>\n    <app-techlify-icon role='button' name='add' [routerLink]=\"['/inventory/stock-receipts/form']\"\n      class='ms-2'></app-techlify-icon>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipt Products\" infiniteScroll\n      id=\"stockReceiptTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"receipt_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Receipt ID\">Receipt #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-receipts', element?.stock_receipt_id, 'view']\">\n            {{ element?.stock_receipt_id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.purchase_price | currency }}</td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.amount | currency }}</td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.company_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Contact Column -->\n      <ng-container matColumnDef=\"supplier_contact\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Contact</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.contact_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Phone Column -->\n      <ng-container matColumnDef=\"supplier_phone\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.phone }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_receipt?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_receipt?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon role='button' name='view' class='text-secondary'\n              [routerLink]=\"['/inventory', 'stock-receipts', element?.stock_receipt_id, 'view']\"></app-techlify-icon>\n            <app-stock-receipt-product-form-button [stockReceiptId]=\"element?.stock_receipt_id\"\n              [stockReceiptProduct]=\"element\" (saved)=\"reload(); listUpdated.emit(true)\">\n            </app-stock-receipt-product-form-button>\n            <app-techlify-delete-button [model]=\"element?.stock_receipt\" [service]=\"service\"\n              [data]=\"{ title: element?.product?.name, type: 'Stock Receipt Product' }\"\n              (deleted)=\"reload(); listUpdated.emit(true)\">\n            </app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-receipt_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-purchase_price\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalPurchasePrice | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-amount\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalValue | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_contact\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_phone\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: StockReceiptProductFormButtonComponent, selector: "app-stock-receipt-product-form-button", inputs: ["stockReceiptProduct", "stockReceiptId"], outputs: ["saved"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 StockReceiptProductsListComponent = __decorate([
     UntilDestroy()
 ], StockReceiptProductsListComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptProductsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-receipt-product-list', template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Receipts</mat-card-title>\n    <app-techlify-icon role='button' name='add' [routerLink]=\"['/inventory/stock-receipts/batch-form']\"\n      class='ms-2'></app-techlify-icon>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipt Products\" infiniteScroll\n      id=\"stockReceiptTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"receipt_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Receipt ID\">Receipt #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-receipts', element?.stock_receipt_id, 'view']\">\n            {{ element?.stock_receipt_id }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.purchase_price | currency }}</td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.amount | currency }}</td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.company_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Contact Column -->\n      <ng-container matColumnDef=\"supplier_contact\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Contact</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.contact_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Phone Column -->\n      <ng-container matColumnDef=\"supplier_phone\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.phone }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_receipt?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_receipt?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon role='button' name='view' class='text-secondary'\n              [routerLink]=\"['/inventory', 'stock-receipts', element?.id, 'view']\"></app-techlify-icon>\n            <app-stock-receipt-product-form-button [stockReceiptId]=\"element?.stock_receipt_id\"\n              [stockReceiptProduct]=\"element\" (saved)=\"reload(); listUpdated.emit(true)\">\n            </app-stock-receipt-product-form-button>\n            <app-techlify-delete-button [model]=\"element\" [service]=\"service\"\n              [data]=\"{ title: element?.product?.name, type: 'Stock Receipt Product' }\"\n              (deleted)=\"reload(); listUpdated.emit(true)\">\n            </app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-receipt_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-purchase_price\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalPurchasePrice | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-amount\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalValue | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_contact\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_phone\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"] }]
+            args: [{ selector: 'app-stock-receipt-product-list', template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Receipts</mat-card-title>\n    <app-techlify-icon role='button' name='add' [routerLink]=\"['/inventory/stock-receipts/form']\"\n      class='ms-2'></app-techlify-icon>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipt Products\" infiniteScroll\n      id=\"stockReceiptTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"receipt_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Receipt ID\">Receipt #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-receipts', element?.stock_receipt_id, 'view']\">\n            {{ element?.stock_receipt_id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.purchase_price | currency }}</td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.amount | currency }}</td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.company_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Contact Column -->\n      <ng-container matColumnDef=\"supplier_contact\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Contact</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.contact_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Phone Column -->\n      <ng-container matColumnDef=\"supplier_phone\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt?.supplier?.phone }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_receipt?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_receipt?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon role='button' name='view' class='text-secondary'\n              [routerLink]=\"['/inventory', 'stock-receipts', element?.stock_receipt_id, 'view']\"></app-techlify-icon>\n            <app-stock-receipt-product-form-button [stockReceiptId]=\"element?.stock_receipt_id\"\n              [stockReceiptProduct]=\"element\" (saved)=\"reload(); listUpdated.emit(true)\">\n            </app-stock-receipt-product-form-button>\n            <app-techlify-delete-button [model]=\"element?.stock_receipt\" [service]=\"service\"\n              [data]=\"{ title: element?.product?.name, type: 'Stock Receipt Product' }\"\n              (deleted)=\"reload(); listUpdated.emit(true)\">\n            </app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-receipt_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-purchase_price\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalPurchasePrice | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-amount\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalValue | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_contact\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_phone\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"] }]
         }], ctorParameters: () => [{ type: StockReceiptProductService }, { type: i2$1.FormBuilder }, { type: i1.TechlifyFeatureService }] });
 
 class StockIssueProductService extends TechlifyServiceBaseClass {
@@ -1202,7 +1202,7 @@ class StockIssueProductFormComponent extends TechlifyFormComponentInterface {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueProductFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: StockIssueProductService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockIssueProductFormComponent, isStandalone: true, selector: "app-stock-issue-product-form", viewQueries: [{ propertyName: "batchSelector", first: true, predicate: ["batchSelector"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<h3 mat-dialog-title class='text-center'>Stock Issue Product Form</h3>\n\n<mat-dialog-content>\n    <form [formGroup]=\"form\" (submit)=\"submit(form.getRawValue())\" class=\"d-flex flex-column gap-3 mt-2\">\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Product</mat-label>\n            <app-searchable-selector formControlName=\"product_id\" apiUrl=\"api/products\" titleField=\"name\"\n                [selectedValue]=\"data.stockIssueProduct?.product\" [cache]=\"true\"></app-searchable-selector>\n            <mat-error *ngIf=\"isFieldValid('product_id')\">{{ getErrorMessage('product_id') }}</mat-error>\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Quantity</mat-label>\n            <input matInput type=\"number\" formControlName=\"quantity\" min=\"0.01\" step=\"any\">\n            <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Location</mat-label>\n            <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations\"\n                [selectedValue]=\"data.stockIssueProduct?.location\" titleField=\"title\"></app-searchable-selector>\n        </mat-form-field>\n\n        <ng-container *ngIf=\"form.value?.location_id && batchesApiUrl\">\n            <mat-form-field class=\"w-100\" techlifyFeatureEnabled=\"product-batch-numbers\">\n                <mat-label>Batch</mat-label>\n                <app-searchable-selector #batchSelector formControlName=\"batch_id\"\n                    [apiUrl]=\"batchesApiUrl\" [enableSearch]=\"false\"\n                    (itemsChange)=\"onBatchItemsChange()\">\n                </app-searchable-selector>\n            </mat-form-field>\n        </ng-container>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Particulars</mat-label>\n            <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n        </mat-form-field>\n\n        <div class=\"d-flex justify-content-end gap-2\">\n            <button mat-flat-button type=\"button\" [disabled]=\"isWorking\" (click)=\"cancel()\">Cancel</button>\n            <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"isWorking\">Save</button>\n        </div>\n\n    </form>\n</mat-dialog-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.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: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "ngmodule", type: TechlifyFeatureModule }, { kind: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockIssueProductFormComponent, isStandalone: true, selector: "app-stock-issue-product-form", viewQueries: [{ propertyName: "batchSelector", first: true, predicate: ["batchSelector"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<h3 mat-dialog-title class='text-center'>Stock Issue Product Form</h3>\n\n<mat-dialog-content>\n    <form [formGroup]=\"form\" (submit)=\"submit(form.getRawValue())\" class=\"d-flex flex-column gap-3 mt-2\">\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Product</mat-label>\n            <app-searchable-selector formControlName=\"product_id\" apiUrl=\"api/products\" titleField=\"name\"\n                [selectedValue]=\"data.stockIssueProduct?.product\" [cache]=\"true\"></app-searchable-selector>\n            <mat-error *ngIf=\"isFieldValid('product_id')\">{{ getErrorMessage('product_id') }}</mat-error>\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Quantity</mat-label>\n            <input matInput type=\"number\" formControlName=\"quantity\" min=\"0.01\" step=\"any\">\n            <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Location</mat-label>\n            <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations\"\n                [selectedValue]=\"data.stockIssueProduct?.location\" titleField=\"title\"></app-searchable-selector>\n        </mat-form-field>\n\n        <ng-container *ngIf=\"form.value?.location_id && batchesApiUrl\">\n            <mat-form-field class=\"w-100\" techlifyFeatureEnabled=\"product-batch-numbers\">\n                <mat-label>Batch</mat-label>\n                <app-searchable-selector #batchSelector formControlName=\"batch_id\"\n                    [apiUrl]=\"batchesApiUrl\" [enableSearch]=\"false\"\n                    (itemsChange)=\"onBatchItemsChange()\">\n                </app-searchable-selector>\n            </mat-form-field>\n        </ng-container>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Particulars</mat-label>\n            <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n        </mat-form-field>\n\n        <div class=\"d-flex justify-content-end gap-2\">\n            <button mat-flat-button type=\"button\" [disabled]=\"isWorking\" (click)=\"cancel()\">Cancel</button>\n            <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"isWorking\">Save</button>\n        </div>\n\n    </form>\n</mat-dialog-content>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$1.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: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "ngmodule", type: TechlifyFeatureModule }, { kind: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueProductFormComponent, decorators: [{
             type: Component,
@@ -1361,14 +1361,14 @@ let StockIssueProductListComponent = class StockIssueProductListComponent extend
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueProductListComponent, deps: [{ token: StockIssueProductService }, { token: i2$1.FormBuilder }, { token: i1.TechlifyFeatureService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockIssueProductListComponent, selector: "app-stock-issue-products-list", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, isProductView: { classPropertyName: "isProductView", publicName: "isProductView", isSignal: true, isRequired: false, transformFunction: null }, selectedColumns: { classPropertyName: "selectedColumns", publicName: "selectedColumns", isSignal: true, isRequired: false, transformFunction: null }, exportInProgress: { classPropertyName: "exportInProgress", publicName: "exportInProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Issues</mat-card-title>\n    <app-techlify-icon role='button' name='add'\n      [routerLink]=\"['/inventory/stock-issues/batch-form']\"></app-techlify-icon>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issue Products\" infiniteScroll\n      id=\"stockIssueTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"issue_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Issue ID\">Issue #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-issues', element?.stock_issue_id, 'view']\">\n            {{ element?.stock_issue_id }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.stock_issue?.issuable\"\n            [routerLink]=\"['/maintenances', element?.stock_issue?.issuable_id, 'view']\">\n            Maintenance for {{ element?.stock_issue?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_issue?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_issue?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', element?.stock_issue_id, 'view']\"></app-techlify-icon>\n            <app-stock-issue-product-form-button [stockIssueProduct]=\"element\" [stockIssueId]=\"element?.stock_issue_id\"\n              (saved)=\"reload()\">\n            </app-stock-issue-product-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.product?.name, type: \"Stock Issue Product\"}'\n              (deleted)=\"reload()\"></app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-issue_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalQuantity }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-related\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: StockIssueProductFormButtonComponent, selector: "app-stock-issue-product-form-button", inputs: ["stockIssueProduct", "stockIssueId"], outputs: ["saved"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockIssueProductListComponent, selector: "app-stock-issue-products-list", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, isProductView: { classPropertyName: "isProductView", publicName: "isProductView", isSignal: true, isRequired: false, transformFunction: null }, selectedColumns: { classPropertyName: "selectedColumns", publicName: "selectedColumns", isSignal: true, isRequired: false, transformFunction: null }, exportInProgress: { classPropertyName: "exportInProgress", publicName: "exportInProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Issues</mat-card-title>\n    <app-techlify-icon role='button' name='add'\n      [routerLink]=\"['/inventory/stock-issues/form']\"></app-techlify-icon>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issue Products\" infiniteScroll\n      id=\"stockIssueTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"issue_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Issue ID\">Issue #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-issues', element?.stock_issue_id, 'view']\">\n            {{ element?.stock_issue_id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.stock_issue?.issuable\"\n            [routerLink]=\"['/maintenances', element?.stock_issue?.issuable_id, 'view']\">\n            Maintenance for {{ element?.stock_issue?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_issue?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_issue?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', element?.stock_issue_id, 'view']\"></app-techlify-icon>\n            <app-stock-issue-product-form-button [stockIssueProduct]=\"element\" [stockIssueId]=\"element?.stock_issue_id\"\n              (saved)=\"reload()\">\n            </app-stock-issue-product-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.product?.name, type: \"Stock Issue Product\"}'\n              (deleted)=\"reload()\"></app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-issue_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalQuantity }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-related\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: StockIssueProductFormButtonComponent, selector: "app-stock-issue-product-form-button", inputs: ["stockIssueProduct", "stockIssueId"], outputs: ["saved"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 StockIssueProductListComponent = __decorate([
     UntilDestroy()
 ], StockIssueProductListComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueProductListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-issue-products-list', template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Issues</mat-card-title>\n    <app-techlify-icon role='button' name='add'\n      [routerLink]=\"['/inventory/stock-issues/batch-form']\"></app-techlify-icon>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issue Products\" infiniteScroll\n      id=\"stockIssueTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"issue_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Issue ID\">Issue #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-issues', element?.stock_issue_id, 'view']\">\n            {{ element?.stock_issue_id }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.stock_issue?.issuable\"\n            [routerLink]=\"['/maintenances', element?.stock_issue?.issuable_id, 'view']\">\n            Maintenance for {{ element?.stock_issue?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_issue?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_issue?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', element?.stock_issue_id, 'view']\"></app-techlify-icon>\n            <app-stock-issue-product-form-button [stockIssueProduct]=\"element\" [stockIssueId]=\"element?.stock_issue_id\"\n              (saved)=\"reload()\">\n            </app-stock-issue-product-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.product?.name, type: \"Stock Issue Product\"}'\n              (deleted)=\"reload()\"></app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-issue_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalQuantity }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-related\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
+            args: [{ selector: 'app-stock-issue-products-list', template: "<mat-card>\n  <mat-card-header *ngIf=\"isProductView()\" class=\"d-flex align-items-center gap-2\">\n    <mat-card-title>Stock Issues</mat-card-title>\n    <app-techlify-icon role='button' name='add'\n      [routerLink]=\"['/inventory/stock-issues/form']\"></app-techlify-icon>\n  </mat-card-header>\n\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issue Products\" infiniteScroll\n      id=\"stockIssueTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"issue_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Issue ID\">Issue #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-issues', element?.stock_issue_id, 'view']\">\n            {{ element?.stock_issue_id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }} {{ element?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.stock_issue?.issuable\"\n            [routerLink]=\"['/maintenances', element?.stock_issue?.issuable_id, 'view']\">\n            Maintenance for {{ element?.stock_issue?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.stock_issue?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.stock_issue?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', element?.stock_issue_id, 'view']\"></app-techlify-icon>\n            <app-stock-issue-product-form-button [stockIssueProduct]=\"element\" [stockIssueId]=\"element?.stock_issue_id\"\n              (saved)=\"reload()\">\n            </app-stock-issue-product-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.product?.name, type: \"Stock Issue Product\"}'\n              (deleted)=\"reload()\"></app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-issue_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalQuantity }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-related\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: StockIssueProductService }, { type: i2$1.FormBuilder }, { type: i1.TechlifyFeatureService }] });
 
 class StockTransferService extends TechlifyServiceBaseClass {
@@ -1568,7 +1568,7 @@ class ProductLocationListComponent extends TechlifyListingControllerInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductLocationListComponent, deps: [{ token: ProductStatisticsService }, { token: i1.ErrorHandlerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductLocationListComponent, isStandalone: true, selector: "app-product-location-list", inputs: { product: "product" }, outputs: { updated: "updated" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"pb-3 d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> location_on </span>\n      <strong class=\"mb-0 text-dark\">Product Locations</strong>\n    </div>\n\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Location\">\n        <th mat-header-cell *matHeaderCellDef> Location </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef> Stock </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.current_stock }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <app-stock-transfer-form-button *ngIf=\"element?.id\" [locationFrom]=\"element\" [productId]=\"product?.id\"\n            (saved)=\"reload();updated.emit($event)\"></app-stock-transfer-form-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: StockTransferFormButtonComponent, selector: "app-stock-transfer-form-button", inputs: ["productId", "locationFrom"], outputs: ["saved"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductLocationListComponent, isStandalone: true, selector: "app-product-location-list", inputs: { product: "product" }, outputs: { updated: "updated" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"pb-3 d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> location_on </span>\n      <strong class=\"mb-0 text-dark\">Product Locations</strong>\n    </div>\n\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Location\">\n        <th mat-header-cell *matHeaderCellDef> Location </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef> Stock </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.current_stock }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <app-stock-transfer-form-button *ngIf=\"element?.id\" [locationFrom]=\"element\" [productId]=\"product?.id\"\n            (saved)=\"reload();updated.emit($event)\"></app-stock-transfer-form-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: StockTransferFormButtonComponent, selector: "app-stock-transfer-form-button", inputs: ["productId", "locationFrom"], outputs: ["saved"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductLocationListComponent, decorators: [{
             type: Component,
@@ -1676,7 +1676,7 @@ class StockTransferListComponent extends TechlifyListingControllerInterface {
         this.filterForm.get('sort_by').setValue(active + '|' + direction);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockTransferListComponent, deps: [{ token: StockTransferService }, { token: i2$1.FormBuilder }, { token: i1.ErrorHandlerService }, { token: i4$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockTransferListComponent, isStandalone: true, selector: "app-stock-transfer-list", inputs: { productId: "productId" }, usesInheritance: true, ngImport: i0, template: "<mat-card *ngIf=\"!productId\" class=\"mb-2\">\n  <mat-card-content class=\"mb-0 d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n\n      <div class=\"d-flex flex-row gap-2 align-items-center\">\n        <h3 class=\"mb-0\">Stock Transfers</h3>\n        <app-stock-transfer-form-button [productId]=\"productId\" (saved)=\"reload()\"></app-stock-transfer-form-button>\n      </div>\n    </div>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search Stock Transfers\" matInput formControlName=\"search\">\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Status</mat-label>\n        <app-searchable-selector apiUrl=\"api/stock-transfer-statuses\" formControlName=\"status_ids\"\n                                 [enableSearch]=\"false\" [multiple]=\"true\"></app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"productId\" class=\"mb-0 d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n\n      <div class=\"d-flex flex-row gap-2 align-items-center\">\n        <h3 class=\"mb-0\">Stock Transfers</h3>\n        <app-stock-transfer-form-button [productId]=\"productId\" (saved)=\"reload()\"></app-stock-transfer-form-button>\n      </div>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Transfers\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"date\">Date</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <span>{{ element?.date | date }}</span>\n            <span>{{ element?.particulars }}</span>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\"\n             class=\"text-decoration-none text-dark\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"quantity\">Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_from\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"location_from_id\">From</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_from?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_to\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"location_to_id\">To</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_to?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"status\">Status</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.status?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: StockTransferFormButtonComponent, selector: "app-stock-transfer-form-button", inputs: ["productId", "locationFrom"], outputs: ["saved"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockTransferListComponent, isStandalone: true, selector: "app-stock-transfer-list", inputs: { productId: "productId" }, usesInheritance: true, ngImport: i0, template: "<mat-card *ngIf=\"!productId\" class=\"mb-2\">\n  <mat-card-content class=\"mb-0 d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n\n      <div class=\"d-flex flex-row gap-2 align-items-center\">\n        <h3 class=\"mb-0\">Stock Transfers</h3>\n        <app-stock-transfer-form-button [productId]=\"productId\" (saved)=\"reload()\"></app-stock-transfer-form-button>\n      </div>\n    </div>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search Stock Transfers\" matInput formControlName=\"search\">\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Status</mat-label>\n        <app-searchable-selector apiUrl=\"api/stock-transfer-statuses\" formControlName=\"status_ids\"\n                                 [enableSearch]=\"false\" [multiple]=\"true\"></app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content *ngIf=\"productId\" class=\"mb-0 d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> ungroup </span>\n\n      <div class=\"d-flex flex-row gap-2 align-items-center\">\n        <h3 class=\"mb-0\">Stock Transfers</h3>\n        <app-stock-transfer-form-button [productId]=\"productId\" (saved)=\"reload()\"></app-stock-transfer-form-button>\n      </div>\n    </div>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Transfers\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"date\">Date</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <span>{{ element?.date | date }}</span>\n            <span>{{ element?.particulars }}</span>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\"\n             class=\"text-decoration-none text-dark\">\n            {{ element?.product?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"quantity\">Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_from\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"location_from_id\">From</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_from?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"location_to\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"location_to_id\">To</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.location_to?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"status\">Status</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.status?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: StockTransferFormButtonComponent, selector: "app-stock-transfer-form-button", inputs: ["productId", "locationFrom"], outputs: ["saved"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockTransferListComponent, decorators: [{
             type: Component,
@@ -1751,7 +1751,7 @@ class ProductBasicInfoComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductBasicInfoComponent, deps: [{ token: StockSummaryService }, { token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: { product: "product" }, outputs: { saved: "saved", deleted: "deleted" }, ngImport: i0, template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n\n  <!-- Header: Image + Product Info + Actions -->\n  <mat-card-content class=\"d-flex gap-3 align-items-start\">\n    <div class=\"product-image-container rounded overflow-hidden flex-shrink-0\">\n      <img *ngIf=\"product?.image_file_url\" [src]=\"product.image_file_url\" alt=\"{{ product?.name }}\"\n        class=\"w-100 h-100 object-fit-cover\" />\n      <div *ngIf=\"!product?.image_file_url\"\n        class=\"w-100 h-100 bg-secondary-subtle d-flex align-items-center justify-content-center rounded\">\n        <span class=\"material-symbols-outlined text-secondary\" style=\"font-size: 40px;\">inventory_2</span>\n      </div>\n    </div>\n\n    <div class=\"flex-grow-1\">\n      <div class=\"d-flex justify-content-between align-items-start\">\n        <div>\n          <h5 class=\"fw-semibold mb-1\">{{ product?.name }}</h5>\n          <div class=\"d-flex align-items-center gap-1 text-secondary small flex-wrap\">\n            <span>{{ product?.sku }}</span>\n            <span> \u2022 </span>\n            <span>{{ product?.type?.title }}</span>\n            <span> \u2022 </span>\n            <span class=\"material-symbols-outlined\" style=\"font-size: 16px;\">view_in_ar</span>\n            <span>{{ product?.measure?.title }}</span>\n          </div>\n        </div>\n        <div class=\"d-flex gap-2 flex-shrink-0 align-middle text-secondary\">\n          <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n          <app-techlify-delete-button [model]=\"product\" [data]=\"{type: 'Product', title: product?.name}\"\n            [service]=\"service\"></app-techlify-delete-button>\n        </div>\n      </div>\n\n      <!-- Categories -->\n      <div *ngIf=\"product?.categories?.length\" class=\"d-flex flex-wrap gap-1 mt-2\">\n        <span class=\"badge border bg-light text-dark fw-medium\" *ngFor=\"let category of product?.categories\">\n          {{ category?.title }}\n        </span>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Stock Summary Row -->\n  <mat-card-content class=\"d-flex flex-row justify-content-between py-3\">\n    <!-- Stock Receipts -->\n    <div *ngIf=\"stockSummary\" class=\"d-flex flex-column\">\n      <small class=\"text-secondary\">Stock Receipts</small>\n      <p class=\"mb-0 fw-semibold fs-2\">{{ stockSummary?.stock_receipts_quantity_sum | number }}</p>\n      <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary\">\n        Last Added On {{ product?.last_stock_receipt?.date | date: 'MMM d, y' }}\n      </small>\n    </div>\n\n    <!-- Stock Issues -->\n    <div *ngIf=\"stockSummary\" class=\"d-flex flex-column\">\n      <small class=\"text-secondary\">Stock Issues</small>\n      <p class=\"mb-0 fw-semibold fs-2\">{{ stockSummary?.stock_issuances_quantity_sum | number }}</p>\n      <small *ngIf=\"product?.last_stock_issue\" class=\"text-secondary\">\n        Last Added On {{ product?.last_stock_issue?.date | date: 'MMM d, y' }}\n      </small>\n    </div>\n\n    <!-- On Hand -->\n    <div class=\"d-flex flex-column\">\n      <small class=\"text-secondary\">On Hand</small>\n      <p class=\"mb-0 fw-semibold fs-2 text-success\"\n        [ngClass]=\"{ 'text-danger': product?.stock_on_hand < product?.reorder_point }\">{{ product?.stock_on_hand |\n        number }}</p>\n      <small *ngIf=\"product?.reorder_point\" class=\"text-secondary\">\n        Reorder At {{ product?.reorder_point }}\n      </small>\n    </div>\n  </mat-card-content>\n\n  <!-- Description -->\n  <mat-card-content *ngIf=\"product?.description\" class=\"pt-2\">\n    <small class=\"text-secondary\">Description</small>\n    <p class=\"mb-0 mt-1\">{{ product?.description }}</p>\n  </mat-card-content>\n\n  <div class=\"d-flex flex-row justify-content-around align-items-center w-100 mt-2\">\n    <ngx-barcode6 [bc-value]=\"product?.sku\" [bc-display-value]=\"true\">\n    </ngx-barcode6>\n\n    <qrcode [qrdata]=\"product?.sku\" [width]=\"128\"></qrcode>\n  </div>\n\n</mat-card>", styles: [".product-image-container{width:80px;height:80px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.QRCodeComponent, selector: "qrcode", inputs: ["allowEmptyString", "colorDark", "colorLight", "cssClass", "elementType", "errorCorrectionLevel", "imageSrc", "imageHeight", "imageWidth", "margin", "qrdata", "scale", "version", "width", "alt", "ariaLabel", "title"], outputs: ["qrCodeURL"] }, { kind: "component", type: i6$3.NgxBarcode6, selector: "ngx-barcode6", inputs: ["bc-element-type", "bc-class", "bc-format", "bc-line-color", "bc-width", "bc-height", "bc-display-value", "bc-font-options", "bc-font", "bc-text-align", "bc-text-position", "bc-text-margin", "bc-font-size", "bc-background", "bc-margin", "bc-margin-top", "bc-margin-bottom", "bc-margin-left", "bc-margin-right", "bc-value", "bc-valid"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: { product: "product" }, outputs: { saved: "saved", deleted: "deleted" }, ngImport: i0, template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n\n  <!-- Header: Image + Product Info + Actions -->\n  <mat-card-content class=\"d-flex gap-3 align-items-start\">\n    <div class=\"product-image-container rounded overflow-hidden flex-shrink-0\">\n      <img *ngIf=\"product?.image_file_url\" [src]=\"product.image_file_url\" alt=\"{{ product?.name }}\"\n        class=\"w-100 h-100 object-fit-cover\" />\n      <div *ngIf=\"!product?.image_file_url\"\n        class=\"w-100 h-100 bg-secondary-subtle d-flex align-items-center justify-content-center rounded\">\n        <span class=\"material-symbols-outlined text-secondary\" style=\"font-size: 40px;\">inventory_2</span>\n      </div>\n    </div>\n\n    <div class=\"flex-grow-1\">\n      <div class=\"d-flex justify-content-between align-items-start\">\n        <div>\n          <h5 class=\"fw-semibold mb-1\">{{ product?.name }}</h5>\n          <div class=\"d-flex align-items-center gap-1 text-secondary small flex-wrap\">\n            <span>{{ product?.sku }}</span>\n            <span> \u2022 </span>\n            <span>{{ product?.type?.title }}</span>\n            <span> \u2022 </span>\n            <span class=\"material-symbols-outlined\" style=\"font-size: 16px;\">view_in_ar</span>\n            <span>{{ product?.measure?.title }}</span>\n          </div>\n        </div>\n        <div class=\"d-flex gap-2 flex-shrink-0 align-middle text-secondary\">\n          <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n          <app-techlify-delete-button [model]=\"product\" [data]=\"{type: 'Product', title: product?.name}\"\n            [service]=\"service\"></app-techlify-delete-button>\n        </div>\n      </div>\n\n      <!-- Categories -->\n      <div *ngIf=\"product?.categories?.length\" class=\"d-flex flex-wrap gap-1 mt-2\">\n        <span class=\"badge border bg-light text-dark fw-medium\" *ngFor=\"let category of product?.categories\">\n          {{ category?.title }}\n        </span>\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Stock Summary Row -->\n  <mat-card-content class=\"d-flex flex-row justify-content-between py-3\">\n    <!-- Stock Receipts -->\n    <div *ngIf=\"stockSummary\" class=\"d-flex flex-column\">\n      <small class=\"text-secondary\">Stock Receipts</small>\n      <p class=\"mb-0 fw-semibold fs-2\">{{ stockSummary?.stock_receipts_quantity_sum | number }}</p>\n      <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary\">\n        Last Added On {{ product?.last_stock_receipt?.date | date: 'MMM d, y' }}\n      </small>\n    </div>\n\n    <!-- Stock Issues -->\n    <div *ngIf=\"stockSummary\" class=\"d-flex flex-column\">\n      <small class=\"text-secondary\">Stock Issues</small>\n      <p class=\"mb-0 fw-semibold fs-2\">{{ stockSummary?.stock_issuances_quantity_sum | number }}</p>\n      <small *ngIf=\"product?.last_stock_issue\" class=\"text-secondary\">\n        Last Added On {{ product?.last_stock_issue?.date | date: 'MMM d, y' }}\n      </small>\n    </div>\n\n    <!-- On Hand -->\n    <div class=\"d-flex flex-column\">\n      <small class=\"text-secondary\">On Hand</small>\n      <p class=\"mb-0 fw-semibold fs-2 text-success\"\n        [ngClass]=\"{ 'text-danger': product?.stock_on_hand < product?.reorder_point }\">{{ product?.stock_on_hand |\n        number }}</p>\n      <small *ngIf=\"product?.reorder_point\" class=\"text-secondary\">\n        Reorder At {{ product?.reorder_point }}\n      </small>\n    </div>\n  </mat-card-content>\n\n  <!-- Description -->\n  <mat-card-content *ngIf=\"product?.description\" class=\"pt-2\">\n    <small class=\"text-secondary\">Description</small>\n    <p class=\"mb-0 mt-1\">{{ product?.description }}</p>\n  </mat-card-content>\n\n  <div class=\"d-flex flex-row justify-content-around align-items-center w-100 mt-2\">\n    <ngx-barcode6 [bc-value]=\"product?.sku\" [bc-display-value]=\"true\">\n    </ngx-barcode6>\n\n    <qrcode [qrdata]=\"product?.sku\" [width]=\"128\"></qrcode>\n  </div>\n\n</mat-card>", styles: [".product-image-container{width:80px;height:80px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.QRCodeComponent, selector: "qrcode", inputs: ["allowEmptyString", "colorDark", "colorLight", "cssClass", "elementType", "errorCorrectionLevel", "imageSrc", "imageHeight", "imageWidth", "margin", "qrdata", "scale", "version", "width", "alt", "ariaLabel", "title"], outputs: ["qrCodeURL"] }, { kind: "component", type: i6$2.NgxBarcode6, selector: "ngx-barcode6", inputs: ["bc-element-type", "bc-class", "bc-format", "bc-line-color", "bc-width", "bc-height", "bc-display-value", "bc-font-options", "bc-font", "bc-text-align", "bc-text-position", "bc-text-margin", "bc-font-size", "bc-background", "bc-margin", "bc-margin-top", "bc-margin-bottom", "bc-margin-left", "bc-margin-right", "bc-value", "bc-valid"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductBasicInfoComponent, decorators: [{
             type: Component,
@@ -1819,11 +1819,11 @@ class ProductViewPageComponent {
         this.location.back();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductViewPageComponent, deps: [{ token: ProductService }, { token: i4$1.ActivatedRoute }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductViewPageComponent, selector: "app-product-view-page", viewQueries: [{ propertyName: "productLocationList", first: true, predicate: ["productLocationList"], descendants: true }, { propertyName: "stockTransferList", first: true, predicate: ["stockTransferList"], descendants: true }, { propertyName: "stockReceiptsListPage", first: true, predicate: ["stockReceiptsListPage"], descendants: true }, { propertyName: "stockIssueProductListPage", first: true, predicate: ["stockIssueProductListPage"], descendants: true }], ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\n  <div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\n    <div style=\"width: calc(30% - 1rem)\" class=\"d-flex flex-column gap-3\">\n      <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n        (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n      <app-product-location-list [product]=\"product\" (updated)=\"stockTransferList.reload(); stockIssueProductListPage.reload()\"\n        #productLocationList></app-product-location-list>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"Product\"\n        [relatedModelId]=\"product.id\"></app-note-list>\n\n    </div>\n    <div style=\"width: calc(75%)\" class=\"d-flex flex-column gap-3\">\n      <app-stock-receipt-product-list #stockReceiptsListPage [filters]=\"{ product_ids: product?.id }\"\n        [isProductView]=\"true\" (listUpdated)=\"getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-receipt-product-list>\n\n      <app-stock-issue-products-list #stockIssueProductListPage [isProductView]=\"true\"\n        [filters]=\"{ product_ids: product?.id }\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-issue-products-list>\n\n      <app-stock-transfer-list #stockTransferList *ngIf=\"product\" [productId]=\"product.id\"></app-stock-transfer-list>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StockReceiptProductsListComponent, selector: "app-stock-receipt-product-list", inputs: ["filters", "isProductView", "selectedColumns", "exportInProgress"], outputs: ["listUpdated", "columnConfigReady"] }, { kind: "component", type: StockIssueProductListComponent, selector: "app-stock-issue-products-list", inputs: ["filters", "isProductView", "selectedColumns", "exportInProgress"], outputs: ["listUpdated", "columnConfigReady"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ProductLocationListComponent, selector: "app-product-location-list", inputs: ["product"], outputs: ["updated"] }, { kind: "component", type: StockTransferListComponent, selector: "app-stock-transfer-list", inputs: ["productId"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: ["product"], outputs: ["saved", "deleted"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductViewPageComponent, selector: "app-product-view-page", viewQueries: [{ propertyName: "productLocationList", first: true, predicate: ["productLocationList"], descendants: true }, { propertyName: "stockTransferList", first: true, predicate: ["stockTransferList"], descendants: true }, { propertyName: "stockReceiptsListPage", first: true, predicate: ["stockReceiptsListPage"], descendants: true }, { propertyName: "stockIssueProductListPage", first: true, predicate: ["stockIssueProductListPage"], descendants: true }], ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n  <div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n    <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n      <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n        (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n      <app-product-location-list [product]=\"product\"\n        (updated)=\"stockTransferList.reload(); stockIssueProductListPage.reload()\"\n        #productLocationList></app-product-location-list>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"Product\"\n        [relatedModelId]=\"product.id\"></app-note-list>\n\n    </div>\n    <div class=\"d-flex flex-column gap-3 w-100\">\n      <app-stock-receipt-product-list #stockReceiptsListPage [filters]=\"{ product_ids: product?.id }\"\n        [isProductView]=\"true\" (listUpdated)=\"getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-receipt-product-list>\n\n      <app-stock-issue-products-list #stockIssueProductListPage [isProductView]=\"true\"\n        [filters]=\"{ product_ids: product?.id }\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-issue-products-list>\n\n      <app-stock-transfer-list #stockTransferList *ngIf=\"product\" [productId]=\"product.id\"></app-stock-transfer-list>\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StockReceiptProductsListComponent, selector: "app-stock-receipt-product-list", inputs: ["filters", "isProductView", "selectedColumns", "exportInProgress"], outputs: ["listUpdated", "columnConfigReady"] }, { kind: "component", type: StockIssueProductListComponent, selector: "app-stock-issue-products-list", inputs: ["filters", "isProductView", "selectedColumns", "exportInProgress"], outputs: ["listUpdated", "columnConfigReady"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ProductLocationListComponent, selector: "app-product-location-list", inputs: ["product"], outputs: ["updated"] }, { kind: "component", type: StockTransferListComponent, selector: "app-stock-transfer-list", inputs: ["productId"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: ["product"], outputs: ["saved", "deleted"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductViewPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-product-view-page', template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\n  <div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3\">\n    <div style=\"width: calc(30% - 1rem)\" class=\"d-flex flex-column gap-3\">\n      <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n        (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n      <app-product-location-list [product]=\"product\" (updated)=\"stockTransferList.reload(); stockIssueProductListPage.reload()\"\n        #productLocationList></app-product-location-list>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"Product\"\n        [relatedModelId]=\"product.id\"></app-note-list>\n\n    </div>\n    <div style=\"width: calc(75%)\" class=\"d-flex flex-column gap-3\">\n      <app-stock-receipt-product-list #stockReceiptsListPage [filters]=\"{ product_ids: product?.id }\"\n        [isProductView]=\"true\" (listUpdated)=\"getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-receipt-product-list>\n\n      <app-stock-issue-products-list #stockIssueProductListPage [isProductView]=\"true\"\n        [filters]=\"{ product_ids: product?.id }\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-issue-products-list>\n\n      <app-stock-transfer-list #stockTransferList *ngIf=\"product\" [productId]=\"product.id\"></app-stock-transfer-list>\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'app-product-view-page', template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n  <div *ngIf=\"product\" class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n    <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n      <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n        (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n      <app-product-location-list [product]=\"product\"\n        (updated)=\"stockTransferList.reload(); stockIssueProductListPage.reload()\"\n        #productLocationList></app-product-location-list>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"Product\"\n        [relatedModelId]=\"product.id\"></app-note-list>\n\n    </div>\n    <div class=\"d-flex flex-column gap-3 w-100\">\n      <app-stock-receipt-product-list #stockReceiptsListPage [filters]=\"{ product_ids: product?.id }\"\n        [isProductView]=\"true\" (listUpdated)=\"getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-receipt-product-list>\n\n      <app-stock-issue-products-list #stockIssueProductListPage [isProductView]=\"true\"\n        [filters]=\"{ product_ids: product?.id }\" (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary();\n        productLocationList.reload();\n      \"></app-stock-issue-products-list>\n\n      <app-stock-transfer-list #stockTransferList *ngIf=\"product\" [productId]=\"product.id\"></app-stock-transfer-list>\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: () => [{ type: ProductService }, { type: i4$1.ActivatedRoute }, { type: i3.Location }], propDecorators: { productLocationList: [{
                 type: ViewChild,
                 args: ['productLocationList']
@@ -2131,7 +2131,7 @@ class ProductFormComponent extends TechlifyFormComponentInterface {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductFormComponent, deps: [{ token: i1.EntityFileService }, { token: i2$1.FormBuilder }, { token: i1.FormValidatorService }, { token: ProductService }, { token: i4$1.ActivatedRoute }, { token: i1.ErrorHandlerService }, { token: i3.Location }, { token: i4$1.Router }, { token: i1.FormConfigurationFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ProductFormComponent, selector: "app-product-form", inputs: { displayedFormFields: "displayedFormFields", displayedFormSections: "displayedFormSections" }, usesInheritance: true, ngImport: i0, template: "@if (isFormSetup()) {\n<div class=\"d-flex flex-column gap-2\">\n  <mat-card class='container'>\n    <mat-card-content>\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <span></span>\n        <h3 class=\"text-center m-0\">Product Form</h3>\n        <app-form-configuration-for-form formCode='product'></app-form-configuration-for-form>\n      </div>\n    </mat-card-content>\n  </mat-card>\n  <mat-card class='container'>\n    <mat-card-content>\n      <form [formGroup]=\"form\" (submit)=\"save()\">\n        <div class=\"d-flex flex-column\">\n\n          <div class=\"d-flex flex-column justify-content-center align-items-center\">\n            <ng-template #fileUpload>\n              <div class=\"w-100\">\n                <app-file-dropper (fileChanged)=\"fileChanged($event)\" [config]=\"fileConfig\" [fileArray]=\"fileList\">\n                </app-file-dropper>\n              </div>\n            </ng-template>\n            <div *ngIf=\"form.get('image_file')?.value; else fileUpload;\" style='width: 200px;'\n              class='justify-content-center align-items-center'>\n              <app-document-viewer (remove)=\"removeFile()\" [config]=\"viewerConfig\"\n                [fileUrl]=\"form.get('image_file_url')?.value\" [file]=\"form.get('image_file')?.value\">\n              </app-document-viewer>\n            </div>\n          </div>\n\n          <div class=\"d-flex flex-column mt-2\" *ngIf=\"isFormSectionShown('basic information')\">\n            <h6>Basic Information</h6>\n            <div class=\"d-flex gap-2\">\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('name')\">\n                <mat-label>Name</mat-label>\n                <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n                <mat-error *ngIf=\"isFieldValid('name')\">{{ getErrorMessage('name') }} </mat-error>\n              </mat-form-field>\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('product type')\">\n                <mat-label>Product Type</mat-label>\n                <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\">\n                </app-searchable-selector>\n                <mat-error *ngIf=\"isFieldValid('type_id')\">{{ getErrorMessage('type_id') }} </mat-error>\n              </mat-form-field>\n            </div>\n\n            <div class=\"d-flex gap-2\">\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('sku')\">\n                <mat-label>SKU</mat-label>\n                <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n                <mat-error *ngIf=\"isFieldValid('sku')\">{{ getErrorMessage('sku') }} </mat-error>\n              </mat-form-field>\n\n              <mat-form-field class=\"w-50\">\n                <mat-label>Category</mat-label>\n                <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\"\n                  [multiple]=\"true\">\n                </app-searchable-selector>\n                <mat-error *ngIf=\"isFieldValid('category_ids')\">\n                  {{ getErrorMessage('category_ids') }}\n                </mat-error>\n              </mat-form-field>\n            </div>\n\n          <div class=\"d-flex gap-2\">\n            <mat-form-field class=\"w-50 align-self-start\"\n              *ngIf=\"isFormFieldShown('color') && formConfigurationUtilityService.getFieldEnabled('color_id')\">\n              <mat-label>\n                Color <sup *ngIf=\"formConfigurationUtilityService.getFieldRequired('color_id')\">*</sup>\n              </mat-label>\n              <app-searchable-selector apiUrl=\"api/attributes?type_code=color\"\n                formControlName=\"color_id\"></app-searchable-selector>\n              <mat-error *ngIf=\"isFieldValid('color_id')\">{{getErrorMessage('color_id')}}</mat-error>\n            </mat-form-field>\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('description')\">\n                <mat-label>Description</mat-label>\n                <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div class=\"d-flex flex-column\" *ngIf=\"isFormSectionShown('inventory information')\">\n            <h6>Inventory Information</h6>\n            <div class=\"d-flex gap-2\">\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('product measure')\">\n                <mat-label>Measure</mat-label>\n                <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n                </app-searchable-selector>\n                <mat-error *ngIf=\"isFieldValid('measure_id')\">{{ getErrorMessage('measure_id') }} </mat-error>\n              </mat-form-field>\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('reorder point')\">\n                <mat-label>Reorder Point</mat-label>\n                <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n                <mat-error *ngIf=\"isFieldValid('reorder_point')\">{{ getErrorMessage('reorder_point') }} </mat-error>\n              </mat-form-field>\n            </div>\n            <div class=\"d-flex gap-2\">\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('initial quantity')\">\n                <mat-label>Initial Quantity</mat-label>\n                <input matInput placeholder=\"Initial Quantity\" formControlName=\"initial_quantity\" />\n                <mat-error *ngIf=\"isFieldValid('initial_quantity')\">{{ getErrorMessage('initial_quantity') }}\n                </mat-error>\n              </mat-form-field>\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('initial quantity date')\">\n                <mat-label>Initial Quantity Date</mat-label>\n                <input matInput [matDatepicker]=\"pickerInitialQuantityDate\" placeholder=\"Initial Quantity Date\"\n                  formControlName=\"initial_quantity_date\" />\n                <mat-datepicker-toggle matSuffix [for]=\"pickerInitialQuantityDate\"></mat-datepicker-toggle>\n                <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n                <mat-error *ngIf=\"isFieldValid('initial_quantity_date')\">{{ getErrorMessage('initial_quantity_date') }}\n                </mat-error>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class=\"d-flex flex-column\" *ngIf=\"isFormSectionShown('sales information')\">\n            <h6>Sale Information</h6>\n            <div class=\"d-flex gap-2\">\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('sales price')\">\n                <mat-label>Selling Price</mat-label>\n                <input matInput placeholder=\"Selling Price\" formControlName=\"sale_price\" required type=\"number\"\n                  step=\"any\" />\n                <mat-error *ngIf=\"isFieldValid('sale_price')\">{{ getErrorMessage('sale_price') }} </mat-error>\n              </mat-form-field>\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('condition types')\">\n                <mat-label>Condition</mat-label>\n                <app-searchable-selector apiUrl=\"api/condition-types\"\n                  formControlName=\"condition_type_id\"></app-searchable-selector>\n              </mat-form-field>\n            </div>\n            <div class=\"d-flex gap-2\">\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('minimum price')\">\n                <mat-label>Minimum Price</mat-label>\n                <input matInput placeholder=\"Minimum Price\" formControlName=\"minimum_price\" required type=\"number\"\n                  step=\"any\" />\n                <mat-error *ngIf=\"isFieldValid('minimum_price')\">{{ getErrorMessage('minimum_price') }} </mat-error>\n              </mat-form-field>\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('maximum price')\">\n                <mat-label>Maximum Price</mat-label>\n                <input matInput placeholder=\"Maximum Price\" formControlName=\"maximum_price\" type=\"number\" step=\"any\" />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div class=\"w-100 d-flex justify-content-between\">\n            @if (!isUpdate) {\n            <mat-checkbox [formControl]=\"isCreateAnother\">Create Another\n              <span *ngIf=\"savedCount > 0\">({{ savedCount }} items saved)</span>\n            </mat-checkbox>\n            } @else {\n            <span class='d-flex flex-grow'></span>\n            }\n\n            <div class=\"d-flex flex-row gap-3 align-items-center justify-content-end\">\n              <button [disabled]=\"isWorking\" mat-button class=\"mt-2\" type=\"button\" (click)=\"location.back()\">\n                Cancel\n              </button>\n              <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n            </div>\n          </div>\n        </div>\n      </form>\n    </mat-card-content>\n  </mat-card>\n</div>\n} @else {\n<mat-card-content class=\"d-flex vh-100 justify-content-center align-items-center\">\n  <mat-spinner></mat-spinner>\n</mat-card-content>\n}", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.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: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.FormConfigurationForFormComponent, selector: "app-form-configuration-for-form", inputs: ["formCode"] }, { kind: "component", type: i1.FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: i1.DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ProductFormComponent, selector: "app-product-form", inputs: { displayedFormFields: "displayedFormFields", displayedFormSections: "displayedFormSections" }, usesInheritance: true, ngImport: i0, template: "@if (isFormSetup()) {\n<div class=\"d-flex flex-column gap-2\">\n  <mat-card class='container'>\n    <mat-card-content>\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <span></span>\n        <h3 class=\"text-center m-0\">Product Form</h3>\n        <app-form-configuration-for-form formCode='product'></app-form-configuration-for-form>\n      </div>\n    </mat-card-content>\n  </mat-card>\n  <mat-card class='container'>\n    <mat-card-content>\n      <form [formGroup]=\"form\" (submit)=\"save()\">\n        <div class=\"d-flex flex-column\">\n\n          <div class=\"d-flex flex-column justify-content-center align-items-center\">\n            <ng-template #fileUpload>\n              <div class=\"w-100\">\n                <app-file-dropper (fileChanged)=\"fileChanged($event)\" [config]=\"fileConfig\" [fileArray]=\"fileList\">\n                </app-file-dropper>\n              </div>\n            </ng-template>\n            <div *ngIf=\"form.get('image_file')?.value; else fileUpload;\" style='width: 200px;'\n              class='justify-content-center align-items-center'>\n              <app-document-viewer (remove)=\"removeFile()\" [config]=\"viewerConfig\"\n                [fileUrl]=\"form.get('image_file_url')?.value\" [file]=\"form.get('image_file')?.value\">\n              </app-document-viewer>\n            </div>\n          </div>\n\n          <div class=\"d-flex flex-column mt-2\" *ngIf=\"isFormSectionShown('basic information')\">\n            <h6>Basic Information</h6>\n            <div class=\"d-flex gap-2\">\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('name')\">\n                <mat-label>Name</mat-label>\n                <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n                <mat-error *ngIf=\"isFieldValid('name')\">{{ getErrorMessage('name') }} </mat-error>\n              </mat-form-field>\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('product type')\">\n                <mat-label>Product Type</mat-label>\n                <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\">\n                </app-searchable-selector>\n                <mat-error *ngIf=\"isFieldValid('type_id')\">{{ getErrorMessage('type_id') }} </mat-error>\n              </mat-form-field>\n            </div>\n\n            <div class=\"d-flex gap-2\">\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('sku')\">\n                <mat-label>SKU</mat-label>\n                <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n                <mat-error *ngIf=\"isFieldValid('sku')\">{{ getErrorMessage('sku') }} </mat-error>\n              </mat-form-field>\n\n              <mat-form-field class=\"w-50\">\n                <mat-label>Category</mat-label>\n                <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\"\n                  [multiple]=\"true\">\n                </app-searchable-selector>\n                <mat-error *ngIf=\"isFieldValid('category_ids')\">\n                  {{ getErrorMessage('category_ids') }}\n                </mat-error>\n              </mat-form-field>\n            </div>\n\n          <div class=\"d-flex gap-2\">\n            <mat-form-field class=\"w-50 align-self-start\"\n              *ngIf=\"isFormFieldShown('color') && formConfigurationUtilityService.getFieldEnabled('color_id')\">\n              <mat-label>\n                Color <sup *ngIf=\"formConfigurationUtilityService.getFieldRequired('color_id')\">*</sup>\n              </mat-label>\n              <app-searchable-selector apiUrl=\"api/attributes?type_code=color\"\n                formControlName=\"color_id\"></app-searchable-selector>\n              <mat-error *ngIf=\"isFieldValid('color_id')\">{{getErrorMessage('color_id')}}</mat-error>\n            </mat-form-field>\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('description')\">\n                <mat-label>Description</mat-label>\n                <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div class=\"d-flex flex-column\" *ngIf=\"isFormSectionShown('inventory information')\">\n            <h6>Inventory Information</h6>\n            <div class=\"d-flex gap-2\">\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('product measure')\">\n                <mat-label>Measure</mat-label>\n                <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n                </app-searchable-selector>\n                <mat-error *ngIf=\"isFieldValid('measure_id')\">{{ getErrorMessage('measure_id') }} </mat-error>\n              </mat-form-field>\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('reorder point')\">\n                <mat-label>Reorder Point</mat-label>\n                <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n                <mat-error *ngIf=\"isFieldValid('reorder_point')\">{{ getErrorMessage('reorder_point') }} </mat-error>\n              </mat-form-field>\n            </div>\n            <div class=\"d-flex gap-2\">\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('initial quantity')\">\n                <mat-label>Initial Quantity</mat-label>\n                <input matInput placeholder=\"Initial Quantity\" formControlName=\"initial_quantity\" />\n                <mat-error *ngIf=\"isFieldValid('initial_quantity')\">{{ getErrorMessage('initial_quantity') }}\n                </mat-error>\n              </mat-form-field>\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('initial quantity date')\">\n                <mat-label>Initial Quantity Date</mat-label>\n                <input matInput [matDatepicker]=\"pickerInitialQuantityDate\" placeholder=\"Initial Quantity Date\"\n                  formControlName=\"initial_quantity_date\" />\n                <mat-datepicker-toggle matSuffix [for]=\"pickerInitialQuantityDate\"></mat-datepicker-toggle>\n                <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n                <mat-error *ngIf=\"isFieldValid('initial_quantity_date')\">{{ getErrorMessage('initial_quantity_date') }}\n                </mat-error>\n              </mat-form-field>\n            </div>\n          </div>\n          <div class=\"d-flex flex-column\" *ngIf=\"isFormSectionShown('sales information')\">\n            <h6>Sale Information</h6>\n            <div class=\"d-flex gap-2\">\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('sales price')\">\n                <mat-label>Selling Price</mat-label>\n                <input matInput placeholder=\"Selling Price\" formControlName=\"sale_price\" required type=\"number\"\n                  step=\"any\" />\n                <mat-error *ngIf=\"isFieldValid('sale_price')\">{{ getErrorMessage('sale_price') }} </mat-error>\n              </mat-form-field>\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('condition types')\">\n                <mat-label>Condition</mat-label>\n                <app-searchable-selector apiUrl=\"api/condition-types\"\n                  formControlName=\"condition_type_id\"></app-searchable-selector>\n              </mat-form-field>\n            </div>\n            <div class=\"d-flex gap-2\">\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('minimum price')\">\n                <mat-label>Minimum Price</mat-label>\n                <input matInput placeholder=\"Minimum Price\" formControlName=\"minimum_price\" required type=\"number\"\n                  step=\"any\" />\n                <mat-error *ngIf=\"isFieldValid('minimum_price')\">{{ getErrorMessage('minimum_price') }} </mat-error>\n              </mat-form-field>\n\n              <mat-form-field class=\"w-50\" *ngIf=\"isFormFieldShown('maximum price')\">\n                <mat-label>Maximum Price</mat-label>\n                <input matInput placeholder=\"Maximum Price\" formControlName=\"maximum_price\" type=\"number\" step=\"any\" />\n              </mat-form-field>\n            </div>\n          </div>\n\n          <div class=\"w-100 d-flex justify-content-between\">\n            @if (!isUpdate) {\n            <mat-checkbox [formControl]=\"isCreateAnother\">Create Another\n              <span *ngIf=\"savedCount > 0\">({{ savedCount }} items saved)</span>\n            </mat-checkbox>\n            } @else {\n            <span class='d-flex flex-grow'></span>\n            }\n\n            <div class=\"d-flex flex-row gap-3 align-items-center justify-content-end\">\n              <button [disabled]=\"isWorking\" mat-button class=\"mt-2\" type=\"button\" (click)=\"location.back()\">\n                Cancel\n              </button>\n              <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n            </div>\n          </div>\n        </div>\n      </form>\n    </mat-card-content>\n  </mat-card>\n</div>\n} @else {\n<mat-card-content class=\"d-flex vh-100 justify-content-center align-items-center\">\n  <mat-spinner></mat-spinner>\n</mat-card-content>\n}", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8$1.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: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.FormConfigurationForFormComponent, selector: "app-form-configuration-for-form", inputs: ["formCode"] }, { kind: "component", type: i1.FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: i1.DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductFormComponent, decorators: [{
             type: Component,
@@ -2235,7 +2235,7 @@ class ProductDeleteButtonComponent {
         this.matDialog.open(templateRef, { width: '500px' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: ProductService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductDeleteButtonComponent, selector: "app-product-delete-button", inputs: { product: "product" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer text-secondary\" (click)=\"showDeleteDialog(deleteProductDialog)\"> delete </mat-icon>\n\n<ng-template #deleteProductDialog>\n  <h3 mat-dialog-title>Delete Product</h3>\n  <div mat-dialog-content>\n    Are you sure? You want to delete the\n    <strong>{{ product?.name }}</strong> ?\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-raised-button color=\"warn\" (click)=\"deleteProduct()\">\n      Delete\n    </button>\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-flat-button mat-dialog-close>Cancel</button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductDeleteButtonComponent, selector: "app-product-delete-button", inputs: { product: "product" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer text-secondary\" (click)=\"showDeleteDialog(deleteProductDialog)\"> delete </mat-icon>\n\n<ng-template #deleteProductDialog>\n  <h3 mat-dialog-title>Delete Product</h3>\n  <div mat-dialog-content>\n    Are you sure? You want to delete the\n    <strong>{{ product?.name }}</strong> ?\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-raised-button color=\"warn\" (click)=\"deleteProduct()\">\n      Delete\n    </button>\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-flat-button mat-dialog-close>Cancel</button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductDeleteButtonComponent, decorators: [{
             type: Component,
@@ -2381,7 +2381,7 @@ class SupplierFormComponent extends TechlifyFormComponentInterface {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierFormComponent, deps: [{ token: i2$1.FormBuilder }, { token: i1.FormValidatorService }, { token: i4$2.NgxSpinnerService }, { token: i1$1.MatDialogRef }, { token: i1.ErrorHandlerService }, { token: MAT_DIALOG_DATA }, { token: SupplierService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SupplierFormComponent, selector: "app-supplier-form", usesInheritance: true, ngImport: i0, template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"form\" class=\"mat-typography\">\n  <div class=\"d-flex flex-column justify-content-start gap-2\" mat-dialog-content>\n    <h2 class=\"mb-2\">{{ isUpdateMode ? 'Edit' : 'Create' }} Supplier</h2>\n    <mat-form-field>\n      <mat-label>Company Name</mat-label>\n      <input autocomplete=\"off\" formControlName=\"company_name\" matInput placeholder=\"Company Name\" required />\n      <mat-error *ngIf=\"isFieldValid('company_name')\">\n        {{ getErrorMessage('company_name') }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>Contact Name</mat-label>\n      <input autocomplete=\"off\" formControlName=\"contact_name\" matInput placeholder=\"Contact Name\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Types</mat-label>\n      <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_id\" titleField=\"title\">\n      </app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('supplier_type_id')\">\n        {{ getErrorMessage('supplier_type_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Phone</mat-label>\n      <input autocomplete=\"off\" formControlName=\"phone\" matInput placeholder=\"Phone\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Email</mat-label>\n      <input autocomplete=\"off\" formControlName=\"email\" matInput placeholder=\"Email\" type=\"email\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Address</mat-label>\n      <input autocomplete=\"off\" formControlName=\"address\" matInput placeholder=\"Address\" />\n      <mat-error *ngIf=\"isFieldValid('address')\">\n        {{ getErrorMessage('address') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Details</mat-label>\n      <input autocomplete=\"off\" formControlName=\"details\" matInput placeholder=\"Details\" />\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-between align-items-center gap-3\">\n      <div class=\"d-flex flex-row gap-2 align-items-center\">\n        <mat-checkbox [formControl]=\"isCreateAnother\">Create Another</mat-checkbox>\n        <small class=\"text-secondary\">({{ totalRecordSaved() }} records saved successfully)</small>\n      </div>\n\n      <div class=\"d-flex flex-row gap-3 align-items-center\">\n        <button (click)=\"dialogRef.close()\" [disabled]=\"isWorking\" mat-flat-button type=\"button\">Cancel</button>\n        <button [disabled]=\"isWorking\" color=\"primary\" mat-raised-button type=\"submit\">Save</button>\n      </div>\n    </div>\n  </div>\n</form>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.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: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SupplierFormComponent, selector: "app-supplier-form", usesInheritance: true, ngImport: i0, template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"form\" class=\"mat-typography\">\n  <div class=\"d-flex flex-column justify-content-start gap-2\" mat-dialog-content>\n    <h2 class=\"mb-2\">{{ isUpdateMode ? 'Edit' : 'Create' }} Supplier</h2>\n    <mat-form-field>\n      <mat-label>Company Name</mat-label>\n      <input autocomplete=\"off\" formControlName=\"company_name\" matInput placeholder=\"Company Name\" required />\n      <mat-error *ngIf=\"isFieldValid('company_name')\">\n        {{ getErrorMessage('company_name') }}\n      </mat-error>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>Contact Name</mat-label>\n      <input autocomplete=\"off\" formControlName=\"contact_name\" matInput placeholder=\"Contact Name\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Types</mat-label>\n      <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_id\" titleField=\"title\">\n      </app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('supplier_type_id')\">\n        {{ getErrorMessage('supplier_type_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Phone</mat-label>\n      <input autocomplete=\"off\" formControlName=\"phone\" matInput placeholder=\"Phone\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Email</mat-label>\n      <input autocomplete=\"off\" formControlName=\"email\" matInput placeholder=\"Email\" type=\"email\" />\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Address</mat-label>\n      <input autocomplete=\"off\" formControlName=\"address\" matInput placeholder=\"Address\" />\n      <mat-error *ngIf=\"isFieldValid('address')\">\n        {{ getErrorMessage('address') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Details</mat-label>\n      <input autocomplete=\"off\" formControlName=\"details\" matInput placeholder=\"Details\" />\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-between align-items-center gap-3\">\n      <div class=\"d-flex flex-row gap-2 align-items-center\">\n        <mat-checkbox [formControl]=\"isCreateAnother\">Create Another</mat-checkbox>\n        <small class=\"text-secondary\">({{ totalRecordSaved() }} records saved successfully)</small>\n      </div>\n\n      <div class=\"d-flex flex-row gap-3 align-items-center\">\n        <button (click)=\"dialogRef.close()\" [disabled]=\"isWorking\" mat-flat-button type=\"button\">Cancel</button>\n        <button [disabled]=\"isWorking\" color=\"primary\" mat-raised-button type=\"submit\">Save</button>\n      </div>\n    </div>\n  </div>\n</form>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$1.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: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierFormComponent, decorators: [{
             type: Component,
@@ -2419,7 +2419,7 @@ class PayeeSelectorComponent {
                 useExisting: forwardRef(() => PayeeSelectorComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field [appearance]=\"appearance\" class=\"w-100\">\n  <mat-label>{{ label }}</mat-label>\n  <app-searchable-selector\n    apiUrl=\"api/suppliers\"\n    titleField=\"company_name\"\n    sortBy=\"company_name|asc\"\n    [required]=\"required\"\n    [(ngModel)]=\"value\"\n    #payeeSelector=\"ngModel\"\n    name=\"payeeSelector\"\n    [add]=\"showAddButton\"\n    [itemComponent]=\"SupplierFormComponent\"\n    (ngModelChange)=\"onChange($event)\"\n    [addConfig]=\"{ width: '600px' }\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [multiple]=\"multiple\"\n  >\n  </app-searchable-selector>\n  <mat-error *ngIf=\"payeeSelector.invalid && payeeSelector.touched\"> The payee field is required. </mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], preserveWhitespaces: true });
+        ], ngImport: i0, template: "<mat-form-field [appearance]=\"appearance\" class=\"w-100\">\n  <mat-label>{{ label }}</mat-label>\n  <app-searchable-selector\n    apiUrl=\"api/suppliers\"\n    titleField=\"company_name\"\n    sortBy=\"company_name|asc\"\n    [required]=\"required\"\n    [(ngModel)]=\"value\"\n    #payeeSelector=\"ngModel\"\n    name=\"payeeSelector\"\n    [add]=\"showAddButton\"\n    [itemComponent]=\"SupplierFormComponent\"\n    (ngModelChange)=\"onChange($event)\"\n    [addConfig]=\"{ width: '600px' }\"\n    [ngModelOptions]=\"{ standalone: true }\"\n    [multiple]=\"multiple\"\n  >\n  </app-searchable-selector>\n  <mat-error *ngIf=\"payeeSelector.invalid && payeeSelector.touched\"> The payee field is required. </mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PayeeSelectorComponent, decorators: [{
             type: Component,
@@ -2572,7 +2572,7 @@ class LocationSelectorComponent {
                 useExisting: forwardRef(() => LocationSelectorComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"w-100\" [appearance]=\"appearance()\">\n  <mat-label>{{ label() }}</mat-label>\n  <mat-select [value]=\"selectedValue\" [disabled]=\"isDisabled\" [placeholder]=\"placeholder()\"\n    panelClass=\"location-selector-panel\"\n    (selectionChange)=\"onSelectionChange($event.value)\">\n\n    <div class=\"sticky-search-container\">\n       <input [formControl]=\"searchControl\" placeholder=\"Search...\" class=\"search-input\" (keydown)=\"$event.stopPropagation()\">\n    </div>\n\n    <mat-option *ngIf=\"includeNone()\" [value]=\"null\">None</mat-option>\n\n    <mat-option *ngFor=\"let location of locations\" [value]=\"location.id\">\n      <span [ngStyle]=\"{'padding-left.px': location.depth * 16}\">\n        <span *ngIf=\"location.depth > 0\">\u21B3 </span>{{ location.title }}\n      </span>\n    </mat-option>\n\n  </mat-select>\n</mat-form-field>", styles: [".sticky-search-container{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid rgba(0,0,0,.12);margin:0}.search-input{width:100%;padding:8px 16px;border:none;border-radius:4px;outline:none;font-size:14px;box-sizing:border-box}.search-input:focus{border-color:#00000061}::ng-deep .location-selector-panel{padding-top:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i11$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], preserveWhitespaces: true });
+        ], ngImport: i0, template: "<mat-form-field class=\"w-100\" [appearance]=\"appearance()\">\n  <mat-label>{{ label() }}</mat-label>\n  <mat-select [value]=\"selectedValue\" [disabled]=\"isDisabled\" [placeholder]=\"placeholder()\"\n    panelClass=\"location-selector-panel\"\n    (selectionChange)=\"onSelectionChange($event.value)\">\n\n    <div class=\"sticky-search-container\">\n       <input [formControl]=\"searchControl\" placeholder=\"Search...\" class=\"search-input\" (keydown)=\"$event.stopPropagation()\">\n    </div>\n\n    <mat-option *ngIf=\"includeNone()\" [value]=\"null\">None</mat-option>\n\n    <mat-option *ngFor=\"let location of locations\" [value]=\"location.id\">\n      <span [ngStyle]=\"{'padding-left.px': location.depth * 16}\">\n        <span *ngIf=\"location.depth > 0\">\u21B3 </span>{{ location.title }}\n      </span>\n    </mat-option>\n\n  </mat-select>\n</mat-form-field>", styles: [".sticky-search-container{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid rgba(0,0,0,.12);margin:0}.search-input{width:100%;padding:8px 16px;border:none;border-radius:4px;outline:none;font-size:14px;box-sizing:border-box}.search-input:focus{border-color:#00000061}::ng-deep .location-selector-panel{padding-top:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i11$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocationSelectorComponent, decorators: [{
             type: Component,
@@ -2589,7 +2589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], template: "<mat-form-field class=\"w-100\" [appearance]=\"appearance()\">\n  <mat-label>{{ label() }}</mat-label>\n  <mat-select [value]=\"selectedValue\" [disabled]=\"isDisabled\" [placeholder]=\"placeholder()\"\n    panelClass=\"location-selector-panel\"\n    (selectionChange)=\"onSelectionChange($event.value)\">\n\n    <div class=\"sticky-search-container\">\n       <input [formControl]=\"searchControl\" placeholder=\"Search...\" class=\"search-input\" (keydown)=\"$event.stopPropagation()\">\n    </div>\n\n    <mat-option *ngIf=\"includeNone()\" [value]=\"null\">None</mat-option>\n\n    <mat-option *ngFor=\"let location of locations\" [value]=\"location.id\">\n      <span [ngStyle]=\"{'padding-left.px': location.depth * 16}\">\n        <span *ngIf=\"location.depth > 0\">\u21B3 </span>{{ location.title }}\n      </span>\n    </mat-option>\n\n  </mat-select>\n</mat-form-field>", styles: [".sticky-search-container{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid rgba(0,0,0,.12);margin:0}.search-input{width:100%;padding:8px 16px;border:none;border-radius:4px;outline:none;font-size:14px;box-sizing:border-box}.search-input:focus{border-color:#00000061}::ng-deep .location-selector-panel{padding-top:0!important}\n"] }]
         }], ctorParameters: () => [{ type: LocationService }, { type: i1.TechlifyFeatureService }] });
 
-class StockReceiptFormComponent extends TechlifyFormComponentInterface {
+let StockReceiptFormComponent$1 = class StockReceiptFormComponent extends TechlifyFormComponentInterface {
     formBuilder;
     stockReceiptService;
     dateUtils;
@@ -2734,11 +2734,11 @@ class StockReceiptFormComponent extends TechlifyFormComponentInterface {
         this.form.get('amount')?.setValue(amount);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: StockReceiptService }, { token: i1.DateUtils }, { token: LocationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockReceiptFormComponent, selector: "app-stock-receipt-form", inputs: { product: "product", stockReceipt: "stockReceipt", stockReceiptProduct: "stockReceiptProduct", latestLocationId: "latestLocationId" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<h3 class=\"text-center\">{{ stockReceipt?.id ? 'Edit' : 'Receive' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <app-payee-selector label=\"Supplier\" formControlName=\"supplier_id\" appearance=\"fill\"\n    [showAddButton]=\"true\"></app-payee-selector>\n\n  <app-location-selector *ngIf=\"locationsCount > 1\" formControlName=\"location_id\" appearance=\"fill\"></app-location-selector>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Purchase Price</mat-label>\n    <input matInput formControlName=\"purchase_price\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('purchase_price')\">\n      {{ getErrorMessage('purchase_price') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Total Value</mat-label>\n    <input matInput formControlName=\"amount\" readonly type=\"number\" min=\"0\" />\n  </mat-form-field>\n\n  <div techlifyFeatureEnabled=\"product-batch-numbers\" class=\"d-flex flex-column gap-2 w-100\">\n    <mat-form-field>\n      <mat-label>Batch #</mat-label>\n      <input type=\"text\" formControlName=\"batch_number\" matInput placeholder=\"Batch #\">\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Expires On</mat-label>\n      <input matInput [matDatepicker]=\"expiresOnPicker\" formControlName=\"expires_on\" (focus)=\"expiresOnPicker.open()\" />\n      <mat-datepicker #expiresOnPicker></mat-datepicker>\n    </mat-form-field>\n  </div>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PayeeSelectorComponent, selector: "app-payee-selector", inputs: ["label", "appearance", "required", "showAddButton", "multiple"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.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: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }, { kind: "component", type: LocationSelectorComponent, selector: "app-location-selector", inputs: ["appearance", "label", "placeholder", "includeNone"] }], preserveWhitespaces: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptFormComponent, decorators: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockReceiptFormComponent, selector: "app-stock-receipt-simple-form", inputs: { product: "product", stockReceipt: "stockReceipt", stockReceiptProduct: "stockReceiptProduct", latestLocationId: "latestLocationId" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<h3 class=\"text-center\">{{ stockReceipt?.id ? 'Edit' : 'Receive' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <app-payee-selector label=\"Supplier\" formControlName=\"supplier_id\" appearance=\"fill\"\n    [showAddButton]=\"true\"></app-payee-selector>\n\n  <app-location-selector *ngIf=\"locationsCount > 1\" formControlName=\"location_id\" appearance=\"fill\"></app-location-selector>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Purchase Price</mat-label>\n    <input matInput formControlName=\"purchase_price\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('purchase_price')\">\n      {{ getErrorMessage('purchase_price') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Total Value</mat-label>\n    <input matInput formControlName=\"amount\" readonly type=\"number\" min=\"0\" />\n  </mat-form-field>\n\n  <div techlifyFeatureEnabled=\"product-batch-numbers\" class=\"d-flex flex-column gap-2 w-100\">\n    <mat-form-field>\n      <mat-label>Batch #</mat-label>\n      <input type=\"text\" formControlName=\"batch_number\" matInput placeholder=\"Batch #\">\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Expires On</mat-label>\n      <input matInput [matDatepicker]=\"expiresOnPicker\" formControlName=\"expires_on\" (focus)=\"expiresOnPicker.open()\" />\n      <mat-datepicker #expiresOnPicker></mat-datepicker>\n    </mat-form-field>\n  </div>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PayeeSelectorComponent, selector: "app-payee-selector", inputs: ["label", "appearance", "required", "showAddButton", "multiple"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$1.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: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }, { kind: "component", type: LocationSelectorComponent, selector: "app-location-selector", inputs: ["appearance", "label", "placeholder", "includeNone"] }], preserveWhitespaces: true });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptFormComponent$1, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-receipt-form', template: "<h3 class=\"text-center\">{{ stockReceipt?.id ? 'Edit' : 'Receive' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <app-payee-selector label=\"Supplier\" formControlName=\"supplier_id\" appearance=\"fill\"\n    [showAddButton]=\"true\"></app-payee-selector>\n\n  <app-location-selector *ngIf=\"locationsCount > 1\" formControlName=\"location_id\" appearance=\"fill\"></app-location-selector>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Purchase Price</mat-label>\n    <input matInput formControlName=\"purchase_price\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('purchase_price')\">\n      {{ getErrorMessage('purchase_price') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Total Value</mat-label>\n    <input matInput formControlName=\"amount\" readonly type=\"number\" min=\"0\" />\n  </mat-form-field>\n\n  <div techlifyFeatureEnabled=\"product-batch-numbers\" class=\"d-flex flex-column gap-2 w-100\">\n    <mat-form-field>\n      <mat-label>Batch #</mat-label>\n      <input type=\"text\" formControlName=\"batch_number\" matInput placeholder=\"Batch #\">\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Expires On</mat-label>\n      <input matInput [matDatepicker]=\"expiresOnPicker\" formControlName=\"expires_on\" (focus)=\"expiresOnPicker.open()\" />\n      <mat-datepicker #expiresOnPicker></mat-datepicker>\n    </mat-form-field>\n  </div>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>" }]
+            args: [{ selector: 'app-stock-receipt-simple-form', template: "<h3 class=\"text-center\">{{ stockReceipt?.id ? 'Edit' : 'Receive' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <app-payee-selector label=\"Supplier\" formControlName=\"supplier_id\" appearance=\"fill\"\n    [showAddButton]=\"true\"></app-payee-selector>\n\n  <app-location-selector *ngIf=\"locationsCount > 1\" formControlName=\"location_id\" appearance=\"fill\"></app-location-selector>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Purchase Price</mat-label>\n    <input matInput formControlName=\"purchase_price\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('purchase_price')\">\n      {{ getErrorMessage('purchase_price') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Total Value</mat-label>\n    <input matInput formControlName=\"amount\" readonly type=\"number\" min=\"0\" />\n  </mat-form-field>\n\n  <div techlifyFeatureEnabled=\"product-batch-numbers\" class=\"d-flex flex-column gap-2 w-100\">\n    <mat-form-field>\n      <mat-label>Batch #</mat-label>\n      <input type=\"text\" formControlName=\"batch_number\" matInput placeholder=\"Batch #\">\n    </mat-form-field>\n\n    <mat-form-field>\n      <mat-label>Expires On</mat-label>\n      <input matInput [matDatepicker]=\"expiresOnPicker\" formControlName=\"expires_on\" (focus)=\"expiresOnPicker.open()\" />\n      <mat-datepicker #expiresOnPicker></mat-datepicker>\n    </mat-form-field>\n  </div>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: StockReceiptService }, { type: i1.DateUtils }, { type: LocationService }], propDecorators: { product: [{
                 type: Input
             }], stockReceipt: [{
@@ -2772,11 +2772,11 @@ class StockReceiptFormButtonComponent {
         this.saved.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptFormButtonComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: { product: "product", stockReceipt: "stockReceipt", latestLocationId: "latestLocationId", icon: "icon" }, outputs: { saved: "saved" }, ngImport: i0, template: "<app-techlify-icon role='button' name='edit'\n  [routerLink]=\"['/inventory/stock-receipts/batch-form', stockReceipt?.id]\"></app-techlify-icon>\n\n<ng-template #stockReceiptFormTemplate>\n  <app-stock-receipt-form mat-dialog-content [latestLocationId]=\"latestLocationId\" [product]=\"product\"\n    [stockReceipt]=\"stockReceipt\" (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockReceiptSaved($event)\"></app-stock-receipt-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: StockReceiptFormComponent, selector: "app-stock-receipt-form", inputs: ["product", "stockReceipt", "stockReceiptProduct", "latestLocationId"], outputs: ["saved", "cancelled"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: { product: "product", stockReceipt: "stockReceipt", latestLocationId: "latestLocationId", icon: "icon" }, outputs: { saved: "saved" }, ngImport: i0, template: "<app-techlify-icon role='button' name='edit'\n  [routerLink]=\"['/inventory/stock-receipts/form', stockReceipt?.id]\"></app-techlify-icon>\n\n<ng-template #stockReceiptFormTemplate>\n  <app-stock-receipt-simple-form mat-dialog-content [latestLocationId]=\"latestLocationId\" [product]=\"product\"\n    [stockReceipt]=\"stockReceipt\" (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockReceiptSaved($event)\"></app-stock-receipt-simple-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: StockReceiptFormComponent$1, selector: "app-stock-receipt-simple-form", inputs: ["product", "stockReceipt", "stockReceiptProduct", "latestLocationId"], outputs: ["saved", "cancelled"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptFormButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-receipt-form-button', template: "<app-techlify-icon role='button' name='edit'\n  [routerLink]=\"['/inventory/stock-receipts/batch-form', stockReceipt?.id]\"></app-techlify-icon>\n\n<ng-template #stockReceiptFormTemplate>\n  <app-stock-receipt-form mat-dialog-content [latestLocationId]=\"latestLocationId\" [product]=\"product\"\n    [stockReceipt]=\"stockReceipt\" (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockReceiptSaved($event)\"></app-stock-receipt-form>\n</ng-template>\n" }]
+            args: [{ selector: 'app-stock-receipt-form-button', template: "<app-techlify-icon role='button' name='edit'\n  [routerLink]=\"['/inventory/stock-receipts/form', stockReceipt?.id]\"></app-techlify-icon>\n\n<ng-template #stockReceiptFormTemplate>\n  <app-stock-receipt-simple-form mat-dialog-content [latestLocationId]=\"latestLocationId\" [product]=\"product\"\n    [stockReceipt]=\"stockReceipt\" (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockReceiptSaved($event)\"></app-stock-receipt-simple-form>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { product: [{
                 type: Input
             }], stockReceipt: [{
@@ -2803,9 +2803,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
-class StockReceiptFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptFormModule, declarations: [StockReceiptFormComponent, StockReceiptFormButtonComponent], imports: [CommonModule,
+class StockReceiptSimpleFormModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptSimpleFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptSimpleFormModule, declarations: [StockReceiptFormComponent$1, StockReceiptFormButtonComponent], imports: [CommonModule,
             PayeeSelectorModule,
             ReactiveFormsModule,
             MaterialModule,
@@ -2814,7 +2814,7 @@ class StockReceiptFormModule {
             LocationSelectorComponent,
             TechlifyIconModule,
             RouterModule], exports: [StockReceiptFormButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptFormModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptSimpleFormModule, imports: [CommonModule,
             PayeeSelectorModule,
             ReactiveFormsModule,
             MaterialModule,
@@ -2824,10 +2824,10 @@ class StockReceiptFormModule {
             TechlifyIconModule,
             RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptSimpleFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [StockReceiptFormComponent, StockReceiptFormButtonComponent],
+                    declarations: [StockReceiptFormComponent$1, StockReceiptFormButtonComponent],
                     exports: [StockReceiptFormButtonComponent],
                     imports: [
                         CommonModule,
@@ -2857,7 +2857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.HttpService }] });
 
-class StockIssueFormComponent extends TechlifyFormComponentInterface {
+class StockIssueSimpleFormComponent extends TechlifyFormComponentInterface {
     formBuilder;
     stockIssueService;
     dateUtils;
@@ -3019,12 +3019,12 @@ class StockIssueFormComponent extends TechlifyFormComponentInterface {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: StockIssueService }, { token: i1.DateUtils }, { token: LocationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockIssueFormComponent, selector: "app-stock-issue-form", inputs: { product: "product", stockIssueProduct: "stockIssueProduct", stockIssue: "stockIssue", issuableType: "issuableType", issuableId: "issuableId" }, outputs: { saved: "saved", cancelled: "cancelled" }, viewQueries: [{ propertyName: "batchSearchableSelector", first: true, predicate: ["batchSearchableSelector"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<h3 class=\"text-center\">{{ stockIssue?.id ? 'Edit' : 'Issue' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <mat-form-field *ngIf=\"!product\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector formControlName=\"product_id\" apiUrl=\"api/products\" titleField=\"name\"\n      (selectedValueChange)=\"onProductChange($event)\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"locationsCount > 1\">\n    <mat-label>Location</mat-label>\n    <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations\"\n      [selectedValue]=\"stockIssue?.stock_issue_products[0]?.location\"></app-searchable-selector>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"locationsCount > 1 && form.value?.location_id && batchesApiUrl\">\n    <mat-form-field techlifyFeatureEnabled=\"product-batch-numbers\">\n      <mat-label>Batch</mat-label>\n      <app-searchable-selector #batchSearchableSelector formControlName=\"batch_id\"\n                               [apiUrl]=\"batchesApiUrl\" [enableSearch]=\"false\"\n                               (itemsChange)=\"onBatchItemsChange()\">\n      </app-searchable-selector>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.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: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }], preserveWhitespaces: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueSimpleFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: StockIssueService }, { token: i1.DateUtils }, { token: LocationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockIssueSimpleFormComponent, selector: "app-stock-issue-simple-form", inputs: { product: "product", stockIssueProduct: "stockIssueProduct", stockIssue: "stockIssue", issuableType: "issuableType", issuableId: "issuableId" }, outputs: { saved: "saved", cancelled: "cancelled" }, viewQueries: [{ propertyName: "batchSearchableSelector", first: true, predicate: ["batchSearchableSelector"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<h3 class=\"text-center\">{{ stockIssue?.id ? 'Edit' : 'Issue' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <mat-form-field *ngIf=\"!product\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector formControlName=\"product_id\" apiUrl=\"api/products\" titleField=\"name\"\n      (selectedValueChange)=\"onProductChange($event)\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"locationsCount > 1\">\n    <mat-label>Location</mat-label>\n    <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations\"\n      [selectedValue]=\"stockIssue?.stock_issue_products[0]?.location\"></app-searchable-selector>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"locationsCount > 1 && form.value?.location_id && batchesApiUrl\">\n    <mat-form-field techlifyFeatureEnabled=\"product-batch-numbers\">\n      <mat-label>Batch</mat-label>\n      <app-searchable-selector #batchSearchableSelector formControlName=\"batch_id\"\n                               [apiUrl]=\"batchesApiUrl\" [enableSearch]=\"false\"\n                               (itemsChange)=\"onBatchItemsChange()\">\n      </app-searchable-selector>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$1.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: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }], preserveWhitespaces: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueSimpleFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-issue-form', template: "<h3 class=\"text-center\">{{ stockIssue?.id ? 'Edit' : 'Issue' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <mat-form-field *ngIf=\"!product\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector formControlName=\"product_id\" apiUrl=\"api/products\" titleField=\"name\"\n      (selectedValueChange)=\"onProductChange($event)\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"locationsCount > 1\">\n    <mat-label>Location</mat-label>\n    <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations\"\n      [selectedValue]=\"stockIssue?.stock_issue_products[0]?.location\"></app-searchable-selector>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"locationsCount > 1 && form.value?.location_id && batchesApiUrl\">\n    <mat-form-field techlifyFeatureEnabled=\"product-batch-numbers\">\n      <mat-label>Batch</mat-label>\n      <app-searchable-selector #batchSearchableSelector formControlName=\"batch_id\"\n                               [apiUrl]=\"batchesApiUrl\" [enableSearch]=\"false\"\n                               (itemsChange)=\"onBatchItemsChange()\">\n      </app-searchable-selector>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>" }]
+            args: [{ selector: 'app-stock-issue-simple-form', template: "<h3 class=\"text-center\">{{ stockIssue?.id ? 'Edit' : 'Issue' }} Stock for {{ product?.name }}</h3>\n<form [formGroup]=\"form\" class=\"d-flex flex-column gap-1 justify-content-start\" (submit)=\"save()\">\n  <mat-form-field *ngIf=\"!product\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector formControlName=\"product_id\" apiUrl=\"api/products\" titleField=\"name\"\n      (selectedValueChange)=\"onProductChange($event)\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"locationsCount > 1\">\n    <mat-label>Location</mat-label>\n    <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations\"\n      [selectedValue]=\"stockIssue?.stock_issue_products[0]?.location\"></app-searchable-selector>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"locationsCount > 1 && form.value?.location_id && batchesApiUrl\">\n    <mat-form-field techlifyFeatureEnabled=\"product-batch-numbers\">\n      <mat-label>Batch</mat-label>\n      <app-searchable-selector #batchSearchableSelector formControlName=\"batch_id\"\n                               [apiUrl]=\"batchesApiUrl\" [enableSearch]=\"false\"\n                               (itemsChange)=\"onBatchItemsChange()\">\n      </app-searchable-selector>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field>\n    <mat-label>Date</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" formControlName=\"date\" (focus)=\"datePicker.open()\" />\n    <mat-datepicker #datePicker></mat-datepicker>\n    <mat-error *ngIf=\"isFieldValid('date')\">\n      {{ getErrorMessage('date') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Quantity</mat-label>\n    <input matInput formControlName=\"quantity\" type=\"number\" min=\"0\" />\n    <mat-error *ngIf=\"isFieldValid('quantity')\">\n      {{ getErrorMessage('quantity') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Particulars</mat-label>\n    <textarea matInput formControlName=\"particulars\" rows=\"3\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">Save</button>\n    <button [disabled]=\"isWorking\" (click)=\"cancelled.emit()\" mat-flat-button type=\"button\">Cancel</button>\n  </div>\n</form>" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: StockIssueService }, { type: i1.DateUtils }, { type: LocationService }], propDecorators: { product: [{
                 type: Input
             }], stockIssueProduct: [{
@@ -3065,11 +3065,11 @@ class StockIssueFormButtonComponent {
         this.saved.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueFormButtonComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: { product: "product", stockIssueProduct: "stockIssueProduct", stockIssue: "stockIssue", icon: "icon", issuableType: "issuableType", issuableId: "issuableId" }, outputs: { saved: "saved" }, ngImport: i0, template: "<app-techlify-icon role='button' name='edit'\n  [routerLink]=\"['/inventory/stock-issues/batch-form', stockIssue?.id]\"></app-techlify-icon>\n\n<ng-template #stockIssuanceFormTemplate>\n  <app-stock-issue-form mat-dialog-content [product]=\"product\" [stockIssueProduct]=\"stockIssueProduct\"\n    [stockIssue]=\"stockIssue\" [issuableType]=\"issuableType\" [issuableId]=\"issuableId\" (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockIssuanceSaved($event)\"></app-stock-issue-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: StockIssueFormComponent, selector: "app-stock-issue-form", inputs: ["product", "stockIssueProduct", "stockIssue", "issuableType", "issuableId"], outputs: ["saved", "cancelled"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: { product: "product", stockIssueProduct: "stockIssueProduct", stockIssue: "stockIssue", icon: "icon", issuableType: "issuableType", issuableId: "issuableId" }, outputs: { saved: "saved" }, ngImport: i0, template: "<app-techlify-icon role='button' name='edit'\n  [routerLink]=\"['/inventory/stock-issues/form', stockIssue?.id]\"></app-techlify-icon>\n\n<ng-template #stockIssuanceFormTemplate>\n  <app-stock-issue-simple-form mat-dialog-content [product]=\"product\" [stockIssueProduct]=\"stockIssueProduct\"\n    [stockIssue]=\"stockIssue\" [issuableType]=\"issuableType\" [issuableId]=\"issuableId\" (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockIssuanceSaved($event)\"></app-stock-issue-simple-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: StockIssueSimpleFormComponent, selector: "app-stock-issue-simple-form", inputs: ["product", "stockIssueProduct", "stockIssue", "issuableType", "issuableId"], outputs: ["saved", "cancelled"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueFormButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-issue-form-button', template: "<app-techlify-icon role='button' name='edit'\n  [routerLink]=\"['/inventory/stock-issues/batch-form', stockIssue?.id]\"></app-techlify-icon>\n\n<ng-template #stockIssuanceFormTemplate>\n  <app-stock-issue-form mat-dialog-content [product]=\"product\" [stockIssueProduct]=\"stockIssueProduct\"\n    [stockIssue]=\"stockIssue\" [issuableType]=\"issuableType\" [issuableId]=\"issuableId\" (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockIssuanceSaved($event)\"></app-stock-issue-form>\n</ng-template>\n" }]
+            args: [{ selector: 'app-stock-issue-form-button', template: "<app-techlify-icon role='button' name='edit'\n  [routerLink]=\"['/inventory/stock-issues/form', stockIssue?.id]\"></app-techlify-icon>\n\n<ng-template #stockIssuanceFormTemplate>\n  <app-stock-issue-simple-form mat-dialog-content [product]=\"product\" [stockIssueProduct]=\"stockIssueProduct\"\n    [stockIssue]=\"stockIssue\" [issuableType]=\"issuableType\" [issuableId]=\"issuableId\" (cancelled)=\"matDialogRef.close()\"\n    (saved)=\"onStockIssuanceSaved($event)\"></app-stock-issue-simple-form>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { product: [{
                 type: Input
             }], stockIssueProduct: [{
@@ -3088,7 +3088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class StockIssueFormModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: StockIssueFormModule, declarations: [StockIssueFormComponent, StockIssueFormButtonComponent], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: StockIssueFormModule, declarations: [StockIssueSimpleFormComponent, StockIssueFormButtonComponent], imports: [CommonModule,
             ReactiveFormsModule,
             MaterialModule,
             SearchableSelectorModule,
@@ -3106,7 +3106,7 @@ class StockIssueFormModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [StockIssueFormComponent, StockIssueFormButtonComponent],
+                    declarations: [StockIssueSimpleFormComponent, StockIssueFormButtonComponent],
                     exports: [StockIssueFormButtonComponent],
                     imports: [
                         CommonModule,
@@ -3244,14 +3244,14 @@ let StockReceiptListComponent = class StockReceiptListComponent extends Techlify
         return `#${model?.id}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptListComponent, deps: [{ token: StockReceiptService }, { token: i2$1.FormBuilder }, { token: i4$1.Router }, { token: i1.TechlifyFeatureService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockReceiptListComponent, selector: "app-stock-receipt-list", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, selectedColumns: { classPropertyName: "selectedColumns", publicName: "selectedColumns", isSignal: true, isRequired: false, transformFunction: null }, exportInProgress: { classPropertyName: "exportInProgress", publicName: "exportInProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipts\" infiniteScroll\n      id=\"stockReceiptTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"receipt_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Receipt ID\">Receipt #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-receipts', element?.id, 'view']\">\n            {{ element?.id }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <ul class=\"mb-0 ps-3\">\n            <li *ngFor=\"let srp of element?.stock_receipt_products\">\n              {{ srp?.quantity }} {{ srp?.product?.measure?.title }} <em>of</em>\n              <a class=\"text-decoration-none text-dark\"\n                [routerLink]=\"['/inventory/products', srp?.product?.id, 'view']\">\n                {{ srp?.product?.name }}\n              </a>\n            </li>\n          </ul>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges\n            [product]=\"element?.stock_receipt_products[0]?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt_products[0]?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.stock_receipt_products[0]?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt_products[0]?.quantity }} {{\n          element?.stock_receipt_products[0]?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt_products[0]?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.stock_receipt_products[0]?.location_id, 'view']\">\n            {{ element?.stock_receipt_products[0]?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_receipt_products[0]?.purchase_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_receipt_products[0]?.amount | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.company_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Contact Column -->\n      <ng-container matColumnDef=\"supplier_contact\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Contact</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.contact_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Phone Column -->\n      <ng-container matColumnDef=\"supplier_phone\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.phone }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div *ngIf=\"!element.stock_transfer\" class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon role='button' name='view' class='text-secondary'\n              [routerLink]=\"['/inventory', 'stock-receipts', element?.id, 'view']\"></app-techlify-icon>\n            <app-stock-receipt-form-button [product]=\"element.product\" [stockReceipt]=\"element\"\n              (saved)=\"reload(); listUpdated.emit(true)\"></app-stock-receipt-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]=\"{ title: getStockReceiptDeleteTitle(element), type: 'Stock Receipt' }\"\n              (deleted)=\"reload(); listUpdated.emit(true)\"></app-techlify-delete-button>\n          </div>\n\n          <span *ngIf=\"element.stock_transfer\" class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-receipt_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef colspan=\"1\"><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-purchase_price\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalPurchasePrice | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-amount\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalValue | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_contact\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_phone\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "latestLocationId", "icon"], outputs: ["saved"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockReceiptListComponent, selector: "app-stock-receipt-list", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, selectedColumns: { classPropertyName: "selectedColumns", publicName: "selectedColumns", isSignal: true, isRequired: false, transformFunction: null }, exportInProgress: { classPropertyName: "exportInProgress", publicName: "exportInProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipts\" infiniteScroll\n      id=\"stockReceiptTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"receipt_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Receipt ID\">Receipt #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-receipts', element?.id, 'view']\">\n            {{ element?.id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <ul class=\"mb-0 ps-3\">\n            <li *ngFor=\"let srp of element?.stock_receipt_products\">\n              {{ srp?.quantity }} {{ srp?.product?.measure?.title }} <em>of</em>\n              <a class=\"text-decoration-none text-dark\"\n                [routerLink]=\"['/inventory/products', srp?.product?.id, 'view']\">\n                {{ srp?.product?.name }}\n              </a>\n            </li>\n          </ul>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges\n            [product]=\"element?.stock_receipt_products[0]?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt_products[0]?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.stock_receipt_products[0]?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt_products[0]?.quantity }} {{\n          element?.stock_receipt_products[0]?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt_products[0]?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.stock_receipt_products[0]?.location_id, 'view']\">\n            {{ element?.stock_receipt_products[0]?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_receipt_products[0]?.purchase_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_receipt_products[0]?.amount | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.company_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Contact Column -->\n      <ng-container matColumnDef=\"supplier_contact\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Contact</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.contact_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Phone Column -->\n      <ng-container matColumnDef=\"supplier_phone\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.phone }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div *ngIf=\"!element.stock_transfer\" class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon role='button' name='view' class='text-secondary'\n              [routerLink]=\"['/inventory', 'stock-receipts', element?.id, 'view']\"></app-techlify-icon>\n            <app-stock-receipt-form-button [product]=\"element.product\" [stockReceipt]=\"element\"\n              (saved)=\"reload(); listUpdated.emit(true)\"></app-stock-receipt-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]=\"{ title: getStockReceiptDeleteTitle(element), type: 'Stock Receipt' }\"\n              (deleted)=\"reload(); listUpdated.emit(true)\"></app-techlify-delete-button>\n          </div>\n\n          <span *ngIf=\"element.stock_transfer\" class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-receipt_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef colspan=\"1\"><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-purchase_price\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalPurchasePrice | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-amount\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalValue | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_contact\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_phone\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "latestLocationId", "icon"], outputs: ["saved"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 StockReceiptListComponent = __decorate([
     UntilDestroy()
 ], StockReceiptListComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-receipt-list', template: "<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipts\" infiniteScroll\n      id=\"stockReceiptTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"receipt_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Receipt ID\">Receipt #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-receipts', element?.id, 'view']\">\n            {{ element?.id }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <ul class=\"mb-0 ps-3\">\n            <li *ngFor=\"let srp of element?.stock_receipt_products\">\n              {{ srp?.quantity }} {{ srp?.product?.measure?.title }} <em>of</em>\n              <a class=\"text-decoration-none text-dark\"\n                [routerLink]=\"['/inventory/products', srp?.product?.id, 'view']\">\n                {{ srp?.product?.name }}\n              </a>\n            </li>\n          </ul>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges\n            [product]=\"element?.stock_receipt_products[0]?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt_products[0]?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.stock_receipt_products[0]?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt_products[0]?.quantity }} {{\n          element?.stock_receipt_products[0]?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt_products[0]?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.stock_receipt_products[0]?.location_id, 'view']\">\n            {{ element?.stock_receipt_products[0]?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_receipt_products[0]?.purchase_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_receipt_products[0]?.amount | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.company_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Contact Column -->\n      <ng-container matColumnDef=\"supplier_contact\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Contact</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.contact_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Phone Column -->\n      <ng-container matColumnDef=\"supplier_phone\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.phone }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div *ngIf=\"!element.stock_transfer\" class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon role='button' name='view' class='text-secondary'\n              [routerLink]=\"['/inventory', 'stock-receipts', element?.id, 'view']\"></app-techlify-icon>\n            <app-stock-receipt-form-button [product]=\"element.product\" [stockReceipt]=\"element\"\n              (saved)=\"reload(); listUpdated.emit(true)\"></app-stock-receipt-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]=\"{ title: getStockReceiptDeleteTitle(element), type: 'Stock Receipt' }\"\n              (deleted)=\"reload(); listUpdated.emit(true)\"></app-techlify-delete-button>\n          </div>\n\n          <span *ngIf=\"element.stock_transfer\" class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-receipt_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef colspan=\"1\"><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-purchase_price\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalPurchasePrice | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-amount\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalValue | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_contact\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_phone\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"] }]
+            args: [{ selector: 'app-stock-receipt-list', template: "<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Receipts\" infiniteScroll\n      id=\"stockReceiptTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"receipt_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Receipt ID\">Receipt #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-receipts', element?.id, 'view']\">\n            {{ element?.id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <ul class=\"mb-0 ps-3\">\n            <li *ngFor=\"let srp of element?.stock_receipt_products\">\n              {{ srp?.quantity }} {{ srp?.product?.measure?.title }} <em>of</em>\n              <a class=\"text-decoration-none text-dark\"\n                [routerLink]=\"['/inventory/products', srp?.product?.id, 'view']\">\n                {{ srp?.product?.name }}\n              </a>\n            </li>\n          </ul>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges\n            [product]=\"element?.stock_receipt_products[0]?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt_products[0]?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.stock_receipt_products[0]?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt_products[0]?.quantity }} {{\n          element?.stock_receipt_products[0]?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.batch?.batch_number\">{{ element?.batch?.batch_number }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.batch?.expires_on\">\n            Expires {{ element?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_receipt_products[0]?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.stock_receipt_products[0]?.location_id, 'view']\">\n            {{ element?.stock_receipt_products[0]?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Purchase Price Column -->\n      <ng-container matColumnDef=\"purchase_price\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Purchase Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_receipt_products[0]?.purchase_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Value Column -->\n      <ng-container matColumnDef=\"amount\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Value</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_receipt_products[0]?.amount | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</td>\n      </ng-container>\n\n      <!-- Supplier Column -->\n      <ng-container matColumnDef=\"supplier\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.company_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Contact Column -->\n      <ng-container matColumnDef=\"supplier_contact\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Contact</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.contact_name }}</td>\n      </ng-container>\n\n      <!-- Supplier Phone Column -->\n      <ng-container matColumnDef=\"supplier_phone\">\n        <th mat-header-cell *matHeaderCellDef>Supplier Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.phone }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div *ngIf=\"!element.stock_transfer\" class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon role='button' name='view' class='text-secondary'\n              [routerLink]=\"['/inventory', 'stock-receipts', element?.id, 'view']\"></app-techlify-icon>\n            <app-stock-receipt-form-button [product]=\"element.product\" [stockReceipt]=\"element\"\n              (saved)=\"reload(); listUpdated.emit(true)\"></app-stock-receipt-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]=\"{ title: getStockReceiptDeleteTitle(element), type: 'Stock Receipt' }\"\n              (deleted)=\"reload(); listUpdated.emit(true)\"></app-techlify-delete-button>\n          </div>\n\n          <span *ngIf=\"element.stock_transfer\" class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-receipt_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef colspan=\"1\"><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-purchase_price\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalPurchasePrice | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-amount\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalValue | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_contact\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-supplier_phone\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"] }]
         }], ctorParameters: () => [{ type: StockReceiptService }, { type: i2$1.FormBuilder }, { type: i4$1.Router }, { type: i1.TechlifyFeatureService }] });
 
 let StockReceiptPageComponent = class StockReceiptPageComponent {
@@ -3295,14 +3295,14 @@ let StockReceiptPageComponent = class StockReceiptPageComponent {
         this.selectedColumns = config.filter(col => col.isSelected);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptPageComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockReceiptPageComponent, selector: "app-stock-receipts-page", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, supplierId: { classPropertyName: "supplierId", publicName: "supplierId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listUpdated: "listUpdated" }, ngImport: i0, template: "<mat-card *ngIf=\"!product()\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n\n      <app-techlify-icon role='button' name='add' [routerLink]=\"['/inventory/stock-receipts/batch-form']\"\n        class='ms-2'></app-techlify-icon>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-export-to-excel-button tableId=\"stockReceiptTable\" fileName=\"Stock Receipts\"\n        (onExportStart)=\"exportInProgress.set(true)\" (onExportEnd)=\"exportInProgress.set(false)\">\n      </app-export-to-excel-button>\n\n      <app-column-selector *ngIf=\"columnConfig.length > 0\" mode=\"icon\" class=\"mt-1 d-print-none\"\n        [columnConfigs]=\"columnConfig\" [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n\n      <mat-button-toggle-group class=\"view-toggle\" [value]=\"selectedView()\" (change)=\"selectedView.set($event.value)\">\n        <mat-button-toggle value=\"itemized\">Itemized</mat-button-toggle>\n        <mat-button-toggle value=\"grouped\">Grouped</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n\n    <form [formGroup]=\"filterForm\" class=\"d-flex align-items-center gap-2 flex-wrap\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter labelText=\"Date\" formControlName=\"duration\" [form]=\"filterForm\"></app-timeline-filter>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Supplier</mat-label>\n        <app-searchable-selector apiUrl=\"api/suppliers\" formControlName=\"supplier_ids\" titleField=\"company_name\"\n          [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card *ngIf=\"product()\" class=\"mb-2\">\n  <mat-card-content class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> output_circle </span>\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<app-stock-receipt-product-list *ngIf=\"selectedView() === 'itemized'\" [filters]=\"filtersValue()\"\n  [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-receipt-product-list>\n\n<app-stock-receipt-list *ngIf=\"selectedView() === 'grouped'\" [filters]=\"filtersValue()\"\n  [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-receipt-list>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.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: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns", "isExportWorking"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: ExportToExcelButtonComponent, selector: "app-export-to-excel-button", inputs: ["tableId", "fileName"], outputs: ["onExportStart", "onExportEnd"] }, { kind: "component", type: StockReceiptListComponent, selector: "app-stock-receipt-list", inputs: ["filters", "selectedColumns", "exportInProgress"], outputs: ["listUpdated", "columnConfigReady"] }, { kind: "component", type: StockReceiptProductsListComponent, selector: "app-stock-receipt-product-list", inputs: ["filters", "isProductView", "selectedColumns", "exportInProgress"], outputs: ["listUpdated", "columnConfigReady"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockReceiptPageComponent, selector: "app-stock-receipts-page", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, supplierId: { classPropertyName: "supplierId", publicName: "supplierId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listUpdated: "listUpdated" }, ngImport: i0, template: "<mat-card *ngIf=\"!product()\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n\n      <app-techlify-icon role='button' name='add' [routerLink]=\"['/inventory/stock-receipts/form']\"\n        class='ms-2'></app-techlify-icon>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-export-to-excel-button tableId=\"stockReceiptTable\" fileName=\"Stock Receipts\"\n        (onExportStart)=\"exportInProgress.set(true)\" (onExportEnd)=\"exportInProgress.set(false)\">\n      </app-export-to-excel-button>\n\n      <app-column-selector *ngIf=\"columnConfig.length > 0\" mode=\"icon\" class=\"mt-1 d-print-none\"\n        [columnConfigs]=\"columnConfig\" [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n\n      <mat-button-toggle-group class=\"view-toggle\" [value]=\"selectedView()\" (change)=\"selectedView.set($event.value)\">\n        <mat-button-toggle value=\"itemized\">Itemized</mat-button-toggle>\n        <mat-button-toggle value=\"grouped\">Grouped</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n\n    <form [formGroup]=\"filterForm\" class=\"d-flex align-items-center gap-2 flex-wrap\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter labelText=\"Date\" formControlName=\"duration\" [form]=\"filterForm\"></app-timeline-filter>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Supplier</mat-label>\n        <app-searchable-selector apiUrl=\"api/suppliers\" formControlName=\"supplier_ids\" titleField=\"company_name\"\n          [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card *ngIf=\"product()\" class=\"mb-2\">\n  <mat-card-content class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> output_circle </span>\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<app-stock-receipt-product-list *ngIf=\"selectedView() === 'itemized'\" [filters]=\"filtersValue()\"\n  [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-receipt-product-list>\n\n<app-stock-receipt-list *ngIf=\"selectedView() === 'grouped'\" [filters]=\"filtersValue()\"\n  [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-receipt-list>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.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: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns", "isExportWorking"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: ExportToExcelButtonComponent, selector: "app-export-to-excel-button", inputs: ["tableId", "fileName"], outputs: ["onExportStart", "onExportEnd"] }, { kind: "component", type: StockReceiptListComponent, selector: "app-stock-receipt-list", inputs: ["filters", "selectedColumns", "exportInProgress"], outputs: ["listUpdated", "columnConfigReady"] }, { kind: "component", type: StockReceiptProductsListComponent, selector: "app-stock-receipt-product-list", inputs: ["filters", "isProductView", "selectedColumns", "exportInProgress"], outputs: ["listUpdated", "columnConfigReady"] }], preserveWhitespaces: true });
 };
 StockReceiptPageComponent = __decorate([
     UntilDestroy()
 ], StockReceiptPageComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-receipts-page', template: "<mat-card *ngIf=\"!product()\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n\n      <app-techlify-icon role='button' name='add' [routerLink]=\"['/inventory/stock-receipts/batch-form']\"\n        class='ms-2'></app-techlify-icon>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-export-to-excel-button tableId=\"stockReceiptTable\" fileName=\"Stock Receipts\"\n        (onExportStart)=\"exportInProgress.set(true)\" (onExportEnd)=\"exportInProgress.set(false)\">\n      </app-export-to-excel-button>\n\n      <app-column-selector *ngIf=\"columnConfig.length > 0\" mode=\"icon\" class=\"mt-1 d-print-none\"\n        [columnConfigs]=\"columnConfig\" [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n\n      <mat-button-toggle-group class=\"view-toggle\" [value]=\"selectedView()\" (change)=\"selectedView.set($event.value)\">\n        <mat-button-toggle value=\"itemized\">Itemized</mat-button-toggle>\n        <mat-button-toggle value=\"grouped\">Grouped</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n\n    <form [formGroup]=\"filterForm\" class=\"d-flex align-items-center gap-2 flex-wrap\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter labelText=\"Date\" formControlName=\"duration\" [form]=\"filterForm\"></app-timeline-filter>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Supplier</mat-label>\n        <app-searchable-selector apiUrl=\"api/suppliers\" formControlName=\"supplier_ids\" titleField=\"company_name\"\n          [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card *ngIf=\"product()\" class=\"mb-2\">\n  <mat-card-content class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> output_circle </span>\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<app-stock-receipt-product-list *ngIf=\"selectedView() === 'itemized'\" [filters]=\"filtersValue()\"\n  [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-receipt-product-list>\n\n<app-stock-receipt-list *ngIf=\"selectedView() === 'grouped'\" [filters]=\"filtersValue()\"\n  [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-receipt-list>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"] }]
+            args: [{ selector: 'app-stock-receipts-page', template: "<mat-card *ngIf=\"!product()\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n\n      <app-techlify-icon role='button' name='add' [routerLink]=\"['/inventory/stock-receipts/form']\"\n        class='ms-2'></app-techlify-icon>\n\n      <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer material-symbols-outlined\">\n        file_upload\n      </span>\n\n      <app-export-to-excel-button tableId=\"stockReceiptTable\" fileName=\"Stock Receipts\"\n        (onExportStart)=\"exportInProgress.set(true)\" (onExportEnd)=\"exportInProgress.set(false)\">\n      </app-export-to-excel-button>\n\n      <app-column-selector *ngIf=\"columnConfig.length > 0\" mode=\"icon\" class=\"mt-1 d-print-none\"\n        [columnConfigs]=\"columnConfig\" [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n\n      <mat-button-toggle-group class=\"view-toggle\" [value]=\"selectedView()\" (change)=\"selectedView.set($event.value)\">\n        <mat-button-toggle value=\"itemized\">Itemized</mat-button-toggle>\n        <mat-button-toggle value=\"grouped\">Grouped</mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n\n    <form [formGroup]=\"filterForm\" class=\"d-flex align-items-center gap-2 flex-wrap\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter labelText=\"Date\" formControlName=\"duration\" [form]=\"filterForm\"></app-timeline-filter>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Supplier</mat-label>\n        <app-searchable-selector apiUrl=\"api/suppliers\" formControlName=\"supplier_ids\" titleField=\"company_name\"\n          [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card *ngIf=\"product()\" class=\"mb-2\">\n  <mat-card-content class=\"mb-0\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2 mb-2\">\n      <span class=\"material-symbols-outlined\"> output_circle </span>\n      <h3 class=\"mb-0\">Stock Receipts</h3>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<app-stock-receipt-product-list *ngIf=\"selectedView() === 'itemized'\" [filters]=\"filtersValue()\"\n  [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-receipt-product-list>\n\n<app-stock-receipt-list *ngIf=\"selectedView() === 'grouped'\" [filters]=\"filtersValue()\"\n  [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-receipt-list>", styles: [":host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.FormBuilder }] });
 
 class StockReceiptImportPageComponent {
@@ -3373,47 +3373,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], template: "<app-import-csv [config]=\"importConfig\"></app-import-csv>" }]
         }], ctorParameters: () => [] });
 
-class StockReceiptDeleteButtonComponent {
-    matDialog;
-    stockReceiptService;
-    alertService;
-    stockReceipt;
-    deleted = new EventEmitter();
-    isDeleting = false;
-    constructor(matDialog, stockReceiptService, alertService) {
-        this.matDialog = matDialog;
-        this.stockReceiptService = stockReceiptService;
-        this.alertService = alertService;
-    }
-    showDeleteConfirmModel(templateRef) {
-        this.matDialog.open(templateRef, { width: '400px' });
-    }
-    delete() {
-        this.isDeleting = true;
-        this.stockReceiptService.delete(this.stockReceipt).subscribe({
-            next: () => {
-                this.matDialog.closeAll();
-                this.isDeleting = false;
-                this.deleted.emit();
-                this.alertService.addAlert('Stock Receipt deleted successfully!', 'success');
-            },
-            error: () => {
-                this.isDeleting = false;
-            },
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: StockReceiptService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockReceiptDeleteButtonComponent, selector: "app-stock-receipt-delete-button", inputs: { stockReceipt: "stockReceipt" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<span class=\"material-symbols-outlined cursor-pointer\" (click)=\"showDeleteConfirmModel(deleteModelTemplate)\">\n  delete\n</span>\n\n<ng-template #deleteModelTemplate>\n  <h3 mat-dialog-title>Delete Stock Receipt</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to delete the stock receipt record?</p>\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-2\">\n    <button [disabled]=\"isDeleting\" mat-raised-button type=\"button\" color=\"warn\" (click)=\"delete()\">Delete</button>\n    <button [disabled]=\"isDeleting\" mat-flat-button mat-dialog-close type=\"button\">Cancel</button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], preserveWhitespaces: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptDeleteButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-stock-receipt-delete-button', template: "<span class=\"material-symbols-outlined cursor-pointer\" (click)=\"showDeleteConfirmModel(deleteModelTemplate)\">\n  delete\n</span>\n\n<ng-template #deleteModelTemplate>\n  <h3 mat-dialog-title>Delete Stock Receipt</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to delete the stock receipt record?</p>\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-2\">\n    <button [disabled]=\"isDeleting\" mat-raised-button type=\"button\" color=\"warn\" (click)=\"delete()\">Delete</button>\n    <button [disabled]=\"isDeleting\" mat-flat-button mat-dialog-close type=\"button\">Cancel</button>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: StockReceiptService }, { type: i1.AlertService }], propDecorators: { stockReceipt: [{
-                type: Input
-            }], deleted: [{
-                type: Output
-            }] } });
-
 class StockReceiptViewComponent {
     activatedRoute;
     service;
@@ -3453,24 +3412,25 @@ class StockReceiptViewComponent {
         this.location.back();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptViewComponent, deps: [{ token: i4$1.ActivatedRoute }, { token: StockReceiptService }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockReceiptViewComponent, selector: "app-stock-receipt-view", ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"stockReceipt\" class=\"d-flex flex-column justify-content-start gap-2\">\n  <mat-card>\n    <mat-card-content>\n      <h3 class=\"mb-0\">Stock Receipt for {{ stockReceipt?.stock_receipt_products[0]?.product?.name }}</h3>\n    </mat-card-content>\n  </mat-card>\n  <div class=\"d-flex justify-content-start align-items-start gap-2\">\n    <div class=\"d-flex flex-column gap-2\" style=\"width: 350px\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> campaign </span>\n            <strong class=\"mb-0 text-dark\">Information</strong>\n          </div>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <app-stock-receipt-form-button [stockReceipt]=\"stockReceipt\" [product]=\"stockReceipt?.product\"\n              (saved)=\"loadData()\">\n            </app-stock-receipt-form-button>\n            <app-stock-receipt-delete-button [stockReceipt]=\"stockReceipt\" (deleted)=\"redirectBack()\">\n            </app-stock-receipt-delete-button>\n          </div>\n        </mat-card-content>\n        <mat-card-content class=\"d-flex flex-column justify-content-start gap-2 mt-3\">\n          <div class=\"d-flex justify-content-between align-items-center gap-2\">\n            <div class=\"d-flex flex-column gap-0\">\n              <a class=\"text-decoration-none text-black\"\n                [routerLink]=\"['/inventory/products', stockReceipt?.stock_receipt_products[0]?.product?.id, 'view']\">\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.product?.name }}</p>\n              </a>\n              <small *ngIf=\"stockReceipt?.stock_receipt_products[0]?.product?.sku\">{{\n                stockReceipt?.stock_receipt_products[0]?.product?.sku }}</small>\n            </div>\n            <div class=\"d-flex flex-column justify-content-end gap-0\">\n              <small *ngIf=\"stockReceipt?.date\">{{ stockReceipt?.date | date }}</small>\n              <ng-container *ngIf=\"stockReceipt?.stock_receipt_products[0]?.batch?.expires_on\">\n                <small techlifyFeatureEnabled=\"product-batch-numbers\">\n                  Expires on {{ stockReceipt?.stock_receipt_products[0]?.batch?.expires_on | date }}\n                </small>\n              </ng-container>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.purchase_price\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Purchase Price</small>\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.purchase_price | currency }}</p>\n              </div>\n            </div>\n\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.supplier\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Supplier</small>\n                <a class=\"text-decoration-none text-black\"\n                  [routerLink]=\"['/inventory/suppliers', stockReceipt?.stock_receipt_products[0]?.supplier?.id, 'view']\">\n                  <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.supplier?.company_name }}</p>\n                </a>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.quantity\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Quantity</small>\n                <div class=\"d-flex gap-1\">\n                  <h3 class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.quantity }}</h3>\n                  <small class=\"text-secondary\">{{ stockReceipt?.stock_receipt_products[0]?.product?.measure?.title\n                    }}</small>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.amount\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Total Value</small>\n                <h3 class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.amount | currency }}</h3>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.particulars\">\n            <div class=\"col-12\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Particulars</small>\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.particulars }}</p>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.location\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Location</small>\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.location?.title }}</p>\n              </div>\n            </div>\n            <ng-container *ngIf=\"stockReceipt?.stock_receipt_products[0]?.batch\">\n              <div class=\"col-6\" techlifyFeatureEnabled=\"product-batch-numbers\">\n                <div class=\"d-flex flex-column gap-0\">\n                  <small class=\"text-secondary\">Batch</small>\n                  <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.batch?.batch_number }}</p>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n          <div class=\"row\" *ngIf=\"stockReceipt?.creator\">\n            <div class=\"col-12\">\n              <small class=\"mb-0\">\n                <span class=\"text-secondary\">Created By</span> {{ stockReceipt?.creator?.name }}\n                <span class=\"text-secondary\">On</span> {{ stockReceipt?.created_at | date }}\n              </small>\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"StockReceipt\"\n        [relatedModelId]=\"stockReceipt?.id\"></app-note-list>\n    </div>\n\n    <div style=\"width: calc(100% - 350px - 0.5rem)\">\n      <app-entity-files-view-all title=\"Document\" [entityId]=\"stockReceipt?.id\" entityType=\"StockReceipt\">\n      </app-entity-files-view-all>\n    </div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "latestLocationId", "icon"], outputs: ["saved"] }, { kind: "component", type: i1.EntityFilesViewAllComponent, selector: "app-entity-files-view-all", inputs: ["entityId", "entityType", "viewOnly", "removeSearch", "hideTitleAndDetails", "displayMode", "allowMultipleFiles", "allowBulkUpdate", "viewMode", "fileDropperHeight", "isShowDragDropSection", "useTechlifyTags", "techlifyTagCategories", "techlifyTagConfig", "title", "permission"] }, { kind: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: StockReceiptDeleteButtonComponent, selector: "app-stock-receipt-delete-button", inputs: ["stockReceipt"], outputs: ["deleted"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockReceiptViewComponent, selector: "app-stock-receipt-view", ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"stockReceipt\" class=\"d-flex flex-column justify-content-start gap-2\">\n  <mat-card>\n    <mat-card-content>\n      <h3 class=\"mb-0\">Stock Receipt for {{ stockReceipt?.stock_receipt_products[0]?.product?.name }}</h3>\n    </mat-card-content>\n  </mat-card>\n  <div class=\"d-flex justify-content-start align-items-start gap-2\">\n    <div class=\"d-flex flex-column gap-2\" style=\"width: 350px\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> campaign </span>\n            <strong class=\"mb-0 text-dark\">Information</strong>\n          </div>\n          <div class=\"d-flex justify-content-start align-items-center gap-2 text-secondary\">\n            <app-stock-receipt-form-button [stockReceipt]=\"stockReceipt\" [product]=\"stockReceipt?.product\"\n              (saved)=\"loadData()\">\n            </app-stock-receipt-form-button>\n            <app-techlify-delete-button [model]=\"stockReceipt\" [service]=\"service\"\n              [data]=\"{ title: stockReceipt?.id, type: 'Stock Receipt' }\"\n              (deleted)=\"redirectBack()\">\n            </app-techlify-delete-button>\n          </div>\n        </mat-card-content>\n        <mat-card-content class=\"d-flex flex-column justify-content-start gap-2 mt-3\">\n          <div class=\"d-flex justify-content-between align-items-center gap-2\">\n            <div class=\"d-flex flex-column gap-0\">\n              <a class=\"text-decoration-none text-black\"\n                [routerLink]=\"['/inventory/products', stockReceipt?.stock_receipt_products[0]?.product?.id, 'view']\">\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.product?.name }}</p>\n              </a>\n              <small *ngIf=\"stockReceipt?.stock_receipt_products[0]?.product?.sku\">{{\n                stockReceipt?.stock_receipt_products[0]?.product?.sku }}</small>\n            </div>\n            <div class=\"d-flex flex-column justify-content-end gap-0\">\n              <small *ngIf=\"stockReceipt?.date\">{{ stockReceipt?.date | date }}</small>\n              <ng-container *ngIf=\"stockReceipt?.stock_receipt_products[0]?.batch?.expires_on\">\n                <small techlifyFeatureEnabled=\"product-batch-numbers\">\n                  Expires on {{ stockReceipt?.stock_receipt_products[0]?.batch?.expires_on | date }}\n                </small>\n              </ng-container>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.purchase_price\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Purchase Price</small>\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.purchase_price | currency }}</p>\n              </div>\n            </div>\n\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.supplier\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Supplier</small>\n                <a class=\"text-decoration-none text-black\"\n                  [routerLink]=\"['/inventory/suppliers', stockReceipt?.stock_receipt_products[0]?.supplier?.id, 'view']\">\n                  <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.supplier?.company_name }}</p>\n                </a>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.quantity\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Quantity</small>\n                <div class=\"d-flex gap-1\">\n                  <h3 class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.quantity }}</h3>\n                  <small class=\"text-secondary\">{{ stockReceipt?.stock_receipt_products[0]?.product?.measure?.title\n                    }}</small>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.amount\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Total Value</small>\n                <h3 class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.amount | currency }}</h3>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.particulars\">\n            <div class=\"col-12\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Particulars</small>\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.particulars }}</p>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.location\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Location</small>\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.location?.title }}</p>\n              </div>\n            </div>\n            <ng-container *ngIf=\"stockReceipt?.stock_receipt_products[0]?.batch\">\n              <div class=\"col-6\" techlifyFeatureEnabled=\"product-batch-numbers\">\n                <div class=\"d-flex flex-column gap-0\">\n                  <small class=\"text-secondary\">Batch</small>\n                  <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.batch?.batch_number }}</p>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n          <div class=\"row\" *ngIf=\"stockReceipt?.creator\">\n            <div class=\"col-12\">\n              <small class=\"mb-0\">\n                <span class=\"text-secondary\">Created By</span> {{ stockReceipt?.creator?.name }}\n                <span class=\"text-secondary\">On</span> {{ stockReceipt?.created_at | date }}\n              </small>\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"StockReceipt\"\n        [relatedModelId]=\"stockReceipt?.id\"></app-note-list>\n    </div>\n\n    <div style=\"width: calc(100% - 350px - 0.5rem)\">\n      <app-entity-files-view-all title=\"Document\" [entityId]=\"stockReceipt?.id\" entityType=\"StockReceipt\">\n      </app-entity-files-view-all>\n    </div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "latestLocationId", "icon"], outputs: ["saved"] }, { kind: "component", type: i1.EntityFilesViewAllComponent, selector: "app-entity-files-view-all", inputs: ["entityId", "entityType", "viewOnly", "removeSearch", "hideTitleAndDetails", "displayMode", "allowMultipleFiles", "allowBulkUpdate", "viewMode", "fileDropperHeight", "isShowDragDropSection", "useTechlifyTags", "techlifyTagCategories", "techlifyTagConfig", "title", "permission"] }, { kind: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-receipt-view', template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"stockReceipt\" class=\"d-flex flex-column justify-content-start gap-2\">\n  <mat-card>\n    <mat-card-content>\n      <h3 class=\"mb-0\">Stock Receipt for {{ stockReceipt?.stock_receipt_products[0]?.product?.name }}</h3>\n    </mat-card-content>\n  </mat-card>\n  <div class=\"d-flex justify-content-start align-items-start gap-2\">\n    <div class=\"d-flex flex-column gap-2\" style=\"width: 350px\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> campaign </span>\n            <strong class=\"mb-0 text-dark\">Information</strong>\n          </div>\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <app-stock-receipt-form-button [stockReceipt]=\"stockReceipt\" [product]=\"stockReceipt?.product\"\n              (saved)=\"loadData()\">\n            </app-stock-receipt-form-button>\n            <app-stock-receipt-delete-button [stockReceipt]=\"stockReceipt\" (deleted)=\"redirectBack()\">\n            </app-stock-receipt-delete-button>\n          </div>\n        </mat-card-content>\n        <mat-card-content class=\"d-flex flex-column justify-content-start gap-2 mt-3\">\n          <div class=\"d-flex justify-content-between align-items-center gap-2\">\n            <div class=\"d-flex flex-column gap-0\">\n              <a class=\"text-decoration-none text-black\"\n                [routerLink]=\"['/inventory/products', stockReceipt?.stock_receipt_products[0]?.product?.id, 'view']\">\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.product?.name }}</p>\n              </a>\n              <small *ngIf=\"stockReceipt?.stock_receipt_products[0]?.product?.sku\">{{\n                stockReceipt?.stock_receipt_products[0]?.product?.sku }}</small>\n            </div>\n            <div class=\"d-flex flex-column justify-content-end gap-0\">\n              <small *ngIf=\"stockReceipt?.date\">{{ stockReceipt?.date | date }}</small>\n              <ng-container *ngIf=\"stockReceipt?.stock_receipt_products[0]?.batch?.expires_on\">\n                <small techlifyFeatureEnabled=\"product-batch-numbers\">\n                  Expires on {{ stockReceipt?.stock_receipt_products[0]?.batch?.expires_on | date }}\n                </small>\n              </ng-container>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.purchase_price\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Purchase Price</small>\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.purchase_price | currency }}</p>\n              </div>\n            </div>\n\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.supplier\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Supplier</small>\n                <a class=\"text-decoration-none text-black\"\n                  [routerLink]=\"['/inventory/suppliers', stockReceipt?.stock_receipt_products[0]?.supplier?.id, 'view']\">\n                  <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.supplier?.company_name }}</p>\n                </a>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.quantity\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Quantity</small>\n                <div class=\"d-flex gap-1\">\n                  <h3 class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.quantity }}</h3>\n                  <small class=\"text-secondary\">{{ stockReceipt?.stock_receipt_products[0]?.product?.measure?.title\n                    }}</small>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.amount\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Total Value</small>\n                <h3 class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.amount | currency }}</h3>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.particulars\">\n            <div class=\"col-12\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Particulars</small>\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.particulars }}</p>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.location\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Location</small>\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.location?.title }}</p>\n              </div>\n            </div>\n            <ng-container *ngIf=\"stockReceipt?.stock_receipt_products[0]?.batch\">\n              <div class=\"col-6\" techlifyFeatureEnabled=\"product-batch-numbers\">\n                <div class=\"d-flex flex-column gap-0\">\n                  <small class=\"text-secondary\">Batch</small>\n                  <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.batch?.batch_number }}</p>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n          <div class=\"row\" *ngIf=\"stockReceipt?.creator\">\n            <div class=\"col-12\">\n              <small class=\"mb-0\">\n                <span class=\"text-secondary\">Created By</span> {{ stockReceipt?.creator?.name }}\n                <span class=\"text-secondary\">On</span> {{ stockReceipt?.created_at | date }}\n              </small>\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"StockReceipt\"\n        [relatedModelId]=\"stockReceipt?.id\"></app-note-list>\n    </div>\n\n    <div style=\"width: calc(100% - 350px - 0.5rem)\">\n      <app-entity-files-view-all title=\"Document\" [entityId]=\"stockReceipt?.id\" entityType=\"StockReceipt\">\n      </app-entity-files-view-all>\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'app-stock-receipt-view', template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div *ngIf=\"stockReceipt\" class=\"d-flex flex-column justify-content-start gap-2\">\n  <mat-card>\n    <mat-card-content>\n      <h3 class=\"mb-0\">Stock Receipt for {{ stockReceipt?.stock_receipt_products[0]?.product?.name }}</h3>\n    </mat-card-content>\n  </mat-card>\n  <div class=\"d-flex justify-content-start align-items-start gap-2\">\n    <div class=\"d-flex flex-column gap-2\" style=\"width: 350px\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <span class=\"material-symbols-outlined\"> campaign </span>\n            <strong class=\"mb-0 text-dark\">Information</strong>\n          </div>\n          <div class=\"d-flex justify-content-start align-items-center gap-2 text-secondary\">\n            <app-stock-receipt-form-button [stockReceipt]=\"stockReceipt\" [product]=\"stockReceipt?.product\"\n              (saved)=\"loadData()\">\n            </app-stock-receipt-form-button>\n            <app-techlify-delete-button [model]=\"stockReceipt\" [service]=\"service\"\n              [data]=\"{ title: stockReceipt?.id, type: 'Stock Receipt' }\"\n              (deleted)=\"redirectBack()\">\n            </app-techlify-delete-button>\n          </div>\n        </mat-card-content>\n        <mat-card-content class=\"d-flex flex-column justify-content-start gap-2 mt-3\">\n          <div class=\"d-flex justify-content-between align-items-center gap-2\">\n            <div class=\"d-flex flex-column gap-0\">\n              <a class=\"text-decoration-none text-black\"\n                [routerLink]=\"['/inventory/products', stockReceipt?.stock_receipt_products[0]?.product?.id, 'view']\">\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.product?.name }}</p>\n              </a>\n              <small *ngIf=\"stockReceipt?.stock_receipt_products[0]?.product?.sku\">{{\n                stockReceipt?.stock_receipt_products[0]?.product?.sku }}</small>\n            </div>\n            <div class=\"d-flex flex-column justify-content-end gap-0\">\n              <small *ngIf=\"stockReceipt?.date\">{{ stockReceipt?.date | date }}</small>\n              <ng-container *ngIf=\"stockReceipt?.stock_receipt_products[0]?.batch?.expires_on\">\n                <small techlifyFeatureEnabled=\"product-batch-numbers\">\n                  Expires on {{ stockReceipt?.stock_receipt_products[0]?.batch?.expires_on | date }}\n                </small>\n              </ng-container>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.purchase_price\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Purchase Price</small>\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.purchase_price | currency }}</p>\n              </div>\n            </div>\n\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.supplier\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Supplier</small>\n                <a class=\"text-decoration-none text-black\"\n                  [routerLink]=\"['/inventory/suppliers', stockReceipt?.stock_receipt_products[0]?.supplier?.id, 'view']\">\n                  <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.supplier?.company_name }}</p>\n                </a>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.quantity\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Quantity</small>\n                <div class=\"d-flex gap-1\">\n                  <h3 class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.quantity }}</h3>\n                  <small class=\"text-secondary\">{{ stockReceipt?.stock_receipt_products[0]?.product?.measure?.title\n                    }}</small>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.amount\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Total Value</small>\n                <h3 class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.amount | currency }}</h3>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.particulars\">\n            <div class=\"col-12\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Particulars</small>\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.particulars }}</p>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-6\" *ngIf=\"stockReceipt?.stock_receipt_products[0]?.location\">\n              <div class=\"d-flex flex-column gap-0\">\n                <small class=\"text-secondary\">Location</small>\n                <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.location?.title }}</p>\n              </div>\n            </div>\n            <ng-container *ngIf=\"stockReceipt?.stock_receipt_products[0]?.batch\">\n              <div class=\"col-6\" techlifyFeatureEnabled=\"product-batch-numbers\">\n                <div class=\"d-flex flex-column gap-0\">\n                  <small class=\"text-secondary\">Batch</small>\n                  <p class=\"mb-0\">{{ stockReceipt?.stock_receipt_products[0]?.batch?.batch_number }}</p>\n                </div>\n              </div>\n            </ng-container>\n          </div>\n          <div class=\"row\" *ngIf=\"stockReceipt?.creator\">\n            <div class=\"col-12\">\n              <small class=\"mb-0\">\n                <span class=\"text-secondary\">Created By</span> {{ stockReceipt?.creator?.name }}\n                <span class=\"text-secondary\">On</span> {{ stockReceipt?.created_at | date }}\n              </small>\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"StockReceipt\"\n        [relatedModelId]=\"stockReceipt?.id\"></app-note-list>\n    </div>\n\n    <div style=\"width: calc(100% - 350px - 0.5rem)\">\n      <app-entity-files-view-all title=\"Document\" [entityId]=\"stockReceipt?.id\" entityType=\"StockReceipt\">\n      </app-entity-files-view-all>\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: () => [{ type: i4$1.ActivatedRoute }, { type: StockReceiptService }, { type: i3.Location }] });
 
-class StockReceiptBatchFormComponent extends TechlifyFormComponentInterface {
+class StockReceiptFormComponent extends TechlifyFormComponentInterface {
     formValidatorService;
     fb;
     stockReceiptService;
     router;
     route;
     locationService;
+    location;
     locationCount = signal(0);
     stockReceiptId = signal(null);
     stockReceipt = signal(null);
-    constructor(formValidatorService, fb, stockReceiptService, router, route, locationService) {
+    constructor(formValidatorService, fb, stockReceiptService, router, route, locationService, location) {
         super(formValidatorService);
         this.formValidatorService = formValidatorService;
         this.fb = fb;
@@ -3478,6 +3438,18 @@ class StockReceiptBatchFormComponent extends TechlifyFormComponentInterface {
         this.router = router;
         this.route = route;
         this.locationService = locationService;
+        this.location = location;
+        this.errorMessages = {
+            supplier_id: {
+                required: 'The supplier field is required.',
+            },
+            date: {
+                required: 'The date field is required.',
+            },
+            particulars: {
+                required: 'The particulars field is required.',
+            },
+        };
         this.form = this.fb.group({
             supplier_id: ['', Validators.compose([Validators.required])],
             date: [new Date(), Validators.compose([Validators.required])],
@@ -3620,7 +3592,7 @@ class StockReceiptBatchFormComponent extends TechlifyFormComponentInterface {
             next: () => {
                 this.isWorking = false;
                 this.alertService.addAlert('Stock receipts saved successfully!', 'success');
-                this.router.navigate(['/inventory/stock-receipts']);
+                this.location.back();
             },
             error: () => {
                 this.isWorking = false;
@@ -3628,14 +3600,14 @@ class StockReceiptBatchFormComponent extends TechlifyFormComponentInterface {
         });
     }
     cancel() {
-        this.router.navigate(['/inventory/stock-receipts']);
+        this.location.back();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptBatchFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: StockReceiptService }, { token: i4$1.Router }, { token: i4$1.ActivatedRoute }, { token: LocationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockReceiptBatchFormComponent, isStandalone: true, selector: "app-stock-receipt-batch-form", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"d-flex flex-column gap-2 container\">\n    <mat-card-content>\n\n        <div class=\"d-flex flex-column gap-1\">\n            <h5>\n                <span class=\"material-symbols-outlined align-middle\">download</span>\n                Receive Stock\n            </h5>\n        </div>\n\n        <form class=\"d-flex flex-column gap-2\" [formGroup]=\"form\" (submit)=\"save()\">\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex flex-row gap-2 justify-content-between\">\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Supplier</mat-label>\n                        <app-searchable-selector apiUrl='api/suppliers' formControlName=\"supplier_id\"\n                            titleField='company_name' required></app-searchable-selector>\n                        <mat-error *ngIf=\"isFieldValid('supplier_id')\">{{ getErrorMessage('supplier_id') }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Date</mat-label>\n                        <input matInput [matDatepicker]=\"picker\" placeholder=\"Date\" formControlName=\"date\" required>\n                        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                        <mat-datepicker #picker></mat-datepicker>\n                        <mat-error *ngIf=\"isFieldValid('date')\">{{ getErrorMessage('date') }}</mat-error>\n                    </mat-form-field>\n                </div>\n\n                <div class=\"d-flex flex-row gap-2 justify-content-between\">\n                    <div class=\"w-50\">\n                        <mat-form-field appearance='outline' class=\"w-100\">\n                            <mat-label>Particulars</mat-label>\n                            <textarea matInput placeholder=\"Particulars\" formControlName=\"particulars\"></textarea>\n                            <mat-error *ngIf=\"isFieldValid('particulars')\">{{ getErrorMessage('particulars')\n                                }}</mat-error>\n                        </mat-form-field>\n                    </div>\n                </div>\n            </div>\n\n            <table class=\"table mt-3\">\n                <thead>\n                    <tr>\n                        <th scope=\"col\">#</th>\n                        <th scope=\"col\">Product</th>\n                        <th *ngIf=\"locationCount() > 0\" scope=\"col\">Location</th>\n                        <th scope=\"col\">Quantity</th>\n                        <th scope=\"col\">Purchase Price</th>\n                        <th scope=\"col\">Total Value</th>\n                        <th scope=\"col\">Particulars</th>\n                        <th scope=\"col\" class=\"text-center\" width=\"50\"></th>\n                    </tr>\n                </thead>\n                <tbody formArrayName=\"stock_receipt_products\">\n                    <tr *ngFor=\"let row of stockReceiptProducts.controls; let i = index\" [formGroupName]=\"i\">\n                        <th scope=\"row\">{{ i + 1 }}</th>\n                        <td>\n                            <mat-form-field appearance='outline' class=\"w-100\">\n                                <mat-label>Product</mat-label>\n                                <app-searchable-selector apiUrl='api/products' formControlName=\"product_id\"\n                                    titleField='name' [cache]=\"true\" [selectedValue]=\"getSelectedProduct(i)\" required></app-searchable-selector>\n                            </mat-form-field>\n                        </td>\n                        <td *ngIf=\"locationCount() > 0\">\n                            <app-location-selector appearance='outline' formControlName=\"location_id\"></app-location-selector>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Quantity</mat-label>\n                                <input matInput formControlName=\"quantity\" type=\"number\" min=\"1\">\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Purchase Price</mat-label>\n                                <input matInput formControlName=\"purchase_price\" type=\"number\" min=\"0\">\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Total Value</mat-label>\n                                <input matInput [value]=\"getRowTotal(i) | currency\" readonly>\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline'>\n                                <mat-label>Particulars</mat-label>\n                                <input matInput formControlName=\"particulars\">\n                            </mat-form-field>\n                        </td>\n                        <td class=\"text-center align-middle\">\n                            <div class=\"d-flex gap-2 justify-content-center align-items-center text-secondary\">\n                                <app-techlify-icon role='button' name='delete' (click)=\"removeStockReceiptProduct(i)\"\n                                    matTooltip=\"Remove row\"></app-techlify-icon>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n                <tfoot>\n                    <tr>\n                        <td colspan=\"8\" class=\"text-end\">\n                            <div class=\"d-flex flex-row gap-2 justify-content-end\">\n                                <button mat-button color=\"primary\" type=\"button\" (click)=\"clearProducts()\"\n                                    [disabled]=\"stockReceiptProducts.length === 0\">\n                                    <mat-icon>block</mat-icon> CLEAR ALL\n                                </button>\n                                <button mat-raised-button color=\"primary\" type=\"button\"\n                                    (click)=\"addStockReceiptProduct()\">\n                                    <mat-icon>add</mat-icon> ADD\n                                </button>\n                            </div>\n                        </td>\n                    </tr>\n                </tfoot>\n            </table>\n\n            <div class=\"d-flex justify-content-end align-items-center gap-2 mt-2\">\n                <button [disabled]=\"isWorking\" mat-flat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                <button [disabled]=\"isWorking || stockReceiptProducts.length === 0\" mat-raised-button color=\"primary\"\n                    type=\"submit\">Save</button>\n            </div>\n\n        </form>\n\n    </mat-card-content>\n</mat-card>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: LocationSelectorComponent, selector: "app-location-selector", inputs: ["appearance", "label", "placeholder", "includeNone"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }], preserveWhitespaces: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: StockReceiptService }, { token: i4$1.Router }, { token: i4$1.ActivatedRoute }, { token: LocationService }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockReceiptFormComponent, isStandalone: true, selector: "app-stock-receipt-form", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"d-flex flex-column gap-2 container\">\n    <mat-card-content>\n\n        <div class=\"d-flex flex-column gap-1\">\n            <h5>\n                <span class=\"material-symbols-outlined align-middle\">download</span>\n                Receive Stock\n            </h5>\n        </div>\n\n        <form class=\"d-flex flex-column gap-2\" [formGroup]=\"form\" (submit)=\"save()\">\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex flex-row gap-2 justify-content-between\">\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Supplier</mat-label>\n                        <app-searchable-selector apiUrl='api/suppliers' formControlName=\"supplier_id\"\n                            titleField='company_name' required></app-searchable-selector>\n                        <mat-error *ngIf=\"isFieldValid('supplier_id')\">{{ getErrorMessage('supplier_id') }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Date</mat-label>\n                        <input matInput [matDatepicker]=\"picker\" placeholder=\"Date\" formControlName=\"date\" required>\n                        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                        <mat-datepicker #picker></mat-datepicker>\n                        <mat-error *ngIf=\"isFieldValid('date')\">{{ getErrorMessage('date') }}</mat-error>\n                    </mat-form-field>\n                </div>\n\n                <div class=\"d-flex flex-row gap-2 justify-content-between\">\n                    <div class=\"w-50\">\n                        <mat-form-field appearance='outline' class=\"w-100\">\n                            <mat-label>Particulars</mat-label>\n                            <textarea matInput placeholder=\"Particulars\" formControlName=\"particulars\"></textarea>\n                            <mat-error *ngIf=\"isFieldValid('particulars')\">{{ getErrorMessage('particulars')\n                                }}</mat-error>\n                        </mat-form-field>\n                    </div>\n                </div>\n            </div>\n\n            <table class=\"table mt-3\">\n                <thead>\n                    <tr>\n                        <th scope=\"col\">#</th>\n                        <th scope=\"col\">Product</th>\n                        <th *ngIf=\"locationCount() > 0\" scope=\"col\">Location</th>\n                        <th scope=\"col\">Quantity</th>\n                        <th scope=\"col\">Purchase Price</th>\n                        <th scope=\"col\">Total Value</th>\n                        <th scope=\"col\">Particulars</th>\n                        <th scope=\"col\" class=\"text-center\" width=\"50\"></th>\n                    </tr>\n                </thead>\n                <tbody formArrayName=\"stock_receipt_products\">\n                    <tr *ngFor=\"let row of stockReceiptProducts.controls; let i = index\" [formGroupName]=\"i\">\n                        <th scope=\"row\">{{ i + 1 }}</th>\n                        <td>\n                            <mat-form-field appearance='outline' class=\"w-100\">\n                                <mat-label>Product</mat-label>\n                                <app-searchable-selector apiUrl='api/products' formControlName=\"product_id\"\n                                    titleField='name' [cache]=\"true\" [selectedValue]=\"getSelectedProduct(i)\" required></app-searchable-selector>\n                            </mat-form-field>\n                        </td>\n                        <td *ngIf=\"locationCount() > 0\">\n                            <app-location-selector appearance='outline' formControlName=\"location_id\"></app-location-selector>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Quantity</mat-label>\n                                <input matInput formControlName=\"quantity\" type=\"number\" min=\"1\">\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Purchase Price</mat-label>\n                                <input matInput formControlName=\"purchase_price\" type=\"number\" min=\"0\">\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Total Value</mat-label>\n                                <input matInput [value]=\"getRowTotal(i) | currency\" readonly>\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline'>\n                                <mat-label>Particulars</mat-label>\n                                <input matInput formControlName=\"particulars\">\n                            </mat-form-field>\n                        </td>\n                        <td class=\"text-center align-middle\">\n                            <div class=\"d-flex gap-2 justify-content-center align-items-center text-secondary\">\n                                <app-techlify-icon role='button' name='delete' (click)=\"removeStockReceiptProduct(i)\"\n                                    matTooltip=\"Remove row\"></app-techlify-icon>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n                <tfoot>\n                    <tr>\n                        <td colspan=\"8\" class=\"text-end\">\n                            <div class=\"d-flex flex-row gap-2 justify-content-end\">\n                                <button mat-button color=\"primary\" type=\"button\" (click)=\"clearProducts()\"\n                                    [disabled]=\"stockReceiptProducts.length === 0\">\n                                    <mat-icon>block</mat-icon> CLEAR ALL\n                                </button>\n                                <button mat-raised-button color=\"primary\" type=\"button\"\n                                    (click)=\"addStockReceiptProduct()\">\n                                    <mat-icon>add</mat-icon> ADD\n                                </button>\n                            </div>\n                        </td>\n                    </tr>\n                </tfoot>\n            </table>\n\n            <div class=\"d-flex justify-content-end align-items-center gap-2 mt-2\">\n                <button [disabled]=\"isWorking\" mat-flat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                <button [disabled]=\"isWorking || stockReceiptProducts.length === 0\" mat-raised-button color=\"primary\"\n                    type=\"submit\">Save</button>\n            </div>\n\n        </form>\n\n    </mat-card-content>\n</mat-card>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.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: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: LocationSelectorComponent, selector: "app-location-selector", inputs: ["appearance", "label", "placeholder", "includeNone"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }], preserveWhitespaces: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptBatchFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-receipt-batch-form', standalone: true, imports: [
+            args: [{ selector: 'app-stock-receipt-form', standalone: true, imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         MaterialModule,
@@ -3643,7 +3615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         LocationSelectorComponent,
                         TechlifyIconModule
                     ], template: "<mat-card class=\"d-flex flex-column gap-2 container\">\n    <mat-card-content>\n\n        <div class=\"d-flex flex-column gap-1\">\n            <h5>\n                <span class=\"material-symbols-outlined align-middle\">download</span>\n                Receive Stock\n            </h5>\n        </div>\n\n        <form class=\"d-flex flex-column gap-2\" [formGroup]=\"form\" (submit)=\"save()\">\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex flex-row gap-2 justify-content-between\">\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Supplier</mat-label>\n                        <app-searchable-selector apiUrl='api/suppliers' formControlName=\"supplier_id\"\n                            titleField='company_name' required></app-searchable-selector>\n                        <mat-error *ngIf=\"isFieldValid('supplier_id')\">{{ getErrorMessage('supplier_id') }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Date</mat-label>\n                        <input matInput [matDatepicker]=\"picker\" placeholder=\"Date\" formControlName=\"date\" required>\n                        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                        <mat-datepicker #picker></mat-datepicker>\n                        <mat-error *ngIf=\"isFieldValid('date')\">{{ getErrorMessage('date') }}</mat-error>\n                    </mat-form-field>\n                </div>\n\n                <div class=\"d-flex flex-row gap-2 justify-content-between\">\n                    <div class=\"w-50\">\n                        <mat-form-field appearance='outline' class=\"w-100\">\n                            <mat-label>Particulars</mat-label>\n                            <textarea matInput placeholder=\"Particulars\" formControlName=\"particulars\"></textarea>\n                            <mat-error *ngIf=\"isFieldValid('particulars')\">{{ getErrorMessage('particulars')\n                                }}</mat-error>\n                        </mat-form-field>\n                    </div>\n                </div>\n            </div>\n\n            <table class=\"table mt-3\">\n                <thead>\n                    <tr>\n                        <th scope=\"col\">#</th>\n                        <th scope=\"col\">Product</th>\n                        <th *ngIf=\"locationCount() > 0\" scope=\"col\">Location</th>\n                        <th scope=\"col\">Quantity</th>\n                        <th scope=\"col\">Purchase Price</th>\n                        <th scope=\"col\">Total Value</th>\n                        <th scope=\"col\">Particulars</th>\n                        <th scope=\"col\" class=\"text-center\" width=\"50\"></th>\n                    </tr>\n                </thead>\n                <tbody formArrayName=\"stock_receipt_products\">\n                    <tr *ngFor=\"let row of stockReceiptProducts.controls; let i = index\" [formGroupName]=\"i\">\n                        <th scope=\"row\">{{ i + 1 }}</th>\n                        <td>\n                            <mat-form-field appearance='outline' class=\"w-100\">\n                                <mat-label>Product</mat-label>\n                                <app-searchable-selector apiUrl='api/products' formControlName=\"product_id\"\n                                    titleField='name' [cache]=\"true\" [selectedValue]=\"getSelectedProduct(i)\" required></app-searchable-selector>\n                            </mat-form-field>\n                        </td>\n                        <td *ngIf=\"locationCount() > 0\">\n                            <app-location-selector appearance='outline' formControlName=\"location_id\"></app-location-selector>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Quantity</mat-label>\n                                <input matInput formControlName=\"quantity\" type=\"number\" min=\"1\">\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Purchase Price</mat-label>\n                                <input matInput formControlName=\"purchase_price\" type=\"number\" min=\"0\">\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Total Value</mat-label>\n                                <input matInput [value]=\"getRowTotal(i) | currency\" readonly>\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline'>\n                                <mat-label>Particulars</mat-label>\n                                <input matInput formControlName=\"particulars\">\n                            </mat-form-field>\n                        </td>\n                        <td class=\"text-center align-middle\">\n                            <div class=\"d-flex gap-2 justify-content-center align-items-center text-secondary\">\n                                <app-techlify-icon role='button' name='delete' (click)=\"removeStockReceiptProduct(i)\"\n                                    matTooltip=\"Remove row\"></app-techlify-icon>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n                <tfoot>\n                    <tr>\n                        <td colspan=\"8\" class=\"text-end\">\n                            <div class=\"d-flex flex-row gap-2 justify-content-end\">\n                                <button mat-button color=\"primary\" type=\"button\" (click)=\"clearProducts()\"\n                                    [disabled]=\"stockReceiptProducts.length === 0\">\n                                    <mat-icon>block</mat-icon> CLEAR ALL\n                                </button>\n                                <button mat-raised-button color=\"primary\" type=\"button\"\n                                    (click)=\"addStockReceiptProduct()\">\n                                    <mat-icon>add</mat-icon> ADD\n                                </button>\n                            </div>\n                        </td>\n                    </tr>\n                </tfoot>\n            </table>\n\n            <div class=\"d-flex justify-content-end align-items-center gap-2 mt-2\">\n                <button [disabled]=\"isWorking\" mat-flat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                <button [disabled]=\"isWorking || stockReceiptProducts.length === 0\" mat-raised-button color=\"primary\"\n                    type=\"submit\">Save</button>\n            </div>\n\n        </form>\n\n    </mat-card-content>\n</mat-card>" }]
-        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: StockReceiptService }, { type: i4$1.Router }, { type: i4$1.ActivatedRoute }, { type: LocationService }] });
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: StockReceiptService }, { type: i4$1.Router }, { type: i4$1.ActivatedRoute }, { type: LocationService }, { type: i3.Location }] });
 
 const routes$7 = [
     {
@@ -3660,13 +3632,13 @@ const routes$7 = [
         canLoad: [AuthenticationGuard]
     },
     {
-        path: 'batch-form',
-        component: StockReceiptBatchFormComponent,
+        path: 'form',
+        component: StockReceiptFormComponent,
         canLoad: [AuthenticationGuard]
     },
     {
-        path: 'batch-form/:id',
-        component: StockReceiptBatchFormComponent,
+        path: 'form/:id',
+        component: StockReceiptFormComponent,
         canLoad: [AuthenticationGuard]
     }
 ];
@@ -3769,7 +3741,7 @@ class TechlifyFilterComponent {
             : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyFilterComponent, deps: [{ token: i1.RequestHelperService }, { token: i4$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyFilterComponent, selector: "app-techlify-filter", inputs: { filterForm: "filterForm", filterConfig: "filterConfig" }, outputs: { filterUpdated: "filterUpdated" }, ngImport: i0, template: "<form [formGroup]=\"filterForm\" fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n  <mat-form-field *ngIf=\"filterForm.get('search')\" [appearance]=\"getFilterConfig('appearance', 'search')\">\n    <mat-label>Search</mat-label>\n    <input formControlName=\"search\" matInput [placeholder]=\"getFilterConfig('placeholder', 'search')\" />\n    <button *ngIf=\"filterForm.value?.search\" mat-icon-button matSuffix (click)=\"resetField('search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <app-timeline-filter\n    *ngIf=\"filterForm?.get('duration')\"\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'duration')\"\n    [appearance]=\"getFilterConfig('appearance', 'duration')\"\n    formControlName=\"duration\"\n    (selectionChange)=\"onDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.date_from\"\n    [dateTo]=\"filterForm.value?.date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('payment_method_ids')\">\n    <mat-label>Payment Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"payment_method_ids\"\n      apiUrl=\"api/payment-methods\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.payment_method_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('payment_method_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('payment_account_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['accountingcommon_account.read']\">\n      <mat-label>{{ getFilterConfig('label', 'payment_account_ids') || 'Payment Account' }}</mat-label>\n      <app-searchable-selector\n        formControlName=\"payment_account_ids\"\n        [apiUrl]=\"getFilterConfig('apiUrl', 'payment_account_ids') || 'api/accounts'\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.payment_account_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('payment_account_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('invoice_status_ids')\">\n    <mat-label>Invoice Status</mat-label>\n    <app-searchable-selector\n      formControlName=\"invoice_status_ids\"\n      apiUrl=\"api/invoice-statuses\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.invoice_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('invoice_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('customer_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['customer_read']\">\n      <mat-label>Customer</mat-label>\n      <app-searchable-selector\n        formControlName=\"customer_ids\"\n        titleField=\"name\"\n        apiUrl=\"api/customers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.customer_ids\" mat-icon-button matSuffix (click)=\"resetField('customer_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"filterForm.get('project_ids') && getFilterConfig('disabled', 'project_ids') === false\">\n    <mat-form-field *ngxPermissionsOnly=\"['project.read']\">\n      <mat-label>Project</mat-label>\n      <app-searchable-selector\n        formControlName=\"project_ids\"\n        apiUrl=\"api/projects\"\n        titleField=\"project_name\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.project_ids\" mat-icon-button matSuffix (click)=\"resetField('project_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('product_ids')\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector\n      formControlName=\"product_ids\"\n      apiUrl=\"api/products\"\n      titleField=\"name\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.product_ids\" mat-icon-button matSuffix (click)=\"resetField('product_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('measure_ids')\">\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector\n      formControlName=\"measure_ids\"\n      apiUrl=\"api/product-measures\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.measure_ids\" mat-icon-button matSuffix (click)=\"resetField('measure_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngxPermissionsOnly=\"['supplier.read']\">\n    <mat-form-field *ngIf=\"filterForm.get('supplier_ids')\" [appearance]=\"getFilterConfig('appearance', 'supplier_ids')\">\n      <mat-label>Supplier</mat-label>\n      <app-searchable-selector\n        formControlName=\"supplier_ids\"\n        titleField=\"company_name\"\n        apiUrl=\"api/suppliers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.supplier_ids\" mat-icon-button matSuffix (click)=\"resetField('supplier_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <app-timeline-filter\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'expiry_duration')\"\n    *ngIf=\"filterForm?.get('expiry_duration')\"\n    formControlName=\"expiry_duration\"\n    (selectionChange)=\"onExpiryDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.expiry_date_from\"\n    [dateTo]=\"filterForm.value?.expiry_date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('cost_category_ids')\" style=\"width: 150px\">\n    <mat-label>Cost Category</mat-label>\n    <app-searchable-selector\n      formControlName=\"cost_category_ids\"\n      apiUrl=\"api/cost-code-categories\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.cost_category_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('cost_category_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('milestone_ids')\" style=\"width: 150px\">\n    <mat-label>Milestone</mat-label>\n    <app-searchable-selector\n      formControlName=\"milestone_ids\"\n      apiUrl=\"api/milestones\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.milestone_ids\" mat-icon-button matSuffix (click)=\"resetField('milestone_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('team_member_ids')\">\n    <mat-label>Assignee</mat-label>\n    <app-searchable-selector apiUrl=\"api/persons\" formControlName=\"team_member_ids\" titleField=\"name\" [multiple]=\"true\">\n    </app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.team_member_ids\" mat-icon-button matSuffix (click)=\"resetField('team_member_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-types\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_document_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_document_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-document-types\"\n      [multiple]=\"true\"\n      [enableSearch]=\"getFilterConfig('enableSearch', 'fixed_asset_document_type_ids')\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_document_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_document_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <div *ngIf=\"filterForm.get('fixed_asset_document_status')\">\n    <small class=\"mr-2 text-secondary\" *ngIf=\"getFilterConfig('showLabel', 'fixed_asset_document_status')\">\n      Status\n    </small>\n    <mat-button-toggle-group formControlName=\"fixed_asset_document_status\" [multiple]=\"false\">\n      <mat-button-toggle value=\"all\">All</mat-button-toggle>\n      <mat-button-toggle value=\"active\">Active</mat-button-toggle>\n      <mat-button-toggle value=\"expired\">Expired</mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <mat-form-field *ngIf=\"filterForm.get('asset_account_ids')\">\n    <mat-label>Asset Account</mat-label>\n    <app-searchable-selector\n      formControlName=\"asset_account_ids\"\n      apiUrl=\"api/accounts\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.asset_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('asset_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_expense_account_ids')\">\n    <mat-label>Depreciation Expense Account</mat-label>\n    <app-searchable-selector\n      [multiple]=\"true\"\n      apiUrl=\"api/accounts\"\n      formControlName=\"depreciation_expense_account_ids\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.depreciation_expense_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('depreciation_expense_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_method_ids')\">\n    <mat-label>Depreciation Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"depreciation_method_ids\"\n      apiUrl=\"api/accounting-plus/depreciation-methods\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      (click)=\"resetField('depreciation_method_ids')\"\n      *ngIf=\"filterForm.value?.depreciation_method_ids\"\n      mat-icon-button\n      matSuffix\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('task_status_ids')\" style=\"width: 150px\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/task-statuses\"\n      formControlName=\"task_status_ids\"\n      titleField=\"title\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.task_status_ids\" mat-icon-button matSuffix (click)=\"resetField('task_status_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('service_center_ids')\">\n    <mat-label>Service Center</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/service-centers\"\n      formControlName=\"service_center_ids\"\n      titleField=\"name\"\n      [enableSearch]=\"false\"\n      [multiple]=\"true\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.service_center_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('service_center_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_maintenance_status_ids')\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/fixed-asset-maintenance-statuses\"\n      formControlName=\"fixed_asset_maintenance_status_ids\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_maintenance_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_maintenance_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('group_by')\">\n    <mat-label>Group By</mat-label>\n    <mat-select formControlName=\"group_by\">\n      <mat-option value=\"week\">Week</mat-option>\n      <mat-option value=\"month\">Month</mat-option>\n      <mat-option value=\"year\">Year</mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i16.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i16.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i16.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: i11$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i5$2.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyFilterComponent, selector: "app-techlify-filter", inputs: { filterForm: "filterForm", filterConfig: "filterConfig" }, outputs: { filterUpdated: "filterUpdated" }, ngImport: i0, template: "<form [formGroup]=\"filterForm\" fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n  <mat-form-field *ngIf=\"filterForm.get('search')\" [appearance]=\"getFilterConfig('appearance', 'search')\">\n    <mat-label>Search</mat-label>\n    <input formControlName=\"search\" matInput [placeholder]=\"getFilterConfig('placeholder', 'search')\" />\n    <button *ngIf=\"filterForm.value?.search\" mat-icon-button matSuffix (click)=\"resetField('search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <app-timeline-filter\n    *ngIf=\"filterForm?.get('duration')\"\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'duration')\"\n    [appearance]=\"getFilterConfig('appearance', 'duration')\"\n    formControlName=\"duration\"\n    (selectionChange)=\"onDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.date_from\"\n    [dateTo]=\"filterForm.value?.date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('payment_method_ids')\">\n    <mat-label>Payment Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"payment_method_ids\"\n      apiUrl=\"api/payment-methods\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.payment_method_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('payment_method_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('payment_account_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['accountingcommon_account.read']\">\n      <mat-label>{{ getFilterConfig('label', 'payment_account_ids') || 'Payment Account' }}</mat-label>\n      <app-searchable-selector\n        formControlName=\"payment_account_ids\"\n        [apiUrl]=\"getFilterConfig('apiUrl', 'payment_account_ids') || 'api/accounts'\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.payment_account_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('payment_account_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('invoice_status_ids')\">\n    <mat-label>Invoice Status</mat-label>\n    <app-searchable-selector\n      formControlName=\"invoice_status_ids\"\n      apiUrl=\"api/invoice-statuses\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.invoice_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('invoice_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('customer_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['customer_read']\">\n      <mat-label>Customer</mat-label>\n      <app-searchable-selector\n        formControlName=\"customer_ids\"\n        titleField=\"name\"\n        apiUrl=\"api/customers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.customer_ids\" mat-icon-button matSuffix (click)=\"resetField('customer_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <ng-container *ngIf=\"filterForm.get('project_ids') && getFilterConfig('disabled', 'project_ids') === false\">\n    <mat-form-field *ngxPermissionsOnly=\"['project.read']\">\n      <mat-label>Project</mat-label>\n      <app-searchable-selector\n        formControlName=\"project_ids\"\n        apiUrl=\"api/projects\"\n        titleField=\"project_name\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.project_ids\" mat-icon-button matSuffix (click)=\"resetField('project_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('product_ids')\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector\n      formControlName=\"product_ids\"\n      apiUrl=\"api/products\"\n      titleField=\"name\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.product_ids\" mat-icon-button matSuffix (click)=\"resetField('product_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('measure_ids')\">\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector\n      formControlName=\"measure_ids\"\n      apiUrl=\"api/product-measures\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.measure_ids\" mat-icon-button matSuffix (click)=\"resetField('measure_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngxPermissionsOnly=\"['supplier.read']\">\n    <mat-form-field *ngIf=\"filterForm.get('supplier_ids')\" [appearance]=\"getFilterConfig('appearance', 'supplier_ids')\">\n      <mat-label>Supplier</mat-label>\n      <app-searchable-selector\n        formControlName=\"supplier_ids\"\n        titleField=\"company_name\"\n        apiUrl=\"api/suppliers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button *ngIf=\"filterForm.value?.supplier_ids\" mat-icon-button matSuffix (click)=\"resetField('supplier_ids')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <app-timeline-filter\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'expiry_duration')\"\n    *ngIf=\"filterForm?.get('expiry_duration')\"\n    formControlName=\"expiry_duration\"\n    (selectionChange)=\"onExpiryDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.expiry_date_from\"\n    [dateTo]=\"filterForm.value?.expiry_date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('cost_category_ids')\" style=\"width: 150px\">\n    <mat-label>Cost Category</mat-label>\n    <app-searchable-selector\n      formControlName=\"cost_category_ids\"\n      apiUrl=\"api/cost-code-categories\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.cost_category_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('cost_category_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('milestone_ids')\" style=\"width: 150px\">\n    <mat-label>Milestone</mat-label>\n    <app-searchable-selector\n      formControlName=\"milestone_ids\"\n      apiUrl=\"api/milestones\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.milestone_ids\" mat-icon-button matSuffix (click)=\"resetField('milestone_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('team_member_ids')\">\n    <mat-label>Assignee</mat-label>\n    <app-searchable-selector apiUrl=\"api/persons\" formControlName=\"team_member_ids\" titleField=\"name\" [multiple]=\"true\">\n    </app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.team_member_ids\" mat-icon-button matSuffix (click)=\"resetField('team_member_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-types\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_document_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_document_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-document-types\"\n      [multiple]=\"true\"\n      [enableSearch]=\"getFilterConfig('enableSearch', 'fixed_asset_document_type_ids')\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_document_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_document_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <div *ngIf=\"filterForm.get('fixed_asset_document_status')\">\n    <small class=\"mr-2 text-secondary\" *ngIf=\"getFilterConfig('showLabel', 'fixed_asset_document_status')\">\n      Status\n    </small>\n    <mat-button-toggle-group formControlName=\"fixed_asset_document_status\" [multiple]=\"false\">\n      <mat-button-toggle value=\"all\">All</mat-button-toggle>\n      <mat-button-toggle value=\"active\">Active</mat-button-toggle>\n      <mat-button-toggle value=\"expired\">Expired</mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <mat-form-field *ngIf=\"filterForm.get('asset_account_ids')\">\n    <mat-label>Asset Account</mat-label>\n    <app-searchable-selector\n      formControlName=\"asset_account_ids\"\n      apiUrl=\"api/accounts\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.asset_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('asset_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_expense_account_ids')\">\n    <mat-label>Depreciation Expense Account</mat-label>\n    <app-searchable-selector\n      [multiple]=\"true\"\n      apiUrl=\"api/accounts\"\n      formControlName=\"depreciation_expense_account_ids\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.depreciation_expense_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('depreciation_expense_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_method_ids')\">\n    <mat-label>Depreciation Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"depreciation_method_ids\"\n      apiUrl=\"api/accounting-plus/depreciation-methods\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      (click)=\"resetField('depreciation_method_ids')\"\n      *ngIf=\"filterForm.value?.depreciation_method_ids\"\n      mat-icon-button\n      matSuffix\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('task_status_ids')\" style=\"width: 150px\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/task-statuses\"\n      formControlName=\"task_status_ids\"\n      titleField=\"title\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button *ngIf=\"filterForm.value?.task_status_ids\" mat-icon-button matSuffix (click)=\"resetField('task_status_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('service_center_ids')\">\n    <mat-label>Service Center</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/service-centers\"\n      formControlName=\"service_center_ids\"\n      titleField=\"name\"\n      [enableSearch]=\"false\"\n      [multiple]=\"true\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.service_center_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('service_center_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_maintenance_status_ids')\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/fixed-asset-maintenance-statuses\"\n      formControlName=\"fixed_asset_maintenance_status_ids\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_maintenance_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_maintenance_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('group_by')\">\n    <mat-label>Group By</mat-label>\n    <mat-select formControlName=\"group_by\">\n      <mat-option value=\"week\">Week</mat-option>\n      <mat-option value=\"month\">Month</mat-option>\n      <mat-option value=\"year\">Year</mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i16.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i16.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i16.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.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: i11$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i13.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyFilterComponent, decorators: [{
             type: Component,
@@ -3819,7 +3791,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class StockReceiptsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptsModule, declarations: [StockReceiptPageComponent,
-            StockReceiptDeleteButtonComponent,
             StockReceiptViewComponent,
             StockReceiptListComponent,
             StockReceiptProductsListComponent], imports: [CommonModule,
@@ -3831,7 +3802,7 @@ class StockReceiptsModule {
             ReactiveFormsModule,
             PayeeSelectorModule,
             InfiniteScrollDirective,
-            StockReceiptFormModule,
+            StockReceiptSimpleFormModule,
             ProductCategoryBadgesComponent,
             ColumnSelectorModule,
             EntityFilesViewAllModule,
@@ -3841,8 +3812,7 @@ class StockReceiptsModule {
             RouterModule,
             ExportToExcelButtonComponent,
             TechlifyDeleteButtonComponent,
-            StockReceiptProductFormButtonComponent], exports: [StockReceiptDeleteButtonComponent,
-            StockReceiptPageComponent,
+            StockReceiptProductFormButtonComponent], exports: [StockReceiptPageComponent,
             StockReceiptListComponent,
             StockReceiptProductsListComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptsModule, imports: [CommonModule,
@@ -3853,7 +3823,7 @@ class StockReceiptsModule {
             TimelineFilterModule,
             ReactiveFormsModule,
             PayeeSelectorModule,
-            StockReceiptFormModule,
+            StockReceiptSimpleFormModule,
             ColumnSelectorModule,
             EntityFilesViewAllModule,
             TechlifyFeatureModule,
@@ -3869,13 +3839,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{
                     declarations: [
                         StockReceiptPageComponent,
-                        StockReceiptDeleteButtonComponent,
                         StockReceiptViewComponent,
                         StockReceiptListComponent,
                         StockReceiptProductsListComponent
                     ],
                     exports: [
-                        StockReceiptDeleteButtonComponent,
                         StockReceiptPageComponent,
                         StockReceiptListComponent,
                         StockReceiptProductsListComponent
@@ -3890,7 +3858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReactiveFormsModule,
                         PayeeSelectorModule,
                         InfiniteScrollDirective,
-                        StockReceiptFormModule,
+                        StockReceiptSimpleFormModule,
                         ProductCategoryBadgesComponent,
                         ColumnSelectorModule,
                         EntityFilesViewAllModule,
@@ -3910,47 +3878,6 @@ var stockReceipts_module = /*#__PURE__*/Object.freeze({
     StockReceiptsModule: StockReceiptsModule
 });
 
-class StockIssuanceDeleteButtonComponent {
-    matDialog;
-    stockIssueService;
-    alertService;
-    stockIssuance;
-    deleted = new EventEmitter();
-    isDeleting = false;
-    constructor(matDialog, stockIssueService, alertService) {
-        this.matDialog = matDialog;
-        this.stockIssueService = stockIssueService;
-        this.alertService = alertService;
-    }
-    showDeleteConfirmModel(templateRef) {
-        this.matDialog.open(templateRef, { width: '400px' });
-    }
-    delete() {
-        this.isDeleting = true;
-        this.stockIssueService.delete(this.stockIssuance).subscribe({
-            next: () => {
-                this.matDialog.closeAll();
-                this.isDeleting = false;
-                this.deleted.emit();
-                this.alertService.addAlert('Stock Issuance deleted successfully!', 'success');
-            },
-            error: () => {
-                this.isDeleting = false;
-            },
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssuanceDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: StockIssueService }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockIssuanceDeleteButtonComponent, selector: "app-stock-issuance-delete-button", inputs: { stockIssuance: "stockIssuance" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<span class=\"material-symbols-outlined cursor-pointer\" (click)=\"showDeleteConfirmModel(deleteModelTemplate)\">\n  delete\n</span>\n\n<ng-template #deleteModelTemplate>\n  <h3 mat-dialog-title>Delete Stock Issuance</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to delete the stock issuance record?</p>\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-2\">\n    <button [disabled]=\"isDeleting\" mat-raised-button type=\"button\" color=\"warn\" (click)=\"delete()\">Delete</button>\n    <button [disabled]=\"isDeleting\" mat-flat-button mat-dialog-close type=\"button\">Cancel</button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], preserveWhitespaces: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssuanceDeleteButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-stock-issuance-delete-button', template: "<span class=\"material-symbols-outlined cursor-pointer\" (click)=\"showDeleteConfirmModel(deleteModelTemplate)\">\n  delete\n</span>\n\n<ng-template #deleteModelTemplate>\n  <h3 mat-dialog-title>Delete Stock Issuance</h3>\n  <div mat-dialog-content>\n    <p>Are you sure you want to delete the stock issuance record?</p>\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-2\">\n    <button [disabled]=\"isDeleting\" mat-raised-button type=\"button\" color=\"warn\" (click)=\"delete()\">Delete</button>\n    <button [disabled]=\"isDeleting\" mat-flat-button mat-dialog-close type=\"button\">Cancel</button>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: StockIssueService }, { type: i1.AlertService }], propDecorators: { stockIssuance: [{
-                type: Input
-            }], deleted: [{
-                type: Output
-            }] } });
-
 let StockIssueListComponent = class StockIssueListComponent extends TechlifyListingControllerInterface {
     service;
     formBuilder;
@@ -4062,14 +3989,14 @@ let StockIssueListComponent = class StockIssueListComponent extends TechlifyList
         this.router.navigate(['/inventory/stock-issues', model?.id, 'view']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueListComponent, deps: [{ token: StockIssueService }, { token: i2$1.FormBuilder }, { token: i4$1.Router }, { token: i1.TechlifyFeatureService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockIssueListComponent, selector: "app-stock-issue-list", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, selectedColumns: { classPropertyName: "selectedColumns", publicName: "selectedColumns", isSignal: true, isRequired: false, transformFunction: null }, exportInProgress: { classPropertyName: "exportInProgress", publicName: "exportInProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issues\" infiniteScroll\n      id=\"stockIssueTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"issue_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Issue ID\">Issue #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-issues', element?.id, 'view']\">\n            {{ element?.id }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <ul class=\"mb-0 ps-3\">\n            <li *ngFor=\"let sip of element?.stock_issue_products\">\n              {{ sip?.quantity }} {{ sip?.product?.measure?.title }} <em>of</em>\n              <a class=\"text-decoration-none text-dark\"\n                [routerLink]=\"['/inventory/products', sip?.product?.id, 'view']\">\n                {{ sip?.product?.name }}\n              </a>\n            </li>\n          </ul>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges\n            [product]=\"element?.stock_issue_products[0]?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue_products[0]?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.stock_issue_products[0]?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_issue_products[0]?.quantity }}\n          {{ element?.stock_issue_products[0]?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.stock_issue_products[0]?.batch?.batch_number\">\n            {{ element?.stock_issue_products[0]?.batch?.batch_number }}\n          </p>\n          <small class=\"text-secondary\" *ngIf=\"element?.stock_issue_products[0]?.batch?.expires_on\">\n            Expires {{ element?.stock_issue_products[0]?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue_products[0]?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.stock_issue_products[0]?.location_id, 'view']\">\n            {{ element?.stock_issue_products[0]?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.issuable\" [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\">\n            Maintenance for {{ element?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue_products[0]?.particulars }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div *ngIf=\"!element.stock_transfer\" class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', element?.id, 'view']\"></app-techlify-icon>\n            <app-stock-issue-form-button [stockIssue]=\"element\"\n              (saved)=\"reload(); listUpdated.emit(true)\"></app-stock-issue-form-button>\n            <app-stock-issuance-delete-button [stockIssuance]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit(true)\"></app-stock-issuance-delete-button>\n          </div>\n          <span *ngIf=\"element.stock_transfer\" class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-issue_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalQuantity }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-related\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssueProduct", "stockIssue", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: StockIssuanceDeleteButtonComponent, selector: "app-stock-issuance-delete-button", inputs: ["stockIssuance"], outputs: ["deleted"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockIssueListComponent, selector: "app-stock-issue-list", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, selectedColumns: { classPropertyName: "selectedColumns", publicName: "selectedColumns", isSignal: true, isRequired: false, transformFunction: null }, exportInProgress: { classPropertyName: "exportInProgress", publicName: "exportInProgress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issues\" infiniteScroll\n      id=\"stockIssueTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"issue_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Issue ID\">Issue #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\" [routerLink]=\"['/inventory/stock-issues', element?.id, 'view']\">\n            {{ element?.id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <ul class=\"mb-0 ps-3\">\n            <li *ngFor=\"let sip of element?.stock_issue_products\">\n              {{ sip?.quantity }} {{ sip?.product?.measure?.title }} <em>of</em>\n              <a class=\"text-decoration-none text-dark\"\n                [routerLink]=\"['/inventory/products', sip?.product?.id, 'view']\">\n                {{ sip?.product?.name }}\n              </a>\n            </li>\n          </ul>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges\n            [product]=\"element?.stock_issue_products[0]?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue_products[0]?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.stock_issue_products[0]?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_issue_products[0]?.quantity }}\n          {{ element?.stock_issue_products[0]?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.stock_issue_products[0]?.batch?.batch_number\">\n            {{ element?.stock_issue_products[0]?.batch?.batch_number }}\n          </p>\n          <small class=\"text-secondary\" *ngIf=\"element?.stock_issue_products[0]?.batch?.expires_on\">\n            Expires {{ element?.stock_issue_products[0]?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue_products[0]?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.stock_issue_products[0]?.location_id, 'view']\">\n            {{ element?.stock_issue_products[0]?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.issuable\" [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\">\n            Maintenance for {{ element?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue_products[0]?.particulars }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div *ngIf=\"!element.stock_transfer\" class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', element?.id, 'view']\"></app-techlify-icon>\n            <app-stock-issue-form-button [stockIssue]=\"element\"\n              (saved)=\"reload(); listUpdated.emit(true)\"></app-stock-issue-form-button>\n            <app-techlify-delete-button [model]=\"element\" [service]=\"service\"\n              [data]=\"{ title: element?.id, type: 'Stock Receipt Product' }\" (deleted)=\"reload();\">\n            </app-techlify-delete-button>\n          </div>\n          <span *ngIf=\"element.stock_transfer\" class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-issue_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalQuantity }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-related\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssueProduct", "stockIssue", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 StockIssueListComponent = __decorate([
     UntilDestroy()
 ], StockIssueListComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-issue-list', template: "<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issues\" infiniteScroll\n      id=\"stockIssueTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"issue_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Issue ID\">Issue #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/stock-issues', element?.id, 'view']\">\n            {{ element?.id }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <ul class=\"mb-0 ps-3\">\n            <li *ngFor=\"let sip of element?.stock_issue_products\">\n              {{ sip?.quantity }} {{ sip?.product?.measure?.title }} <em>of</em>\n              <a class=\"text-decoration-none text-dark\"\n                [routerLink]=\"['/inventory/products', sip?.product?.id, 'view']\">\n                {{ sip?.product?.name }}\n              </a>\n            </li>\n          </ul>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges\n            [product]=\"element?.stock_issue_products[0]?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue_products[0]?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.stock_issue_products[0]?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_issue_products[0]?.quantity }}\n          {{ element?.stock_issue_products[0]?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.stock_issue_products[0]?.batch?.batch_number\">\n            {{ element?.stock_issue_products[0]?.batch?.batch_number }}\n          </p>\n          <small class=\"text-secondary\" *ngIf=\"element?.stock_issue_products[0]?.batch?.expires_on\">\n            Expires {{ element?.stock_issue_products[0]?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue_products[0]?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.stock_issue_products[0]?.location_id, 'view']\">\n            {{ element?.stock_issue_products[0]?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.issuable\" [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\">\n            Maintenance for {{ element?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue_products[0]?.particulars }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div *ngIf=\"!element.stock_transfer\" class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', element?.id, 'view']\"></app-techlify-icon>\n            <app-stock-issue-form-button [stockIssue]=\"element\"\n              (saved)=\"reload(); listUpdated.emit(true)\"></app-stock-issue-form-button>\n            <app-stock-issuance-delete-button [stockIssuance]=\"element\"\n              (deleted)=\"reload(); listUpdated.emit(true)\"></app-stock-issuance-delete-button>\n          </div>\n          <span *ngIf=\"element.stock_transfer\" class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-issue_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalQuantity }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-related\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
+            args: [{ selector: 'app-stock-issue-list', template: "<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Stock Issues\" infiniteScroll\n      id=\"stockIssueTable\" [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"issue_number\">\n        <th mat-header-cell *matHeaderCellDef matTooltip=\"Stock Issue ID\">Issue #</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\" [routerLink]=\"['/inventory/stock-issues', element?.id, 'view']\">\n            {{ element?.id }} <i class=\"fa-solid fa-up-right-from-square\"></i>\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"product\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <ul class=\"mb-0 ps-3\">\n            <li *ngFor=\"let sip of element?.stock_issue_products\">\n              {{ sip?.quantity }} {{ sip?.product?.measure?.title }} <em>of</em>\n              <a class=\"text-decoration-none text-dark\"\n                [routerLink]=\"['/inventory/products', sip?.product?.id, 'view']\">\n                {{ sip?.product?.name }}\n              </a>\n            </li>\n          </ul>\n        </td>\n      </ng-container>\n\n      <!-- Product Categories Column -->\n      <ng-container matColumnDef=\"product_categories\">\n        <th mat-header-cell *matHeaderCellDef>Product Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges\n            [product]=\"element?.stock_issue_products[0]?.product\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue_products[0]?.product?.sku }}</td>\n      </ng-container>\n\n      <!-- Categories Column (export only) -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span *ngFor=\"let category of element?.stock_issue_products[0]?.product?.categories; let last = last\">\n            {{ category?.title }}<ng-container *ngIf=\"!last\">, </ng-container>\n          </span>\n        </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.date | date }}</td>\n      </ng-container>\n\n      <!-- Quantity Column -->\n      <ng-container matColumnDef=\"quantity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_issue_products[0]?.quantity }}\n          {{ element?.stock_issue_products[0]?.product?.measure?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Batch Column -->\n      <ng-container matColumnDef=\"batch\">\n        <th mat-header-cell *matHeaderCellDef>Batch</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.stock_issue_products[0]?.batch?.batch_number\">\n            {{ element?.stock_issue_products[0]?.batch?.batch_number }}\n          </p>\n          <small class=\"text-secondary\" *ngIf=\"element?.stock_issue_products[0]?.batch?.expires_on\">\n            Expires {{ element?.stock_issue_products[0]?.batch?.expires_on | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Measure Column -->\n      <ng-container matColumnDef=\"measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Measure</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue_products[0]?.product?.measure?.title }}</td>\n      </ng-container>\n\n      <!-- Location Column -->\n      <ng-container matColumnDef=\"location\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.stock_issue_products[0]?.location_id, 'view']\">\n            {{ element?.stock_issue_products[0]?.location?.title }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Related Column -->\n      <ng-container matColumnDef=\"related\">\n        <th mat-header-cell *matHeaderCellDef>Related</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-dark\" *ngIf=\"element?.issuable\" [routerLink]=\"['/maintenances', element?.issuable_id, 'view']\">\n            Maintenance for {{ element?.issuable?.fixed_asset?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Particulars Column -->\n      <ng-container matColumnDef=\"particulars\">\n        <th mat-header-cell *matHeaderCellDef>Particulars</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.stock_issue_products[0]?.particulars }}</td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div *ngIf=\"!element.stock_transfer\" class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', element?.id, 'view']\"></app-techlify-icon>\n            <app-stock-issue-form-button [stockIssue]=\"element\"\n              (saved)=\"reload(); listUpdated.emit(true)\"></app-stock-issue-form-button>\n            <app-techlify-delete-button [model]=\"element\" [service]=\"service\"\n              [data]=\"{ title: element?.id, type: 'Stock Receipt Product' }\" (deleted)=\"reload();\">\n            </app-techlify-delete-button>\n          </div>\n          <span *ngIf=\"element.stock_transfer\" class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n        </td>\n      </ng-container>\n\n      <!-- Footer Cells for Total Row -->\n      <ng-container matColumnDef=\"footer-no\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-issue_number\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product\">\n        <td mat-footer-cell *matFooterCellDef><strong>Total</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-product_categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-sku\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-categories\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-date\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-quantity\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ totalQuantity }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-batch\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-measure\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-location\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-related\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-particulars\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-creator\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-actions\">\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n      <tr mat-footer-row *matFooterRowDef=\"footerColumns\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: StockIssueService }, { type: i2$1.FormBuilder }, { type: i4$1.Router }, { type: i1.TechlifyFeatureService }] });
 
 let StockIssuePageComponent = class StockIssuePageComponent {
@@ -4117,14 +4044,14 @@ let StockIssuePageComponent = class StockIssuePageComponent {
         this.selectedColumns = config.filter(col => col.isSelected);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssuePageComponent, deps: [{ token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockIssuePageComponent, selector: "app-stock-issue-page", inputs: { product: "product", issuableType: "issuableType", issuableId: "issuableId", label: "label", showActions: "showActions", showFilters: "showFilters" }, outputs: { listUpdated: "listUpdated" }, viewQueries: [{ propertyName: "itemizedList", first: true, predicate: StockIssueProductListComponent, descendants: true }, { propertyName: "groupedList", first: true, predicate: StockIssueListComponent, descendants: true }], ngImport: i0, template: "<mat-card *ngIf=\"!product\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">{{ label }}</h3>\n\n      <div class=\"d-flex gap-2 align-items-center ms-2 d-print-none\">\n        <app-techlify-icon role='button' name='add'\n          [routerLink]=\"['/inventory/stock-issues/batch-form']\"></app-techlify-icon>\n\n        <span *ngIf=\"showActions\" matTooltip=\"Import\" routerLink=\"import\"\n          class=\"cursor-pointer material-symbols-outlined\">\n          file_upload\n        </span>\n\n        <app-export-to-excel-button tableId=\"stockIssueTable\" fileName=\"Stock Issues\"\n          (onExportStart)=\"exportInProgress.set(true)\" (onExportEnd)=\"exportInProgress.set(false)\">\n        </app-export-to-excel-button>\n\n        <app-column-selector *ngIf=\"showActions && columnConfig.length > 0\" mode=\"icon\" [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n\n        <mat-button-toggle-group class=\"view-toggle\" [value]=\"selectedView()\" (change)=\"selectedView.set($event.value)\">\n          <mat-button-toggle value=\"itemized\">Itemized</mat-button-toggle>\n          <mat-button-toggle value=\"grouped\">Grouped</mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n    </div>\n\n    <form [formGroup]=\"filterForm\" *ngIf=\"showFilters\" class=\"d-flex align-items-center gap-2 flex-wrap\">\n      <mat-form-field class='fl-md'>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\" [form]=\"filterForm\"\n        [showClearButton]=\"true\"></app-timeline-filter>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<app-stock-issue-products-list *ngIf=\"selectedView() === 'itemized'\" [filters]=\"filtersValue()\"\n  [isProductView]=\"!!product\" [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-issue-products-list>\n\n<app-stock-issue-list *ngIf=\"selectedView() === 'grouped'\" [filters]=\"filtersValue()\"\n  [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-issue-list>", styles: [":host ::ng-deep .view-toggle{--mat-standard-button-toggle-height: 28px;font-size:12px}:host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns", "isExportWorking"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: ExportToExcelButtonComponent, selector: "app-export-to-excel-button", inputs: ["tableId", "fileName"], outputs: ["onExportStart", "onExportEnd"] }, { kind: "component", type: StockIssueListComponent, selector: "app-stock-issue-list", inputs: ["filters", "selectedColumns", "exportInProgress"], outputs: ["listUpdated", "columnConfigReady"] }, { kind: "component", type: StockIssueProductListComponent, selector: "app-stock-issue-products-list", inputs: ["filters", "isProductView", "selectedColumns", "exportInProgress"], outputs: ["listUpdated", "columnConfigReady"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockIssuePageComponent, selector: "app-stock-issue-page", inputs: { product: "product", issuableType: "issuableType", issuableId: "issuableId", label: "label", showActions: "showActions", showFilters: "showFilters" }, outputs: { listUpdated: "listUpdated" }, viewQueries: [{ propertyName: "itemizedList", first: true, predicate: StockIssueProductListComponent, descendants: true }, { propertyName: "groupedList", first: true, predicate: StockIssueListComponent, descendants: true }], ngImport: i0, template: "<mat-card *ngIf=\"!product\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">{{ label }}</h3>\n\n      <div class=\"d-flex gap-2 align-items-center ms-2 d-print-none\">\n        <app-techlify-icon role='button' name='add'\n          [routerLink]=\"['/inventory/stock-issues/form']\"></app-techlify-icon>\n\n        <span *ngIf=\"showActions\" matTooltip=\"Import\" routerLink=\"import\"\n          class=\"cursor-pointer material-symbols-outlined\">\n          file_upload\n        </span>\n\n        <app-export-to-excel-button tableId=\"stockIssueTable\" fileName=\"Stock Issues\"\n          (onExportStart)=\"exportInProgress.set(true)\" (onExportEnd)=\"exportInProgress.set(false)\">\n        </app-export-to-excel-button>\n\n        <app-column-selector *ngIf=\"showActions && columnConfig.length > 0\" mode=\"icon\" [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n\n        <mat-button-toggle-group class=\"view-toggle\" [value]=\"selectedView()\" (change)=\"selectedView.set($event.value)\">\n          <mat-button-toggle value=\"itemized\">Itemized</mat-button-toggle>\n          <mat-button-toggle value=\"grouped\">Grouped</mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n    </div>\n\n    <form [formGroup]=\"filterForm\" *ngIf=\"showFilters\" class=\"d-flex align-items-center gap-2 flex-wrap\">\n      <mat-form-field class='fl-md'>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\" [form]=\"filterForm\"\n        [showClearButton]=\"true\"></app-timeline-filter>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<app-stock-issue-products-list *ngIf=\"selectedView() === 'itemized'\" [filters]=\"filtersValue()\"\n  [isProductView]=\"!!product\" [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-issue-products-list>\n\n<app-stock-issue-list *ngIf=\"selectedView() === 'grouped'\" [filters]=\"filtersValue()\"\n  [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-issue-list>", styles: [":host ::ng-deep .view-toggle{--mat-standard-button-toggle-height: 28px;font-size:12px}:host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns", "isExportWorking"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: ExportToExcelButtonComponent, selector: "app-export-to-excel-button", inputs: ["tableId", "fileName"], outputs: ["onExportStart", "onExportEnd"] }, { kind: "component", type: StockIssueListComponent, selector: "app-stock-issue-list", inputs: ["filters", "selectedColumns", "exportInProgress"], outputs: ["listUpdated", "columnConfigReady"] }, { kind: "component", type: StockIssueProductListComponent, selector: "app-stock-issue-products-list", inputs: ["filters", "isProductView", "selectedColumns", "exportInProgress"], outputs: ["listUpdated", "columnConfigReady"] }], preserveWhitespaces: true });
 };
 StockIssuePageComponent = __decorate([
     UntilDestroy()
 ], StockIssuePageComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssuePageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stock-issue-page', template: "<mat-card *ngIf=\"!product\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">{{ label }}</h3>\n\n      <div class=\"d-flex gap-2 align-items-center ms-2 d-print-none\">\n        <app-techlify-icon role='button' name='add'\n          [routerLink]=\"['/inventory/stock-issues/batch-form']\"></app-techlify-icon>\n\n        <span *ngIf=\"showActions\" matTooltip=\"Import\" routerLink=\"import\"\n          class=\"cursor-pointer material-symbols-outlined\">\n          file_upload\n        </span>\n\n        <app-export-to-excel-button tableId=\"stockIssueTable\" fileName=\"Stock Issues\"\n          (onExportStart)=\"exportInProgress.set(true)\" (onExportEnd)=\"exportInProgress.set(false)\">\n        </app-export-to-excel-button>\n\n        <app-column-selector *ngIf=\"showActions && columnConfig.length > 0\" mode=\"icon\" [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n\n        <mat-button-toggle-group class=\"view-toggle\" [value]=\"selectedView()\" (change)=\"selectedView.set($event.value)\">\n          <mat-button-toggle value=\"itemized\">Itemized</mat-button-toggle>\n          <mat-button-toggle value=\"grouped\">Grouped</mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n    </div>\n\n    <form [formGroup]=\"filterForm\" *ngIf=\"showFilters\" class=\"d-flex align-items-center gap-2 flex-wrap\">\n      <mat-form-field class='fl-md'>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\" [form]=\"filterForm\"\n        [showClearButton]=\"true\"></app-timeline-filter>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<app-stock-issue-products-list *ngIf=\"selectedView() === 'itemized'\" [filters]=\"filtersValue()\"\n  [isProductView]=\"!!product\" [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-issue-products-list>\n\n<app-stock-issue-list *ngIf=\"selectedView() === 'grouped'\" [filters]=\"filtersValue()\"\n  [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-issue-list>", styles: [":host ::ng-deep .view-toggle{--mat-standard-button-toggle-height: 28px;font-size:12px}:host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"] }]
+            args: [{ selector: 'app-stock-issue-page', template: "<mat-card *ngIf=\"!product\" class=\"mb-2\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"mb-0\">{{ label }}</h3>\n\n      <div class=\"d-flex gap-2 align-items-center ms-2 d-print-none\">\n        <app-techlify-icon role='button' name='add'\n          [routerLink]=\"['/inventory/stock-issues/form']\"></app-techlify-icon>\n\n        <span *ngIf=\"showActions\" matTooltip=\"Import\" routerLink=\"import\"\n          class=\"cursor-pointer material-symbols-outlined\">\n          file_upload\n        </span>\n\n        <app-export-to-excel-button tableId=\"stockIssueTable\" fileName=\"Stock Issues\"\n          (onExportStart)=\"exportInProgress.set(true)\" (onExportEnd)=\"exportInProgress.set(false)\">\n        </app-export-to-excel-button>\n\n        <app-column-selector *ngIf=\"showActions && columnConfig.length > 0\" mode=\"icon\" [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\n\n        <mat-button-toggle-group class=\"view-toggle\" [value]=\"selectedView()\" (change)=\"selectedView.set($event.value)\">\n          <mat-button-toggle value=\"itemized\">Itemized</mat-button-toggle>\n          <mat-button-toggle value=\"grouped\">Grouped</mat-button-toggle>\n        </mat-button-toggle-group>\n      </div>\n    </div>\n\n    <form [formGroup]=\"filterForm\" *ngIf=\"showFilters\" class=\"d-flex align-items-center gap-2 flex-wrap\">\n      <mat-form-field class='fl-md'>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n      </mat-form-field>\n\n      <app-timeline-filter appearance=\"fill\" labelText=\"Date\" formControlName=\"duration\" [form]=\"filterForm\"\n        [showClearButton]=\"true\"></app-timeline-filter>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Category</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Measure</mat-label>\n        <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n\n      <mat-form-field class='fl-sm'>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<app-stock-issue-products-list *ngIf=\"selectedView() === 'itemized'\" [filters]=\"filtersValue()\"\n  [isProductView]=\"!!product\" [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-issue-products-list>\n\n<app-stock-issue-list *ngIf=\"selectedView() === 'grouped'\" [filters]=\"filtersValue()\"\n  [selectedColumns]=\"selectedColumns\" [exportInProgress]=\"exportInProgress()\"\n  (columnConfigReady)=\"onColumnConfigReady($event)\" (listUpdated)=\"listUpdated.emit($event)\">\n</app-stock-issue-list>", styles: [":host ::ng-deep .view-toggle{--mat-standard-button-toggle-height: 28px;font-size:12px}:host ::ng-deep .mat-mdc-footer-row{position:sticky;bottom:0;background-color:#fff;z-index:10;box-shadow:0 -2px 4px #0000001a}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.FormBuilder }], propDecorators: { product: [{
                 type: Input
             }], issuableType: [{
@@ -4147,20 +4074,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: [StockIssueListComponent]
             }] } });
 
-class StockIssuanceDeleteButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssuanceDeleteButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: StockIssuanceDeleteButtonModule, declarations: [StockIssuanceDeleteButtonComponent], imports: [CommonModule, MaterialModule$1], exports: [StockIssuanceDeleteButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssuanceDeleteButtonModule, imports: [CommonModule, MaterialModule$1] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssuanceDeleteButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [StockIssuanceDeleteButtonComponent],
-                    imports: [CommonModule, MaterialModule$1],
-                    exports: [StockIssuanceDeleteButtonComponent],
-                }]
-        }] });
-
 class StockIssuePageModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssuePageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: StockIssuePageModule, declarations: [StockIssuePageComponent,
@@ -4170,7 +4083,6 @@ class StockIssuePageModule {
             TechlifyFilterModule,
             StockIssueFormModule,
             InfiniteScrollDirective,
-            StockIssuanceDeleteButtonModule,
             MatProgressBarModule,
             RouterModule,
             SearchableSelectorModule,
@@ -4188,7 +4100,6 @@ class StockIssuePageModule {
             MaterialModule$1,
             TechlifyFilterModule,
             StockIssueFormModule,
-            StockIssuanceDeleteButtonModule,
             MatProgressBarModule,
             RouterModule,
             SearchableSelectorModule,
@@ -4214,7 +4125,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TechlifyFilterModule,
                         StockIssueFormModule,
                         InfiniteScrollDirective,
-                        StockIssuanceDeleteButtonModule,
                         MatProgressBarModule,
                         RouterModule,
                         SearchableSelectorModule,
@@ -4251,7 +4161,7 @@ class ProductModule {
             ProductRoutingModule,
             SearchableSelectorModule,
             TimelineFilterModule,
-            StockReceiptFormModule,
+            StockReceiptSimpleFormModule,
             StockIssueFormModule,
             ImportCsvModule,
             StockReceiptsModule,
@@ -4281,7 +4191,7 @@ class ProductModule {
             ProductRoutingModule,
             SearchableSelectorModule,
             TimelineFilterModule,
-            StockReceiptFormModule,
+            StockReceiptSimpleFormModule,
             StockIssueFormModule,
             ImportCsvModule,
             StockReceiptsModule,
@@ -4326,7 +4236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ProductRoutingModule,
                         SearchableSelectorModule,
                         TimelineFilterModule,
-                        StockReceiptFormModule,
+                        StockReceiptSimpleFormModule,
                         StockIssueFormModule,
                         ImportCsvModule,
                         StockReceiptsModule,
@@ -4397,40 +4307,23 @@ class ProductQuickSearchComponent extends TechlifyListingControllerInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductQuickSearchComponent, deps: [{ token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductQuickSearchComponent, isStandalone: true, selector: "app-product-quick-search", usesInheritance: true, ngImport: i0, template: "<mat-card style=\"max-height: 460px; overflow: auto\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <h3>Products Quick Search</h3>\n\n    <mat-form-field>\n      <mat-label>Search</mat-label>\n      <input type=\"text\" matInput placeholder=\"Search products\" [formControl]=\"searchControl\" />\n    </mat-form-field>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"Product\">\n        <th mat-header-cell *matHeaderCellDef>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n              {{ element?.name }}\n            </a>\n\n            <div *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\">\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"SKU\">\n        <th mat-header-cell *matHeaderCellDef>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.sku }}</td>\n      </ng-container>\n\n      <!-- On Hand Column -->\n      <ng-container matColumnDef=\"On Hand\">\n        <th mat-header-cell *matHeaderCellDef>On Hand</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_on_hand }}\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex gap-1\">\n            <mat-icon class=\"cursor-pointer\" matTooltip=\"View\"\n              [routerLink]=\"['/inventory/products', element.id, 'view']\" routerLinkActive=\"route-link-active\">\n              remove_red_eye\n            </mat-icon>\n\n            <app-stock-receipt-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-issue-form-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ProductModule }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: StockReceiptFormModule }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "latestLocationId", "icon"], outputs: ["saved"] }, { kind: "ngmodule", type: StockIssueFormModule }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssueProduct", "stockIssue", "icon", "issuableType", "issuableId"], outputs: ["saved"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductQuickSearchComponent, isStandalone: true, selector: "app-product-quick-search", usesInheritance: true, ngImport: i0, template: "<mat-card style=\"max-height: 460px; overflow: auto\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <h3>Products Quick Search</h3>\n\n    <mat-form-field>\n      <mat-label>Search</mat-label>\n      <input type=\"text\" matInput placeholder=\"Search products\" [formControl]=\"searchControl\" />\n    </mat-form-field>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"Product\">\n        <th mat-header-cell *matHeaderCellDef>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n              {{ element?.name }}\n            </a>\n\n            <div *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\">\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"SKU\">\n        <th mat-header-cell *matHeaderCellDef>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.sku }}</td>\n      </ng-container>\n\n      <!-- On Hand Column -->\n      <ng-container matColumnDef=\"On Hand\">\n        <th mat-header-cell *matHeaderCellDef>On Hand</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_on_hand }}\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex gap-2 align-items-center\">\n            <mat-icon class=\"cursor-pointer\" matTooltip=\"View\"\n              [routerLink]=\"['/inventory/products', element.id, 'view']\" routerLinkActive=\"route-link-active\">\n              remove_red_eye\n            </mat-icon>\n\n\n            <i class=\"fa-solid fa-arrows-down-to-line\" role='button' matTooltip=\"Receive Stock\"\n              [routerLink]=\"['/inventory/stock-receipts/form']\"></i>\n            <i class=\"fa-solid fa-arrow-up-from-bracket\" role='button' matTooltip=\"Issue Stock\"\n              [routerLink]=\"['/inventory/stock-issues/form']\"></i>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ProductModule }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: StockReceiptSimpleFormModule }, { kind: "ngmodule", type: StockIssueFormModule }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TechlifyIconModule }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductQuickSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-product-quick-search', standalone: true, imports: [
                         InfiniteScrollDirective,
-                        MatCard,
-                        MatCardContent,
-                        MatCell,
-                        MatCellDef,
-                        MatColumnDef,
-                        MatHeaderCell,
-                        MatHeaderRow,
-                        MatTable,
-                        MatHeaderCellDef,
                         RouterLink,
-                        MatHeaderRowDef,
-                        MatRowDef,
-                        MatRow,
-                        MatProgressBar,
                         NgIf,
-                        MatFormField,
-                        MatLabel,
-                        MatInput,
                         ReactiveFormsModule,
                         NgForOf,
-                        MatSortHeader,
-                        MatIcon,
-                        MatTooltip,
                         ProductModule,
                         RouterLinkActive,
-                        StockReceiptFormModule,
+                        StockReceiptSimpleFormModule,
                         StockIssueFormModule,
-                    ], template: "<mat-card style=\"max-height: 460px; overflow: auto\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <h3>Products Quick Search</h3>\n\n    <mat-form-field>\n      <mat-label>Search</mat-label>\n      <input type=\"text\" matInput placeholder=\"Search products\" [formControl]=\"searchControl\" />\n    </mat-form-field>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"Product\">\n        <th mat-header-cell *matHeaderCellDef>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n              {{ element?.name }}\n            </a>\n\n            <div *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\">\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"SKU\">\n        <th mat-header-cell *matHeaderCellDef>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.sku }}</td>\n      </ng-container>\n\n      <!-- On Hand Column -->\n      <ng-container matColumnDef=\"On Hand\">\n        <th mat-header-cell *matHeaderCellDef>On Hand</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_on_hand }}\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex gap-1\">\n            <mat-icon class=\"cursor-pointer\" matTooltip=\"View\"\n              [routerLink]=\"['/inventory/products', element.id, 'view']\" routerLinkActive=\"route-link-active\">\n              remove_red_eye\n            </mat-icon>\n\n            <app-stock-receipt-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button [product]=\"element\" (saved)=\"reload()\"></app-stock-issue-form-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+                        MaterialModule,
+                        TechlifyIconModule
+                    ], template: "<mat-card style=\"max-height: 460px; overflow: auto\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <h3>Products Quick Search</h3>\n\n    <mat-form-field>\n      <mat-label>Search</mat-label>\n      <input type=\"text\" matInput placeholder=\"Search products\" [formControl]=\"searchControl\" />\n    </mat-form-field>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"Product\">\n        <th mat-header-cell *matHeaderCellDef>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column\">\n            <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n              {{ element?.name }}\n            </a>\n\n            <div *ngIf=\"element?.categories?.length > 0\"\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\">\n              <span class=\"badge bg-secondary\" *ngFor=\"let category of element?.categories\">\n                {{ category?.title }}\n              </span>\n            </div>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"SKU\">\n        <th mat-header-cell *matHeaderCellDef>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.sku }}</td>\n      </ng-container>\n\n      <!-- On Hand Column -->\n      <ng-container matColumnDef=\"On Hand\">\n        <th mat-header-cell *matHeaderCellDef>On Hand</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_on_hand }}\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex gap-2 align-items-center\">\n            <mat-icon class=\"cursor-pointer\" matTooltip=\"View\"\n              [routerLink]=\"['/inventory/products', element.id, 'view']\" routerLinkActive=\"route-link-active\">\n              remove_red_eye\n            </mat-icon>\n\n\n            <i class=\"fa-solid fa-arrows-down-to-line\" role='button' matTooltip=\"Receive Stock\"\n              [routerLink]=\"['/inventory/stock-receipts/form']\"></i>\n            <i class=\"fa-solid fa-arrow-up-from-bracket\" role='button' matTooltip=\"Issue Stock\"\n              [routerLink]=\"['/inventory/stock-issues/form']\"></i>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: ProductService }] });
 
 class InventoryDashboardPageComponent {
@@ -4754,7 +4647,7 @@ class InventoryValueReportComponent extends TechlifyListingControllerInterface {
         this.loadData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InventoryValueReportComponent, deps: [{ token: InventoryValueReportService }, { token: i4$1.ActivatedRoute }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InventoryValueReportComponent, isStandalone: true, selector: "app-inventory-value-report", usesInheritance: true, ngImport: i0, template: "<div>\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"mb-0\">Inventory Value Report</h3>\n        <i class=\"fa-solid fa-file-excel cursor-pointer d-print-none\" (click)=\"export('excel')\"></i>\n        <i class=\"fa-solid fa-file-pdf cursor-pointer d-print-none\" (click)=\"export('pdf')\"></i>\n      </div>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Location</mat-label>\n          <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Min Stock On Hand</mat-label>\n          <mat-select formControlName=\"min_stock_on_hand\">\n            <mat-option *ngFor=\"let option of minStockOptions\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card class=\"mt-3\">\n    <mat-card-content class=\"p-0\">\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort (matSortChange)=\"onSortChange($event)\">\n        <!-- # Column -->\n        <ng-container matColumnDef=\"#\">\n          <th mat-header-cell *matHeaderCellDef>#</th>\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"product\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"name\">Product</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n                {{ element?.name }}\n              </a>\n              <app-product-category-badges [product]=\"element\"></app-product-category-badges>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <span>{{ element?.sku }}</span>\n              <span class='text-secondary'> {{ element?.type?.title }} </span>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>Total</strong>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"stock_on_hand\">On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_on_hand }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Average Price Column -->\n        <ng-container matColumnDef=\"Average Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"average_purchase_price\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Avg. Price</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\"\n                matTooltip=\"Average price of batches in stock\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.average_purchase_price | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Column -->\n        <ng-container matColumnDef=\"Inventory Value\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"inventory_value\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Inventory Value</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\" matTooltip=\"Based on average price\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>{{ totalInventoryValue | currency }}</strong>\n          </td>\n        </ng-container>\n\n        <!-- Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"last_purchase_price\">\n            Last Price\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.purchase_price ?? 0 | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Based On Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Inventory Value Based On Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"inventory_value_based_on_last_price\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Inventory Value</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\"\n                matTooltip=\"Based on last purchase price\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value_based_on_last_price ?? 0 | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i11$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InventoryValueReportComponent, isStandalone: true, selector: "app-inventory-value-report", usesInheritance: true, ngImport: i0, template: "<div>\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"mb-0\">Inventory Value Report</h3>\n        <i class=\"fa-solid fa-file-excel cursor-pointer d-print-none\" (click)=\"export('excel')\"></i>\n        <i class=\"fa-solid fa-file-pdf cursor-pointer d-print-none\" (click)=\"export('pdf')\"></i>\n      </div>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field>\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search products\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Location</mat-label>\n          <app-searchable-selector apiUrl=\"api/inventory-locations\" formControlName=\"location_ids\" [multiple]=\"true\">\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Min Stock On Hand</mat-label>\n          <mat-select formControlName=\"min_stock_on_hand\">\n            <mat-option *ngFor=\"let option of minStockOptions\" [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card class=\"mt-3\">\n    <mat-card-content class=\"p-0\">\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort (matSortChange)=\"onSortChange($event)\">\n        <!-- # Column -->\n        <ng-container matColumnDef=\"#\">\n          <th mat-header-cell *matHeaderCellDef>#</th>\n          <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"product\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"name\">Product</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <a [routerLink]=\"['/inventory/products', element?.id, 'view']\" class=\"text-dark\">\n                {{ element?.name }}\n              </a>\n              <app-product-category-badges [product]=\"element\"></app-product-category-badges>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"sku\">\n          <th mat-header-cell *matHeaderCellDef>SKU</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-column gap-1\">\n              <span>{{ element?.sku }}</span>\n              <span class='text-secondary'> {{ element?.type?.title }} </span>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>Total</strong>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"on_hand\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"stock_on_hand\">On Hand</th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.stock_on_hand }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Average Price Column -->\n        <ng-container matColumnDef=\"Average Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"average_purchase_price\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Avg. Price</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\"\n                matTooltip=\"Average price of batches in stock\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.average_purchase_price | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Column -->\n        <ng-container matColumnDef=\"Inventory Value\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"inventory_value\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Inventory Value</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\" matTooltip=\"Based on average price\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef>\n            <strong>{{ totalInventoryValue | currency }}</strong>\n          </td>\n        </ng-container>\n\n        <!-- Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"last_purchase_price\">\n            Last Price\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.last_stock_receipt?.purchase_price ?? 0 | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <!-- Inventory Value Based On Last Purchase Price Column -->\n        <ng-container matColumnDef=\"Inventory Value Based On Last Purchase Price\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header=\"inventory_value_based_on_last_price\">\n            <div class=\"d-flex flex-row gap-1 align-items-center\">\n              <span>Inventory Value</span>\n              <i class=\"fa-solid fa-circle-info d-print-none text-secondary\"\n                matTooltip=\"Based on last purchase price\"></i>\n            </div>\n          </th>\n          <td mat-cell *matCellDef=\"let element\">\n            {{ element?.inventory_value_based_on_last_price ?? 0 | currency }}\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n        <tr mat-footer-row *matFooterRowDef=\"displayedColumns\"></tr>\n      </table>\n\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i11$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i8.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i8.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i8.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InventoryValueReportComponent, decorators: [{
             type: Component,
@@ -4790,7 +4683,7 @@ const routes$6 = [
     },
     {
         path: "measures",
-        loadChildren: () => import('./techlify-inventory-common-measure.module-Azgdcpqu.mjs').then((mod) => mod.MeasureModule),
+        loadChildren: () => import('./techlify-inventory-common-measure.module-D8oqfZTV.mjs').then((mod) => mod.MeasureModule),
     },
     {
         path: 'stock-issues',
@@ -4802,7 +4695,7 @@ const routes$6 = [
     },
     {
         path: 'categories',
-        loadChildren: () => import('./techlify-inventory-common-category.module-qyYKbe_g.mjs').then((mod) => mod.CategoryModule),
+        loadChildren: () => import('./techlify-inventory-common-category.module-CJbYoRGj.mjs').then((mod) => mod.CategoryModule),
     },
     {
         path: 'products',
@@ -5010,7 +4903,7 @@ let ProductSearchComponent = class ProductSearchComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductSearchComponent, deps: [{ token: i1$1.MatDialog }, { token: i2$1.FormBuilder }, { token: i1.FilterService }, { token: ProductService }, { token: i4$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductSearchComponent, selector: "app-product-search", inputs: { with: "with" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div id=\"tableContainer\" #tableContainer fxLayout=\"column\" class=\"table-container\">\n  <div class=\"text-dark d-flex flex-row justify-content-start align-items-center gap-2\">\n    <mat-icon class=\"material-symbol-outlined\"> campaign </mat-icon>\n    <strong>Product Search</strong>\n  </div>\n  <small class=\"text-secondary mt-2\"> Quickly search for a product to be added as a line item. </small>\n  <form [formGroup]=\"searchFormGroup\">\n    <mat-form-field fxFlex=\"100%\">\n      <mat-label>Search</mat-label>\n      <input fxLayout matInput placeholder=\"Search product, SKU\" formControlName=\"search\" />\n    </mat-form-field>\n  </form>\n  <div\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.5rem\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\"\n    [infiniteScrollContainer]=\"tableContainer\"\n    (scrolled)=\"onScroll()\"\n    [fromRoot]=\"false\"\n  >\n    <mat-card class=\"p-2\" style=\"background: #d9d9d9\" *ngFor=\"let product of products\">\n      <div>\n        <div class=\"d-flex flex-row justify-content-between align-items-center\">\n          <strong class=\"text-dark\">{{ product?.name }}</strong>\n          <strong class=\"text-primary font-xs cursor-pointer\" (click)=\"addProduct(product)\"> Add </strong>\n        </div>\n        <div class=\"d-flex flex-row justify-content-between align-items-center\">\n          <small class=\"text-secondary\">{{ product?.sku }}</small>\n          <mat-icon\n            (click)=\"viewProduct(product, viewProductTemplate)\"\n            class=\"material-symbol-outlined font-md cursor-pointer\"\n          >\n            contact_support\n          </mat-icon>\n        </div>\n      </div>\n    </mat-card>\n  </div>\n</div>\n\n<ng-template #viewProductTemplate let-data>\n  <div mat-dialog-content>\n    <app-product-basic-info [product]=\"data.product\" (saved)=\"reload()\" (deleted)=\"reload()\"></app-product-basic-info>\n\n    <div class=\"d-flex justify-content-end mt-2\">\n      <button mat-flat-button type=\"button\" mat-dialog-close>Close</button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".table-container{max-height:600px;overflow-y:scroll}::-webkit-scrollbar{display:none}::-webkit-scrollbar-button{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i16.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i16.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i16.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: ["product"], outputs: ["saved", "deleted"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductSearchComponent, selector: "app-product-search", inputs: { with: "with" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div id=\"tableContainer\" #tableContainer fxLayout=\"column\" class=\"table-container\">\n  <div class=\"text-dark d-flex flex-row justify-content-start align-items-center gap-2\">\n    <mat-icon class=\"material-symbol-outlined\"> campaign </mat-icon>\n    <strong>Product Search</strong>\n  </div>\n  <small class=\"text-secondary mt-2\"> Quickly search for a product to be added as a line item. </small>\n  <form [formGroup]=\"searchFormGroup\">\n    <mat-form-field fxFlex=\"100%\">\n      <mat-label>Search</mat-label>\n      <input fxLayout matInput placeholder=\"Search product, SKU\" formControlName=\"search\" />\n    </mat-form-field>\n  </form>\n  <div\n    fxLayout=\"column\"\n    fxLayoutGap=\"0.5rem\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\"\n    [infiniteScrollContainer]=\"tableContainer\"\n    (scrolled)=\"onScroll()\"\n    [fromRoot]=\"false\"\n  >\n    <mat-card class=\"p-2\" style=\"background: #d9d9d9\" *ngFor=\"let product of products\">\n      <div>\n        <div class=\"d-flex flex-row justify-content-between align-items-center\">\n          <strong class=\"text-dark\">{{ product?.name }}</strong>\n          <strong class=\"text-primary font-xs cursor-pointer\" (click)=\"addProduct(product)\"> Add </strong>\n        </div>\n        <div class=\"d-flex flex-row justify-content-between align-items-center\">\n          <small class=\"text-secondary\">{{ product?.sku }}</small>\n          <mat-icon\n            (click)=\"viewProduct(product, viewProductTemplate)\"\n            class=\"material-symbol-outlined font-md cursor-pointer\"\n          >\n            contact_support\n          </mat-icon>\n        </div>\n      </div>\n    </mat-card>\n  </div>\n</div>\n\n<ng-template #viewProductTemplate let-data>\n  <div mat-dialog-content>\n    <app-product-basic-info [product]=\"data.product\" (saved)=\"reload()\" (deleted)=\"reload()\"></app-product-basic-info>\n\n    <div class=\"d-flex justify-content-end mt-2\">\n      <button mat-flat-button type=\"button\" mat-dialog-close>Close</button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".table-container{max-height:600px;overflow-y:scroll}::-webkit-scrollbar{display:none}::-webkit-scrollbar-button{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i16.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i16.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i16.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: ["product"], outputs: ["saved", "deleted"] }], preserveWhitespaces: true });
 };
 ProductSearchComponent = __decorate([
     UntilDestroy()
@@ -5102,18 +4995,18 @@ const routes$5 = [
         canLoad: [AuthenticationGuard]
     },
     {
-        path: 'batch-form',
-        loadComponent: () => import('./techlify-inventory-common-stock-issue-batch-form.component-8u8sZ4gb.mjs').then(m => m.StockIssueBatchFormComponent),
+        path: 'form',
+        loadComponent: () => import('./techlify-inventory-common-stock-issue-form.component-B0-TBlZL.mjs').then(m => m.StockIssueFormComponent),
         canLoad: [AuthenticationGuard]
     },
     {
-        path: 'batch-form/:id',
-        loadComponent: () => import('./techlify-inventory-common-stock-issue-batch-form.component-8u8sZ4gb.mjs').then(m => m.StockIssueBatchFormComponent),
+        path: 'form/:id',
+        loadComponent: () => import('./techlify-inventory-common-stock-issue-form.component-B0-TBlZL.mjs').then(m => m.StockIssueFormComponent),
         canLoad: [AuthenticationGuard]
     },
     {
         path: ':id/view',
-        loadComponent: () => import('./techlify-inventory-common-stock-issue-view.component-C-SHFxmY.mjs').then(m => m.StockIssueViewComponent),
+        loadComponent: () => import('./techlify-inventory-common-stock-issue-view.component-DJIQ6dVF.mjs').then(m => m.StockIssueViewComponent),
         canLoad: [AuthenticationGuard]
     }
 ];
@@ -5136,7 +5029,7 @@ class StockIssueModule {
             StockIssueRoutingModule,
             MatCardModule,
             TechlifyFilterModule,
-            StockReceiptFormModule,
+            StockReceiptSimpleFormModule,
             StockIssueFormModule,
             MatDialogModule,
             MatButtonModule,
@@ -5145,7 +5038,7 @@ class StockIssueModule {
             StockIssueRoutingModule,
             MatCardModule,
             TechlifyFilterModule,
-            StockReceiptFormModule,
+            StockReceiptSimpleFormModule,
             StockIssueFormModule,
             MatDialogModule,
             MatButtonModule,
@@ -5161,7 +5054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         StockIssueRoutingModule,
                         MatCardModule,
                         TechlifyFilterModule,
-                        StockReceiptFormModule,
+                        StockReceiptSimpleFormModule,
                         StockIssueFormModule,
                         MatDialogModule,
                         MatButtonModule,
@@ -5407,7 +5300,7 @@ class IncidentListComponent extends TechlifyListingControllerInterface {
         this.filterForm.get('sort_by')?.setValue(active + '|' + direction);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IncidentListComponent, deps: [{ token: i2$1.FormBuilder }, { token: i4$1.ActivatedRoute }, { token: IncidentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IncidentListComponent, isStandalone: true, selector: "app-incident-list", inputs: { supplierId: "supplierId", incidentableType: "incidentableType", incidentableId: "incidentableId" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gal-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3\">\n      <h2 class=\"mb-0\">Incidents</h2>\n      <app-incident-form-button\n        *ngxPermissionsOnly=\"['incident.create']\"\n        incidentableType=\"Supplier\"\n        [incidentableId]=\"supplierId\"\n        (saved)=\"reload()\"\n      ></app-incident-form-button>\n    </div>\n    <form\n      [formGroup]=\"filterForm\" (submit)=\"reload()\"\n      class=\"d-flex justify-content-end align-items-center gap-3\"\n    >\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search Details\" matInput formControlName=\"search\">\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Classification</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/incident-classifications\"\n          [enableSearch]=\"false\"\n          formControlName=\"classification_ids\"\n          [multiple]=\"true\"\n        ></app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      matSort\n      (matSortChange)=\"onSortChange($event)\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    >\n\n      <!-- No Column -->\n      <ng-container matColumnDef=\"No\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"Date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"date\"> Date </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.date | date }} </td>\n      </ng-container>\n\n      <!-- Classification Column -->\n      <ng-container matColumnDef=\"Classification\">\n        <th mat-header-cell *matHeaderCellDef> Classification </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.classification?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Cost Column -->\n      <ng-container matColumnDef=\"Cost\">\n        <th mat-header-cell *matHeaderCellDef> Cost </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.cost | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Details Column -->\n      <ng-container matColumnDef=\"Details\">\n        <th mat-header-cell *matHeaderCellDef> Details </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.details }}\n        </td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"Creator\">\n        <th mat-header-cell *matHeaderCellDef> Creator </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-incident-form-button\n            *ngxPermissionsOnly=\"['incident.update']\"\n            [incident]=\"element\"\n            incidentableType=\"Supplier\"\n            [incidentableId]=\"supplierId\"\n            (saved)=\"reload()\"\n          ></app-incident-form-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: IncidentFormButtonComponent, selector: "app-incident-form-button", inputs: ["incident", "incidentableType", "incidentableId"], outputs: ["saved"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i5$2.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IncidentListComponent, isStandalone: true, selector: "app-incident-list", inputs: { supplierId: "supplierId", incidentableType: "incidentableType", incidentableId: "incidentableId" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gal-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3\">\n      <h2 class=\"mb-0\">Incidents</h2>\n      <app-incident-form-button\n        *ngxPermissionsOnly=\"['incident.create']\"\n        incidentableType=\"Supplier\"\n        [incidentableId]=\"supplierId\"\n        (saved)=\"reload()\"\n      ></app-incident-form-button>\n    </div>\n    <form\n      [formGroup]=\"filterForm\" (submit)=\"reload()\"\n      class=\"d-flex justify-content-end align-items-center gap-3\"\n    >\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search Details\" matInput formControlName=\"search\">\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Classification</mat-label>\n        <app-searchable-selector\n          apiUrl=\"api/incident-classifications\"\n          [enableSearch]=\"false\"\n          formControlName=\"classification_ids\"\n          [multiple]=\"true\"\n        ></app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      matSort\n      (matSortChange)=\"onSortChange($event)\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    >\n\n      <!-- No Column -->\n      <ng-container matColumnDef=\"No\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <!-- Date Column -->\n      <ng-container matColumnDef=\"Date\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"date\"> Date </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.date | date }} </td>\n      </ng-container>\n\n      <!-- Classification Column -->\n      <ng-container matColumnDef=\"Classification\">\n        <th mat-header-cell *matHeaderCellDef> Classification </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.classification?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Cost Column -->\n      <ng-container matColumnDef=\"Cost\">\n        <th mat-header-cell *matHeaderCellDef> Cost </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.cost | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Details Column -->\n      <ng-container matColumnDef=\"Details\">\n        <th mat-header-cell *matHeaderCellDef> Details </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.details }}\n        </td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"Creator\">\n        <th mat-header-cell *matHeaderCellDef> Creator </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-1\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-incident-form-button\n            *ngxPermissionsOnly=\"['incident.update']\"\n            [incident]=\"element\"\n            incidentableType=\"Supplier\"\n            [incidentableId]=\"supplierId\"\n            (saved)=\"reload()\"\n          ></app-incident-form-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: IncidentFormButtonComponent, selector: "app-incident-form-button", inputs: ["incident", "incidentableType", "incidentableId"], outputs: ["saved"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i13.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IncidentListComponent, decorators: [{
             type: Component,
@@ -5845,7 +5738,7 @@ class SupplierBranchFormComponent extends TechlifyFormComponentInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierBranchFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: SupplierBranchService }, { token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SupplierBranchFormComponent, selector: "app-supplier-branch-form", usesInheritance: true, ngImport: i0, template: "<mat-card-content>\n    <h3 class=\"text-center mb-1\">Branch Form</h3>\n\n    <form [formGroup]=\"form\" class=\"d-flex flex-row flex-wrap justify-content-start gap-2\" (submit)=\"save()\">\n        <mat-form-field style=\"width: calc(100%)\">\n            <mat-label>Title</mat-label>\n            <input formControlName=\"title\" type=\"text\" matInput placeholder=\"Title\" />\n            <mat-error *ngIf=\"isFieldValid('title')\">\n                {{ getErrorMessage('title') }}\n            </mat-error>\n        </mat-form-field>\n\n        <mat-form-field style=\"width: calc(100%)\">\n            <mat-label>Phone</mat-label>\n            <input formControlName=\"phone\" type=\"text\" matInput placeholder=\"Phone\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: calc(100%)\">\n            <mat-label>Email</mat-label>\n            <input formControlName=\"email\" type=\"email\" matInput placeholder=\"Email\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: calc(100%)\">\n            <mat-label>Address</mat-label>\n            <input formControlName=\"address\" type=\"text\" matInput placeholder=\"Address\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: calc(100%)\">\n            <mat-label>Description</mat-label>\n            <textarea matInput formControlName=\"description\" placeholder=\"Description\" rows=\"3\"></textarea>\n        </mat-form-field>\n\n        <div class=\"d-flex justify-content-end align-items-center gap-2\" style=\"width: calc(100%)\">\n            <button [disabled]=\"isWorking\" type=\"button\" mat-flat-button mat-dialog-close>Cancel</button>\n            <button [disabled]=\"isWorking\" type=\"submit\" mat-raised-button color=\"primary\">Save</button>\n        </div>\n    </form>\n</mat-card-content>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.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: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SupplierBranchFormComponent, selector: "app-supplier-branch-form", usesInheritance: true, ngImport: i0, template: "<mat-card-content>\n    <h3 class=\"text-center mb-1\">Branch Form</h3>\n\n    <form [formGroup]=\"form\" class=\"d-flex flex-row flex-wrap justify-content-start gap-2\" (submit)=\"save()\">\n        <mat-form-field style=\"width: calc(100%)\">\n            <mat-label>Title</mat-label>\n            <input formControlName=\"title\" type=\"text\" matInput placeholder=\"Title\" />\n            <mat-error *ngIf=\"isFieldValid('title')\">\n                {{ getErrorMessage('title') }}\n            </mat-error>\n        </mat-form-field>\n\n        <mat-form-field style=\"width: calc(100%)\">\n            <mat-label>Phone</mat-label>\n            <input formControlName=\"phone\" type=\"text\" matInput placeholder=\"Phone\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: calc(100%)\">\n            <mat-label>Email</mat-label>\n            <input formControlName=\"email\" type=\"email\" matInput placeholder=\"Email\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: calc(100%)\">\n            <mat-label>Address</mat-label>\n            <input formControlName=\"address\" type=\"text\" matInput placeholder=\"Address\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: calc(100%)\">\n            <mat-label>Description</mat-label>\n            <textarea matInput formControlName=\"description\" placeholder=\"Description\" rows=\"3\"></textarea>\n        </mat-form-field>\n\n        <div class=\"d-flex justify-content-end align-items-center gap-2\" style=\"width: calc(100%)\">\n            <button [disabled]=\"isWorking\" type=\"button\" mat-flat-button mat-dialog-close>Cancel</button>\n            <button [disabled]=\"isWorking\" type=\"submit\" mat-raised-button color=\"primary\">Save</button>\n        </div>\n    </form>\n</mat-card-content>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$1.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: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierBranchFormComponent, decorators: [{
             type: Component,
@@ -6001,7 +5894,7 @@ class SupplierBranchesListComponent extends TechlifyListingControllerInterface {
         return this.filterForm.get('sort_by')?.setValue(column + '|' + direction);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierBranchesListComponent, deps: [{ token: i2$1.FormBuilder }, { token: i1.ErrorHandlerService }, { token: SupplierBranchService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SupplierBranchesListComponent, selector: "app-supplier-branches-list", inputs: { supplierId: "supplierId" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n        <div class=\"d-flex justify-content-start align-items-center gap-3\">\n            <h3 class=\"mb-0 fw-bold\">Branches</h3>\n            <app-supplier-branch-form-button [supplierId]=\"supplierId\"\n                (saved)=\"reload()\"></app-supplier-branch-form-button>\n        </div>\n        <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n            <mat-form-field>\n                <mat-label>Search</mat-label>\n                <input matInput placeholder=\"Search by Title, Address, Phone, Email\" formControlName=\"search\" />\n                <mat-icon matSuffix>search</mat-icon>\n            </mat-form-field>\n        </form>\n    </mat-card-content>\n</mat-card>\n\n<mat-card>\n    <mat-card-content class=\"p-0\">\n        <table mat-table #table [dataSource]=\"models\" class=\"w-100 table-hover\" infiniteScroll\n            [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n            (matSortChange)=\"sortColumn($event)\" aria-describedby=\"Supplier Branches List\">\n\n            <ng-container matColumnDef=\"#\">\n                <th mat-header-cell *matHeaderCellDef>#</th>\n                <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>\n                <td mat-cell *matCellDef=\"let element\">\n                    {{ element?.title }}\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"address\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Address</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"phone\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.phone }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"email\">\n                <th mat-header-cell *matHeaderCellDef>Email</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.email }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"description\">\n                <th mat-header-cell *matHeaderCellDef>Description</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.description }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef>Actions</th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <div class=\"text-secondary d-flex align-items-center gap-2\">\n                        <app-supplier-branch-form-button [branch]=\"element\" [supplierId]=\"supplierId\"\n                            (saved)=\"reload()\"></app-supplier-branch-form-button>\n                        <app-supplier-branch-delete-button [branch]=\"element\"\n                            (deleted)=\"reload()\"></app-supplier-branch-delete-button>\n                    </div>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n        </table>\n\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n</mat-card>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: SupplierBranchFormButtonComponent, selector: "app-supplier-branch-form-button", inputs: ["branch", "supplierId"], outputs: ["saved"] }, { kind: "component", type: SupplierBranchDeleteButtonComponent, selector: "app-supplier-branch-delete-button", inputs: ["branch"], outputs: ["deleted"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SupplierBranchesListComponent, selector: "app-supplier-branches-list", inputs: { supplierId: "supplierId" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n        <div class=\"d-flex justify-content-start align-items-center gap-3\">\n            <h3 class=\"mb-0 fw-bold\">Branches</h3>\n            <app-supplier-branch-form-button [supplierId]=\"supplierId\"\n                (saved)=\"reload()\"></app-supplier-branch-form-button>\n        </div>\n        <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n            <mat-form-field>\n                <mat-label>Search</mat-label>\n                <input matInput placeholder=\"Search by Title, Address, Phone, Email\" formControlName=\"search\" />\n                <mat-icon matSuffix>search</mat-icon>\n            </mat-form-field>\n        </form>\n    </mat-card-content>\n</mat-card>\n\n<mat-card>\n    <mat-card-content class=\"p-0\">\n        <table mat-table #table [dataSource]=\"models\" class=\"w-100 table-hover\" infiniteScroll\n            [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n            (matSortChange)=\"sortColumn($event)\" aria-describedby=\"Supplier Branches List\">\n\n            <ng-container matColumnDef=\"#\">\n                <th mat-header-cell *matHeaderCellDef>#</th>\n                <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>\n                <td mat-cell *matCellDef=\"let element\">\n                    {{ element?.title }}\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"address\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Address</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"phone\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.phone }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"email\">\n                <th mat-header-cell *matHeaderCellDef>Email</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.email }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"description\">\n                <th mat-header-cell *matHeaderCellDef>Description</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.description }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef>Actions</th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <div class=\"text-secondary d-flex align-items-center gap-2\">\n                        <app-supplier-branch-form-button [branch]=\"element\" [supplierId]=\"supplierId\"\n                            (saved)=\"reload()\"></app-supplier-branch-form-button>\n                        <app-supplier-branch-delete-button [branch]=\"element\"\n                            (deleted)=\"reload()\"></app-supplier-branch-delete-button>\n                    </div>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n        </table>\n\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n</mat-card>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: SupplierBranchFormButtonComponent, selector: "app-supplier-branch-form-button", inputs: ["branch", "supplierId"], outputs: ["saved"] }, { kind: "component", type: SupplierBranchDeleteButtonComponent, selector: "app-supplier-branch-delete-button", inputs: ["branch"], outputs: ["deleted"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierBranchesListComponent, decorators: [{
             type: Component,
@@ -6058,7 +5951,7 @@ class SupplierViewComponent {
         this.supplier = result.item;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierViewComponent, deps: [{ token: SupplierService }, { token: i4$1.ActivatedRoute }, { token: i4$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SupplierViewComponent, selector: "app-supplier-view", ngImport: i0, template: "<mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n\n<div *ngIf=\"supplier\" class=\"d-flex flex-row gap-3 justify-content-between\">\n  <div style=\"width: 300px\">\n    <app-supplier-information [supplier]=\"supplier\"></app-supplier-information>\n    <mat-card class=\"mt-3\">\n      <mat-card-content class=\"p-0\">\n        <app-note-list modelType=\"Supplier\" [relatedModelId]=\"supplier?.id\" viewMode=\"timeline\"\n          labelText=\"Notes\"></app-note-list>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <mat-card class='w-100'>\n    <mat-card-content>\n      <mat-tab-group [mat-stretch-tabs]=\"false\">\n        <mat-tab label=\"Branches\">\n          <app-supplier-branches-list [supplierId]=\"supplier?.id\"></app-supplier-branches-list>\n        </mat-tab>\n        <mat-tab label=\"Incidents\">\n          <app-incident-list [supplierId]=\"supplier?.id\" incidentableType=\"Supplier\" [incidentableId]=\"supplier?.id\">\n          </app-incident-list>\n        </mat-tab>\n        <mat-tab label=\"Ratings\">\n          <app-rating-list [supplierId]=\"supplier?.id\" [rateableId]=\"supplier?.id\"\n            rateableType=\"Supplier\"></app-rating-list>\n        </mat-tab>\n        <mat-tab label=\"Stock Receipts\">\n          <app-stock-receipts-page [supplierId]=\"supplier?.id\"></app-stock-receipts-page>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-card-content>\n  </mat-card>\n</div>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: StockReceiptPageComponent, selector: "app-stock-receipts-page", inputs: ["product", "supplierId"], outputs: ["listUpdated"] }, { kind: "component", type: IncidentListComponent, selector: "app-incident-list", inputs: ["supplierId", "incidentableType", "incidentableId"] }, { kind: "component", type: RatingListComponent, selector: "app-rating-list", inputs: ["supplierId", "rateableType", "rateableId"] }, { kind: "component", type: SupplierInformationComponent, selector: "app-supplier-information", inputs: ["supplier"] }, { kind: "component", type: SupplierBranchesListComponent, selector: "app-supplier-branches-list", inputs: ["supplierId"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SupplierViewComponent, selector: "app-supplier-view", ngImport: i0, template: "<mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n\n<div *ngIf=\"supplier\" class=\"d-flex flex-row gap-3 justify-content-between\">\n  <div style=\"width: 300px\">\n    <app-supplier-information [supplier]=\"supplier\"></app-supplier-information>\n    <mat-card class=\"mt-3\">\n      <mat-card-content class=\"p-0\">\n        <app-note-list modelType=\"Supplier\" [relatedModelId]=\"supplier?.id\" viewMode=\"timeline\"\n          labelText=\"Notes\"></app-note-list>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <mat-card class='w-100'>\n    <mat-card-content>\n      <mat-tab-group [mat-stretch-tabs]=\"false\">\n        <mat-tab label=\"Branches\">\n          <app-supplier-branches-list [supplierId]=\"supplier?.id\"></app-supplier-branches-list>\n        </mat-tab>\n        <mat-tab label=\"Incidents\">\n          <app-incident-list [supplierId]=\"supplier?.id\" incidentableType=\"Supplier\" [incidentableId]=\"supplier?.id\">\n          </app-incident-list>\n        </mat-tab>\n        <mat-tab label=\"Ratings\">\n          <app-rating-list [supplierId]=\"supplier?.id\" [rateableId]=\"supplier?.id\"\n            rateableType=\"Supplier\"></app-rating-list>\n        </mat-tab>\n        <mat-tab label=\"Stock Receipts\">\n          <app-stock-receipts-page [supplierId]=\"supplier?.id\"></app-stock-receipts-page>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-card-content>\n  </mat-card>\n</div>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: StockReceiptPageComponent, selector: "app-stock-receipts-page", inputs: ["product", "supplierId"], outputs: ["listUpdated"] }, { kind: "component", type: IncidentListComponent, selector: "app-incident-list", inputs: ["supplierId", "incidentableType", "incidentableId"] }, { kind: "component", type: RatingListComponent, selector: "app-rating-list", inputs: ["supplierId", "rateableType", "rateableId"] }, { kind: "component", type: SupplierInformationComponent, selector: "app-supplier-information", inputs: ["supplier"] }, { kind: "component", type: SupplierBranchesListComponent, selector: "app-supplier-branches-list", inputs: ["supplierId"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierViewComponent, decorators: [{
             type: Component,
@@ -6130,58 +6023,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-class SupplierDeleteButtonComponent {
-    dialog;
-    alertService;
-    errorHandler;
-    supplierService;
-    supplier;
-    onDelete = new EventEmitter();
-    constructor(dialog, alertService, errorHandler, supplierService) {
-        this.dialog = dialog;
-        this.alertService = alertService;
-        this.errorHandler = errorHandler;
-        this.supplierService = supplierService;
-    }
-    ngOnInit() {
-    }
-    openDialog() {
-        this.dialog.open(ActionPopupComponent, {
-            width: '400px',
-            data: {
-                title: 'Delete Supplier',
-                message: 'Are you sure you want to delete the Supplier?',
-            },
-            autoFocus: false,
-        }).afterClosed().subscribe(async (result) => {
-            if (result) {
-                try {
-                    await lastValueFrom(this.supplierService.delete(this.supplier.id));
-                    this.alertService.addAlert('Successfully deleted the Supplier', 'success');
-                    this.onDelete.emit(this.supplier);
-                }
-                catch (error) {
-                    this.errorHandler.handleError(error);
-                }
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: i1.AlertService }, { token: i1.ErrorHandlerService }, { token: SupplierService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SupplierDeleteButtonComponent, isStandalone: true, selector: "app-supplier-delete-button", inputs: { supplier: "supplier" }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer\" *ngxPermissionsOnly=\"['supplier.delete']\" (click)=\"openDialog()\">\n  delete\n</mat-icon>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i5$2.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], preserveWhitespaces: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierDeleteButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-supplier-delete-button', standalone: true, imports: [
-                        CommonModule,
-                        MaterialModule,
-                        NgxPermissionsModule
-                    ], template: "<mat-icon class=\"cursor-pointer\" *ngxPermissionsOnly=\"['supplier.delete']\" (click)=\"openDialog()\">\n  delete\n</mat-icon>" }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i1.AlertService }, { type: i1.ErrorHandlerService }, { type: SupplierService }], propDecorators: { supplier: [{
-                type: Input
-            }], onDelete: [{
-                type: Output
-            }] } });
-
 class SuppliersListComponent extends TechlifyListingControllerInterface {
     fb;
     service;
@@ -6215,11 +6056,11 @@ class SuppliersListComponent extends TechlifyListingControllerInterface {
         this.listenFilterChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuppliersListComponent, deps: [{ token: i2$1.FormBuilder }, { token: SupplierService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SuppliersListComponent, selector: "app-suppliers-list", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-1\">\n      <h3 class=\"mb-0 fw-bold\">Suppliers</h3>\n      <app-supplier-form-button class='mt-2' (onSaved)=\"reload()\"></app-supplier-form-button>\n    </div>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search Supplier by Name, Phone, Address, Email, Description\"\n          formControlName=\"search\" />\n        <mat-icon matSuffix>search</mat-icon>\n      </mat-form-field>\n      <mat-form-field>\n        <mat-label>Type</mat-label>\n        <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table #table [dataSource]=\"models\" class=\"w-100 table-hover\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n      (matSortChange)=\"sortColumn($event)\" aria-describedby=\"Suppliers List\">\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"company_name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.company_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"type\">\n        <th mat-header-cell *matHeaderCellDef>Type</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.type?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"contact_name\">\n        <th mat-header-cell *matHeaderCellDef>Contact</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.contact_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"phone\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.phone }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"address\">\n        <th mat-header-cell *matHeaderCellDef>Address</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.email }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"details\">\n        <th mat-header-cell *matHeaderCellDef>Details</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex align-items-center gap-1\">\n\n            <a class=\"text-decoration-none text-secondary\" [routerLink]=\"['/inventory/suppliers', element.id, 'view']\"\n              routerLinkActive=\"route-link-active\" *ngxPermissionsOnly=\"['supplier.read']\">\n              <mat-icon matTooltip=\"View\">remove_red_eye</mat-icon>\n            </a>\n            <app-supplier-form-button *ngxPermissionsOnly=\"['supplier.update']\" [supplier]=\"element\"\n              (onSaved)=\"reload()\"></app-supplier-form-button>\n            <app-supplier-delete-button [supplier]=\"element\" (onDelete)=\"reload()\"></app-supplier-delete-button>\n            <app-audit-log-for-model [modelId]=\"element?.id\" modelType=\"Supplier\"\n              logView=\"all\"></app-audit-log-for-model>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["isIconView", "modelType", "modelId", "logView"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i5$2.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "component", type: SupplierFormButtonComponent, selector: "app-supplier-form-button", inputs: ["supplier"], outputs: ["onSaved"] }, { kind: "component", type: SupplierDeleteButtonComponent, selector: "app-supplier-delete-button", inputs: ["supplier"], outputs: ["onDelete"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SuppliersListComponent, selector: "app-suppliers-list", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-1\">\n      <h3 class=\"mb-0 fw-bold\">Suppliers</h3>\n      <app-supplier-form-button class='mt-2' (onSaved)=\"reload()\"></app-supplier-form-button>\n    </div>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search Supplier by Name, Phone, Address, Email, Description\"\n          formControlName=\"search\" />\n        <mat-icon matSuffix>search</mat-icon>\n      </mat-form-field>\n      <mat-form-field>\n        <mat-label>Type</mat-label>\n        <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table #table [dataSource]=\"models\" class=\"w-100 table-hover\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n      (matSortChange)=\"sortColumn($event)\" aria-describedby=\"Suppliers List\">\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"company_name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.company_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"type\">\n        <th mat-header-cell *matHeaderCellDef>Type</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.type?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"contact_name\">\n        <th mat-header-cell *matHeaderCellDef>Contact</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.contact_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"phone\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.phone }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"address\">\n        <th mat-header-cell *matHeaderCellDef>Address</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.email }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"details\">\n        <th mat-header-cell *matHeaderCellDef>Details</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex align-items-center gap-1\">\n\n            <a class=\"text-decoration-none text-secondary\" [routerLink]=\"['/inventory/suppliers', element.id, 'view']\"\n              routerLinkActive=\"route-link-active\" *ngxPermissionsOnly=\"['supplier.read']\">\n              <mat-icon matTooltip=\"View\">remove_red_eye</mat-icon>\n            </a>\n            <app-supplier-form-button *ngxPermissionsOnly=\"['supplier.update']\" [supplier]=\"element\"\n              (onSaved)=\"reload()\"></app-supplier-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.company_name, type: \"Supplier\"}'\n              (deleted)=\"reload()\"></app-techlify-delete-button>\n            <app-audit-log-for-model [modelId]=\"element?.id\" modelType=\"Supplier\"\n              logView=\"all\"></app-audit-log-for-model>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["isIconView", "modelType", "modelId", "logView"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i13.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "component", type: SupplierFormButtonComponent, selector: "app-supplier-form-button", inputs: ["supplier"], outputs: ["onSaved"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuppliersListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-suppliers-list', template: "<mat-card class=\"mb-3\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-1\">\n      <h3 class=\"mb-0 fw-bold\">Suppliers</h3>\n      <app-supplier-form-button class='mt-2' (onSaved)=\"reload()\"></app-supplier-form-button>\n    </div>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search Supplier by Name, Phone, Address, Email, Description\"\n          formControlName=\"search\" />\n        <mat-icon matSuffix>search</mat-icon>\n      </mat-form-field>\n      <mat-form-field>\n        <mat-label>Type</mat-label>\n        <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table #table [dataSource]=\"models\" class=\"w-100 table-hover\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n      (matSortChange)=\"sortColumn($event)\" aria-describedby=\"Suppliers List\">\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"company_name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.company_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"type\">\n        <th mat-header-cell *matHeaderCellDef>Type</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.type?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"contact_name\">\n        <th mat-header-cell *matHeaderCellDef>Contact</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.contact_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"phone\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.phone }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"address\">\n        <th mat-header-cell *matHeaderCellDef>Address</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.email }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"details\">\n        <th mat-header-cell *matHeaderCellDef>Details</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex align-items-center gap-1\">\n\n            <a class=\"text-decoration-none text-secondary\" [routerLink]=\"['/inventory/suppliers', element.id, 'view']\"\n              routerLinkActive=\"route-link-active\" *ngxPermissionsOnly=\"['supplier.read']\">\n              <mat-icon matTooltip=\"View\">remove_red_eye</mat-icon>\n            </a>\n            <app-supplier-form-button *ngxPermissionsOnly=\"['supplier.update']\" [supplier]=\"element\"\n              (onSaved)=\"reload()\"></app-supplier-form-button>\n            <app-supplier-delete-button [supplier]=\"element\" (onDelete)=\"reload()\"></app-supplier-delete-button>\n            <app-audit-log-for-model [modelId]=\"element?.id\" modelType=\"Supplier\"\n              logView=\"all\"></app-audit-log-for-model>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+            args: [{ selector: 'app-suppliers-list', template: "<mat-card class=\"mb-3\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-1\">\n      <h3 class=\"mb-0 fw-bold\">Suppliers</h3>\n      <app-supplier-form-button class='mt-2' (onSaved)=\"reload()\"></app-supplier-form-button>\n    </div>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search Supplier by Name, Phone, Address, Email, Description\"\n          formControlName=\"search\" />\n        <mat-icon matSuffix>search</mat-icon>\n      </mat-form-field>\n      <mat-form-field>\n        <mat-label>Type</mat-label>\n        <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table #table [dataSource]=\"models\" class=\"w-100 table-hover\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n      (matSortChange)=\"sortColumn($event)\" aria-describedby=\"Suppliers List\">\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"company_name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.company_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"type\">\n        <th mat-header-cell *matHeaderCellDef>Type</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.type?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"contact_name\">\n        <th mat-header-cell *matHeaderCellDef>Contact</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.contact_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"phone\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.phone }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"address\">\n        <th mat-header-cell *matHeaderCellDef>Address</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.email }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"details\">\n        <th mat-header-cell *matHeaderCellDef>Details</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex align-items-center gap-1\">\n\n            <a class=\"text-decoration-none text-secondary\" [routerLink]=\"['/inventory/suppliers', element.id, 'view']\"\n              routerLinkActive=\"route-link-active\" *ngxPermissionsOnly=\"['supplier.read']\">\n              <mat-icon matTooltip=\"View\">remove_red_eye</mat-icon>\n            </a>\n            <app-supplier-form-button *ngxPermissionsOnly=\"['supplier.update']\" [supplier]=\"element\"\n              (onSaved)=\"reload()\"></app-supplier-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.company_name, type: \"Supplier\"}'\n              (deleted)=\"reload()\"></app-techlify-delete-button>\n            <app-audit-log-for-model [modelId]=\"element?.id\" modelType=\"Supplier\"\n              logView=\"all\"></app-audit-log-for-model>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: i2$1.FormBuilder }, { type: SupplierService }] });
 
 class PurchaseOrderService extends TechlifyServiceBaseClass {
@@ -6269,7 +6110,7 @@ class PurchaseOrderListingComponent extends TechlifyListingControllerInterface {
         this.loadData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PurchaseOrderListingComponent, deps: [{ token: PurchaseOrderService }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PurchaseOrderListingComponent, isStandalone: true, selector: "app-purchase-order-listing", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-column gap-2\">\n\n    <mat-card>\n        <mat-card-content class='d-flex flex-row justify-content-between align-items-center'>\n            <div class='d-flex flex-row gap-2'>\n                <h5 class=\"mb-0\">Purchase Orders</h5>\n                <app-techlify-icon name='add' role='button' routerLink=\"form\"></app-techlify-icon>\n            </div>\n\n            <div class=\"d-flex flex-row gap-2 align-items-center\">\n                <form [formGroup]='filterForm' class=\"d-flex flex-row gap-1\">\n                    <mat-form-field class=\"mb-0\">\n                        <mat-label>Search</mat-label>\n                        <input matInput formControlName=\"search\">\n                    </mat-form-field>\n\n                    <mat-form-field>\n                        <mat-label>Suppliers</mat-label>\n                        <app-searchable-selector formControlName=\"supplier_ids\" [multiple]=\"true\" apiUrl=\"api/suppliers\"\n                            titleField=\"company_name\" sortBy=\"company_name|asc\"></app-searchable-selector>\n                    </mat-form-field>\n                </form>\n            </div>\n        </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n        <mat-card-content class=\"p-0\">\n            <table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n                [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort>\n\n                <!-- # Column -->\n                <ng-container matColumnDef=\"#\">\n                    <th mat-header-cell *matHeaderCellDef>#</th>\n                    <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n                </ng-container>\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n                    <td mat-cell *matCellDef=\"let element\">{{ element?.date | date:'mediumDate' }}</td>\n                </ng-container>\n\n                <!-- PO # Column -->\n                <ng-container matColumnDef=\"po_number\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header>PO #</th>\n                    <td mat-cell *matCellDef=\"let element\">{{ element?.po_number }}</td>\n                </ng-container>\n\n                <!-- Supplier Column -->\n                <ng-container matColumnDef=\"supplier\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n                    <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.company_name }}</td>\n                </ng-container>\n\n                <!-- Details Column -->\n                <ng-container matColumnDef=\"details\">\n                    <th mat-header-cell *matHeaderCellDef>Details</th>\n                    <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n                </ng-container>\n\n                <!-- Status Column -->\n                <ng-container matColumnDef=\"status\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>\n                    <td mat-cell *matCellDef=\"let element\">{{ element?.status }}</td>\n                </ng-container>\n\n                <!-- Items Column -->\n                <ng-container matColumnDef=\"items\">\n                    <th mat-header-cell *matHeaderCellDef>Items</th>\n                    <td mat-cell *matCellDef=\"let element\">\n                        <span *ngFor=\"let item of element?.purchase_order_products; let last = last\">\n                            {{ item?.product?.name }}<span *ngIf=\"!last\">, </span>\n                        </span>\n                    </td>\n                </ng-container>\n\n                <!-- Actions Column -->\n                <ng-container matColumnDef=\"actions\">\n                    <th mat-header-cell *matHeaderCellDef>Actions</th>\n                    <td mat-cell *matCellDef=\"let element\">\n                        <span class=\"text-secondary\">\n                            <app-techlify-icon name='view' role='button' [routerLink]=\"element.id + '/view'\"\n                                matTooltip=\"View\"></app-techlify-icon>\n                            <app-techlify-icon name='edit' role='button' [routerLink]=\"'form/' + element.id\"\n                                matTooltip=\"Edit\"></app-techlify-icon>\n                        </span>\n                    </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n            </table>\n\n            <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n        </mat-card-content>\n    </mat-card>\n\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PurchaseOrderListingComponent, isStandalone: true, selector: "app-purchase-order-listing", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-column gap-2\">\n\n    <mat-card>\n        <mat-card-content class='d-flex flex-row justify-content-between align-items-center'>\n            <div class='d-flex flex-row gap-2'>\n                <h5 class=\"mb-0\">Purchase Orders</h5>\n                <app-techlify-icon name='add' role='button' routerLink=\"form\"></app-techlify-icon>\n            </div>\n\n            <div class=\"d-flex flex-row gap-2 align-items-center\">\n                <form [formGroup]='filterForm' class=\"d-flex flex-row gap-1\">\n                    <mat-form-field class=\"mb-0\">\n                        <mat-label>Search</mat-label>\n                        <input matInput formControlName=\"search\">\n                    </mat-form-field>\n\n                    <mat-form-field>\n                        <mat-label>Suppliers</mat-label>\n                        <app-searchable-selector formControlName=\"supplier_ids\" [multiple]=\"true\" apiUrl=\"api/suppliers\"\n                            titleField=\"company_name\" sortBy=\"company_name|asc\"></app-searchable-selector>\n                    </mat-form-field>\n                </form>\n            </div>\n        </mat-card-content>\n    </mat-card>\n\n    <mat-card>\n        <mat-card-content class=\"p-0\">\n            <table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n                [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort>\n\n                <!-- # Column -->\n                <ng-container matColumnDef=\"#\">\n                    <th mat-header-cell *matHeaderCellDef>#</th>\n                    <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n                </ng-container>\n\n                <!-- Date Column -->\n                <ng-container matColumnDef=\"date\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>\n                    <td mat-cell *matCellDef=\"let element\">{{ element?.date | date:'mediumDate' }}</td>\n                </ng-container>\n\n                <!-- PO # Column -->\n                <ng-container matColumnDef=\"po_number\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header>PO #</th>\n                    <td mat-cell *matCellDef=\"let element\">{{ element?.po_number }}</td>\n                </ng-container>\n\n                <!-- Supplier Column -->\n                <ng-container matColumnDef=\"supplier\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Supplier</th>\n                    <td mat-cell *matCellDef=\"let element\">{{ element?.supplier?.company_name }}</td>\n                </ng-container>\n\n                <!-- Details Column -->\n                <ng-container matColumnDef=\"details\">\n                    <th mat-header-cell *matHeaderCellDef>Details</th>\n                    <td mat-cell *matCellDef=\"let element\">{{ element?.particulars }}</td>\n                </ng-container>\n\n                <!-- Status Column -->\n                <ng-container matColumnDef=\"status\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>\n                    <td mat-cell *matCellDef=\"let element\">{{ element?.status }}</td>\n                </ng-container>\n\n                <!-- Items Column -->\n                <ng-container matColumnDef=\"items\">\n                    <th mat-header-cell *matHeaderCellDef>Items</th>\n                    <td mat-cell *matCellDef=\"let element\">\n                        <span *ngFor=\"let item of element?.purchase_order_products; let last = last\">\n                            {{ item?.product?.name }}<span *ngIf=\"!last\">, </span>\n                        </span>\n                    </td>\n                </ng-container>\n\n                <!-- Actions Column -->\n                <ng-container matColumnDef=\"actions\">\n                    <th mat-header-cell *matHeaderCellDef>Actions</th>\n                    <td mat-cell *matCellDef=\"let element\">\n                        <span class=\"text-secondary\">\n                            <app-techlify-icon name='view' role='button' [routerLink]=\"element.id + '/view'\"\n                                matTooltip=\"View\"></app-techlify-icon>\n                            <app-techlify-icon name='edit' role='button' [routerLink]=\"'form/' + element.id\"\n                                matTooltip=\"Edit\"></app-techlify-icon>\n                        </span>\n                    </td>\n                </ng-container>\n\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n            </table>\n\n            <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n        </mat-card-content>\n    </mat-card>\n\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PurchaseOrderListingComponent, decorators: [{
             type: Component,
@@ -6407,7 +6248,7 @@ class PurchaseOrderFormComponent extends TechlifyFormComponentInterface {
         this.router.navigate(['/inventory/suppliers/purchase-orders']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PurchaseOrderFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: PurchaseOrderService }, { token: i4$1.Router }, { token: i4$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PurchaseOrderFormComponent, isStandalone: true, selector: "app-purchase-order-form", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"d-flex flex-column gap-2 container\">\n    <mat-card-content>\n\n        <div class=\"d-flex flex-column gap-1\">\n            <h5>\n                <span class=\"material-symbols-outlined align-middle\">shopping_cart</span>\n                Purchase Order Form\n            </h5>\n        </div>\n\n        <form class=\"d-flex flex-column gap-2\" [formGroup]=\"form\" (submit)=\"save()\">\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex flex-row gap-2 justify-content-between\">\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Date</mat-label>\n                        <input matInput [matDatepicker]=\"picker\" placeholder=\"Date\" formControlName=\"date\" required>\n                        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                        <mat-datepicker #picker></mat-datepicker>\n                        <mat-error *ngIf=\"isFieldValid('date')\">{{ getErrorMessage('date') }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>PO #</mat-label>\n                        <input matInput placeholder=\"PO #\" formControlName=\"po_number\">\n                    </mat-form-field>\n                </div>\n\n                <div class=\"d-flex flex-row gap-2 justify-content-between\">\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Supplier</mat-label>\n                        <app-searchable-selector apiUrl='api/suppliers' formControlName=\"supplier_id\"\n                            titleField='company_name'></app-searchable-selector>\n                    </mat-form-field>\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Details</mat-label>\n                        <textarea matInput placeholder=\"Details\" formControlName=\"details\"></textarea>\n                    </mat-form-field>\n                </div>\n            </div>\n\n            <table class=\"table mt-3\">\n                <thead>\n                    <tr>\n                        <th scope=\"col\">#</th>\n                        <th scope=\"col\">Product</th>\n                        <th scope=\"col\">Quantity</th>\n                        <th scope=\"col\">Unit</th>\n                        <th scope=\"col\">Details</th>\n                        <th scope=\"col\" class=\"text-center\" width=\"50\"></th>\n                    </tr>\n                </thead>\n                <tbody formArrayName=\"purchase_order_products\">\n                    <tr *ngFor=\"let row of purchaseOrderProducts.controls; let i = index\" [formGroupName]=\"i\">\n                        <th scope=\"row\">{{ i + 1 }}</th>\n                        <td>\n                            <mat-form-field appearance='outline' class=\"w-100\">\n                                <mat-label>Product</mat-label>\n                                <app-searchable-selector apiUrl='api/products' formControlName=\"product_id\"\n                                    titleField='name' [cache]=\"true\" required></app-searchable-selector>\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Quantity</mat-label>\n                                <input matInput formControlName=\"quantity\" type=\"number\" min=\"1\">\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class=\"w-100\">\n                                <mat-label>Unit</mat-label>\n                                <app-searchable-selector apiUrl='api/product-measures' formControlName=\"unit_id\"\n                                    titleField='title' required></app-searchable-selector>\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline'>\n                                <mat-label>Details</mat-label>\n                                <input matInput formControlName=\"details\">\n                            </mat-form-field>\n                        </td>\n                        <td class=\"text-center align-middle\">\n                            <div class=\"d-flex gap-2 justify-content-center align-items-center text-secondary\">\n                                <app-techlify-icon role='button' name='delete' (click)=\"removePurchaseOrderProduct(i)\"\n                                    matTooltip=\"Remove row\"></app-techlify-icon>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n                <tfoot>\n                    <tr>\n                        <td colspan=\"6\" class=\"text-end\">\n                            <div class=\"d-flex flex-row gap-2 justify-content-end\">\n                                <button mat-button color=\"primary\" type=\"button\" (click)=\"clearProducts()\"\n                                    [disabled]=\"purchaseOrderProducts.length === 0\">\n                                    <mat-icon>block</mat-icon> CLEAR ALL\n                                </button>\n                                <button mat-raised-button color=\"primary\" type=\"button\"\n                                    (click)=\"addPurchaseOrderProduct()\">\n                                    <mat-icon>add</mat-icon> ADD\n                                </button>\n                            </div>\n                        </td>\n                    </tr>\n                </tfoot>\n            </table>\n\n            <div class=\"d-flex justify-content-end align-items-center gap-2 mt-2\">\n                <button [disabled]=\"isWorking\" mat-flat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                <button [disabled]=\"isWorking || purchaseOrderProducts.length === 0\" mat-raised-button color=\"primary\"\n                    type=\"submit\">Save</button>\n            </div>\n\n        </form>\n\n    </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PurchaseOrderFormComponent, isStandalone: true, selector: "app-purchase-order-form", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"d-flex flex-column gap-2 container\">\n    <mat-card-content>\n\n        <div class=\"d-flex flex-column gap-1\">\n            <h5>\n                <span class=\"material-symbols-outlined align-middle\">shopping_cart</span>\n                Purchase Order Form\n            </h5>\n        </div>\n\n        <form class=\"d-flex flex-column gap-2\" [formGroup]=\"form\" (submit)=\"save()\">\n\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex flex-row gap-2 justify-content-between\">\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Date</mat-label>\n                        <input matInput [matDatepicker]=\"picker\" placeholder=\"Date\" formControlName=\"date\" required>\n                        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                        <mat-datepicker #picker></mat-datepicker>\n                        <mat-error *ngIf=\"isFieldValid('date')\">{{ getErrorMessage('date') }}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>PO #</mat-label>\n                        <input matInput placeholder=\"PO #\" formControlName=\"po_number\">\n                    </mat-form-field>\n                </div>\n\n                <div class=\"d-flex flex-row gap-2 justify-content-between\">\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Supplier</mat-label>\n                        <app-searchable-selector apiUrl='api/suppliers' formControlName=\"supplier_id\"\n                            titleField='company_name'></app-searchable-selector>\n                    </mat-form-field>\n                    <mat-form-field appearance='outline' class=\"w-100\">\n                        <mat-label>Details</mat-label>\n                        <textarea matInput placeholder=\"Details\" formControlName=\"details\"></textarea>\n                    </mat-form-field>\n                </div>\n            </div>\n\n            <table class=\"table mt-3\">\n                <thead>\n                    <tr>\n                        <th scope=\"col\">#</th>\n                        <th scope=\"col\">Product</th>\n                        <th scope=\"col\">Quantity</th>\n                        <th scope=\"col\">Unit</th>\n                        <th scope=\"col\">Details</th>\n                        <th scope=\"col\" class=\"text-center\" width=\"50\"></th>\n                    </tr>\n                </thead>\n                <tbody formArrayName=\"purchase_order_products\">\n                    <tr *ngFor=\"let row of purchaseOrderProducts.controls; let i = index\" [formGroupName]=\"i\">\n                        <th scope=\"row\">{{ i + 1 }}</th>\n                        <td>\n                            <mat-form-field appearance='outline' class=\"w-100\">\n                                <mat-label>Product</mat-label>\n                                <app-searchable-selector apiUrl='api/products' formControlName=\"product_id\"\n                                    titleField='name' [cache]=\"true\" required></app-searchable-selector>\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class='fl-sm'>\n                                <mat-label>Quantity</mat-label>\n                                <input matInput formControlName=\"quantity\" type=\"number\" min=\"1\">\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline' class=\"w-100\">\n                                <mat-label>Unit</mat-label>\n                                <app-searchable-selector apiUrl='api/product-measures' formControlName=\"unit_id\"\n                                    titleField='title' required></app-searchable-selector>\n                            </mat-form-field>\n                        </td>\n                        <td>\n                            <mat-form-field appearance='outline'>\n                                <mat-label>Details</mat-label>\n                                <input matInput formControlName=\"details\">\n                            </mat-form-field>\n                        </td>\n                        <td class=\"text-center align-middle\">\n                            <div class=\"d-flex gap-2 justify-content-center align-items-center text-secondary\">\n                                <app-techlify-icon role='button' name='delete' (click)=\"removePurchaseOrderProduct(i)\"\n                                    matTooltip=\"Remove row\"></app-techlify-icon>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n                <tfoot>\n                    <tr>\n                        <td colspan=\"6\" class=\"text-end\">\n                            <div class=\"d-flex flex-row gap-2 justify-content-end\">\n                                <button mat-button color=\"primary\" type=\"button\" (click)=\"clearProducts()\"\n                                    [disabled]=\"purchaseOrderProducts.length === 0\">\n                                    <mat-icon>block</mat-icon> CLEAR ALL\n                                </button>\n                                <button mat-raised-button color=\"primary\" type=\"button\"\n                                    (click)=\"addPurchaseOrderProduct()\">\n                                    <mat-icon>add</mat-icon> ADD\n                                </button>\n                            </div>\n                        </td>\n                    </tr>\n                </tfoot>\n            </table>\n\n            <div class=\"d-flex justify-content-end align-items-center gap-2 mt-2\">\n                <button [disabled]=\"isWorking\" mat-flat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                <button [disabled]=\"isWorking || purchaseOrderProducts.length === 0\" mat-raised-button color=\"primary\"\n                    type=\"submit\">Save</button>\n            </div>\n\n        </form>\n\n    </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i9$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i9$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i11$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.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: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PurchaseOrderFormComponent, decorators: [{
             type: Component,
@@ -6444,7 +6285,7 @@ const routes$4 = [
             },
             {
                 path: 'purchase-orders/:id/view',
-                loadComponent: () => import('./techlify-inventory-common-purchase-order-view.component-tSf0_Lj_.mjs').then(m => m.PurchaseOrderViewComponent)
+                loadComponent: () => import('./techlify-inventory-common-purchase-order-view.component-BDuk0Xek.mjs').then(m => m.PurchaseOrderViewComponent)
             }
         ],
     },
@@ -6481,12 +6322,12 @@ class SupplierModule {
             InfiniteScrollDirective,
             NgxPermissionsModule,
             SupplierFormButtonComponent,
-            SupplierDeleteButtonComponent,
             StockReceiptsModule,
             IncidentListComponent,
             RatingListComponent,
             SupplierBranchFormButtonComponent,
-            SupplierBranchDeleteButtonComponent] });
+            SupplierBranchDeleteButtonComponent,
+            TechlifyDeleteButtonComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierModule, imports: [CommonModule,
             SupplierRoutingModule,
             MaterialModule,
@@ -6497,12 +6338,12 @@ class SupplierModule {
             ReactiveFormsModule,
             NgxPermissionsModule,
             SupplierFormButtonComponent,
-            SupplierDeleteButtonComponent,
             StockReceiptsModule,
             IncidentListComponent,
             RatingListComponent,
             SupplierBranchFormButtonComponent,
-            SupplierBranchDeleteButtonComponent] });
+            SupplierBranchDeleteButtonComponent,
+            TechlifyDeleteButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierModule, decorators: [{
             type: NgModule,
@@ -6528,12 +6369,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         InfiniteScrollDirective,
                         NgxPermissionsModule,
                         SupplierFormButtonComponent,
-                        SupplierDeleteButtonComponent,
                         StockReceiptsModule,
                         IncidentListComponent,
                         RatingListComponent,
                         SupplierBranchFormButtonComponent,
-                        SupplierBranchDeleteButtonComponent
+                        SupplierBranchDeleteButtonComponent,
+                        TechlifyDeleteButtonComponent
                     ],
                 }]
         }] });
@@ -6670,7 +6511,7 @@ class LocationFormComponent extends TechlifyFormComponentInterface {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocationFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: LocationService }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LocationFormComponent, isStandalone: true, selector: "app-location-form", inputs: { model: "model" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"submit(form.value)\" class=\"d-flex flex-column gap-1\">\n  <mat-form-field>\n    <mat-label>Title</mat-label>\n    <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Title\">\n    <mat-error *ngIf=\"isFieldValid('title')\">\n      {{ getErrorMessage('title') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field techlifyFeatureEnabled=\"sub-locations\">\n    <mat-label>Parent</mat-label>\n    <app-searchable-selector formControlName=\"parent_id\" apiUrl='api/inventory-locations'></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Address</mat-label>\n    <input type=\"text\" matInput formControlName=\"address\" placeholder=\"Address\">\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Description</mat-label>\n    <textarea matInput formControlName=\"description\" placeholder=\"Description\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button (click)=\"cancelled.emit()\" [disabled]=\"isWorking\" type=\"button\" mat-flat-button>\n      Cancel\n    </button>\n  </div>\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "ngmodule", type: TechlifyFeatureModule }, { kind: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LocationFormComponent, isStandalone: true, selector: "app-location-form", inputs: { model: "model" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"submit(form.value)\" class=\"d-flex flex-column gap-1\">\n  <mat-form-field>\n    <mat-label>Title</mat-label>\n    <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Title\">\n    <mat-error *ngIf=\"isFieldValid('title')\">\n      {{ getErrorMessage('title') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field techlifyFeatureEnabled=\"sub-locations\">\n    <mat-label>Parent</mat-label>\n    <app-searchable-selector formControlName=\"parent_id\" apiUrl='api/inventory-locations'></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Address</mat-label>\n    <input type=\"text\" matInput formControlName=\"address\" placeholder=\"Address\">\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Description</mat-label>\n    <textarea matInput formControlName=\"description\" placeholder=\"Description\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isWorking\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button (click)=\"cancelled.emit()\" [disabled]=\"isWorking\" type=\"button\" mat-flat-button>\n      Cancel\n    </button>\n  </div>\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$1.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "ngmodule", type: TechlifyFeatureModule }, { kind: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocationFormComponent, decorators: [{
             type: Component,
@@ -6769,7 +6610,7 @@ class LocationStatusChangerComponent extends TechlifyFormComponentInterface {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocationStatusChangerComponent, deps: [{ token: i1.FormValidatorService }, { token: LocationService }, { token: i2$1.FormBuilder }, { token: i1.ErrorHandlerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LocationStatusChangerComponent, isStandalone: true, selector: "app-location-status-changer", inputs: { location: "location" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <mat-form-field>\n    <mat-label>Status</mat-label>\n    <app-searchable-selector apiUrl=\"api/techlify-statuses\"\n      formControlName=\"status_id\" [cache]=\"true\"></app-searchable-selector>\n  </mat-form-field>\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LocationStatusChangerComponent, isStandalone: true, selector: "app-location-status-changer", inputs: { location: "location" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <mat-form-field>\n    <mat-label>Status</mat-label>\n    <app-searchable-selector apiUrl=\"api/techlify-statuses\"\n      formControlName=\"status_id\" [cache]=\"true\"></app-searchable-selector>\n  </mat-form-field>\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocationStatusChangerComponent, decorators: [{
             type: Component,
@@ -6825,7 +6666,7 @@ class LocationListComponent extends TechlifyListingControllerInterface {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocationListComponent, deps: [{ token: LocationService }, { token: i2$1.FormBuilder }, { token: i1.TechlifyFeatureService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LocationListComponent, isStandalone: true, selector: "app-location-list", usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3 mb-0\">\n      <h5 class=\"mb-0\">Locations</h5>\n      <app-location-form-button (saved)=\"reload()\"></app-location-form-button>\n    </div>\n    <form class=\"d-flex justify-content-end align-items-center gap-2\" [formGroup]=\"filterForm\" (submit)=\"reload()\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search locations\" matInput formControlName=\"search\">\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table #table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Title\">\n        <th mat-header-cell mat-sort-header=\"title\" *matHeaderCellDef> Title </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"parent\">\n        <th mat-header-cell mat-sort-header=\"parent\" *matHeaderCellDef> Parent </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.parent?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Address\">\n        <th mat-header-cell mat-sort-header=\"address\" *matHeaderCellDef> Address </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"stock_receipts\">\n        <th mat-header-cell *matHeaderCellDef> Stock Receipts </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span [routerLink]=\"['/inventory/stock-receipts']\" [queryParams]=\"{ location_ids: element.id }\"\n            class='cursor-pointer'>\n            {{element?.stock_receipts_count }} receipt(s)</span>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"stock_issues\">\n        <th mat-header-cell *matHeaderCellDef> Stock Issues </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span [routerLink]=\"['/inventory/stock-issues']\" [queryParams]=\"{ location_ids: element.id }\"\n            class='cursor-pointer'>\n            {{element?.stock_issues_count }} issue(s)</span>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Description\">\n        <th mat-header-cell *matHeaderCellDef> Description </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.description }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef> Status </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-location-status-changer [location]=\"element\"></app-location-status-changer>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2 text-secondary\">\n            <app-techlify-icon role='button' name=\"view\"\n              [routerLink]=\"['/location/locations', element?.id, 'view']\"></app-techlify-icon>\n\n            <app-location-form-button [model]=\"element\" (saved)=\"reload()\"></app-location-form-button>\n\n            <span *ngIf=\"element?.stock_receipts_count == 0 && element?.stock_issues_count == 0\">\n              <app-techlify-delete-button [data]=\"{title: element?.title, type: 'Location'}\" [model]=\"element\"\n                [service]=\"service\" (deleted)=\"reload()\"></app-techlify-delete-button>\n            </span>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: LocationFormButtonComponent, selector: "app-location-form-button", inputs: ["model"], outputs: ["saved"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LocationStatusChangerComponent, selector: "app-location-status-changer", inputs: ["location"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LocationListComponent, isStandalone: true, selector: "app-location-list", usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3 mb-0\">\n      <h5 class=\"mb-0\">Locations</h5>\n      <app-location-form-button (saved)=\"reload()\"></app-location-form-button>\n    </div>\n    <form class=\"d-flex justify-content-end align-items-center gap-2\" [formGroup]=\"filterForm\" (submit)=\"reload()\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search locations\" matInput formControlName=\"search\">\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table #table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n      (matSortChange)=\"sortColumn($event)\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Title\">\n        <th mat-header-cell mat-sort-header=\"title\" *matHeaderCellDef> Title </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"parent\">\n        <th mat-header-cell mat-sort-header=\"parent\" *matHeaderCellDef> Parent </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.parent?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Address\">\n        <th mat-header-cell mat-sort-header=\"address\" *matHeaderCellDef> Address </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"stock_receipts\">\n        <th mat-header-cell *matHeaderCellDef> Stock Receipts </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span [routerLink]=\"['/inventory/stock-receipts']\" [queryParams]=\"{ location_ids: element.id }\"\n            class='cursor-pointer'>\n            {{element?.stock_receipts_count }} receipt(s)</span>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"stock_issues\">\n        <th mat-header-cell *matHeaderCellDef> Stock Issues </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <span [routerLink]=\"['/inventory/stock-issues']\" [queryParams]=\"{ location_ids: element.id }\"\n            class='cursor-pointer'>\n            {{element?.stock_issues_count }} issue(s)</span>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Description\">\n        <th mat-header-cell *matHeaderCellDef> Description </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.description }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef> Status </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-location-status-changer [location]=\"element\"></app-location-status-changer>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2 text-secondary\">\n            <app-techlify-icon role='button' name=\"view\"\n              [routerLink]=\"['/location/locations', element?.id, 'view']\"></app-techlify-icon>\n\n            <app-location-form-button [model]=\"element\" (saved)=\"reload()\"></app-location-form-button>\n\n            <span *ngIf=\"element?.stock_receipts_count == 0 && element?.stock_issues_count == 0\">\n              <app-techlify-delete-button [data]=\"{title: element?.title, type: 'Location'}\" [model]=\"element\"\n                [service]=\"service\" (deleted)=\"reload()\"></app-techlify-delete-button>\n            </span>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.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: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: LocationFormButtonComponent, selector: "app-location-form-button", inputs: ["model"], outputs: ["saved"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LocationStatusChangerComponent, selector: "app-location-status-changer", inputs: ["location"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: i1.TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocationListComponent, decorators: [{
             type: Component,
@@ -7261,7 +7102,7 @@ class ShelfListComponent extends TechlifyListingControllerInterface {
         this.filterForm.get('sort_by')?.setValue(active + '|' + direction);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShelfListComponent, deps: [{ token: ShelfService }, { token: i2$1.FormBuilder }, { token: i4$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ShelfListComponent, isStandalone: true, selector: "app-shelf-list", usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <strong>Shelves</strong>\n      <app-shelf-form-button (saved)=\"modelCreated($event)\"></app-shelf-form-button>\n    </div>\n    <form class=\"d-flex justify-content-end align-items-center gap-2\" [formGroup]=\"filterForm\" (submit)=\"reload()\">\n      <mat-form-field class='fl-md'>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search shelves\" matInput formControlName=\"search\">\n      </mat-form-field>\n      <mat-form-field class='fl-sm'>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector formControlName=\"location_ids\" [multiple]=\"true\" apiUrl=\"api/inventory-locations\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table #table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Name\">\n        <th mat-header-cell mat-sort-header=\"name\" *matHeaderCellDef> Name </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.name }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Location\">\n        <th mat-header-cell mat-sort-header=\"location\" *matHeaderCellDef> Location </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.location?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Type\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"type\"> Type </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.type?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Description\">\n        <th mat-header-cell *matHeaderCellDef> Description </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.description }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Creator\">\n        <th mat-header-cell *matHeaderCellDef> Creator </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2 text-secondary\">\n            <app-shelf-form-button [model]=\"element\" (saved)=\"modelUpdated($event, i)\"></app-shelf-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.name, type: \"Shelf\"}' (deleted)=\"reload()\"></app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: MaterialModule$1 }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.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: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ShelfFormButtonComponent, selector: "app-shelf-form-button", inputs: ["model"], outputs: ["saved"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ShelfListComponent, isStandalone: true, selector: "app-shelf-list", usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <strong>Shelves</strong>\n      <app-shelf-form-button (saved)=\"modelCreated($event)\"></app-shelf-form-button>\n    </div>\n    <form class=\"d-flex justify-content-end align-items-center gap-2\" [formGroup]=\"filterForm\" (submit)=\"reload()\">\n      <mat-form-field class='fl-md'>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search shelves\" matInput formControlName=\"search\">\n      </mat-form-field>\n      <mat-form-field class='fl-sm'>\n        <mat-label>Location</mat-label>\n        <app-searchable-selector formControlName=\"location_ids\" [multiple]=\"true\" apiUrl=\"api/inventory-locations\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table #table mat-table [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n      (matSortChange)=\"onSortChange($event)\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Name\">\n        <th mat-header-cell mat-sort-header=\"name\" *matHeaderCellDef> Name </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.name }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Location\">\n        <th mat-header-cell mat-sort-header=\"location\" *matHeaderCellDef> Location </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.location?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Type\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"type\"> Type </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.type?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Description\">\n        <th mat-header-cell *matHeaderCellDef> Description </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.description }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Creator\">\n        <th mat-header-cell *matHeaderCellDef> Creator </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2 text-secondary\">\n            <app-shelf-form-button [model]=\"element\" (saved)=\"modelUpdated($event, i)\"></app-shelf-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.name, type: \"Shelf\"}' (deleted)=\"reload()\"></app-techlify-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: MaterialModule$1 }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.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: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ShelfFormButtonComponent, selector: "app-shelf-form-button", inputs: ["model"], outputs: ["saved"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShelfListComponent, decorators: [{
             type: Component,
@@ -7328,5 +7169,5 @@ var shelf_module = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { SuppliersListComponent as $, StockIssueProductListComponent as A, StockIssueProductService as B, StockIssueProductFormComponent as C, StockIssueProductFormButtonComponent as D, StockReceiptsModule as E, StockReceiptDeleteButtonComponent as F, StockReceiptPageComponent as G, StockReceiptListComponent as H, InventoryCommonRoutingModule as I, StockReceiptProductsListComponent as J, StockReceiptFormModule as K, LocationService as L, MeasureService as M, StockReceiptFormButtonComponent as N, StockReceiptViewComponent as O, PurchaseOrderService as P, StockReceiptProductFormComponent as Q, StockReceiptProductFormButtonComponent as R, StockIssueService as S, TechlifyFilterComponent as T, StockTransferListComponent as U, StockTransferFormComponent as V, StockTransferFormButtonComponent as W, StockTransferService as X, SupplierModule as Y, SupplierFormButtonComponent as Z, SupplierFormComponent as _, TechlifyFilterModule as a, SupplierTypeService as a0, PayeeSelectorModule as a1, PayeeSelectorComponent as a2, IncidentModule as a3, IncidentService as a4, IncidentListComponent as a5, IncidentFormComponent as a6, IncidentFormButtonComponent as a7, RatingModule as a8, RatingService as a9, RatingListComponent as aa, RatingFormComponent as ab, RatingFormButtonComponent as ac, ExportToExcelButtonComponent as ad, LocationModule as ae, LocationListComponent as af, LocationFormComponent as ag, LocationFormButtonComponent as ah, ShelfModule as ai, ShelfService as aj, ShelfListComponent as ak, ShelfFormComponent as al, ShelfFormButtonComponent as am, MaterialModule as b, LocationSelectorComponent as c, StockIssueFormModule as d, StockIssueFormButtonComponent as e, StockIssuanceDeleteButtonModule as f, StockIssuanceDeleteButtonComponent as g, InventoryCommonModule as h, StockSummaryService as i, ProductModule as j, ProductFormComponent as k, ProductBasicInfoComponent as l, ProductFormButtonComponent as m, ProductQuickSearchComponent as n, ProductSearchModule as o, ProductSearchComponent as p, ProductListComponent as q, ProductService as r, ProductFormService as s, ProductBatchUpdateFormComponent as t, ProductImportPageComponent as u, ProductViewPageComponent as v, StockIssueModule as w, StockIssuePageComponent as x, StockIssuePageModule as y, StockIssueListComponent as z };
-//# sourceMappingURL=techlify-inventory-common-techlify-inventory-common-CqakmnCI.mjs.map
+export { PayeeSelectorComponent as $, StockIssueProductFormComponent as A, StockIssueProductFormButtonComponent as B, StockReceiptsModule as C, StockReceiptPageComponent as D, StockReceiptListComponent as E, StockReceiptProductsListComponent as F, StockReceiptSimpleFormModule as G, StockReceiptFormButtonComponent as H, InventoryCommonRoutingModule as I, StockReceiptViewComponent as J, StockReceiptProductFormComponent as K, LocationService as L, MeasureService as M, StockReceiptProductFormButtonComponent as N, StockTransferListComponent as O, PurchaseOrderService as P, StockTransferFormComponent as Q, StockTransferFormButtonComponent as R, StockIssueService as S, TechlifyFilterComponent as T, StockTransferService as U, SupplierModule as V, SupplierFormButtonComponent as W, SupplierFormComponent as X, SuppliersListComponent as Y, SupplierTypeService as Z, PayeeSelectorModule as _, TechlifyFilterModule as a, IncidentModule as a0, IncidentService as a1, IncidentListComponent as a2, IncidentFormComponent as a3, IncidentFormButtonComponent as a4, RatingModule as a5, RatingService as a6, RatingListComponent as a7, RatingFormComponent as a8, RatingFormButtonComponent as a9, ExportToExcelButtonComponent as aa, LocationModule as ab, LocationListComponent as ac, LocationFormComponent as ad, LocationFormButtonComponent as ae, ShelfModule as af, ShelfService as ag, ShelfListComponent as ah, ShelfFormComponent as ai, ShelfFormButtonComponent as aj, MaterialModule as b, LocationSelectorComponent as c, StockIssueFormModule as d, StockIssueFormButtonComponent as e, InventoryCommonModule as f, StockSummaryService as g, ProductModule as h, ProductFormComponent as i, ProductBasicInfoComponent as j, ProductFormButtonComponent as k, ProductQuickSearchComponent as l, ProductSearchModule as m, ProductSearchComponent as n, ProductListComponent as o, ProductService as p, ProductFormService as q, ProductBatchUpdateFormComponent as r, ProductImportPageComponent as s, ProductViewPageComponent as t, StockIssueModule as u, StockIssuePageComponent as v, StockIssuePageModule as w, StockIssueListComponent as x, StockIssueProductListComponent as y, StockIssueProductService as z };
+//# sourceMappingURL=techlify-inventory-common-techlify-inventory-common-CQSzjNhk.mjs.map