techlify-inventory-common 18.49.0 → 18.51.0

package/fesm2022/{techlify-inventory-common-techlify-inventory-common-Bveawfj2.mjs → techlify-inventory-common-techlify-inventory-common-B_42CQL_.mjs}

@@ -21,7 +21,7 @@ import * as i2 from 'angular-google-charts';
 import { ChartType, GoogleChartsModule } from 'angular-google-charts';
 import * as i2$1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { BehaviorSubject, finalize, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, startWith, lastValueFrom } from 'rxjs';
+import { BehaviorSubject, finalize, debounceTime as debounceTime$1, distinctUntilChanged, startWith, lastValueFrom } from 'rxjs';
 import { __decorate } from 'tslib';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogTitle, MatDialogContent } from '@angular/material/dialog';
@@ -34,13 +34,13 @@ import * as i9 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, finalize as finalize$1 } from 'rxjs/operators';
+import { debounceTime, map, finalize as finalize$1 } from 'rxjs/operators';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import * as i4$2 from '@angular/material/core';
+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 i11$2 from '@angular/material/sort';
+import * as i11$3 from '@angular/material/sort';
 import { MatSortModule, MatSort, MatSortHeader } from '@angular/material/sort';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i8$2 from '@angular/material/checkbox';
@@ -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$2.MatDialog }, { token: i1.FilterService }, { token: i1$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.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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$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: i9.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$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: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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 });
+    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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$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: i9.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: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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()
@@ -847,7 +847,7 @@ let ProductListComponent = class ProductListComponent extends TechlifyListCompon
         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$2.MatDialog }, { token: i1$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        <!-- Average Cost Column -->\n        <ng-container matColumnDef=\"average_cost\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Average Cost</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.average_cost | currency }}</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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.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        <!-- Average Cost Column -->\n        <ng-container matColumnDef=\"average_cost\">\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>Average Cost</th>\n          <td mat-cell *matCellDef=\"let element\">{{ element.average_cost | currency }}</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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.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()
@@ -1082,14 +1082,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+class StockReceiptService extends TechlifyService {
+    constructor(httpService) {
+        super(httpService, 'stock-receipts');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
 class LocationService extends TechlifyService {
     httpService;
     constructor(httpService) {
         super(httpService, 'inventory-locations');
         this.httpService = httpService;
     }
-    count() {
-        return this.index().pipe(map((res) => res.data.length));
+    count(params) {
+        return this.index(params).pipe(map((res) => res.data.length));
     }
     /**
      * @todo remove this function from here
@@ -1110,168 +1124,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1.HttpService }] });
 
-class LocationSelectorComponent {
-    locationService;
-    featureService;
-    appearance = input('outline');
-    label = input('Location');
-    placeholder = input('Select a location');
-    hint = input();
-    includeNone = input(true);
-    isSubLocationEnabled = signal(false);
-    locations = [];
-    selectedValue = null;
-    isDisabled = false;
-    searchControl = new FormControl('');
-    onChange = () => { };
-    onTouched = () => { };
-    constructor(locationService, featureService) {
-        this.locationService = locationService;
-        this.featureService = featureService;
-    }
-    ngOnInit() {
-        this.isSubLocationEnabled.set(this.featureService.isFeatureExists('sub-locations'));
-        this.loadData();
-        this.setupSearch();
-    }
-    setupSearch() {
-        this.searchControl.valueChanges.pipe(debounceTime(400), distinctUntilChanged()).subscribe((value) => {
-            this.loadData(value);
-        });
-    }
-    loadData(search = null) {
-        const params = {};
-        if (search) {
-            params.search = search;
-        }
-        this.locationService.index(params, true).subscribe({
-            next: (response) => {
-                const flatLocations = response.data;
-                this.locations = this.isSubLocationEnabled()
-                    ? this.buildHierarchy(flatLocations)
-                    : flatLocations;
-            }
-        });
-    }
-    /**
-     * To prevent recursive calls in the api while trying to get
-     * parent and children of a location, i've opted to have the ui
-     * build the hierarchy of locations
-     */
-    buildHierarchy(locations) {
-        const locationMap = new Map();
-        locations.forEach(location => locationMap.set(location.id, location));
-        // Calculate depth for each location with cycle detection
-        const getDepth = (location, visited = new Set()) => {
-            if (!location.parent_id)
-                return 0;
-            if (visited.has(location.id))
-                return 0; // Prevent infinite loop if parent is same as child
-            visited.add(location.id); // Take note of visited locations
-            const parent = locationMap.get(location.parent_id);
-            if (!parent)
-                return 0;
-            return 1 + getDepth(parent, visited);
-        };
-        // Build hierarchical list with depths
-        const withDepths = locations.map(location => ({
-            id: location.id,
-            title: location.title,
-            parent_id: location.parent_id,
-            depth: getDepth(location)
-        }));
-        // Sort: root items first, then recursively add children
-        const result = [];
-        const added = new Set(); // Prevent infinite loop on cycles
-        // Find all "roots" - items with no parent, OR items whose parent is missing from the list
-        const rootIds = withDepths
-            .filter(location => !location.parent_id || !locationMap.has(location.parent_id))
-            .map(location => location.id);
-        const addWithChildren = (parentId, depth) => {
-            // If parentId is null, we look for our identified roots. 
-            // Otherwise we look for children of the parentId.
-            const itemsToAdd = parentId === null
-                ? withDepths.filter(location => rootIds.includes(location.id))
-                : withDepths.filter(location => location.parent_id === parentId);
-            itemsToAdd
-                .filter(location => !added.has(location.id))
-                .sort((a, b) => a.title.localeCompare(b.title))
-                .forEach(location => {
-                added.add(location.id);
-                result.push(location);
-                addWithChildren(location.id, depth + 1);
-            });
-        };
-        addWithChildren(null, 0);
-        // If there are still items not added (due to circular references A->B->A), add them as roots
-        if (added.size < withDepths.length) {
-            withDepths
-                .filter(location => !added.has(location.id))
-                .sort((a, b) => a.title.localeCompare(b.title))
-                .forEach(location => {
-                added.add(location.id);
-                result.push(location);
-                // Try to add children for this "forced root" in case it has valid children
-                addWithChildren(location.id, location.depth + 1);
-            });
-        }
-        return result;
-    }
-    onSelectionChange(value) {
-        this.selectedValue = value;
-        this.onChange(value);
-        this.onTouched();
-    }
-    writeValue(value) {
-        this.selectedValue = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.isDisabled = isDisabled;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocationSelectorComponent, deps: [{ token: LocationService }, { token: i1.TechlifyFeatureService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LocationSelectorComponent, isStandalone: true, selector: "app-location-selector", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, includeNone: { classPropertyName: "includeNone", publicName: "includeNone", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                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\" (selectionChange)=\"onSelectionChange($event.value)\">\n\n    <div class=\"sticky-search-container\">\n      <input [formControl]=\"searchControl\" placeholder=\"Search...\" class=\"search-input\"\n        (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  \n  <mat-hint *ngIf=\"hint()\">\n    {{ hint() }}\n  </mat-hint>\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: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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,
-            args: [{ selector: 'app-location-selector', standalone: true, imports: [
-                        CommonModule,
-                        MaterialModule,
-                        ReactiveFormsModule
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => LocationSelectorComponent),
-                            multi: true
-                        }
-                    ], 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\" (selectionChange)=\"onSelectionChange($event.value)\">\n\n    <div class=\"sticky-search-container\">\n      <input [formControl]=\"searchControl\" placeholder=\"Search...\" class=\"search-input\"\n        (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  \n  <mat-hint *ngIf=\"hint()\">\n    {{ hint() }}\n  </mat-hint>\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 StockReceiptService extends TechlifyService {
-    constructor(httpService) {
-        super(httpService, 'stock-receipts');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpService }] });
-
 class StockReceiptSingleProductFormComponent extends TechlifyFormComponent {
     formValidatorService;
     service;
@@ -1319,7 +1171,7 @@ class StockReceiptSingleProductFormComponent extends TechlifyFormComponent {
     ngOnInit() {
         this.product = this.data?.product;
         const stockReceipt = this.data?.model;
-        this.locationService.count().subscribe((count) => {
+        this.locationService.count({ status_id: '1' }).subscribe((count) => {
             this.locationsCountValue = count;
         });
         this.form
@@ -1407,7 +1259,7 @@ class StockReceiptSingleProductFormComponent extends TechlifyFormComponent {
         this.form.get('amount')?.setValue(amount);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptSingleProductFormComponent, deps: [{ token: i1.FormValidatorService }, { token: StockReceiptService }, { token: i2$1.FormBuilder }, { token: i1.DateUtils }, { token: LocationService }, { token: i1$2.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StockReceiptSingleProductFormComponent, isStandalone: true, selector: "app-stock-receipt-single-product-form", usesInheritance: true, ngImport: i0, template: "<mat-card-content>\n  <h5 class=\"text-center\">\n    Stock Receipt Form\n\n    @if (data.product) {\n    for {{data.product?.name}}\n    }\n  </h5>\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\"\n      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\"\n          (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)=\"dialogRef.close()\" mat-flat-button type=\"button\">Cancel</button>\n    </div>\n  </form>\n</mat-card-content>", styles: [""], 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: 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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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: MatDialogModule }, { kind: "ngmodule", type: PayeeSelectorModule }, { kind: "component", type: PayeeSelectorComponent, selector: "app-payee-selector", inputs: ["label", "appearance", "required", "showAddButton", "multiple"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "ngmodule", type: TechlifyFeatureModule }, { kind: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }, { kind: "component", type: LocationSelectorComponent, selector: "app-location-selector", inputs: ["appearance", "label", "placeholder", "hint", "includeNone"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "ngmodule", type: RouterModule }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StockReceiptSingleProductFormComponent, isStandalone: true, selector: "app-stock-receipt-single-product-form", usesInheritance: true, ngImport: i0, template: "<mat-card-content>\n  <h5 class=\"text-center\">\n    Stock Receipt Form\n\n    @if (data.product) {\n    for {{data.product?.name}}\n    }\n  </h5>\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    <mat-form-field *ngIf=\"locationsCount > 1\" appearance=\"fill\">\n      <mat-label>Location</mat-label>\n      <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations?status_ids=1\"\n        [selectedValue]=\"data.model?.stock_receipt_products?.[0]?.location\" titleField=\"title\"></app-searchable-selector>\n    </mat-form-field>\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\"\n          (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)=\"dialogRef.close()\" mat-flat-button type=\"button\">Cancel</button>\n    </div>\n  </form>\n</mat-card-content>", styles: [""], 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: 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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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: MatDialogModule }, { kind: "ngmodule", type: PayeeSelectorModule }, { kind: "component", type: PayeeSelectorComponent, selector: "app-payee-selector", inputs: ["label", "appearance", "required", "showAddButton", "multiple"] }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "ngmodule", type: TechlifyFeatureModule }, { kind: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "ngmodule", type: RouterModule }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptSingleProductFormComponent, decorators: [{
             type: Component,
@@ -1419,10 +1271,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         PayeeSelectorModule,
                         SearchableSelectorModule,
                         TechlifyFeatureModule,
-                        LocationSelectorComponent,
                         TechlifyIconModule,
                         RouterModule,
-                    ], template: "<mat-card-content>\n  <h5 class=\"text-center\">\n    Stock Receipt Form\n\n    @if (data.product) {\n    for {{data.product?.name}}\n    }\n  </h5>\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\"\n      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\"\n          (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)=\"dialogRef.close()\" mat-flat-button type=\"button\">Cancel</button>\n    </div>\n  </form>\n</mat-card-content>" }]
+                    ], template: "<mat-card-content>\n  <h5 class=\"text-center\">\n    Stock Receipt Form\n\n    @if (data.product) {\n    for {{data.product?.name}}\n    }\n  </h5>\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    <mat-form-field *ngIf=\"locationsCount > 1\" appearance=\"fill\">\n      <mat-label>Location</mat-label>\n      <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations?status_ids=1\"\n        [selectedValue]=\"data.model?.stock_receipt_products?.[0]?.location\" titleField=\"title\"></app-searchable-selector>\n    </mat-form-field>\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\"\n          (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)=\"dialogRef.close()\" mat-flat-button type=\"button\">Cancel</button>\n    </div>\n  </form>\n</mat-card-content>" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: StockReceiptService }, { type: i2$1.FormBuilder }, { type: i1.DateUtils }, { type: LocationService }, { type: i1$2.MatDialogRef, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -1505,7 +1356,7 @@ class StockReceiptProductFormComponent extends TechlifyFormComponent {
         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$2.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\" 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>\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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }], 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\" 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?status_ids=1\"\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>\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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockReceiptProductFormComponent, decorators: [{
             type: Component,
@@ -1516,7 +1367,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         SearchableSelectorModule,
                         MatDialogTitle,
                         MatDialogContent,
-                    ], 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\" 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>\n" }]
+                    ], 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\" 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?status_ids=1\"\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>\n" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: StockReceiptProductService }, { type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1672,7 +1523,7 @@ 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.0.0", version: "18.2.14", type: StockReceiptProductsListComponent, selector: "app-stock-receipt-product-list", inputs: { filtersInput: { classPropertyName: "filtersInput", 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 }, product: { classPropertyName: "product", publicName: "product", 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-form-button [component]=\"stockReceiptSingleProductForm()\" [data]=\"{product: product()}\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true);\"></app-techlify-form-button>\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\n          @if (element?.stock_receipt?.stock_transfer) {\n          <span class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n          } @else {\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', 'products', 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          }\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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$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: "component", type: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StockReceiptProductsListComponent, selector: "app-stock-receipt-product-list", inputs: { filtersInput: { classPropertyName: "filtersInput", 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 }, product: { classPropertyName: "product", publicName: "product", 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-form-button [component]=\"stockReceiptSingleProductForm()\" [data]=\"{product: product()}\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true);\"></app-techlify-form-button>\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\n          @if (element?.stock_receipt?.stock_transfer) {\n          <span class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n          } @else {\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', 'products', 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          }\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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$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: "component", type: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 StockReceiptProductsListComponent = __decorate([
     UntilDestroy()
@@ -1723,7 +1574,7 @@ class StockIssueProductFormComponent extends TechlifyFormComponent {
     }
     ngOnInit() {
         this.form.patchValue({ stock_issue_id: this.data.stockIssueId });
-        this.form.get('location_from_id')?.valueChanges.pipe(debounceTime$1(50), distinctUntilChanged$1()).subscribe((val) => {
+        this.form.get('location_from_id')?.valueChanges.pipe(debounceTime$1(50), distinctUntilChanged()).subscribe((val) => {
             this.resetBatchSelector(val);
         });
         const product = this.data.model;
@@ -1759,7 +1610,7 @@ class StockIssueProductFormComponent extends TechlifyFormComponent {
         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$2.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?.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\" 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_from_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_from_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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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?.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\" 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 From</mat-label>\n            <app-searchable-selector formControlName=\"location_from_id\" apiUrl=\"api/inventory-locations?status_ids=1\"\n                [selectedValue]=\"data.stockIssueProduct?.location\" titleField=\"title\"></app-searchable-selector>\n        </mat-form-field>\n\n        <ng-container *ngIf=\"form.value?.location_from_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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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,
@@ -1771,7 +1622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TechlifyFeatureModule,
                         MatDialogTitle,
                         MatDialogContent,
-                    ], 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?.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\" 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_from_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_from_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" }]
+                    ], 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?.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\" 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 From</mat-label>\n            <app-searchable-selector formControlName=\"location_from_id\" apiUrl=\"api/inventory-locations?status_ids=1\"\n                [selectedValue]=\"data.stockIssueProduct?.location\" titleField=\"title\"></app-searchable-selector>\n        </mat-form-field>\n\n        <ng-container *ngIf=\"form.value?.location_from_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" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: StockIssueProductService }, { type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1825,7 +1676,7 @@ class StockIssueSingleProductFormComponent extends TechlifyFormComponent {
             date: { required: 'The date field is required.' },
             quantity: { required: 'The quantity field is required.' },
             product_id: { required: 'The product field is required.' },
-            location_from_id: { required: 'The location field is required.' },
+            location_from_id: { required: 'The location from field is required.' },
             recipient_id: { required: 'Please select a recipient.' },
         };
         this.form = this.formBuilder.group({
@@ -1842,10 +1693,10 @@ class StockIssueSingleProductFormComponent extends TechlifyFormComponent {
     ngOnInit() {
         this.product = this.data?.product;
         this.stockIssue = this.data?.model;
-        this.form.get('location_from_id')?.valueChanges?.pipe(debounceTime$1(50), distinctUntilChanged$1()).subscribe((val) => {
+        this.form.get('location_from_id')?.valueChanges?.pipe(debounceTime$1(50), distinctUntilChanged()).subscribe((val) => {
             this.resetBatchSelector(val);
         });
-        this.locationService.index().subscribe((response) => {
+        this.locationService.index({ status_ids: '1' }).subscribe((response) => {
             const locations = response?.data || [];
             this.locationsCountValue = locations.length;
             this.form.get('location_from_id')?.setValidators(locations.length > 0 ? Validators.required : null);
@@ -1951,7 +1802,7 @@ class StockIssueSingleProductFormComponent extends TechlifyFormComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueSingleProductFormComponent, deps: [{ token: i1.FormValidatorService }, { token: StockIssueService }, { token: i2$1.FormBuilder }, { token: i1.DateUtils }, { token: LocationService }, { token: i1.FormConfigurationFormService }, { token: i1$2.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StockIssueSingleProductFormComponent, isStandalone: true, selector: "app-stock-issue-single-product-form", viewQueries: [{ propertyName: "batchSearchableSelector", first: true, predicate: ["batchSearchableSelector"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-card-content>\n  <div class=\"d-flex flex-row justify-content-between align-items-center gap-1\">\n    <h5 class=\"text-center mb-0\">\n      Stock Issue form\n\n      @if (data.product) {\n      for {{ data.product?.name }}\n      }\n    </h5>\n    <app-form-configuration-for-form formCode=\"stock-issue\"\n      (click)=\"dialogRef.close()\"></app-form-configuration-for-form>\n  </div>\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        required (selectedValueChange)=\"onProductChange($event)\"></app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('product_id')\">\n        {{ getErrorMessage('product_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field *ngIf=\"locationsCount > 1\">\n      <mat-label>Location From</mat-label>\n      <app-searchable-selector formControlName=\"location_from_id\" apiUrl=\"api/inventory-locations\"\n        required [selectedValue]=\"stockIssue?.stock_issue_products[0]?.location\"></app-searchable-selector>\n      <mat-hint>Which warehouse are we taking stock from?</mat-hint>\n      <mat-error *ngIf=\"isFieldValid('location_from_id')\">\n        {{ getErrorMessage('location_from_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"locationsCount > 1 && form.value?.location_from_id && batchesApiUrl\">\n      <mat-form-field techlifyFeatureEnabled=\"product-batch-numbers\">\n        <mat-label>Batch</mat-label>\n        <app-searchable-selector #batchSearchableSelector formControlName=\"batch_id\" [apiUrl]=\"batchesApiUrl\"\n          [enableSearch]=\"false\" (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 *ngIf=\"formConfigurationUtilityService.getFieldEnabled('recipient_id')\">\n      <mat-label>Recipient\n        <sup *ngIf=\"formConfigurationUtilityService.getFieldRequired('recipient_id')\">*</sup>\n      </mat-label>\n      <app-searchable-selector formControlName=\"recipient_id\" apiUrl=\"api/recipients\"\n        titleField=\"name\"></app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('recipient_id')\">\n        {{ getErrorMessage('recipient_id') }}\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)=\"dialogRef.close()\" mat-flat-button type=\"button\">Cancel</button>\n    </div>\n  </form>\n</mat-card-content>", styles: [""], 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.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: "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: 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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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: MatDialogModule }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "ngmodule", type: TechlifyFeatureModule }, { kind: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }, { kind: "ngmodule", type: FormConfigurationForFormModule }, { kind: "component", type: i1.FormConfigurationForFormComponent, selector: "app-form-configuration-for-form", inputs: ["formCode"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StockIssueSingleProductFormComponent, isStandalone: true, selector: "app-stock-issue-single-product-form", viewQueries: [{ propertyName: "batchSearchableSelector", first: true, predicate: ["batchSearchableSelector"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-card-content>\n  <div class=\"d-flex flex-row justify-content-between align-items-center gap-1\">\n    <h5 class=\"text-center mb-0\">\n      Stock Issue form\n\n      @if (data.product) {\n      for {{ data.product?.name }}\n      }\n    </h5>\n    <app-form-configuration-for-form formCode=\"stock-issue\"\n      (click)=\"dialogRef.close()\"></app-form-configuration-for-form>\n  </div>\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        required (selectedValueChange)=\"onProductChange($event)\"></app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('product_id')\">\n        {{ getErrorMessage('product_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field *ngIf=\"locationsCount > 1\">\n      <mat-label>Location From</mat-label>\n      <app-searchable-selector formControlName=\"location_from_id\" apiUrl=\"api/inventory-locations?status_ids=1\"\n        required [selectedValue]=\"stockIssue?.stock_issue_products[0]?.location\"></app-searchable-selector>\n      <mat-hint>Which warehouse are we taking stock from?</mat-hint>\n      <mat-error *ngIf=\"isFieldValid('location_from_id')\">\n        {{ getErrorMessage('location_from_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"locationsCount > 1 && form.value?.location_from_id && batchesApiUrl\">\n      <mat-form-field techlifyFeatureEnabled=\"product-batch-numbers\">\n        <mat-label>Batch</mat-label>\n        <app-searchable-selector #batchSearchableSelector formControlName=\"batch_id\" [apiUrl]=\"batchesApiUrl\"\n          [enableSearch]=\"false\" (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 *ngIf=\"formConfigurationUtilityService.getFieldEnabled('recipient_id')\">\n      <mat-label>Recipient\n        <sup *ngIf=\"formConfigurationUtilityService.getFieldRequired('recipient_id')\">*</sup>\n      </mat-label>\n      <app-searchable-selector formControlName=\"recipient_id\" apiUrl=\"api/recipients\"\n        titleField=\"name\"></app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('recipient_id')\">\n        {{ getErrorMessage('recipient_id') }}\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)=\"dialogRef.close()\" mat-flat-button type=\"button\">Cancel</button>\n    </div>\n  </form>\n</mat-card-content>", styles: [""], 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.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: "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: 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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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: MatDialogModule }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "ngmodule", type: TechlifyFeatureModule }, { kind: "directive", type: i1.TechlifyFeatureEnabledDirective, selector: "[techlifyFeatureEnabled]", inputs: ["techlifyFeatureEnabled"] }, { kind: "ngmodule", type: FormConfigurationForFormModule }, { kind: "component", type: i1.FormConfigurationForFormComponent, selector: "app-form-configuration-for-form", inputs: ["formCode"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueSingleProductFormComponent, decorators: [{
             type: Component,
@@ -1963,7 +1814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         SearchableSelectorModule,
                         TechlifyFeatureModule,
                         FormConfigurationForFormModule,
-                    ], template: "<mat-card-content>\n  <div class=\"d-flex flex-row justify-content-between align-items-center gap-1\">\n    <h5 class=\"text-center mb-0\">\n      Stock Issue form\n\n      @if (data.product) {\n      for {{ data.product?.name }}\n      }\n    </h5>\n    <app-form-configuration-for-form formCode=\"stock-issue\"\n      (click)=\"dialogRef.close()\"></app-form-configuration-for-form>\n  </div>\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        required (selectedValueChange)=\"onProductChange($event)\"></app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('product_id')\">\n        {{ getErrorMessage('product_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field *ngIf=\"locationsCount > 1\">\n      <mat-label>Location From</mat-label>\n      <app-searchable-selector formControlName=\"location_from_id\" apiUrl=\"api/inventory-locations\"\n        required [selectedValue]=\"stockIssue?.stock_issue_products[0]?.location\"></app-searchable-selector>\n      <mat-hint>Which warehouse are we taking stock from?</mat-hint>\n      <mat-error *ngIf=\"isFieldValid('location_from_id')\">\n        {{ getErrorMessage('location_from_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"locationsCount > 1 && form.value?.location_from_id && batchesApiUrl\">\n      <mat-form-field techlifyFeatureEnabled=\"product-batch-numbers\">\n        <mat-label>Batch</mat-label>\n        <app-searchable-selector #batchSearchableSelector formControlName=\"batch_id\" [apiUrl]=\"batchesApiUrl\"\n          [enableSearch]=\"false\" (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 *ngIf=\"formConfigurationUtilityService.getFieldEnabled('recipient_id')\">\n      <mat-label>Recipient\n        <sup *ngIf=\"formConfigurationUtilityService.getFieldRequired('recipient_id')\">*</sup>\n      </mat-label>\n      <app-searchable-selector formControlName=\"recipient_id\" apiUrl=\"api/recipients\"\n        titleField=\"name\"></app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('recipient_id')\">\n        {{ getErrorMessage('recipient_id') }}\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)=\"dialogRef.close()\" mat-flat-button type=\"button\">Cancel</button>\n    </div>\n  </form>\n</mat-card-content>" }]
+                    ], template: "<mat-card-content>\n  <div class=\"d-flex flex-row justify-content-between align-items-center gap-1\">\n    <h5 class=\"text-center mb-0\">\n      Stock Issue form\n\n      @if (data.product) {\n      for {{ data.product?.name }}\n      }\n    </h5>\n    <app-form-configuration-for-form formCode=\"stock-issue\"\n      (click)=\"dialogRef.close()\"></app-form-configuration-for-form>\n  </div>\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        required (selectedValueChange)=\"onProductChange($event)\"></app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('product_id')\">\n        {{ getErrorMessage('product_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field *ngIf=\"locationsCount > 1\">\n      <mat-label>Location From</mat-label>\n      <app-searchable-selector formControlName=\"location_from_id\" apiUrl=\"api/inventory-locations?status_ids=1\"\n        required [selectedValue]=\"stockIssue?.stock_issue_products[0]?.location\"></app-searchable-selector>\n      <mat-hint>Which warehouse are we taking stock from?</mat-hint>\n      <mat-error *ngIf=\"isFieldValid('location_from_id')\">\n        {{ getErrorMessage('location_from_id') }}\n      </mat-error>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"locationsCount > 1 && form.value?.location_from_id && batchesApiUrl\">\n      <mat-form-field techlifyFeatureEnabled=\"product-batch-numbers\">\n        <mat-label>Batch</mat-label>\n        <app-searchable-selector #batchSearchableSelector formControlName=\"batch_id\" [apiUrl]=\"batchesApiUrl\"\n          [enableSearch]=\"false\" (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 *ngIf=\"formConfigurationUtilityService.getFieldEnabled('recipient_id')\">\n      <mat-label>Recipient\n        <sup *ngIf=\"formConfigurationUtilityService.getFieldRequired('recipient_id')\">*</sup>\n      </mat-label>\n      <app-searchable-selector formControlName=\"recipient_id\" apiUrl=\"api/recipients\"\n        titleField=\"name\"></app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('recipient_id')\">\n        {{ getErrorMessage('recipient_id') }}\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)=\"dialogRef.close()\" mat-flat-button type=\"button\">Cancel</button>\n    </div>\n  </form>\n</mat-card-content>" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: StockIssueService }, { type: i2$1.FormBuilder }, { type: i1.DateUtils }, { type: LocationService }, { type: i1.FormConfigurationFormService }, { type: i1$2.MatDialogRef, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -2003,9 +1854,10 @@ let StockIssueProductListComponent = class StockIssueProductListComponent extend
         { label: 'SKU', def: 'sku', isSelected: true, isEditable: false },
         { label: 'Date', def: 'date', isSelected: true, isEditable: false },
         { label: 'Quantity', def: 'quantity', isSelected: true, isEditable: false },
-        { label: 'Total', def: 'total', isSelected: true, isEditable: false },
+        { label: 'Total Cost (AVCO)', def: 'total_avco', isSelected: true, isEditable: true },
+        { label: 'Total Cost (FIFO)', def: 'total_fifo_value', isSelected: true, isEditable: true },
         { label: 'Measure', def: 'measure', isSelected: true, isEditable: true },
-        { label: 'Location', def: 'location', isSelected: true, isEditable: false },
+        { label: 'Location From', def: 'location', isSelected: true, isEditable: false },
         { label: 'Related', def: 'related', isSelected: true, isEditable: false },
         { label: 'Particulars', def: 'particulars', isSelected: true, isEditable: false },
         { label: 'Creator', def: 'creator', isSelected: false, isEditable: true },
@@ -2032,8 +1884,11 @@ let StockIssueProductListComponent = class StockIssueProductListComponent extend
     get totalQuantity() {
         return this.models.reduce((sum, model) => sum + Number(model?.quantity ?? 0), 0);
     }
-    get grandTotal() {
-        return this.models.reduce((sum, model) => sum + Number(model?.total ?? 0), 0);
+    get grandTotalAvco() {
+        return this.models.reduce((sum, model) => sum + Number(model?.total_avco ?? 0), 0);
+    }
+    get grandTotalFifoValue() {
+        return this.models.reduce((sum, model) => sum + Number(model?.total_fifo_value ?? 0), 0);
     }
     get footerColumns() {
         return this.displayedColumns.map(col => `footer-${col}`);
@@ -2108,14 +1963,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 }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StockIssueProductListComponent, selector: "app-stock-issue-products-list", inputs: { filtersInput: { classPropertyName: "filtersInput", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, isProductView: { classPropertyName: "isProductView", publicName: "isProductView", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", 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 }, issuableData: { classPropertyName: "issuableData", publicName: "issuableData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedColumns: "selectedColumnsChange", listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, providers: [DatePipe], 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-form-button [component]=\"stockIssueSingleProductForm()\" [data]=\"{ product: product() }\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true)\"></app-techlify-form-button>\n    <app-column-selector *ngIf=\"columnConfig.length > 0\" mode=\"icon\" [columnConfigs]=\"columnConfig\"\n      [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\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      <!-- Average Price Column -->\n      <ng-container matColumnDef=\"average_cost\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Average Cost</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.average_cost | currency: 'USD'}}\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      <!-- Total Column -->\n      <ng-container matColumnDef=\"total\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.total | currency }}\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_from_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n          <br>\n          <span *ngIf=\"element?.stock_issue?.recipient\">\n            <small class=\"text-secondary\"> received by {{ element?.stock_issue?.recipient?.name }} </small>\n          </span>\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\n          @if (element.stock_issue?.stock_transfer) {\n          <span class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n          } @else {\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', 'products', element?.id, 'view']\"></app-techlify-icon>\n            <app-techlify-form-button [component]=\"stockIssueProductForm()\" [model]=\"element\"\n              [data]=\"{ stockIssueId: element?.stock_issue_id, product: element?.product }\" width=\"500px\"\n              (saved)=\"modelsUpdatedById($event);listUpdated.emit(true)\">\n            </app-techlify-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.product?.name, type: \"Stock Issue Product\"}'\n              (deleted)=\"reload();listUpdated.emit(true)\"></app-techlify-delete-button>\n          </div>\n          }\n\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-average_cost\">\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-total\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ grandTotal | currency }}</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: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.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: i1$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.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: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { 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.0.0", version: "18.2.14", type: StockIssueProductListComponent, selector: "app-stock-issue-products-list", inputs: { filtersInput: { classPropertyName: "filtersInput", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, isProductView: { classPropertyName: "isProductView", publicName: "isProductView", isSignal: true, isRequired: false, transformFunction: null }, product: { classPropertyName: "product", publicName: "product", 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 }, issuableData: { classPropertyName: "issuableData", publicName: "issuableData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedColumns: "selectedColumnsChange", listUpdated: "listUpdated", columnConfigReady: "columnConfigReady" }, providers: [DatePipe], 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-form-button [component]=\"stockIssueSingleProductForm()\" [data]=\"{ product: product() }\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true)\"></app-techlify-form-button>\n    <app-column-selector *ngIf=\"columnConfig.length > 0\" mode=\"icon\" [columnConfigs]=\"columnConfig\"\n      [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\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      <!-- Average Price Column -->\n      <ng-container matColumnDef=\"average_cost\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Average Cost</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.average_cost | currency: 'USD'}}\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      <!-- Total Cost (AVCO) Column -->\n      <ng-container matColumnDef=\"total_avco\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Cost (AVCO)</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.total_avco | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Cost (FIFO) Column -->\n      <ng-container matColumnDef=\"total_fifo_value\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Cost (FIFO)</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.total_fifo_value | currency }}\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 From</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_from_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n          <br>\n          <span *ngIf=\"element?.stock_issue?.recipient\">\n            <small class=\"text-secondary\"> received by {{ element?.stock_issue?.recipient?.name }} </small>\n          </span>\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\n          @if (element.stock_issue?.stock_transfer) {\n          <span class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n          } @else {\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', 'products', element?.id, 'view']\"></app-techlify-icon>\n            <app-techlify-form-button [component]=\"stockIssueProductForm()\" [model]=\"element\"\n              [data]=\"{ stockIssueId: element?.stock_issue_id, product: element?.product }\" width=\"500px\"\n              (saved)=\"modelsUpdatedById($event);listUpdated.emit(true)\">\n            </app-techlify-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.product?.name, type: \"Stock Issue Product\"}'\n              (deleted)=\"reload();listUpdated.emit(true)\"></app-techlify-delete-button>\n          </div>\n          }\n\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-average_cost\">\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-total_avco\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ grandTotalAvco | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-total_fifo_value\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ grandTotalFifoValue | currency }}</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: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.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: i1$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.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: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { 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 });
 };
 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', providers: [DatePipe], 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-form-button [component]=\"stockIssueSingleProductForm()\" [data]=\"{ product: product() }\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true)\"></app-techlify-form-button>\n    <app-column-selector *ngIf=\"columnConfig.length > 0\" mode=\"icon\" [columnConfigs]=\"columnConfig\"\n      [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\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      <!-- Average Price Column -->\n      <ng-container matColumnDef=\"average_cost\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Average Cost</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.average_cost | currency: 'USD'}}\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      <!-- Total Column -->\n      <ng-container matColumnDef=\"total\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.total | currency }}\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_from_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n          <br>\n          <span *ngIf=\"element?.stock_issue?.recipient\">\n            <small class=\"text-secondary\"> received by {{ element?.stock_issue?.recipient?.name }} </small>\n          </span>\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\n          @if (element.stock_issue?.stock_transfer) {\n          <span class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n          } @else {\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', 'products', element?.id, 'view']\"></app-techlify-icon>\n            <app-techlify-form-button [component]=\"stockIssueProductForm()\" [model]=\"element\"\n              [data]=\"{ stockIssueId: element?.stock_issue_id, product: element?.product }\" width=\"500px\"\n              (saved)=\"modelsUpdatedById($event);listUpdated.emit(true)\">\n            </app-techlify-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.product?.name, type: \"Stock Issue Product\"}'\n              (deleted)=\"reload();listUpdated.emit(true)\"></app-techlify-delete-button>\n          </div>\n          }\n\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-average_cost\">\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-total\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ grandTotal | currency }}</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', providers: [DatePipe], 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-form-button [component]=\"stockIssueSingleProductForm()\" [data]=\"{ product: product() }\" width=\"500px\"\n      (saved)=\"modelCreated($event);listUpdated.emit(true)\"></app-techlify-form-button>\n    <app-column-selector *ngIf=\"columnConfig.length > 0\" mode=\"icon\" [columnConfigs]=\"columnConfig\"\n      [(selectedColumns)]=\"selectedColumns\"></app-column-selector>\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      <!-- Average Price Column -->\n      <ng-container matColumnDef=\"average_cost\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Average Cost</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.average_cost | currency: 'USD'}}\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      <!-- Total Cost (AVCO) Column -->\n      <ng-container matColumnDef=\"total_avco\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Cost (AVCO)</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.total_avco | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Total Cost (FIFO) Column -->\n      <ng-container matColumnDef=\"total_fifo_value\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Total Cost (FIFO)</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.total_fifo_value | currency }}\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 From</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a class=\"text-decoration-none text-dark\"\n            [routerLink]=\"['/inventory/locations', element?.location_from_id, 'view']\">\n            {{ element?.location?.title }}\n          </a>\n          <br>\n          <span *ngIf=\"element?.stock_issue?.recipient\">\n            <small class=\"text-secondary\"> received by {{ element?.stock_issue?.recipient?.name }} </small>\n          </span>\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\n          @if (element.stock_issue?.stock_transfer) {\n          <span class=\"badge rounded-pill text-bg-secondary\">Stock Transfer</span>\n          } @else {\n          <div class=\"d-flex gap-1 text-secondary\">\n            <app-techlify-icon name=\"view\" size=\"md\"\n              [routerLink]=\"['/inventory', 'stock-issues', 'products', element?.id, 'view']\"></app-techlify-icon>\n            <app-techlify-form-button [component]=\"stockIssueProductForm()\" [model]=\"element\"\n              [data]=\"{ stockIssueId: element?.stock_issue_id, product: element?.product }\" width=\"500px\"\n              (saved)=\"modelsUpdatedById($event);listUpdated.emit(true)\">\n            </app-techlify-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]='{title: element?.product?.name, type: \"Stock Issue Product\"}'\n              (deleted)=\"reload();listUpdated.emit(true)\"></app-techlify-delete-button>\n          </div>\n          }\n\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-average_cost\">\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-total_avco\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ grandTotalAvco | currency }}</strong></td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"footer-total_fifo_value\">\n        <td mat-footer-cell *matFooterCellDef><strong>{{ grandTotalFifoValue | currency }}</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 }, { type: i3.DatePipe }] });
 
 class StockTransferService extends TechlifyService {
@@ -2180,7 +2035,7 @@ class StockTransferFormComponent extends TechlifyFormComponent {
         return data;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockTransferFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: StockTransferService }, { token: i1$2.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockTransferFormComponent, isStandalone: true, selector: "app-stock-transfer-form", inputs: { productId: "productId", locationFrom: "locationFrom" }, usesInheritance: true, ngImport: i0, template: "<div class=\"p-2\">\n  <h5 class=\"d-flex flex-row justify-content-center align-items-center\">\n    Stock Transfer\n  </h5>\n\n  <mat-card-content>\n    <form class=\"d-flex flex-column gap-3\" [formGroup]=\"form\" (ngSubmit)=\"submit(getFormData())\">\n\n      <mat-form-field>\n        <mat-label>Date</mat-label>\n        <input formControlName=\"date\" matInput [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\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\n      <mat-form-field *ngIf=\"!(data?.product_id ?? productId)\">\n        <mat-label>Product</mat-label>\n        <app-searchable-selector formControlName=\"product_id\" titleField=\"name\"\n          apiUrl=\"api/products\"></app-searchable-selector>\n        <mat-error *ngIf=\"isFieldValid('product_id')\">{{ getErrorMessage('product_id') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location From</mat-label>\n        <app-searchable-selector formControlName=\"location_from_id\" apiUrl=\"api/inventory-locations\"\n          [selectedValue]=\"data?.location_from ?? locationFrom\"></app-searchable-selector>\n        <mat-hint>Where are we taking stock from?</mat-hint>\n        <mat-error *ngIf=\"isFieldValid('location_from_id')\">{{ getErrorMessage('location_from_id') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location To</mat-label>\n        <app-searchable-selector formControlName=\"location_to_id\"\n          apiUrl=\"api/inventory-locations\"></app-searchable-selector>\n        <mat-hint>Where are we taking stock to?</mat-hint>\n        <mat-error *ngIf=\"isFieldValid('location_to_id')\">{{ getErrorMessage('location_to_id') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Quantity</mat-label>\n        <input matInput placeholder=\"Quantity\" formControlName=\"quantity\" type=\"number\">\n        <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Particulars</mat-label>\n        <textarea matInput placeholder=\"Particulars\" formControlName=\"particulars\"></textarea>\n      </mat-form-field>\n\n      <div class=\"d-flex justify-content-end gap-2\">\n        <button type=\"button\" mat-flat-button [disabled]=\"isWorking\" (click)=\"dialogRef.close()\">Cancel</button>\n        <button type=\"submit\" mat-raised-button color=\"primary\" [disabled]=\"isWorking\">Save</button>\n      </div>\n    </form>\n  </mat-card-content>\n\n</div>", styles: [""], dependencies: [{ 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.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: 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: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockTransferFormComponent, isStandalone: true, selector: "app-stock-transfer-form", inputs: { productId: "productId", locationFrom: "locationFrom" }, usesInheritance: true, ngImport: i0, template: "<div class=\"p-2\">\n  <h5 class=\"d-flex flex-row justify-content-center align-items-center\">\n    Stock Transfer\n  </h5>\n\n  <mat-card-content>\n    <form class=\"d-flex flex-column gap-3\" [formGroup]=\"form\" (ngSubmit)=\"submit(getFormData())\">\n\n      <mat-form-field>\n        <mat-label>Date</mat-label>\n        <input formControlName=\"date\" matInput [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\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\n      <mat-form-field *ngIf=\"!(data?.product_id ?? productId)\">\n        <mat-label>Product</mat-label>\n        <app-searchable-selector formControlName=\"product_id\" titleField=\"name\"\n          apiUrl=\"api/products\"></app-searchable-selector>\n        <mat-error *ngIf=\"isFieldValid('product_id')\">{{ getErrorMessage('product_id') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location From</mat-label>\n        <app-searchable-selector formControlName=\"location_from_id\" apiUrl=\"api/inventory-locations?status_ids=1\"\n          [selectedValue]=\"data?.location_from ?? locationFrom\"></app-searchable-selector>\n        <mat-hint>Where are we taking stock from?</mat-hint>\n        <mat-error *ngIf=\"isFieldValid('location_from_id')\">{{ getErrorMessage('location_from_id') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location To</mat-label>\n        <app-searchable-selector formControlName=\"location_to_id\"\n          apiUrl=\"api/inventory-locations?status_ids=1\"></app-searchable-selector>\n        <mat-hint>Where are we taking stock to?</mat-hint>\n        <mat-error *ngIf=\"isFieldValid('location_to_id')\">{{ getErrorMessage('location_to_id') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Quantity</mat-label>\n        <input matInput placeholder=\"Quantity\" formControlName=\"quantity\" type=\"number\">\n        <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Particulars</mat-label>\n        <textarea matInput placeholder=\"Particulars\" formControlName=\"particulars\"></textarea>\n      </mat-form-field>\n\n      <div class=\"d-flex justify-content-end gap-2\">\n        <button type=\"button\" mat-flat-button [disabled]=\"isWorking\" (click)=\"dialogRef.close()\">Cancel</button>\n        <button type=\"submit\" mat-raised-button color=\"primary\" [disabled]=\"isWorking\">Save</button>\n      </div>\n    </form>\n  </mat-card-content>\n\n</div>", styles: [""], dependencies: [{ 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.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: 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: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockTransferFormComponent, decorators: [{
             type: Component,
@@ -2200,7 +2055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         MatButton,
                         MatCardTitle,
                         MatCardContent,
-                    ], template: "<div class=\"p-2\">\n  <h5 class=\"d-flex flex-row justify-content-center align-items-center\">\n    Stock Transfer\n  </h5>\n\n  <mat-card-content>\n    <form class=\"d-flex flex-column gap-3\" [formGroup]=\"form\" (ngSubmit)=\"submit(getFormData())\">\n\n      <mat-form-field>\n        <mat-label>Date</mat-label>\n        <input formControlName=\"date\" matInput [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\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\n      <mat-form-field *ngIf=\"!(data?.product_id ?? productId)\">\n        <mat-label>Product</mat-label>\n        <app-searchable-selector formControlName=\"product_id\" titleField=\"name\"\n          apiUrl=\"api/products\"></app-searchable-selector>\n        <mat-error *ngIf=\"isFieldValid('product_id')\">{{ getErrorMessage('product_id') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location From</mat-label>\n        <app-searchable-selector formControlName=\"location_from_id\" apiUrl=\"api/inventory-locations\"\n          [selectedValue]=\"data?.location_from ?? locationFrom\"></app-searchable-selector>\n        <mat-hint>Where are we taking stock from?</mat-hint>\n        <mat-error *ngIf=\"isFieldValid('location_from_id')\">{{ getErrorMessage('location_from_id') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location To</mat-label>\n        <app-searchable-selector formControlName=\"location_to_id\"\n          apiUrl=\"api/inventory-locations\"></app-searchable-selector>\n        <mat-hint>Where are we taking stock to?</mat-hint>\n        <mat-error *ngIf=\"isFieldValid('location_to_id')\">{{ getErrorMessage('location_to_id') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Quantity</mat-label>\n        <input matInput placeholder=\"Quantity\" formControlName=\"quantity\" type=\"number\">\n        <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Particulars</mat-label>\n        <textarea matInput placeholder=\"Particulars\" formControlName=\"particulars\"></textarea>\n      </mat-form-field>\n\n      <div class=\"d-flex justify-content-end gap-2\">\n        <button type=\"button\" mat-flat-button [disabled]=\"isWorking\" (click)=\"dialogRef.close()\">Cancel</button>\n        <button type=\"submit\" mat-raised-button color=\"primary\" [disabled]=\"isWorking\">Save</button>\n      </div>\n    </form>\n  </mat-card-content>\n\n</div>" }]
+                    ], template: "<div class=\"p-2\">\n  <h5 class=\"d-flex flex-row justify-content-center align-items-center\">\n    Stock Transfer\n  </h5>\n\n  <mat-card-content>\n    <form class=\"d-flex flex-column gap-3\" [formGroup]=\"form\" (ngSubmit)=\"submit(getFormData())\">\n\n      <mat-form-field>\n        <mat-label>Date</mat-label>\n        <input formControlName=\"date\" matInput [matDatepicker]=\"picker\" placeholder=\"Date\" (focus)=\"picker.open()\">\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\n      <mat-form-field *ngIf=\"!(data?.product_id ?? productId)\">\n        <mat-label>Product</mat-label>\n        <app-searchable-selector formControlName=\"product_id\" titleField=\"name\"\n          apiUrl=\"api/products\"></app-searchable-selector>\n        <mat-error *ngIf=\"isFieldValid('product_id')\">{{ getErrorMessage('product_id') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location From</mat-label>\n        <app-searchable-selector formControlName=\"location_from_id\" apiUrl=\"api/inventory-locations?status_ids=1\"\n          [selectedValue]=\"data?.location_from ?? locationFrom\"></app-searchable-selector>\n        <mat-hint>Where are we taking stock from?</mat-hint>\n        <mat-error *ngIf=\"isFieldValid('location_from_id')\">{{ getErrorMessage('location_from_id') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Location To</mat-label>\n        <app-searchable-selector formControlName=\"location_to_id\"\n          apiUrl=\"api/inventory-locations?status_ids=1\"></app-searchable-selector>\n        <mat-hint>Where are we taking stock to?</mat-hint>\n        <mat-error *ngIf=\"isFieldValid('location_to_id')\">{{ getErrorMessage('location_to_id') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Quantity</mat-label>\n        <input matInput placeholder=\"Quantity\" formControlName=\"quantity\" type=\"number\">\n        <mat-error *ngIf=\"isFieldValid('quantity')\">{{ getErrorMessage('quantity') }}</mat-error>\n      </mat-form-field>\n\n      <mat-form-field>\n        <mat-label>Particulars</mat-label>\n        <textarea matInput placeholder=\"Particulars\" formControlName=\"particulars\"></textarea>\n      </mat-form-field>\n\n      <div class=\"d-flex justify-content-end gap-2\">\n        <button type=\"button\" mat-flat-button [disabled]=\"isWorking\" (click)=\"dialogRef.close()\">Cancel</button>\n        <button type=\"submit\" mat-raised-button color=\"primary\" [disabled]=\"isWorking\">Save</button>\n      </div>\n    </form>\n  </mat-card-content>\n\n</div>" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: StockTransferService }, { type: i1$2.MatDialogRef, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -2360,7 +2215,7 @@ class StockTransferListComponent extends TechlifyListComponent {
     }
     subscribeToRouteChanges() {
         this.activatedRoute.queryParams
-            .pipe(debounceTime$1(500), distinctUntilChanged$1())
+            .pipe(debounceTime$1(500), distinctUntilChanged())
             .subscribe(() => {
             this.reload();
         });
@@ -2381,7 +2236,7 @@ class StockTransferListComponent extends TechlifyListComponent {
         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: i1$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" }, outputs: { changed: "changed" }, 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-techlify-form-button [component]=\"stockTransferForm()\" [data]=\"{ product_id: productId }\" [width]=\"'500px'\" (saved)=\"transferSaved()\"></app-techlify-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-techlify-form-button [component]=\"stockTransferForm()\" [data]=\"{ product_id: productId }\" [width]=\"'500px'\" (saved)=\"transferSaved()\"></app-techlify-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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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: TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }], 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" }, outputs: { changed: "changed" }, 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-techlify-form-button [component]=\"stockTransferForm()\" [data]=\"{ product_id: productId }\" [width]=\"'500px'\" (saved)=\"transferSaved()\"></app-techlify-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-techlify-form-button [component]=\"stockTransferForm()\" [data]=\"{ product_id: productId }\" [width]=\"'500px'\" (saved)=\"transferSaved()\"></app-techlify-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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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: TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockTransferListComponent, decorators: [{
             type: Component,
@@ -3087,7 +2942,7 @@ 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: i1$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: { filtersInput: { classPropertyName: "filtersInput", 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-techlify-icon role='button' name='edit'\n              [routerLink]=\"['/inventory/stock-receipts/form', element?.id]\"></app-techlify-icon>\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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$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: "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: { filtersInput: { classPropertyName: "filtersInput", 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-techlify-icon role='button' name='edit'\n              [routerLink]=\"['/inventory/stock-receipts/form', element?.id]\"></app-techlify-icon>\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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$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: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 StockReceiptListComponent = __decorate([
     UntilDestroy()
@@ -3315,7 +3170,7 @@ class StockReceiptFormComponent extends TechlifyFormComponent {
     }
     loadStockReceipt(id) {
         this.isWorking = true;
-        this.stockReceiptService.show(id, { with: 'stockReceiptProducts.product' }).subscribe({
+        this.stockReceiptService.show(id, { with: 'stockReceiptProducts.product,stockReceiptProducts.location' }).subscribe({
             next: (response) => {
                 this.isWorking = false;
                 this.stockReceipt.set(response.item);
@@ -3369,6 +3224,10 @@ class StockReceiptFormComponent extends TechlifyFormComponent {
         return this.stockReceipt()
             ?.stock_receipt_products?.find((sr) => sr.id === this.stockReceiptProducts.at(index)?.get('id')?.value)?.product;
     }
+    getSelectedLocation(index) {
+        return this.stockReceipt()
+            ?.stock_receipt_products?.find((sr) => sr.id === this.stockReceiptProducts.at(index)?.get('id')?.value)?.location;
+    }
     addStockReceiptProduct() {
         const group = this.createStockReceiptProduct();
         const index = this.stockReceiptProducts.length;
@@ -3449,7 +3308,7 @@ class StockReceiptFormComponent extends TechlifyFormComponent {
         this.location.back();
     }
     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$1.Router }, { token: i1$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=\"details\"></textarea>\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)\"\n                                    required></app-searchable-selector>\n                            </mat-form-field>\n                        </td>\n                        <td *ngIf=\"locationCount() > 0\">\n                            <app-location-selector appearance='outline'\n                                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\" min=\"0\" type=\"number\">\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>\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: "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$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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$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: i9.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: LocationSelectorComponent, selector: "app-location-selector", inputs: ["appearance", "label", "placeholder", "hint", "includeNone"] }, { 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: 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=\"details\"></textarea>\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)\"\n                                    required></app-searchable-selector>\n                            </mat-form-field>\n                        </td>\n                        <td *ngIf=\"locationCount() > 0\">\n                            <mat-form-field appearance='outline' class=\"w-100\">\n                                <mat-label>Location</mat-label>\n                                <app-searchable-selector apiUrl='api/inventory-locations?status_ids=1'\n                                    formControlName=\"location_id\" titleField='title'\n                                    [selectedValue]=\"getSelectedLocation(i)\"></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\" min=\"0\" type=\"number\">\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>\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: "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$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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$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: i9.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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: StockReceiptFormComponent, decorators: [{
             type: Component,
@@ -3458,9 +3317,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReactiveFormsModule,
                         MaterialModule,
                         SearchableSelectorModule,
-                        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=\"details\"></textarea>\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)\"\n                                    required></app-searchable-selector>\n                            </mat-form-field>\n                        </td>\n                        <td *ngIf=\"locationCount() > 0\">\n                            <app-location-selector appearance='outline'\n                                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\" min=\"0\" type=\"number\">\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>\n" }]
+                    ], 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=\"details\"></textarea>\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)\"\n                                    required></app-searchable-selector>\n                            </mat-form-field>\n                        </td>\n                        <td *ngIf=\"locationCount() > 0\">\n                            <mat-form-field appearance='outline' class=\"w-100\">\n                                <mat-label>Location</mat-label>\n                                <app-searchable-selector apiUrl='api/inventory-locations?status_ids=1'\n                                    formControlName=\"location_id\" titleField='title'\n                                    [selectedValue]=\"getSelectedLocation(i)\"></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\" min=\"0\" type=\"number\">\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>\n" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: StockReceiptService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: LocationService }, { type: i3.Location }] });
 
 class StockAllocationService extends TechlifyService {
@@ -3675,7 +3533,7 @@ class TechlifyFilterComponent {
             fixed_asset_ids: { multiple: true },
         });
         // listen for route change
-        this.activatedRoute.queryParams.pipe(debounceTime$1(800), distinctUntilChanged$1()).subscribe((val) => {
+        this.activatedRoute.queryParams.pipe(debounceTime$1(800), distinctUntilChanged()).subscribe((val) => {
             this.filterUpdated.emit(this.filterForm.value);
         });
     }
@@ -3716,7 +3574,7 @@ class TechlifyFilterComponent {
             : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyFilterComponent, deps: [{ token: i1.RequestHelperService }, { token: i1$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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$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: i9.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$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$1.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$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: i9.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$1.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,
@@ -3875,7 +3733,7 @@ let StockIssueListComponent = class StockIssueListComponent extends TechlifyList
         { label: 'Date', def: 'date', isSelected: true, isEditable: false },
         { label: 'Quantity', def: 'quantity', isSelected: true, isEditable: false },
         { label: 'Measure', def: 'measure', isSelected: true, isEditable: true },
-        { label: 'Location', def: 'location', isSelected: true, isEditable: false },
+        { label: 'Location From', def: 'location', isSelected: true, isEditable: false },
         { label: 'Related', def: 'related', isSelected: true, isEditable: false },
         { label: 'Particulars', def: 'particulars', isSelected: true, isEditable: false },
         { label: 'Creator', def: 'creator', isSelected: false, isEditable: true },
@@ -3974,14 +3832,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: i1$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: { filtersInput: { classPropertyName: "filtersInput", 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 }, issuableData: { classPropertyName: "issuableData", publicName: "issuableData", 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_from_id, 'view']\">\n            {{ element?.stock_issue_products[0]?.location?.title }}\n          </a>\n          <br>\n          <span *ngIf=\"element?.recipient\">\n            <small class=\"text-secondary\">received by {{element?.recipient?.name}}</small>\n          </span>\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-techlify-icon name=\"edit\" role=\"button\"\n              [routerLink]=\"['/inventory/stock-issues/form', element?.id]\"></app-techlify-icon>\n            <app-techlify-delete-button [model]=\"element\" [service]=\"service\"\n              [data]=\"{ title: element?.id, type: 'Stock Issue' }\" (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: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.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: i1$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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: StockIssueListComponent, selector: "app-stock-issue-list", inputs: { filtersInput: { classPropertyName: "filtersInput", 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 }, issuableData: { classPropertyName: "issuableData", publicName: "issuableData", 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 From</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_from_id, 'view']\">\n            {{ element?.stock_issue_products[0]?.location?.title }}\n          </a>\n          <br>\n          <span *ngIf=\"element?.recipient\">\n            <small class=\"text-secondary\">received by {{element?.recipient?.name}}</small>\n          </span>\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-techlify-icon name=\"edit\" role=\"button\"\n              [routerLink]=\"['/inventory/stock-issues/form', element?.id]\"></app-techlify-icon>\n            <app-techlify-delete-button [model]=\"element\" [service]=\"service\"\n              [data]=\"{ title: element?.id, type: 'Stock Issue' }\" (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: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.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: i1$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\" [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_from_id, 'view']\">\n            {{ element?.stock_issue_products[0]?.location?.title }}\n          </a>\n          <br>\n          <span *ngIf=\"element?.recipient\">\n            <small class=\"text-secondary\">received by {{element?.recipient?.name}}</small>\n          </span>\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-techlify-icon name=\"edit\" role=\"button\"\n              [routerLink]=\"['/inventory/stock-issues/form', element?.id]\"></app-techlify-icon>\n            <app-techlify-delete-button [model]=\"element\" [service]=\"service\"\n              [data]=\"{ title: element?.id, type: 'Stock Issue' }\" (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>" }]
+            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 From</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_from_id, 'view']\">\n            {{ element?.stock_issue_products[0]?.location?.title }}\n          </a>\n          <br>\n          <span *ngIf=\"element?.recipient\">\n            <small class=\"text-secondary\">received by {{element?.recipient?.name}}</small>\n          </span>\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-techlify-icon name=\"edit\" role=\"button\"\n              [routerLink]=\"['/inventory/stock-issues/form', element?.id]\"></app-techlify-icon>\n            <app-techlify-delete-button [model]=\"element\" [service]=\"service\"\n              [data]=\"{ title: element?.id, type: 'Stock Issue' }\" (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: i1$1.Router }, { type: i1.TechlifyFeatureService }] });
 
 let StockIssuePageComponent = class StockIssuePageComponent {
@@ -4442,7 +4300,7 @@ class LowStockReportComponent extends TechlifyListComponent {
         });
     }
     subscribeToRouteChanges() {
-        this.activatedRoute.queryParams.pipe(debounceTime$1(500), distinctUntilChanged$1()).subscribe(() => {
+        this.activatedRoute.queryParams.pipe(debounceTime$1(500), distinctUntilChanged()).subscribe(() => {
             this.reload();
         });
     }
@@ -4579,7 +4437,7 @@ class InventoryValueReportComponent extends TechlifyListComponent {
         });
     }
     subscribeToRouteChanges() {
-        this.activatedRoute.queryParams.pipe(debounceTime$1(500), distinctUntilChanged$1()).subscribe(() => {
+        this.activatedRoute.queryParams.pipe(debounceTime$1(500), distinctUntilChanged()).subscribe(() => {
             this.reload();
         });
     }
@@ -4616,7 +4474,7 @@ class InventoryValueReportComponent extends TechlifyListComponent {
         this.loadData();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InventoryValueReportComponent, deps: [{ token: InventoryValueReportService }, { token: i1$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: i4$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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i5.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: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i5.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: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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,
@@ -4719,14 +4577,14 @@ class StockIssueSummaryReportComponent extends TechlifyListComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueSummaryReportComponent, deps: [{ token: StockIssueProductDataService }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockIssueSummaryReportComponent, isStandalone: true, selector: "app-stock-issue-summary-report", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-column gap-2\">\n  <mat-card>\n    <mat-card-content class=\"d-flex flex-row align-items-center justify-content-between\">\n      <h5 class=\"mb-0\">Stock Issue Summary Report</h5>\n\n      <form class=\"d-flex flex-row gap-1\" [formGroup]=\"filterForm\">\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=\"Period\" formControlName=\"duration\" [form]=\"filterForm\"\n          [showClearButton]=\"true\"></app-timeline-filter>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector formControlName=\"category_ids\" apiUrl=\"api/product-categories\"\n            [multiple]=\"true\"></app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Location From</mat-label>\n          <app-searchable-selector formControlName=\"location_ids\" apiUrl=\"api/inventory-locations\"\n            [multiple]=\"true\"></app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Primary Group By</mat-label>\n          <mat-select required formControlName=\"primary_group_by\">\n            <mat-option value=\"location\">Location</mat-option>\n            <mat-option value=\"recipient\">Recipient</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Secondary Group By</mat-label>\n          <mat-select required formControlName=\"secondary_group_by\">\n            <mat-option value=\"product\">Product</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card *ngFor=\"let group of primaryGroups()\">\n    <mat-card-content class=\"p-0\">\n      <h6 class=\"px-3 pt-3 mb-2 fw-bold\">{{ group.label }}</h6>\n\n      <table mat-table [dataSource]=\"group.models\" class=\"w-100\">\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>Product</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <a [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\" class=\"text-dark\">\n              {{ element?.product?.name }}\n            </a>\n          </td>\n          <td mat-footer-cell *matFooterCellDef> <strong> Total </strong> </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\">{{ element?.product?.sku }}</td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></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\">{{ element?.total_quantity }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_quantity }} </strong> </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"stock_issues_avco\">\n          <th mat-header-cell *matHeaderCellDef> Total Cost (AVCO) </th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.total_avco | currency }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_avco | currency }} </strong> </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"total_cost\">\n          <th mat-header-cell *matHeaderCellDef> Total Cost (FIFO) </th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.total_fifo_value | currency }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_fifo_value | currency }} </strong> </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 [hidden]=\"!group?.grand_total_avco && !group?.grand_total_quantity\" mat-footer-row\n          *matFooterRowDef=\"displayedColumns\"></tr>\n      </table>\n\n      <p *ngIf=\"!group.models.length\" class=\"px-3 py-2 mb-0 text-secondary\">No stock issues for this group.</p>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card *ngIf=\"!isWorking && !primaryGroups().length\">\n    <mat-card-content class=\"text-secondary text-center py-4\">\n      No stock issues found for the selected filters.\n    </mat-card-content>\n  </mat-card>\n\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { 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$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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i5.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: "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: 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"] }, { kind: "directive", type: i1$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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StockIssueSummaryReportComponent, isStandalone: true, selector: "app-stock-issue-summary-report", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-column gap-2\">\n  <mat-card>\n    <mat-card-content class=\"d-flex flex-row align-items-center justify-content-between\">\n      <h5 class=\"mb-0\">Stock Issue Summary Report</h5>\n\n      <form class=\"d-flex flex-row gap-1\" [formGroup]=\"filterForm\">\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=\"Period\" formControlName=\"duration\" [form]=\"filterForm\"\n          [showClearButton]=\"true\"></app-timeline-filter>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector formControlName=\"category_ids\" apiUrl=\"api/product-categories\"\n            [multiple]=\"true\"></app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Location From</mat-label>\n          <app-searchable-selector formControlName=\"location_ids\" apiUrl=\"api/inventory-locations\"\n            [multiple]=\"true\"></app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Primary Group By</mat-label>\n          <mat-select required formControlName=\"primary_group_by\">\n            <mat-option value=\"location\">Location From</mat-option>\n            <mat-option value=\"recipient\">Recipient</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Secondary Group By</mat-label>\n          <mat-select required formControlName=\"secondary_group_by\">\n            <mat-option value=\"product\">Product</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card *ngFor=\"let group of primaryGroups()\">\n    <mat-card-content class=\"p-0\">\n      <h6 class=\"px-3 pt-3 mb-2 fw-bold\">{{ group.label }}</h6>\n\n      <table mat-table [dataSource]=\"group.models\" class=\"w-100\">\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>Product</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <a [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\" class=\"text-dark\">\n              {{ element?.product?.name }}\n            </a>\n          </td>\n          <td mat-footer-cell *matFooterCellDef> <strong> Total </strong> </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\">{{ element?.product?.sku }}</td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></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\">{{ element?.total_quantity }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_quantity }} </strong> </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"stock_issues_avco\">\n          <th mat-header-cell *matHeaderCellDef> Total Cost (AVCO) </th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.total_avco | currency }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_avco | currency }} </strong> </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"total_cost\">\n          <th mat-header-cell *matHeaderCellDef> Total Cost (FIFO) </th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.total_fifo_value | currency }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_fifo_value | currency }} </strong> </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 [hidden]=\"!group?.grand_total_avco && !group?.grand_total_quantity\" mat-footer-row\n          *matFooterRowDef=\"displayedColumns\"></tr>\n      </table>\n\n      <p *ngIf=\"!group.models.length\" class=\"px-3 py-2 mb-0 text-secondary\">No stock issues for this group.</p>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card *ngIf=\"!isWorking && !primaryGroups().length\">\n    <mat-card-content class=\"text-secondary text-center py-4\">\n      No stock issues found for the selected filters.\n    </mat-card-content>\n  </mat-card>\n\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { 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: 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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i5.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: "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: 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"] }, { kind: "directive", type: i1$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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StockIssueSummaryReportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-stock-issue-summary-report', standalone: true, imports: [
                         SharedModule,
                         ProductCategoryBadgesComponent,
-                    ], template: "<div class=\"d-flex flex-column gap-2\">\n  <mat-card>\n    <mat-card-content class=\"d-flex flex-row align-items-center justify-content-between\">\n      <h5 class=\"mb-0\">Stock Issue Summary Report</h5>\n\n      <form class=\"d-flex flex-row gap-1\" [formGroup]=\"filterForm\">\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=\"Period\" formControlName=\"duration\" [form]=\"filterForm\"\n          [showClearButton]=\"true\"></app-timeline-filter>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector formControlName=\"category_ids\" apiUrl=\"api/product-categories\"\n            [multiple]=\"true\"></app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Location From</mat-label>\n          <app-searchable-selector formControlName=\"location_ids\" apiUrl=\"api/inventory-locations\"\n            [multiple]=\"true\"></app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Primary Group By</mat-label>\n          <mat-select required formControlName=\"primary_group_by\">\n            <mat-option value=\"location\">Location</mat-option>\n            <mat-option value=\"recipient\">Recipient</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Secondary Group By</mat-label>\n          <mat-select required formControlName=\"secondary_group_by\">\n            <mat-option value=\"product\">Product</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card *ngFor=\"let group of primaryGroups()\">\n    <mat-card-content class=\"p-0\">\n      <h6 class=\"px-3 pt-3 mb-2 fw-bold\">{{ group.label }}</h6>\n\n      <table mat-table [dataSource]=\"group.models\" class=\"w-100\">\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>Product</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <a [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\" class=\"text-dark\">\n              {{ element?.product?.name }}\n            </a>\n          </td>\n          <td mat-footer-cell *matFooterCellDef> <strong> Total </strong> </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\">{{ element?.product?.sku }}</td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></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\">{{ element?.total_quantity }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_quantity }} </strong> </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"stock_issues_avco\">\n          <th mat-header-cell *matHeaderCellDef> Total Cost (AVCO) </th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.total_avco | currency }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_avco | currency }} </strong> </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"total_cost\">\n          <th mat-header-cell *matHeaderCellDef> Total Cost (FIFO) </th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.total_fifo_value | currency }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_fifo_value | currency }} </strong> </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 [hidden]=\"!group?.grand_total_avco && !group?.grand_total_quantity\" mat-footer-row\n          *matFooterRowDef=\"displayedColumns\"></tr>\n      </table>\n\n      <p *ngIf=\"!group.models.length\" class=\"px-3 py-2 mb-0 text-secondary\">No stock issues for this group.</p>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card *ngIf=\"!isWorking && !primaryGroups().length\">\n    <mat-card-content class=\"text-secondary text-center py-4\">\n      No stock issues found for the selected filters.\n    </mat-card-content>\n  </mat-card>\n\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n</div>\n" }]
+                    ], template: "<div class=\"d-flex flex-column gap-2\">\n  <mat-card>\n    <mat-card-content class=\"d-flex flex-row align-items-center justify-content-between\">\n      <h5 class=\"mb-0\">Stock Issue Summary Report</h5>\n\n      <form class=\"d-flex flex-row gap-1\" [formGroup]=\"filterForm\">\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=\"Period\" formControlName=\"duration\" [form]=\"filterForm\"\n          [showClearButton]=\"true\"></app-timeline-filter>\n\n        <mat-form-field>\n          <mat-label>Category</mat-label>\n          <app-searchable-selector formControlName=\"category_ids\" apiUrl=\"api/product-categories\"\n            [multiple]=\"true\"></app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Location From</mat-label>\n          <app-searchable-selector formControlName=\"location_ids\" apiUrl=\"api/inventory-locations\"\n            [multiple]=\"true\"></app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Primary Group By</mat-label>\n          <mat-select required formControlName=\"primary_group_by\">\n            <mat-option value=\"location\">Location From</mat-option>\n            <mat-option value=\"recipient\">Recipient</mat-option>\n          </mat-select>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Secondary Group By</mat-label>\n          <mat-select required formControlName=\"secondary_group_by\">\n            <mat-option value=\"product\">Product</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card *ngFor=\"let group of primaryGroups()\">\n    <mat-card-content class=\"p-0\">\n      <h6 class=\"px-3 pt-3 mb-2 fw-bold\">{{ group.label }}</h6>\n\n      <table mat-table [dataSource]=\"group.models\" class=\"w-100\">\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>Product</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <a [routerLink]=\"['/inventory/products', element?.product?.id, 'view']\" class=\"text-dark\">\n              {{ element?.product?.name }}\n            </a>\n          </td>\n          <td mat-footer-cell *matFooterCellDef> <strong> Total </strong> </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\">{{ element?.product?.sku }}</td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"categories\">\n          <th mat-header-cell *matHeaderCellDef>Categories</th>\n          <td mat-cell *matCellDef=\"let element\">\n            <app-product-category-badges [product]=\"element?.product\"></app-product-category-badges>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></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\">{{ element?.total_quantity }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_quantity }} </strong> </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"stock_issues_avco\">\n          <th mat-header-cell *matHeaderCellDef> Total Cost (AVCO) </th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.total_avco | currency }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_avco | currency }} </strong> </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"total_cost\">\n          <th mat-header-cell *matHeaderCellDef> Total Cost (FIFO) </th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.total_fifo_value | currency }}</td>\n          <td mat-footer-cell *matFooterCellDef> <strong> {{ group?.grand_total_fifo_value | currency }} </strong> </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 [hidden]=\"!group?.grand_total_avco && !group?.grand_total_quantity\" mat-footer-row\n          *matFooterRowDef=\"displayedColumns\"></tr>\n      </table>\n\n      <p *ngIf=\"!group.models.length\" class=\"px-3 py-2 mb-0 text-secondary\">No stock issues for this group.</p>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card *ngIf=\"!isWorking && !primaryGroups().length\">\n    <mat-card-content class=\"text-secondary text-center py-4\">\n      No stock issues found for the selected filters.\n    </mat-card-content>\n  </mat-card>\n\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n</div>\n" }]
         }], ctorParameters: () => [{ type: StockIssueProductDataService }, { type: i2$1.FormBuilder }] });
 
 const routes$7 = [
@@ -4764,11 +4622,11 @@ const routes$7 = [
     },
     {
         path: 'categories',
-        loadChildren: () => import('./techlify-inventory-common-category.module-BBpgG9L3.mjs').then((mod) => mod.CategoryModule),
+        loadChildren: () => import('./techlify-inventory-common-category.module-oi41ku5U.mjs').then((mod) => mod.CategoryModule),
     },
     {
         path: 'recipients',
-        loadChildren: () => import('./techlify-inventory-common-recipient.module-DsYw54Uj.mjs').then((mod) => mod.RecipientModule),
+        loadChildren: () => import('./techlify-inventory-common-recipient.module-v77bDJCC.mjs').then((mod) => mod.RecipientModule),
     },
     {
         path: 'products',
@@ -5085,22 +4943,22 @@ const routes$6 = [
     },
     {
         path: 'form',
-        loadComponent: () => import('./techlify-inventory-common-stock-issue-form.component-C3RoFfcY.mjs').then(m => m.StockIssueFormComponent),
+        loadComponent: () => import('./techlify-inventory-common-stock-issue-form.component-ABIh_GkN.mjs').then(m => m.StockIssueFormComponent),
         canLoad: [AuthenticationGuard]
     },
     {
         path: 'form/:id',
-        loadComponent: () => import('./techlify-inventory-common-stock-issue-form.component-C3RoFfcY.mjs').then(m => m.StockIssueFormComponent),
+        loadComponent: () => import('./techlify-inventory-common-stock-issue-form.component-ABIh_GkN.mjs').then(m => m.StockIssueFormComponent),
         canLoad: [AuthenticationGuard]
     },
     {
         path: ':id/view',
-        loadComponent: () => import('./techlify-inventory-common-stock-issue-view.component-BDOR4X49.mjs').then(m => m.StockIssueViewComponent),
+        loadComponent: () => import('./techlify-inventory-common-stock-issue-view.component-D4AloV4G.mjs').then(m => m.StockIssueViewComponent),
         canLoad: [AuthenticationGuard]
     },
     {
         path: 'products/:id/view',
-        loadComponent: () => import('./techlify-inventory-common-stock-issue-product-view.component-b_8gpI7x.mjs').then(m => m.StockIssueProductViewComponent),
+        loadComponent: () => import('./techlify-inventory-common-stock-issue-product-view.component-3FB_GfyZ.mjs').then(m => m.StockIssueProductViewComponent),
         canLoad: [AuthenticationGuard]
     }
 ];
@@ -5289,7 +5147,7 @@ class MeasureListComponent extends TechlifyListComponent {
         this.filterForm.get('sort_by').setValue(active + '|' + direction);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MeasureListComponent, deps: [{ token: i2$1.FormBuilder }, { token: MeasureService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MeasureListComponent, selector: "app-measure-list", usesInheritance: true, ngImport: i0, template: "<mat-card 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-center align-items-center gap-2\">\n      <h3 class=\"mb-0\">Measures</h3>\n      <app-techlify-form-button [component]=\"measureForm()\" [width]=\"'500px'\"\n        (saved)=\"reload()\"></app-techlify-form-button>\n    </div>\n    <app-techlify-filter [filterForm]=\"filterForm\" (filterUpdated)=\"reload()\"></app-techlify-filter>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"p-0\">\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Service Centers\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\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      <!-- Title Column -->\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=\"products\">\n        <th mat-header-cell *matHeaderCellDef>Products</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a\n            class=\"cursor-pointer text-dark text-decoration-none\"\n            [routerLink]=\"['/inventory/products']\"\n            [queryParams]=\"{ measure_ids: element.id }\"\n          >\n            {{ element?.products_count }} products\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Quantity Measure Column -->\n      <ng-container matColumnDef=\"quantity_measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity Measure</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity_measure }}\n        </td>\n      </ng-container>\n\n      <!-- Description Column -->\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      <!-- 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 justify-content-start align-items-center gap-2\">\n            <app-techlify-form-button [component]=\"measureForm()\" [model]=\"element\" [width]=\"'500px'\"\n              (saved)=\"reload()\" *ngIf=\"element?.client_id\"></app-techlify-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]=\"{ type: 'Measure', title: element?.title }\" (deleted)=\"reload()\"\n              *ngIf=\"element?.client_id && element?.products_count == 0\"></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\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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: i5.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: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: TechlifyFilterComponent, selector: "app-techlify-filter", inputs: ["filterForm", "filterConfig"], outputs: ["filterUpdated"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MeasureListComponent, selector: "app-measure-list", usesInheritance: true, ngImport: i0, template: "<mat-card 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-center align-items-center gap-2\">\n      <h3 class=\"mb-0\">Measures</h3>\n      <app-techlify-form-button [component]=\"measureForm()\" [width]=\"'500px'\"\n        (saved)=\"reload()\"></app-techlify-form-button>\n    </div>\n    <app-techlify-filter [filterForm]=\"filterForm\" (filterUpdated)=\"reload()\"></app-techlify-filter>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"p-0\">\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Service Centers\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" matSort\n      (matSortChange)=\"onSortChange($event)\">\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      <!-- Title Column -->\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=\"products\">\n        <th mat-header-cell *matHeaderCellDef>Products</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a\n            class=\"cursor-pointer text-dark text-decoration-none\"\n            [routerLink]=\"['/inventory/products']\"\n            [queryParams]=\"{ measure_ids: element.id }\"\n          >\n            {{ element?.products_count }} products\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Quantity Measure Column -->\n      <ng-container matColumnDef=\"quantity_measure\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Quantity Measure</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.quantity_measure }}\n        </td>\n      </ng-container>\n\n      <!-- Description Column -->\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      <!-- 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 justify-content-start align-items-center gap-2\">\n            <app-techlify-form-button [component]=\"measureForm()\" [model]=\"element\" [width]=\"'500px'\"\n              (saved)=\"reload()\" *ngIf=\"element?.client_id\"></app-techlify-form-button>\n            <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n              [data]=\"{ type: 'Measure', title: element?.title }\" (deleted)=\"reload()\"\n              *ngIf=\"element?.client_id && element?.products_count == 0\"></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\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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: i5.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: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: TechlifyFilterComponent, selector: "app-techlify-filter", inputs: ["filterForm", "filterConfig"], outputs: ["filterUpdated"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MeasureListComponent, decorators: [{
             type: Component,
@@ -5552,7 +5410,7 @@ class IncidentListComponent extends TechlifyListComponent {
         });
         // listen for route change
         this.activatedRoute.queryParams
-            .pipe(debounceTime$1(500), distinctUntilChanged$1())
+            .pipe(debounceTime$1(500), distinctUntilChanged())
             .subscribe((val) => {
             this.reload();
         });
@@ -5822,7 +5680,7 @@ class RatingListComponent extends TechlifyListComponent {
         });
         // listen for route change
         this.activatedRoute.queryParams
-            .pipe(debounceTime$1(500), distinctUntilChanged$1())
+            .pipe(debounceTime$1(500), distinctUntilChanged())
             .subscribe((val) => {
             this.reload();
         });
@@ -6179,7 +6037,7 @@ class SupplierBranchesListComponent extends TechlifyListComponent {
         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: "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"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$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: i9.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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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"] }], 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: "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"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$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: i9.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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierBranchesListComponent, decorators: [{
             type: Component,
@@ -6315,7 +6173,7 @@ class SupplierListComponent extends TechlifyListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SupplierListComponent, deps: [{ token: i2$1.FormBuilder }, { token: i1$1.Router }, { token: SupplierService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SupplierListComponent, selector: "app-supplier-list", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-column gap-2\">\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 align-items-center gap-2\">\n        <h3 class=\"mb-0\">Suppliers</h3>\n        <app-techlify-form-button [component]=\"supplierForm()\" [width]=\"'600px'\"\n          (saved)=\"onSaved($event)\"></app-techlify-form-button>\n      </div>\n      <div class=\"d-flex flex-row gap-2\" [formGroup]=\"filterForm\">\n        <mat-form-field class=\"fl-md\">\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search Supplier by Name, Phone, Address, Email, Description\"\n            formControlName=\"search\" />\n        </mat-form-field>\n        <mat-form-field class=\"fl-sm\">\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      </div>\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=\"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=\"d-flex flex-row gap-1 align-items-center text-secondary\">\n              <app-techlify-icon name=\"view\" matTooltip=\"View\"\n                [routerLink]=\"['/inventory/suppliers', element.id, 'view']\" routerLinkActive=\"route-link-active\"\n                *ngxPermissionsOnly=\"['supplier.read']\"></app-techlify-icon>\n              <app-techlify-form-button *ngxPermissionsOnly=\"['supplier.update']\" [component]=\"supplierForm()\"\n                [model]=\"element\" [width]=\"'600px'\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n              <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n                [data]='{title: element?.company_name, type: \"Supplier\"}'\n                (deleted)=\"modelsDeletedById($event)\"></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>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["isIconView", "modelType", "modelId", "logView"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i13$1.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { 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.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { 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: SupplierListComponent, selector: "app-supplier-list", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex flex-column gap-2\">\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 align-items-center gap-2\">\n        <h3 class=\"mb-0\">Suppliers</h3>\n        <app-techlify-form-button [component]=\"supplierForm()\" [width]=\"'600px'\"\n          (saved)=\"onSaved($event)\"></app-techlify-form-button>\n      </div>\n      <div class=\"d-flex flex-row gap-2\" [formGroup]=\"filterForm\">\n        <mat-form-field class=\"fl-md\">\n          <mat-label>Search</mat-label>\n          <input matInput placeholder=\"Search Supplier by Name, Phone, Address, Email, Description\"\n            formControlName=\"search\" />\n        </mat-form-field>\n        <mat-form-field class=\"fl-sm\">\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      </div>\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=\"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=\"d-flex flex-row gap-1 align-items-center text-secondary\">\n              <app-techlify-icon name=\"view\" matTooltip=\"View\"\n                [routerLink]=\"['/inventory/suppliers', element.id, 'view']\" routerLinkActive=\"route-link-active\"\n                *ngxPermissionsOnly=\"['supplier.read']\"></app-techlify-icon>\n              <app-techlify-form-button *ngxPermissionsOnly=\"['supplier.update']\" [component]=\"supplierForm()\"\n                [model]=\"element\" [width]=\"'600px'\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n              <app-techlify-delete-button [service]=\"service\" [model]=\"element\"\n                [data]='{title: element?.company_name, type: \"Supplier\"}'\n                (deleted)=\"modelsDeletedById($event)\"></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>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["isIconView", "modelType", "modelId", "logView"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i13$1.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { 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.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: i1.TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: i1.TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { 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: SupplierListComponent, decorators: [{
             type: Component,
@@ -6369,7 +6227,7 @@ class PurchaseOrderListingComponent extends TechlifyListComponent {
         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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$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,
@@ -6544,7 +6402,7 @@ const routes$4 = [
             },
             {
                 path: 'purchase-orders/:id/view',
-                loadComponent: () => import('./techlify-inventory-common-purchase-order-view.component-6qbMJdAs.mjs').then(m => m.PurchaseOrderViewComponent)
+                loadComponent: () => import('./techlify-inventory-common-purchase-order-view.component-DkWmMRaW.mjs').then(m => m.PurchaseOrderViewComponent)
             }
         ],
     },
@@ -6742,7 +6600,7 @@ class LocationFormComponent extends TechlifyFormComponent {
         }
     }
     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$2.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.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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?status_ids=1'\n      [selectedValue]=\"model?.parent\"></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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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,
@@ -6752,7 +6610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReactiveFormsModule,
                         SearchableSelectorModule,
                         TechlifyFeatureModule
-                    ], 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>" }]
+                    ], 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?status_ids=1'\n      [selectedValue]=\"model?.parent\"></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>" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: LocationService }, { type: i1$2.MatDialogRef }], propDecorators: { model: [{
                 type: Input
             }], saved: [{
@@ -6897,7 +6755,7 @@ class LocationListComponent extends TechlifyListComponent {
         }
     }
     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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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 });
+    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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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,
@@ -6989,7 +6847,7 @@ class LocationProductStatisticsComponent extends TechlifyListComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocationProductStatisticsComponent, deps: [{ token: LocationService }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LocationProductStatisticsComponent, isStandalone: true, selector: "app-location-product-statistics", inputs: { location: "location" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <h3>Location Products</h3>\n  </mat-card-content>\n  <mat-divider class=\"mt-3\"></mat-divider>\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=\"SKU\">\n        <th mat-header-cell *matHeaderCellDef> SKU </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.sku }}</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 class=\"text-dark\" [routerLink]=\"['/inventory/products', element.id, 'view']\">\n            {{ element?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Category\">\n        <th mat-header-cell *matHeaderCellDef> Category </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Quantity\">\n        <th mat-header-cell *matHeaderCellDef> Quantity </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          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <app-techlify-form-button *ngIf=\"location?.id\" [component]=\"stockTransferForm()\"\n              [data]=\"{ product_id: element?.id, location_from: location }\" [width]=\"'500px'\"\n              (saved)=\"reload()\"></app-techlify-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    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: ProductModule }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { 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: i1$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: LocationProductStatisticsComponent, isStandalone: true, selector: "app-location-product-statistics", inputs: { location: "location" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <h3>Location Products</h3>\n  </mat-card-content>\n  <mat-divider class=\"mt-3\"></mat-divider>\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=\"SKU\">\n        <th mat-header-cell *matHeaderCellDef> SKU </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.sku }}</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 class=\"text-dark\" [routerLink]=\"['/inventory/products', element.id, 'view']\">\n            {{ element?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Category\">\n        <th mat-header-cell *matHeaderCellDef> Category </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Quantity\">\n        <th mat-header-cell *matHeaderCellDef> Quantity </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          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <app-techlify-form-button *ngIf=\"location?.id\" [component]=\"stockTransferForm()\"\n              [data]=\"{ product_id: element?.id, location_from: location }\" [width]=\"'500px'\"\n              (saved)=\"reload()\"></app-techlify-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    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "ngmodule", type: ProductModule }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "component", type: TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { 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: i1$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: LocationProductStatisticsComponent, decorators: [{
             type: Component,
@@ -7168,7 +7026,7 @@ class ShelfFormComponent extends TechlifyFormComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShelfFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2$1.FormBuilder }, { token: ShelfService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ShelfFormComponent, isStandalone: true, selector: "app-shelf-form", inputs: { model: "model" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  (submit)=\"save()\"\n  class=\"d-flex flex-column gap-1\"\n>\n  <mat-form-field>\n    <mat-label>Name</mat-label>\n    <input type=\"text\" matInput formControlName=\"name\" placeholder=\"Name\">\n    <mat-error *ngIf=\"isFieldValid('name')\">\n      {{ getErrorMessage('name') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Type</mat-label>\n    <app-searchable-selector formControlName=\"type_id\" apiUrl=\"api/shelf-types\" [enableSearch]=\"false\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location</mat-label>\n    <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations\">\n    </app-searchable-selector>\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]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button (click)=\"cancelled.emit()\" [disabled]=\"isSaving\" type=\"button\" mat-flat-button>\n      Cancel\n    </button>\n  </div>\n</form>\n", 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: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ShelfFormComponent, isStandalone: true, selector: "app-shelf-form", inputs: { model: "model" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  (submit)=\"save()\"\n  class=\"d-flex flex-column gap-1\"\n>\n  <mat-form-field>\n    <mat-label>Name</mat-label>\n    <input type=\"text\" matInput formControlName=\"name\" placeholder=\"Name\">\n    <mat-error *ngIf=\"isFieldValid('name')\">\n      {{ getErrorMessage('name') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Type</mat-label>\n    <app-searchable-selector formControlName=\"type_id\" apiUrl=\"api/shelf-types\" [enableSearch]=\"false\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location</mat-label>\n    <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations?status_ids=1\"\n      [selectedValue]=\"model?.location\">\n    </app-searchable-selector>\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]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button (click)=\"cancelled.emit()\" [disabled]=\"isSaving\" type=\"button\" mat-flat-button>\n      Cancel\n    </button>\n  </div>\n</form>\n", 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: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ShelfFormComponent, decorators: [{
             type: Component,
@@ -7182,7 +7040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         NgIf,
                         ReactiveFormsModule,
                         SearchableSelectorModule
-                    ], template: "<form\n  [formGroup]=\"form\"\n  (submit)=\"save()\"\n  class=\"d-flex flex-column gap-1\"\n>\n  <mat-form-field>\n    <mat-label>Name</mat-label>\n    <input type=\"text\" matInput formControlName=\"name\" placeholder=\"Name\">\n    <mat-error *ngIf=\"isFieldValid('name')\">\n      {{ getErrorMessage('name') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Type</mat-label>\n    <app-searchable-selector formControlName=\"type_id\" apiUrl=\"api/shelf-types\" [enableSearch]=\"false\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location</mat-label>\n    <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations\">\n    </app-searchable-selector>\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]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button (click)=\"cancelled.emit()\" [disabled]=\"isSaving\" type=\"button\" mat-flat-button>\n      Cancel\n    </button>\n  </div>\n</form>\n" }]
+                    ], template: "<form\n  [formGroup]=\"form\"\n  (submit)=\"save()\"\n  class=\"d-flex flex-column gap-1\"\n>\n  <mat-form-field>\n    <mat-label>Name</mat-label>\n    <input type=\"text\" matInput formControlName=\"name\" placeholder=\"Name\">\n    <mat-error *ngIf=\"isFieldValid('name')\">\n      {{ getErrorMessage('name') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Type</mat-label>\n    <app-searchable-selector formControlName=\"type_id\" apiUrl=\"api/shelf-types\" [enableSearch]=\"false\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Location</mat-label>\n    <app-searchable-selector formControlName=\"location_id\" apiUrl=\"api/inventory-locations?status_ids=1\"\n      [selectedValue]=\"model?.location\">\n    </app-searchable-selector>\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]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button (click)=\"cancelled.emit()\" [disabled]=\"isSaving\" type=\"button\" mat-flat-button>\n      Cancel\n    </button>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2$1.FormBuilder }, { type: ShelfService }], propDecorators: { model: [{
                 type: Input
             }], saved: [{
@@ -7257,7 +7115,7 @@ class ShelfListComponent extends TechlifyListComponent {
             }
         });
         // listen for route change
-        this.activatedRoute.queryParams.pipe(debounceTime$1(500), distinctUntilChanged$1())
+        this.activatedRoute.queryParams.pipe(debounceTime$1(500), distinctUntilChanged())
             .subscribe(() => this.reload());
     }
     loadData() {
@@ -7289,7 +7147,7 @@ class ShelfListComponent extends TechlifyListComponent {
         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: i1$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)=\"modelsUpdatedById($event)\"></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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i11$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$2.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: i5.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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)=\"modelsUpdatedById($event)\"></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: i8$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.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: i11$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11$3.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: i5.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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,
@@ -7356,5 +7214,5 @@ var shelf_module = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { IncidentModule as $, StockIssueProductFormComponent as A, StockIssueProductFormButtonComponent as B, StockReceiptsModule as C, StockReceiptPageComponent as D, StockReceiptListComponent as E, StockReceiptProductsListComponent as F, StockReceiptSingleProductFormComponent as G, StockReceiptViewComponent as H, InventoryCommonRoutingModule as I, StockReceiptProductFormComponent as J, StockReceiptProductFormButtonComponent as K, LocationService as L, MaterialModule as M, StockTransferListComponent as N, StockTransferFormComponent as O, PurchaseOrderService as P, StockTransferService as Q, MeasureModule as R, SharedModule as S, TechlifyFilterComponent as T, MeasureService as U, SupplierModule as V, SupplierFormComponent as W, SupplierListComponent as X, SupplierTypeService as Y, PayeeSelectorModule as Z, PayeeSelectorComponent as _, TechlifyFilterModule as a, IncidentService as a0, IncidentListComponent as a1, IncidentFormComponent as a2, IncidentFormButtonComponent as a3, RatingModule as a4, RatingService as a5, RatingListComponent as a6, RatingFormComponent as a7, RatingFormButtonComponent as a8, ExportToExcelButtonComponent as a9, LocationModule as aa, LocationListComponent as ab, LocationFormComponent as ac, LocationFormButtonComponent as ad, ShelfModule as ae, ShelfService as af, ShelfListComponent as ag, ShelfFormComponent as ah, ShelfFormButtonComponent as ai, StockIssueService as b, LocationSelectorComponent as c, StockIssueProductService as d, StockAllocationListComponent 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, StockIssueSingleProductFormComponent as x, StockIssueListComponent as y, StockIssueProductListComponent as z };
-//# sourceMappingURL=techlify-inventory-common-techlify-inventory-common-Bveawfj2.mjs.map
+export { IncidentService as $, StockIssueProductFormButtonComponent as A, StockReceiptsModule as B, StockReceiptPageComponent as C, StockReceiptListComponent as D, StockReceiptProductsListComponent as E, StockReceiptSingleProductFormComponent as F, StockReceiptViewComponent as G, StockReceiptProductFormComponent as H, InventoryCommonRoutingModule as I, StockReceiptProductFormButtonComponent as J, StockTransferListComponent as K, LocationService as L, MaterialModule as M, StockTransferFormComponent as N, StockTransferService as O, PurchaseOrderService as P, MeasureModule as Q, MeasureService as R, SharedModule as S, TechlifyFilterComponent as T, SupplierModule as U, SupplierFormComponent as V, SupplierListComponent as W, SupplierTypeService as X, PayeeSelectorModule as Y, PayeeSelectorComponent as Z, IncidentModule as _, TechlifyFilterModule as a, IncidentListComponent as a0, IncidentFormComponent as a1, IncidentFormButtonComponent as a2, RatingModule as a3, RatingService as a4, RatingListComponent as a5, RatingFormComponent as a6, RatingFormButtonComponent as a7, ExportToExcelButtonComponent as a8, LocationModule as a9, LocationListComponent as aa, LocationFormComponent as ab, LocationFormButtonComponent as ac, ShelfModule as ad, ShelfService as ae, ShelfListComponent as af, ShelfFormComponent as ag, ShelfFormButtonComponent as ah, StockIssueService as b, StockIssueProductService as c, StockAllocationListComponent as d, InventoryCommonModule as e, StockSummaryService as f, ProductModule as g, ProductFormComponent as h, ProductBasicInfoComponent as i, ProductFormButtonComponent as j, ProductQuickSearchComponent as k, ProductSearchModule as l, ProductSearchComponent as m, ProductListComponent as n, ProductService as o, ProductFormService as p, ProductBatchUpdateFormComponent as q, ProductImportPageComponent as r, ProductViewPageComponent as s, StockIssueModule as t, StockIssuePageComponent as u, StockIssuePageModule as v, StockIssueSingleProductFormComponent as w, StockIssueListComponent as x, StockIssueProductListComponent as y, StockIssueProductFormComponent as z };
+//# sourceMappingURL=techlify-inventory-common-techlify-inventory-common-B_42CQL_.mjs.map