techlify-inventory-common 18.51.0 → 22.0.0

package/fesm2022/techlify-inventory-common-product.module-MZoVK3bN.mjs

@@ -0,0 +1,4278 @@
+import { t as MeasureService } from "./techlify-inventory-common-measure.service-DvJUGa0i.mjs";
+import { t as TechlifyFormService } from "./techlify-inventory-common-techlify-form-service-D9K3W2jt.mjs";
+import { n as ExportToExcelButtonComponent } from "./techlify-inventory-common-product-category-badges.component-VnfnNhtV.mjs";
+import { m as __exportAll, o as StockReceiptProductsListComponent, t as StockReceiptsModule } from "./techlify-inventory-common-stock-receipts.module-BPxUGNbD.mjs";
+import { i as StockIssueProductListComponent, t as StockIssuePageModule } from "./techlify-inventory-common-stock-issue-page.module-DX9n3X1T.mjs";
+import { t as MaterialModule$1 } from "./techlify-inventory-common-material.module-ClupVm7-.mjs";
+import { t as SharedModule } from "./techlify-inventory-common-shared.module-DP-FVqea.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Injectable, Input, NgModule, Optional, Output, ViewChild, effect, input, output, signal, viewChild } from "@angular/core";
+import * as i4$1 from "@angular/router";
+import { RouterLink, RouterModule } from "@angular/router";
+import moment from "moment";
+import * as i1 from "ngx-techlify-core";
+import { AuthenticationGuard, ColumnSelectorModule, DocumentViewerModule, FileDropperModule, FormConfigurationUtilityService, ImportCsvModule, SearchableSelectorModule, TechlifyFormButtonComponent, TechlifyFormComponent, TechlifyListComponent, TechlifyService } from "ngx-techlify-core";
+import * as i10 from "@angular/material/icon";
+import * as i7 from "@angular/material/card";
+import { MatCardContent, MatCardTitle } from "@angular/material/card";
+import * as i14$1 from "@angular/material/table";
+import { MatTableDataSource } from "@angular/material/table";
+import * as i11 from "@angular/material/progress-bar";
+import * as i6$1 from "ngx-infinite-scroll";
+import { InfiniteScrollDirective } from "ngx-infinite-scroll";
+import * as i2 from "@angular/forms";
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
+import { debounceTime, distinctUntilChanged } from "rxjs";
+import { __decorate } from "tslib";
+import * as i3 from "@angular/material/dialog";
+import { MAT_DIALOG_DATA } from "@angular/material/dialog";
+import * as i4$2 from "ngx-spinner";
+import * as i6$2 from "@angular/material/button";
+import { MatButton } from "@angular/material/button";
+import * as i7$2 from "@angular/material/form-field";
+import { MatError, MatFormField, MatHint, MatLabel, MatSuffix } from "@angular/material/form-field";
+import * as i8$1 from "@angular/material/input";
+import { MatInput } from "@angular/material/input";
+import { debounceTime as debounceTime$1 } from "rxjs/operators";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import * as i7$1 from "@angular/material/autocomplete";
+import * as i12$1 from "@angular/material/select";
+import * as i13 from "@angular/material/sort";
+import { SelectionModel } from "@angular/cdk/collections";
+import * as i8 from "@angular/material/checkbox";
+import * as i14 from "@angular/material/tooltip";
+import * as i9 from "@angular/material/datepicker";
+import { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from "@angular/material/datepicker";
+import * as i4 from "@angular/material/divider";
+import * as i12 from "@angular/material/progress-spinner";
+import * as i19 from "@angular/common";
+import { CommonModule } from "@angular/common";
+import moment$1 from "moment/moment";
+import * as i6 from "angularx-qrcode";
+import { QRCodeComponent } from "angularx-qrcode";
+import JsBarcode from "jsbarcode";
+var ProductService = class ProductService extends TechlifyService {
+	httpService;
+	constructor(httpService) {
+		super(httpService, "products");
+		this.httpService = httpService;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductService,
+		deps: [{ token: i1.HttpService }],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{ type: i1.HttpService }]
+});
+const errorMessages = {
+	title: { required: "Please Enter Title" },
+	description: { required: "Please Enter Description" }
+};
+var ProductMeasureFormComponent = class ProductMeasureFormComponent {
+	measureService;
+	fb;
+	dialogRef;
+	data;
+	spinnerService;
+	formValidatorService;
+	errorService;
+	alertService;
+	productMeasureForm;
+	isWorking = false;
+	isUpdate = false;
+	constructor(measureService, fb, dialogRef, data, spinnerService, formValidatorService, errorService, alertService) {
+		this.measureService = measureService;
+		this.fb = fb;
+		this.dialogRef = dialogRef;
+		this.data = data;
+		this.spinnerService = spinnerService;
+		this.formValidatorService = formValidatorService;
+		this.errorService = errorService;
+		this.alertService = alertService;
+		this.productMeasureForm = this.fb.group({
+			id: [""],
+			title: ["", Validators.compose([Validators.required])],
+			description: ["", Validators.compose([Validators.required])]
+		});
+	}
+	ngOnInit() {
+		if (this.data.details) {
+			this.isUpdate = true;
+			this.productMeasureForm.patchValue(this.data.details);
+		}
+	}
+	async save() {
+		if (!this.productMeasureForm.valid) {
+			this.alertService.addAlert("Please Fill All Required Fields", "warn");
+			this.productMeasureForm.markAllAsTouched();
+			return;
+		}
+		let productMeasure = this.productMeasureForm.value;
+		try {
+			this.spinnerService.show();
+			this.isWorking = true;
+			let result = this.isUpdate ? await this.measureService.update(productMeasure).toPromise() : await this.measureService.store(productMeasure).toPromise();
+			this.dialogRef.close(result);
+		} catch (error) {
+			this.errorService.handleError(error);
+		} finally {
+			this.isWorking = false;
+			this.spinnerService.hide();
+		}
+	}
+	isFieldValid(field) {
+		return this.formValidatorService.isFieldValid(field, this.productMeasureForm);
+	}
+	getErrorMessage(field) {
+		return this.formValidatorService.getErrorMessage(field, this.productMeasureForm, errorMessages);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductMeasureFormComponent,
+		deps: [
+			{ token: MeasureService },
+			{ token: i2.FormBuilder },
+			{ token: i3.MatDialogRef },
+			{ token: MAT_DIALOG_DATA },
+			{ token: i4$2.NgxSpinnerService },
+			{ token: i1.FormValidatorService },
+			{ token: i1.ErrorHandlerService },
+			{ token: i1.AlertService }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: ProductMeasureFormComponent,
+		isStandalone: false,
+		selector: "app-product-measure-form",
+		ngImport: i0,
+		template: "<div>\n  <form [formGroup]=\"productMeasureForm\" (ngSubmit)=\"save()\">\n    <h3 class=\"text-center\">Create/Update Product Measure</h3>\n    <div class=\"d-flex flex-column\">\n      <div class=\"d-flex flex-column\">\n        <mat-form-field>\n          <input matInput placeholder=\"Title\" formControlName=\"title\" required />\n          @if (isFieldValid('title')) {\n          <mat-error>{{ getErrorMessage('title') }} </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field>\n          <input matInput placeholder=\"Description\" formControlName=\"description\" required />\n          @if (isFieldValid('description')) {\n          <mat-error>{{ getErrorMessage('description') }} </mat-error>\n          }\n        </mat-form-field>\n        <div class=\"d-flex gap-3\">\n          <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">Cancel</button>\n          <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n",
+		dependencies: [
+			{
+				kind: "component",
+				type: i6$2.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "component",
+				type: i7$2.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i7$2.MatError,
+				selector: "mat-error, [matError]",
+				inputs: ["id"]
+			},
+			{
+				kind: "directive",
+				type: i8$1.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "directive",
+				type: i2.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i2.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i2.RequiredValidator,
+				selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",
+				inputs: ["required"]
+			},
+			{
+				kind: "directive",
+				type: i2.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i2.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductMeasureFormComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-product-measure-form",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			template: "<div>\n  <form [formGroup]=\"productMeasureForm\" (ngSubmit)=\"save()\">\n    <h3 class=\"text-center\">Create/Update Product Measure</h3>\n    <div class=\"d-flex flex-column\">\n      <div class=\"d-flex flex-column\">\n        <mat-form-field>\n          <input matInput placeholder=\"Title\" formControlName=\"title\" required />\n          @if (isFieldValid('title')) {\n          <mat-error>{{ getErrorMessage('title') }} </mat-error>\n          }\n        </mat-form-field>\n        <mat-form-field>\n          <input matInput placeholder=\"Description\" formControlName=\"description\" required />\n          @if (isFieldValid('description')) {\n          <mat-error>{{ getErrorMessage('description') }} </mat-error>\n          }\n        </mat-form-field>\n        <div class=\"d-flex gap-3\">\n          <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">Cancel</button>\n          <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n"
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: MeasureService },
+		{ type: i2.FormBuilder },
+		{ type: i3.MatDialogRef },
+		{
+			type: void 0,
+			decorators: [{
+				type: Inject,
+				args: [MAT_DIALOG_DATA]
+			}]
+		},
+		{ type: i4$2.NgxSpinnerService },
+		{ type: i1.FormValidatorService },
+		{ type: i1.ErrorHandlerService },
+		{ type: i1.AlertService }
+	]
+});
+let ProductMeasuresListComponent = class ProductMeasuresListComponent {
+	fb;
+	dialog;
+	filterService;
+	activatedRoute;
+	measureService;
+	filterFormGroup;
+	lastPage;
+	page = 1;
+	perPage = 25;
+	totalItems = 0;
+	currentPage = 1;
+	num_items = 25;
+	routeFilters;
+	productMeasures = [];
+	columnDefinitions = [
+		{
+			def: "#",
+			isShow: true
+		},
+		{
+			def: "Title",
+			isShow: true
+		},
+		{
+			def: "Description",
+			isShow: true
+		},
+		{
+			def: "Actions",
+			isShow: true
+		}
+	];
+	displayedColumns = [
+		"#",
+		"Title",
+		"Description",
+		"Actions"
+	];
+	dataSource = new MatTableDataSource();
+	constructor(fb, dialog, filterService, activatedRoute, measureService) {
+		this.fb = fb;
+		this.dialog = dialog;
+		this.filterService = filterService;
+		this.activatedRoute = activatedRoute;
+		this.measureService = measureService;
+		this.filterFormGroup = this.fb.group({
+			num_items: [this.num_items + "|" + this.currentPage],
+			search: [""],
+			type_ids: [""],
+			sort_by: [""]
+		});
+	}
+	ngOnInit() {
+		this.patchFiltersFromRoute();
+		this.listenForChanges();
+		this.loadData();
+	}
+	listenForChanges() {
+		this.filterFormGroup.valueChanges.pipe(debounceTime$1(500), untilDestroyed(this)).subscribe((changes) => {
+			this.filterService.applyFilterToRoute(this.activatedRoute, this.filterFormGroup.value);
+			this.reload();
+		});
+	}
+	patchFiltersFromRoute() {
+		this.routeFilters = this.filterService.getFiltersFromRoute(this.activatedRoute, this.filterFormGroup.value);
+		this.filterFormGroup.setValue(this.routeFilters);
+		if (this.routeFilters.type_ids) this.filterFormGroup.get("type_ids").setValue(this.routeFilters.type_ids.split(",").map(Number));
+	}
+	async loadData() {
+		let filters = this.filterFormGroup.value;
+		filters.page = this.page;
+		filters.per_page = this.perPage;
+		filters.type_ids = filters.type_ids.toString();
+		filters.num_items = this.num_items + "|" + this.currentPage;
+		let res = await this.measureService.index(filters).toPromise();
+		if (this.productMeasures.length < 1) this.productMeasures = res.data;
+		else res.data.forEach((item) => this.productMeasures.push(item));
+		this.dataSource = new MatTableDataSource(this.productMeasures);
+		this.totalItems = res.total;
+		this.lastPage = res.last_page || this.page;
+	}
+	reload() {
+		this.productMeasures = [];
+		this.currentPage = 1;
+		this.loadData();
+	}
+	modifyProductMeasure(model) {
+		this.dialog.open(ProductMeasureFormComponent, {
+			width: "600px",
+			data: { details: model }
+		}).afterClosed().subscribe((result) => {
+			if (result) this.reload();
+		});
+	}
+	onScroll() {
+		if (this.totalItems > this.productMeasures.length) {
+			this.currentPage += 1;
+			this.loadData();
+		}
+	}
+	assignFilter(column, direction) {
+		if (column) return this.filterFormGroup.get("sort_by")?.setValue(column + "|" + direction);
+	}
+	sortColumn(event) {
+		var direction = event.direction.toString().toUpperCase();
+		this.assignFilter(event.active, direction);
+	}
+	ngOnDestroy() {}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductMeasuresListComponent,
+		deps: [
+			{ token: i2.FormBuilder },
+			{ token: i3.MatDialog },
+			{ token: i1.FilterService },
+			{ token: i4$1.ActivatedRoute },
+			{ token: MeasureService }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: ProductMeasuresListComponent,
+		isStandalone: false,
+		selector: "app-product-measure-list",
+		ngImport: i0,
+		template: "<div class=\"d-flex flex-column\">\n  <div class=\"text-center d-flex justify-content-center align-items-center\">\n    <h3 class=\"d-flex\">\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 class=\"d-flex\">\n    <form [formGroup]=\"filterFormGroup\" class=\"d-flex gap-2\">\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\" style=\"flex: 0 1 calc(11.11% - 0.5rem)\">\n      <mat-label>Columns</mat-label>\n      <mat-select [(ngModel)]=\"displayedColumns\" multiple name=\"column\">\n        @for (column of columnDefinitions; track column) {\n        <mat-option [value]=\"column.def\" [disabled]=\"!column.isShow\">\n          {{ column?.def }}</mat-option\n        >\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 d-flex gap-3\">\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: i6$1.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: i7$1.MatOption,
+				selector: "mat-option",
+				inputs: [
+					"value",
+					"id",
+					"disabled"
+				],
+				outputs: ["onSelectionChange"],
+				exportAs: ["matOption"]
+			},
+			{
+				kind: "component",
+				type: i6$2.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "component",
+				type: i6$2.MatIconButton,
+				selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]",
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "component",
+				type: i7$2.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i7$2.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "component",
+				type: i10.MatIcon,
+				selector: "mat-icon",
+				inputs: [
+					"color",
+					"inline",
+					"svgIcon",
+					"fontSet",
+					"fontIcon"
+				],
+				exportAs: ["matIcon"]
+			},
+			{
+				kind: "directive",
+				type: i8$1.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "component",
+				type: i12$1.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",
+					"canSelectNullableOptions"
+				],
+				outputs: [
+					"openedChange",
+					"opened",
+					"closed",
+					"selectionChange",
+					"valueChange"
+				],
+				exportAs: ["matSelect"]
+			},
+			{
+				kind: "directive",
+				type: i13.MatSort,
+				selector: "[matSort]",
+				inputs: [
+					"matSortActive",
+					"matSortStart",
+					"matSortDirection",
+					"matSortDisableClear",
+					"matSortDisabled"
+				],
+				outputs: ["matSortChange"],
+				exportAs: ["matSort"]
+			},
+			{
+				kind: "component",
+				type: i13.MatSortHeader,
+				selector: "[mat-sort-header]",
+				inputs: [
+					"mat-sort-header",
+					"arrowPosition",
+					"start",
+					"disabled",
+					"sortActionDescription",
+					"disableClear"
+				],
+				exportAs: ["matSortHeader"]
+			},
+			{
+				kind: "component",
+				type: i14$1.MatTable,
+				selector: "mat-table, table[mat-table]",
+				exportAs: ["matTable"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatHeaderCellDef,
+				selector: "[matHeaderCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatHeaderRowDef,
+				selector: "[matHeaderRowDef]",
+				inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatColumnDef,
+				selector: "[matColumnDef]",
+				inputs: ["matColumnDef"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatCellDef,
+				selector: "[matCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatRowDef,
+				selector: "[matRowDef]",
+				inputs: ["matRowDefColumns", "matRowDefWhen"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatHeaderCell,
+				selector: "mat-header-cell, th[mat-header-cell]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatCell,
+				selector: "mat-cell, td[mat-cell]"
+			},
+			{
+				kind: "component",
+				type: i14$1.MatHeaderRow,
+				selector: "mat-header-row, tr[mat-header-row]",
+				exportAs: ["matHeaderRow"]
+			},
+			{
+				kind: "component",
+				type: i14$1.MatRow,
+				selector: "mat-row, tr[mat-row]",
+				exportAs: ["matRow"]
+			},
+			{
+				kind: "directive",
+				type: i2.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i2.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i2.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i2.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "directive",
+				type: i2.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+ProductMeasuresListComponent = __decorate([UntilDestroy()], ProductMeasuresListComponent);
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductMeasuresListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-product-measure-list",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			template: "<div class=\"d-flex flex-column\">\n  <div class=\"text-center d-flex justify-content-center align-items-center\">\n    <h3 class=\"d-flex\">\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 class=\"d-flex\">\n    <form [formGroup]=\"filterFormGroup\" class=\"d-flex gap-2\">\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\" style=\"flex: 0 1 calc(11.11% - 0.5rem)\">\n      <mat-label>Columns</mat-label>\n      <mat-select [(ngModel)]=\"displayedColumns\" multiple name=\"column\">\n        @for (column of columnDefinitions; track column) {\n        <mat-option [value]=\"column.def\" [disabled]=\"!column.isShow\">\n          {{ column?.def }}</mat-option\n        >\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 d-flex gap-3\">\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"
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i2.FormBuilder },
+		{ type: i3.MatDialog },
+		{ type: i1.FilterService },
+		{ type: i4$1.ActivatedRoute },
+		{ type: MeasureService }
+	]
+});
+var ProductFormService = class ProductFormService extends TechlifyFormService {
+	constructor() {
+		super();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductFormService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductFormService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductFormService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+var ProductFormButtonComponent = class ProductFormButtonComponent {
+	product = input(void 0, ...ngDevMode ? [{ debugName: "product" }] : /* istanbul ignore next */ []);
+	constructor() {}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductFormButtonComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: ProductFormButtonComponent,
+		isStandalone: false,
+		selector: "app-product-form-button",
+		inputs: { product: {
+			classPropertyName: "product",
+			publicName: "product",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: "@if (product()) {\n<app-techlify-icon role='button' name='edit' [routerLink]=\"['/inventory/products/form', product().id]\"></app-techlify-icon>\n} @else {\n<app-techlify-icon role='button' name='add' routerLink=\"form\"></app-techlify-icon>\n}",
+		styles: [""],
+		dependencies: [{
+			kind: "directive",
+			type: i4$1.RouterLink,
+			selector: "[routerLink]",
+			inputs: [
+				"target",
+				"queryParams",
+				"fragment",
+				"queryParamsHandling",
+				"state",
+				"info",
+				"relativeTo",
+				"preserveFragment",
+				"skipLocationChange",
+				"replaceUrl",
+				"browserUrl",
+				"routerLink"
+			]
+		}, {
+			kind: "component",
+			type: i1.TechlifyIconComponent,
+			selector: "app-techlify-icon",
+			inputs: ["name", "size"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductFormButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-product-form-button",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			template: "@if (product()) {\n<app-techlify-icon role='button' name='edit' [routerLink]=\"['/inventory/products/form', product().id]\"></app-techlify-icon>\n} @else {\n<app-techlify-icon role='button' name='add' routerLink=\"form\"></app-techlify-icon>\n}"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { product: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "product",
+			required: false
+		}]
+	}] }
+});
+var ProductBatchService = class ProductBatchService extends TechlifyService {
+	httpService;
+	constructor(httpService) {
+		super(httpService, "products-batch");
+		this.httpService = httpService;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductBatchService,
+		deps: [{ token: i1.HttpService }],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductBatchService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductBatchService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{ type: i1.HttpService }]
+});
+var ProductBatchUpdateFormComponent = class ProductBatchUpdateFormComponent extends TechlifyFormComponent {
+	formBuilder;
+	batchService;
+	selection;
+	updated = new EventEmitter();
+	isSaving;
+	constructor(formValidatorService, formBuilder, batchService) {
+		super(formValidatorService);
+		this.formBuilder = formBuilder;
+		this.batchService = batchService;
+		this.form = this.formBuilder.group({
+			type_id: [""],
+			category_ids: [""],
+			measure_id: [""],
+			reorder_point: [""]
+		});
+	}
+	save() {
+		const data = { ...this.form.value };
+		data.ids = this.selection.selected.map((product) => product?.id);
+		this.isSaving = true;
+		this.batchService.store(data).subscribe({
+			next: () => {
+				this.isSaving = false;
+				this.alertService.addAlert("The products updated successfully!", "success");
+				this.selection.clear();
+				this.updated.emit();
+			},
+			error: () => {
+				this.isSaving = false;
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductBatchUpdateFormComponent,
+		deps: [
+			{ token: i1.FormValidatorService },
+			{ token: i2.FormBuilder },
+			{ token: ProductBatchService }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.5",
+		type: ProductBatchUpdateFormComponent,
+		isStandalone: false,
+		selector: "app-product-batch-update-form",
+		inputs: { selection: "selection" },
+		outputs: { updated: "updated" },
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<p class=\"text-primary fw-bold\">{{ selection.selected.length }} Product(s) Selected</p>\n<form [formGroup]=\"form\" class=\"d-flex flex-column justify-content-start\" (submit)=\"save()\">\n  <mat-form-field>\n    <mat-label>Type</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Category</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Reorder Point</mat-label>\n    <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2 mt-3\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Update</button>\n    <button [disabled]=\"isSaving\" mat-flat-button type=\"button\" (click)=\"selection.clear()\">Cancel</button>\n  </div>\n</form>\n",
+		styles: [""],
+		dependencies: [
+			{
+				kind: "component",
+				type: i6$2.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "component",
+				type: i7$2.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i7$2.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "directive",
+				type: i8$1.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "directive",
+				type: i2.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i2.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NumberValueAccessor,
+				selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i2.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i2.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "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"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductBatchUpdateFormComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-product-batch-update-form",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			template: "<p class=\"text-primary fw-bold\">{{ selection.selected.length }} Product(s) Selected</p>\n<form [formGroup]=\"form\" class=\"d-flex flex-column justify-content-start\" (submit)=\"save()\">\n  <mat-form-field>\n    <mat-label>Type</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\"></app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Category</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\" [multiple]=\"true\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n    </app-searchable-selector>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Reorder Point</mat-label>\n    <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2 mt-3\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Update</button>\n    <button [disabled]=\"isSaving\" mat-flat-button type=\"button\" (click)=\"selection.clear()\">Cancel</button>\n  </div>\n</form>\n"
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i1.FormValidatorService },
+		{ type: i2.FormBuilder },
+		{ type: ProductBatchService }
+	],
+	propDecorators: {
+		selection: [{ type: Input }],
+		updated: [{ type: Output }]
+	}
+});
+let ProductListComponent = class ProductListComponent extends TechlifyListComponent {
+	fb;
+	dialog;
+	activatedRoute;
+	productService;
+	productFormService;
+	selection = new SelectionModel(true, []);
+	exportInProgress = false;
+	columnConfig = [
+		{
+			label: "#",
+			def: "#",
+			isSelected: true,
+			isEditable: false
+		},
+		{
+			label: "Name",
+			def: "name",
+			isSelected: true,
+			isEditable: false
+		},
+		{
+			label: "SKU",
+			def: "sku",
+			isSelected: true,
+			isEditable: false
+		},
+		{
+			label: "Average Cost",
+			def: "average_cost",
+			isSelected: false,
+			isEditable: true
+		},
+		{
+			label: "Categories",
+			def: "categories",
+			isSelected: true,
+			isEditable: false
+		},
+		{
+			label: "Description",
+			def: "description",
+			isSelected: true,
+			isEditable: false,
+			isExportable: false
+		},
+		{
+			label: "Reorder Point",
+			def: "reorder_point",
+			isSelected: true,
+			isEditable: false
+		},
+		{
+			label: "Stock Receipts",
+			def: "stock_receipts",
+			isSelected: true,
+			isEditable: false
+		},
+		{
+			label: "Stock Issues",
+			def: "stock_issues",
+			isSelected: true,
+			isEditable: false
+		},
+		{
+			label: "On Hand",
+			def: "on_hand",
+			isSelected: true,
+			isEditable: false
+		},
+		{
+			label: "Measure",
+			def: "measure",
+			isSelected: true,
+			isEditable: false
+		},
+		{
+			label: "Sale Price",
+			def: "sale_price",
+			isSelected: true,
+			isEditable: false
+		},
+		{
+			label: "Type",
+			def: "type",
+			isSelected: false,
+			isEditable: false,
+			isExportable: true
+		},
+		{
+			label: "Initial Quantity",
+			def: "initial_quantity",
+			isSelected: false,
+			isEditable: true
+		},
+		{
+			label: "Income Account",
+			def: "income_account",
+			isSelected: false,
+			isEditable: true
+		},
+		{
+			label: "Expense Account",
+			def: "expense_account",
+			isSelected: false,
+			isEditable: true
+		},
+		{
+			label: "Creator",
+			def: "creator",
+			isSelected: false,
+			isEditable: true
+		},
+		{
+			label: "Actions",
+			def: "Actions",
+			isSelected: true,
+			isEditable: false,
+			isExportable: false
+		},
+		{
+			label: "Select",
+			def: "Select",
+			isSelected: true,
+			isEditable: false,
+			isExportable: false
+		}
+	];
+	selectedColumns = this.columnConfig.filter((col) => col.isSelected);
+	get displayedColumns() {
+		const selectedDefs = new Set(this.selectedColumns.map((col) => col.def));
+		return this.columnConfig.filter((col) => {
+			if (this.exportInProgress) {
+				if (col.isExportable === true) return true;
+				if (col.isExportable === false) return false;
+			}
+			return selectedDefs.has(col.def);
+		}).map((col) => col.def);
+	}
+	importId;
+	constructor(fb, dialog, activatedRoute, productService, productFormService) {
+		super();
+		this.fb = fb;
+		this.dialog = dialog;
+		this.activatedRoute = activatedRoute;
+		this.productService = productService;
+		this.productFormService = productFormService;
+		this.filterForm = this.fb.group({
+			category_ids: [""],
+			expense_account_ids: [""],
+			income_account_ids: [""],
+			measure_ids: [""],
+			search: [""],
+			sort_by: [""],
+			type_ids: [""]
+		});
+	}
+	ngOnInit() {
+		if (this.activatedRoute.snapshot.queryParams?.["import_id"]) this.importId = parseInt(this.activatedRoute.snapshot.queryParams?.["import_id"]);
+		this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+			type_ids: { multiple: true },
+			category_ids: { multiple: true },
+			income_account_ids: { multiple: true },
+			expense_account_ids: { multiple: true }
+		});
+		this.filterForm.valueChanges.pipe(debounceTime$1(800)).subscribe(() => {
+			this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData({ ...this.filterForm.value }));
+		});
+		this.activatedRoute.queryParams.pipe(debounceTime$1(800)).subscribe(() => this.reload());
+		this.productFormService.isListUpdated().subscribe((val) => {
+			if (val && !this.isWorking) this.reload();
+		});
+	}
+	loadData() {
+		let params = { ...this.requestHelperService.convertToFormData(this.filterForm.value) };
+		params.page = this.page;
+		params.perPage = this.perPage;
+		params.with = "categories,lastStockReceipt,lastStockIssue,measure,creator";
+		if (this.importId) params.import_id = this.importId;
+		this.isWorking = true;
+		this.productService.index(params).subscribe({
+			next: (res) => {
+				this.isWorking = false;
+				this.models = this.models.concat(res?.data);
+				this.lastPage = res?.last_page;
+				this.productFormService.listUpdated(false);
+			},
+			error: () => this.isWorking = false
+		});
+	}
+	assignFilter(column, direction) {
+		if (column) return this.filterForm.get("sort_by")?.setValue(column + "|" + direction);
+	}
+	sortColumn(event) {
+		var direction = event.direction.toString().toUpperCase();
+		this.assignFilter(event.active, direction);
+	}
+	isAllRowsSelected() {
+		return this.selection.selected.length === this.models.length;
+	}
+	toggleAllRows() {
+		if (this.isAllRowsSelected()) {
+			this.selection.clear();
+			return;
+		}
+		this.selection.select(...this.models);
+	}
+	checkboxLabel(row) {
+		if (!row) return `${this.isAllRowsSelected() ? "deselect" : "select"} all`;
+		return `${this.selection.isSelected(row) ? "deselect" : "select"} row ${row.position + 1}`;
+	}
+	handleExport(hideColumns) {
+		this.exportInProgress = hideColumns;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductListComponent,
+		deps: [
+			{ token: i2.FormBuilder },
+			{ token: i3.MatDialog },
+			{ token: i4$1.ActivatedRoute },
+			{ token: ProductService },
+			{ token: ProductFormService }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: ProductListComponent,
+		isStandalone: false,
+		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]=\"[$safeNavigationMigration(element?.id), 'view']\">{{ element.name }}</a>\n              @if (element.type && !exportInProgress) {\n              <small class=\"text-secondary\">\n                {{ element.type?.title }}\n              </small>\n              }\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            @if (element?.categories?.length > 0) {\n            <div\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\">\n              @for (category of element?.categories; track category) {\n              <span class=\"badge bg-secondary\">\n                {{ category?.title }}\n              </span>\n              }\n            </div>\n            }\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            @if (element?.initial_quantity_date) {\n            <small class=\"text-secondary\">\n              on\n              {{ $safeNavigationMigration(element?.initial_quantity_date) | date }}\n            </small>\n            }\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            @if (element?.last_stock_receipt && !exportInProgress) {\n            <small class=\"text-secondary\">\n              Latest on\n              {{ $safeNavigationMigration(element?.last_stock_receipt?.date) | date }}\n            </small>\n            }\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            @if (element?.last_stock_issue && !exportInProgress) {\n            <small class=\"text-secondary\">\n              Latest on\n              {{ $safeNavigationMigration(element?.last_stock_issue?.date) | date }}\n            </small>\n            }\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\">{{ $safeNavigationMigration(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      @if (isWorking) {\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      }\n    </mat-card-content>\n  </mat-card>\n  @if (!selection.isEmpty()) {\n  <mat-card 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  }\n</div>",
+		styles: [".batch-update-card{width:15%;min-width:300px}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: i6$1.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: i7.MatCard,
+				selector: "mat-card",
+				inputs: ["appearance"],
+				exportAs: ["matCard"]
+			},
+			{
+				kind: "directive",
+				type: i7.MatCardContent,
+				selector: "mat-card-content"
+			},
+			{
+				kind: "component",
+				type: i8.MatCheckbox,
+				selector: "mat-checkbox",
+				inputs: [
+					"aria-label",
+					"aria-labelledby",
+					"aria-describedby",
+					"aria-expanded",
+					"aria-controls",
+					"aria-owns",
+					"id",
+					"required",
+					"labelPosition",
+					"name",
+					"value",
+					"disableRipple",
+					"tabIndex",
+					"color",
+					"disabledInteractive",
+					"checked",
+					"disabled",
+					"indeterminate"
+				],
+				outputs: ["change", "indeterminateChange"],
+				exportAs: ["matCheckbox"]
+			},
+			{
+				kind: "component",
+				type: i7$2.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i7$2.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "directive",
+				type: i8$1.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "component",
+				type: i11.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "directive",
+				type: i13.MatSort,
+				selector: "[matSort]",
+				inputs: [
+					"matSortActive",
+					"matSortStart",
+					"matSortDirection",
+					"matSortDisableClear",
+					"matSortDisabled"
+				],
+				outputs: ["matSortChange"],
+				exportAs: ["matSort"]
+			},
+			{
+				kind: "component",
+				type: i13.MatSortHeader,
+				selector: "[mat-sort-header]",
+				inputs: [
+					"mat-sort-header",
+					"arrowPosition",
+					"start",
+					"disabled",
+					"sortActionDescription",
+					"disableClear"
+				],
+				exportAs: ["matSortHeader"]
+			},
+			{
+				kind: "component",
+				type: i14$1.MatTable,
+				selector: "mat-table, table[mat-table]",
+				exportAs: ["matTable"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatHeaderCellDef,
+				selector: "[matHeaderCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatHeaderRowDef,
+				selector: "[matHeaderRowDef]",
+				inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatColumnDef,
+				selector: "[matColumnDef]",
+				inputs: ["matColumnDef"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatCellDef,
+				selector: "[matCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatRowDef,
+				selector: "[matRowDef]",
+				inputs: ["matRowDefColumns", "matRowDefWhen"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatFooterCellDef,
+				selector: "[matFooterCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatHeaderCell,
+				selector: "mat-header-cell, th[mat-header-cell]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatCell,
+				selector: "mat-cell, td[mat-cell]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatFooterCell,
+				selector: "mat-footer-cell, td[mat-footer-cell]"
+			},
+			{
+				kind: "component",
+				type: i14$1.MatHeaderRow,
+				selector: "mat-header-row, tr[mat-header-row]",
+				exportAs: ["matHeaderRow"]
+			},
+			{
+				kind: "component",
+				type: i14$1.MatRow,
+				selector: "mat-row, tr[mat-row]",
+				exportAs: ["matRow"]
+			},
+			{
+				kind: "directive",
+				type: i14.MatTooltip,
+				selector: "[matTooltip]",
+				inputs: [
+					"matTooltipPosition",
+					"matTooltipPositionAtOrigin",
+					"matTooltipDisabled",
+					"matTooltipShowDelay",
+					"matTooltipHideDelay",
+					"matTooltipTouchGestures",
+					"matTooltip",
+					"matTooltipClass"
+				],
+				exportAs: ["matTooltip"]
+			},
+			{
+				kind: "directive",
+				type: i2.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i2.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i2.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i2.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "directive",
+				type: i4$1.RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "directive",
+				type: i4$1.RouterLinkActive,
+				selector: "[routerLinkActive]",
+				inputs: [
+					"routerLinkActiveOptions",
+					"ariaCurrentWhenActive",
+					"routerLinkActive"
+				],
+				outputs: ["isActiveChange"],
+				exportAs: ["routerLinkActive"]
+			},
+			{
+				kind: "component",
+				type: i1.SearchableSelectorComponent,
+				selector: "app-searchable-selector",
+				inputs: [
+					"valueField",
+					"titleField",
+					"subtitleField",
+					"apiUrl",
+					"multiple",
+					"selectedValue",
+					"enableSearch",
+					"add",
+					"addConfig",
+					"edit",
+					"editConfig",
+					"sort",
+					"sortBy",
+					"searchField",
+					"itemComponent",
+					"items",
+					"apiDataProperty",
+					"cache",
+					"perPage",
+					"inDataSearch",
+					"panelWidth",
+					"focusSearchOnOpen",
+					"isEmitInitialEvent",
+					"required",
+					"disabled",
+					"value"
+				],
+				outputs: [
+					"selectedValueChange",
+					"selectionChange",
+					"itemsChange",
+					"isItemsEmpty"
+				]
+			},
+			{
+				kind: "component",
+				type: i1.TechlifyIconComponent,
+				selector: "app-techlify-icon",
+				inputs: ["name", "size"]
+			},
+			{
+				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: 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: i19.CurrencyPipe,
+				name: "currency"
+			},
+			{
+				kind: "pipe",
+				type: i19.DatePipe,
+				name: "date"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+ProductListComponent = __decorate([UntilDestroy()], ProductListComponent);
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-product-list",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			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]=\"[$safeNavigationMigration(element?.id), 'view']\">{{ element.name }}</a>\n              @if (element.type && !exportInProgress) {\n              <small class=\"text-secondary\">\n                {{ element.type?.title }}\n              </small>\n              }\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            @if (element?.categories?.length > 0) {\n            <div\n              class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\">\n              @for (category of element?.categories; track category) {\n              <span class=\"badge bg-secondary\">\n                {{ category?.title }}\n              </span>\n              }\n            </div>\n            }\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            @if (element?.initial_quantity_date) {\n            <small class=\"text-secondary\">\n              on\n              {{ $safeNavigationMigration(element?.initial_quantity_date) | date }}\n            </small>\n            }\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            @if (element?.last_stock_receipt && !exportInProgress) {\n            <small class=\"text-secondary\">\n              Latest on\n              {{ $safeNavigationMigration(element?.last_stock_receipt?.date) | date }}\n            </small>\n            }\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            @if (element?.last_stock_issue && !exportInProgress) {\n            <small class=\"text-secondary\">\n              Latest on\n              {{ $safeNavigationMigration(element?.last_stock_issue?.date) | date }}\n            </small>\n            }\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\">{{ $safeNavigationMigration(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      @if (isWorking) {\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      }\n    </mat-card-content>\n  </mat-card>\n  @if (!selection.isEmpty()) {\n  <mat-card 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  }\n</div>",
+			styles: [".batch-update-card{width:15%;min-width:300px}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i2.FormBuilder },
+		{ type: i3.MatDialog },
+		{ type: i4$1.ActivatedRoute },
+		{ type: ProductService },
+		{ type: ProductFormService }
+	]
+});
+var ProductNavBarComponent = class ProductNavBarComponent {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductNavBarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.5",
+		type: ProductNavBarComponent,
+		isStandalone: false,
+		selector: "app-product-nav-bar",
+		ngImport: i0,
+		template: "<div>\n  <router-outlet></router-outlet>\n</div>\n",
+		dependencies: [{
+			kind: "directive",
+			type: i4$1.RouterOutlet,
+			selector: "router-outlet",
+			inputs: ["name", "routerOutletData"],
+			outputs: [
+				"activate",
+				"deactivate",
+				"attach",
+				"detach"
+			],
+			exportAs: ["outlet"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductNavBarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-product-nav-bar",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			template: "<div>\n  <router-outlet></router-outlet>\n</div>\n"
+		}]
+	}]
+});
+var StockTransferService = class StockTransferService extends TechlifyService {
+	constructor(httpService) {
+		super(httpService, "stock-transfers");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: StockTransferService,
+		deps: [{ token: i1.HttpService }],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: StockTransferService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: StockTransferService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{ type: i1.HttpService }]
+});
+var StockTransferFormComponent = class StockTransferFormComponent extends TechlifyFormComponent {
+	formValidatorService;
+	formBuilder;
+	service;
+	data;
+	productId;
+	locationFrom;
+	constructor(formValidatorService, formBuilder, service, dialogRef, data) {
+		super(formValidatorService, service);
+		this.formValidatorService = formValidatorService;
+		this.formBuilder = formBuilder;
+		this.service = service;
+		this.data = data;
+		this.dialogRef = dialogRef;
+		this.errorMessages = {
+			date: { required: "The date field is required." },
+			product_id: { required: "The product field is required." },
+			location_from_id: { required: "The location from field is required." },
+			location_to_id: { required: "The location to field is required." },
+			quantity: { required: "The quantity field is required." }
+		};
+		this.form = this.formBuilder.group({
+			product_id: ["", Validators.required],
+			date: [/* @__PURE__ */ new Date(), [Validators.required]],
+			location_from_id: ["", Validators.required],
+			location_to_id: ["", Validators.required],
+			quantity: [1, Validators.required],
+			particulars: [""]
+		});
+	}
+	ngOnInit() {
+		const productId = this.data?.product_id ?? this.productId;
+		if (productId) this.form.get("product_id")?.setValue(productId);
+		const locationFrom = this.data?.location_from ?? this.locationFrom;
+		if (locationFrom) this.form.get("location_from_id")?.setValue(locationFrom.id);
+	}
+	getFormData() {
+		const data = { ...this.form.value };
+		if (data.date) data.date = moment$1(data.date).format("YYYY-MM-DD");
+		return data;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: StockTransferFormComponent,
+		deps: [
+			{ token: i1.FormValidatorService },
+			{ token: i2.FormBuilder },
+			{ token: StockTransferService },
+			{
+				token: i3.MatDialogRef,
+				optional: true
+			},
+			{
+				token: MAT_DIALOG_DATA,
+				optional: true
+			}
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		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        @if (isFieldValid('date')) {\n        <mat-error>{{ getErrorMessage('date') }}</mat-error>\n        }\n      </mat-form-field>\n\n      @if (!(data?.product_id ?? productId)) {\n      <mat-form-field>\n        <mat-label>Product</mat-label>\n        <app-searchable-selector formControlName=\"product_id\" titleField=\"name\"\n          apiUrl=\"api/products\"></app-searchable-selector>\n        @if (isFieldValid('product_id')) {\n        <mat-error>{{ getErrorMessage('product_id') }}</mat-error>\n        }\n      </mat-form-field>\n      }\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        @if (isFieldValid('location_from_id')) {\n        <mat-error>{{ getErrorMessage('location_from_id') }}</mat-error>\n        }\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        @if (isFieldValid('location_to_id')) {\n        <mat-error>{{ getErrorMessage('location_to_id') }}</mat-error>\n        }\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        @if (isFieldValid('quantity')) {\n        <mat-error>{{ getErrorMessage('quantity') }}</mat-error>\n        }\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.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i2.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NumberValueAccessor,
+				selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i2.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i2.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "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",
+					"disabledInteractive"
+				],
+				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: MatHint,
+				selector: "mat-hint",
+				inputs: ["align", "id"]
+			},
+			{
+				kind: "component",
+				type: MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "directive",
+				type: MatCardContent,
+				selector: "mat-card-content"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: StockTransferFormComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-stock-transfer-form",
+			imports: [
+				ReactiveFormsModule,
+				MatFormField,
+				MatLabel,
+				MatInput,
+				MatDatepickerInput,
+				MatDatepickerToggle,
+				MatDatepicker,
+				MatSuffix,
+				SearchableSelectorModule,
+				MatError,
+				MatHint,
+				MatButton,
+				MatCardTitle,
+				MatCardContent
+			],
+			changeDetection: ChangeDetectionStrategy.Eager,
+			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        @if (isFieldValid('date')) {\n        <mat-error>{{ getErrorMessage('date') }}</mat-error>\n        }\n      </mat-form-field>\n\n      @if (!(data?.product_id ?? productId)) {\n      <mat-form-field>\n        <mat-label>Product</mat-label>\n        <app-searchable-selector formControlName=\"product_id\" titleField=\"name\"\n          apiUrl=\"api/products\"></app-searchable-selector>\n        @if (isFieldValid('product_id')) {\n        <mat-error>{{ getErrorMessage('product_id') }}</mat-error>\n        }\n      </mat-form-field>\n      }\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        @if (isFieldValid('location_from_id')) {\n        <mat-error>{{ getErrorMessage('location_from_id') }}</mat-error>\n        }\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        @if (isFieldValid('location_to_id')) {\n        <mat-error>{{ getErrorMessage('location_to_id') }}</mat-error>\n        }\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        @if (isFieldValid('quantity')) {\n        <mat-error>{{ getErrorMessage('quantity') }}</mat-error>\n        }\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.FormBuilder },
+		{ type: StockTransferService },
+		{
+			type: i3.MatDialogRef,
+			decorators: [{ type: Optional }]
+		},
+		{
+			type: void 0,
+			decorators: [{
+				type: Inject,
+				args: [MAT_DIALOG_DATA]
+			}, { type: Optional }]
+		}
+	],
+	propDecorators: {
+		productId: [{ type: Input }],
+		locationFrom: [{ type: Input }]
+	}
+});
+var ProductStatisticsService = class ProductStatisticsService extends TechlifyService {
+	http;
+	constructor(http) {
+		super(http, "product-statistics");
+		this.http = http;
+	}
+	stockByLocation(params) {
+		return this.http.get("api/product-statistics/stock-by-location", { params });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductStatisticsService,
+		deps: [{ token: i1.HttpService }],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductStatisticsService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductStatisticsService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{ type: i1.HttpService }]
+});
+var ProductLocationListComponent = class ProductLocationListComponent extends TechlifyListComponent {
+	statisticsService;
+	errorHandler;
+	product;
+	updated = new EventEmitter();
+	stockTransferForm = signal(StockTransferFormComponent, ...ngDevMode ? [{ debugName: "stockTransferForm" }] : /* istanbul ignore next */ []);
+	constructor(statisticsService, errorHandler) {
+		super();
+		this.statisticsService = statisticsService;
+		this.errorHandler = errorHandler;
+	}
+	displayedColumns = [
+		"#",
+		"Location",
+		"Stock",
+		"Actions"
+	];
+	ngOnInit() {
+		this.loadData();
+	}
+	loadData() {
+		this.statisticsService.stockByLocation({ product_id: this.product.id }).subscribe({
+			next: (response) => {
+				this.models = response?.data;
+				this.lastPage = response?.last_page;
+			},
+			error: (error) => {
+				this.errorHandler.handleError(error);
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductLocationListComponent,
+		deps: [{ token: ProductStatisticsService }, { token: i1.ErrorHandlerService }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: ProductLocationListComponent,
+		isStandalone: true,
+		selector: "app-product-location-list",
+		inputs: { product: "product" },
+		outputs: { updated: "updated" },
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<mat-card>\n  <mat-card-content class=\"pb-3 d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> location_on </span>\n      <strong class=\"mb-0 text-dark\">Product Locations</strong>\n    </div>\n\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Location\">\n        <th mat-header-cell *matHeaderCellDef> Location </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef> Stock </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.current_stock }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          @if (element?.id) {\n          <app-techlify-form-button\n            [component]=\"stockTransferForm()\"\n            [data]=\"{\n              product_id: $safeNavigationMigration(product?.id),\n              location_from: element\n            }\"\n            [width]=\"'500px'\"\n            (saved)=\"reload(); updated.emit($event)\"></app-techlify-form-button>\n          }\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n  </mat-card-content>\n</mat-card>",
+		styles: [""],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: MaterialModule$1
+			},
+			{
+				kind: "component",
+				type: i7.MatCard,
+				selector: "mat-card",
+				inputs: ["appearance"],
+				exportAs: ["matCard"]
+			},
+			{
+				kind: "directive",
+				type: i7.MatCardContent,
+				selector: "mat-card-content"
+			},
+			{
+				kind: "component",
+				type: i4.MatDivider,
+				selector: "mat-divider",
+				inputs: ["vertical", "inset"]
+			},
+			{
+				kind: "component",
+				type: i14$1.MatTable,
+				selector: "mat-table, table[mat-table]",
+				exportAs: ["matTable"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatHeaderCellDef,
+				selector: "[matHeaderCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatHeaderRowDef,
+				selector: "[matHeaderRowDef]",
+				inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatColumnDef,
+				selector: "[matColumnDef]",
+				inputs: ["matColumnDef"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatCellDef,
+				selector: "[matCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatRowDef,
+				selector: "[matRowDef]",
+				inputs: ["matRowDefColumns", "matRowDefWhen"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatHeaderCell,
+				selector: "mat-header-cell, th[mat-header-cell]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatCell,
+				selector: "mat-cell, td[mat-cell]"
+			},
+			{
+				kind: "component",
+				type: i14$1.MatHeaderRow,
+				selector: "mat-header-row, tr[mat-header-row]",
+				exportAs: ["matHeaderRow"]
+			},
+			{
+				kind: "component",
+				type: i14$1.MatRow,
+				selector: "mat-row, tr[mat-row]",
+				exportAs: ["matRow"]
+			},
+			{
+				kind: "component",
+				type: TechlifyFormButtonComponent,
+				selector: "app-techlify-form-button",
+				inputs: [
+					"component",
+					"model",
+					"data",
+					"width",
+					"tooltip",
+					"multiAddComponent",
+					"multiAddData",
+					"multiAddWidth",
+					"multiAddTooltip"
+				],
+				outputs: ["saved"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductLocationListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-product-location-list",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			imports: [
+				MaterialModule$1,
+				StockTransferFormComponent,
+				TechlifyFormButtonComponent
+			],
+			template: "<mat-card>\n  <mat-card-content class=\"pb-3 d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> location_on </span>\n      <strong class=\"mb-0 text-dark\">Product Locations</strong>\n    </div>\n\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Location\">\n        <th mat-header-cell *matHeaderCellDef> Location </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef> Stock </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.current_stock }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          @if (element?.id) {\n          <app-techlify-form-button\n            [component]=\"stockTransferForm()\"\n            [data]=\"{\n              product_id: $safeNavigationMigration(product?.id),\n              location_from: element\n            }\"\n            [width]=\"'500px'\"\n            (saved)=\"reload(); updated.emit($event)\"></app-techlify-form-button>\n          }\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n  </mat-card-content>\n</mat-card>"
+		}]
+	}],
+	ctorParameters: () => [{ type: ProductStatisticsService }, { type: i1.ErrorHandlerService }],
+	propDecorators: {
+		product: [{ type: Input }],
+		updated: [{ type: Output }]
+	}
+});
+var StockTransferListComponent = class StockTransferListComponent extends TechlifyListComponent {
+	service;
+	fb;
+	errorHandler;
+	activatedRoute;
+	productId;
+	changed = output();
+	stockTransferForm = signal(StockTransferFormComponent, ...ngDevMode ? [{ debugName: "stockTransferForm" }] : /* istanbul ignore next */ []);
+	displayedColumns = [
+		"#",
+		"product",
+		"date",
+		"quantity",
+		"location_from",
+		"location_to",
+		"status",
+		"creator"
+	];
+	constructor(service, fb, errorHandler, activatedRoute) {
+		super();
+		this.service = service;
+		this.fb = fb;
+		this.errorHandler = errorHandler;
+		this.activatedRoute = activatedRoute;
+		this.filterForm = this.fb.group({
+			product_id: [""],
+			search: [""],
+			status_ids: [""],
+			sort_by: ["date|desc"]
+		});
+	}
+	ngOnInit() {
+		if (this.productId) {
+			this.displayedColumns = this.displayedColumns.filter((c) => c !== "product");
+			this.filterForm.patchValue({ product_id: this.productId });
+			this.loadData();
+		} else {
+			this.updateFormWithQueryParams();
+			this.subscribeToFormChanges();
+			this.subscribeToRouteChanges();
+		}
+	}
+	loadData() {
+		this.isWorking = true;
+		let filters = this.filterForm.value;
+		filters.page = this.page;
+		filters.per_page = this.productId ? 9999 : this.perPage;
+		this.service.index(filters).subscribe({
+			next: (response) => {
+				this.models = this.models.concat(response?.data);
+				this.lastPage = response?.last_page;
+				this.isWorking = false;
+			},
+			error: (error) => {
+				this.errorHandler.handleError(error);
+				this.isWorking = false;
+			}
+		});
+	}
+	updateFormWithQueryParams() {
+		this.requestHelperService.updateFormWithQueryParams(this.filterForm, { status_ids: { multiple: true } });
+	}
+	subscribeToFormChanges() {
+		this.filterForm.valueChanges.pipe(debounceTime(800)).subscribe({ next: () => {
+			this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData(this.filterForm.value));
+		} });
+	}
+	subscribeToRouteChanges() {
+		this.activatedRoute.queryParams.pipe(debounceTime(500), distinctUntilChanged()).subscribe(() => {
+			this.reload();
+		});
+	}
+	transferSaved() {
+		this.reload();
+		this.changed.emit();
+	}
+	onSortChange(sort) {
+		let { active, direction } = sort;
+		if (!active) active = "date";
+		if (!direction) {
+			direction = "desc";
+			active = "date";
+		}
+		this.filterForm.get("sort_by").setValue(active + "|" + direction);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: StockTransferListComponent,
+		deps: [
+			{ token: StockTransferService },
+			{ token: i2.FormBuilder },
+			{ token: i1.ErrorHandlerService },
+			{ token: i4$1.ActivatedRoute }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: StockTransferListComponent,
+		isStandalone: true,
+		selector: "app-stock-transfer-list",
+		inputs: { productId: "productId" },
+		outputs: { changed: "changed" },
+		usesInheritance: true,
+		ngImport: i0,
+		template: "@if (!productId) {\n<mat-card 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\n<mat-card>\n  @if (productId) {\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  </mat-card-content>\n  }\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>{{ $safeNavigationMigration(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', $safeNavigationMigration(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\">{{ $safeNavigationMigration(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    @if (isWorking) {\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    }\n  </mat-card-content>\n</mat-card>\n",
+		styles: [""],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "ngmodule",
+				type: MaterialModule$1
+			},
+			{
+				kind: "component",
+				type: i7.MatCard,
+				selector: "mat-card",
+				inputs: ["appearance"],
+				exportAs: ["matCard"]
+			},
+			{
+				kind: "directive",
+				type: i7.MatCardContent,
+				selector: "mat-card-content"
+			},
+			{
+				kind: "component",
+				type: i7$2.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i7$2.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "directive",
+				type: i8$1.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "component",
+				type: i11.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "directive",
+				type: i13.MatSort,
+				selector: "[matSort]",
+				inputs: [
+					"matSortActive",
+					"matSortStart",
+					"matSortDirection",
+					"matSortDisableClear",
+					"matSortDisabled"
+				],
+				outputs: ["matSortChange"],
+				exportAs: ["matSort"]
+			},
+			{
+				kind: "component",
+				type: i13.MatSortHeader,
+				selector: "[mat-sort-header]",
+				inputs: [
+					"mat-sort-header",
+					"arrowPosition",
+					"start",
+					"disabled",
+					"sortActionDescription",
+					"disableClear"
+				],
+				exportAs: ["matSortHeader"]
+			},
+			{
+				kind: "component",
+				type: i14$1.MatTable,
+				selector: "mat-table, table[mat-table]",
+				exportAs: ["matTable"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatHeaderCellDef,
+				selector: "[matHeaderCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatHeaderRowDef,
+				selector: "[matHeaderRowDef]",
+				inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatColumnDef,
+				selector: "[matColumnDef]",
+				inputs: ["matColumnDef"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatCellDef,
+				selector: "[matCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatRowDef,
+				selector: "[matRowDef]",
+				inputs: ["matRowDefColumns", "matRowDefWhen"]
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatHeaderCell,
+				selector: "mat-header-cell, th[mat-header-cell]"
+			},
+			{
+				kind: "directive",
+				type: i14$1.MatCell,
+				selector: "mat-cell, td[mat-cell]"
+			},
+			{
+				kind: "component",
+				type: i14$1.MatHeaderRow,
+				selector: "mat-header-row, tr[mat-header-row]",
+				exportAs: ["matHeaderRow"]
+			},
+			{
+				kind: "component",
+				type: i14$1.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",
+					"tooltip",
+					"multiAddComponent",
+					"multiAddData",
+					"multiAddWidth",
+					"multiAddTooltip"
+				],
+				outputs: ["saved"]
+			},
+			{
+				kind: "ngmodule",
+				type: ReactiveFormsModule
+			},
+			{
+				kind: "directive",
+				type: i2.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i2.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i2.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i2.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"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"
+				]
+			},
+			{
+				kind: "pipe",
+				type: i19.DatePipe,
+				name: "date"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: StockTransferListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-stock-transfer-list",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			imports: [
+				CommonModule,
+				MaterialModule$1,
+				InfiniteScrollDirective,
+				StockTransferFormComponent,
+				TechlifyFormButtonComponent,
+				ReactiveFormsModule,
+				RouterLink,
+				SearchableSelectorModule
+			],
+			template: "@if (!productId) {\n<mat-card 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\n<mat-card>\n  @if (productId) {\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  </mat-card-content>\n  }\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>{{ $safeNavigationMigration(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', $safeNavigationMigration(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\">{{ $safeNavigationMigration(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    @if (isWorking) {\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    }\n  </mat-card-content>\n</mat-card>\n"
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: StockTransferService },
+		{ type: i2.FormBuilder },
+		{ type: i1.ErrorHandlerService },
+		{ type: i4$1.ActivatedRoute }
+	],
+	propDecorators: {
+		productId: [{ type: Input }],
+		changed: [{
+			type: i0.Output,
+			args: ["changed"]
+		}]
+	}
+});
+var StockSummaryService = class StockSummaryService {
+	httpService;
+	constructor(httpService) {
+		this.httpService = httpService;
+	}
+	summary(params) {
+		return this.httpService.get("api/stocks-summary", { params });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: StockSummaryService,
+		deps: [{ token: i1.HttpService }],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: StockSummaryService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: StockSummaryService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{ type: i1.HttpService }]
+});
+var BarcodeComponent = class BarcodeComponent {
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	format = input("CODE128", ...ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []);
+	displayValue = input(false, ...ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []);
+	svg = viewChild.required("barcode", ...ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const element = this.svg().nativeElement;
+			const value = this.value();
+			element.replaceChildren();
+			if (!value) return;
+			try {
+				JsBarcode(element, value, {
+					format: this.format(),
+					displayValue: this.displayValue()
+				});
+			} catch {
+				element.replaceChildren();
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: BarcodeComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.5",
+		type: BarcodeComponent,
+		isStandalone: true,
+		selector: "app-barcode",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			format: {
+				classPropertyName: "format",
+				publicName: "format",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			displayValue: {
+				classPropertyName: "displayValue",
+				publicName: "displayValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		viewQueries: [{
+			propertyName: "svg",
+			first: true,
+			predicate: ["barcode"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<svg #barcode></svg>",
+		isInline: true,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: BarcodeComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-barcode",
+			template: "<svg #barcode></svg>"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				required: false
+			}]
+		}],
+		displayValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "displayValue",
+				required: false
+			}]
+		}],
+		svg: [{
+			type: i0.ViewChild,
+			args: ["barcode", { isSignal: true }]
+		}]
+	}
+});
+var ProductBasicInfoComponent = class ProductBasicInfoComponent {
+	stockSummaryService;
+	service;
+	product;
+	saved = new EventEmitter();
+	deleted = new EventEmitter();
+	stockSummary;
+	constructor(stockSummaryService, service) {
+		this.stockSummaryService = stockSummaryService;
+		this.service = service;
+	}
+	ngOnInit() {
+		if (this.product) this.loadProductStocksSummary();
+	}
+	onProductSaved(product) {
+		this.product = product;
+		this.saved.emit(this.product);
+	}
+	loadProductStocksSummary() {
+		const params = {
+			product_ids: this.product?.id,
+			include: "stock_receipts_quantity_sum,stock_issue_quantity_sum,stock_quantity_remaining"
+		};
+		this.stockSummaryService.summary(params).subscribe({ next: (response) => {
+			this.stockSummary = response;
+		} });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductBasicInfoComponent,
+		deps: [{ token: StockSummaryService }, { token: ProductService }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: ProductBasicInfoComponent,
+		isStandalone: false,
+		selector: "app-product-basic-info",
+		inputs: { product: "product" },
+		outputs: {
+			saved: "saved",
+			deleted: "deleted"
+		},
+		ngImport: i0,
+		template: "@if (product) {\n<mat-card class=\"w-100\">\n\n  <!-- Header: Image + Product Info + Actions -->\n  <mat-card-content class=\"d-flex gap-3 align-items-start\">\n    <div class=\"product-image-container rounded overflow-hidden flex-shrink-0\">\n      @if (product?.image_file_url) {\n      <img [src]=\"product.image_file_url\" alt=\"{{ product?.name }}\"\n        class=\"w-100 h-100 object-fit-cover\" />\n      } @if (!product?.image_file_url) {\n      <div\n        class=\"w-100 h-100 bg-secondary-subtle d-flex align-items-center justify-content-center rounded\">\n        <span class=\"material-symbols-outlined text-secondary\"\n          style=\"font-size: 40px\"\n          >inventory_2</span>\n      </div>\n      }\n    </div>\n\n    <div class=\"flex-grow-1\">\n      <div class=\"d-flex justify-content-between align-items-start\">\n        <div>\n          <h5 class=\"fw-semibold mb-1\">{{ product?.name }}</h5>\n          <div class=\"d-flex align-items-center gap-1 text-secondary small flex-wrap\">\n            <span>{{ product?.sku }}</span>\n            <span> • </span>\n            <span>{{ product?.type?.title }}</span>\n            <span> • </span>\n            <span class=\"material-symbols-outlined\" style=\"font-size: 16px\"\n              >view_in_ar</span>\n            <span>{{ product?.measure?.title }}</span>\n          </div>\n          @if (product?.average_cost != null) {\n          <div class=\"d-flex align-items-center gap-1 text-secondary small\">\n            <i class=\"fa-solid fa-money-bill\"></i>\n            <span>{{ $safeNavigationMigration(product?.average_cost) | currency }}</span>\n          </div>\n          }\n        </div>\n        <div class=\"d-flex gap-2 flex-shrink-0 align-middle text-secondary\">\n          <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n          <app-techlify-delete-button [model]=\"product\" [data]=\"{ type: 'Product', title: $safeNavigationMigration(product?.name) }\"\n            [service]=\"service\"></app-techlify-delete-button>\n        </div>\n      </div>\n\n      <!-- Categories -->\n      @if (product?.categories?.length) {\n      <div class=\"d-flex flex-wrap gap-1 mt-2\">\n        @for (category of product?.categories; track category) {\n        <span class=\"badge border bg-light text-dark fw-medium\">\n          {{ category?.title }}\n        </span>\n        }\n      </div>\n      }\n    </div>\n  </mat-card-content>\n\n  <!-- Stock Summary Row -->\n  <mat-card-content class=\"py-3\">\n    <div class=\"row g-0\">\n      <!-- Stock Receipts -->\n      @if (stockSummary) {\n      <div class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">Stock Receipts</small>\n        <p class=\"mb-0 fw-semibold fs-2\">{{ $safeNavigationMigration(stockSummary?.stock_receipts_quantity_sum) | number }}</p>\n        @if (product?.last_stock_receipt) {\n        <small class=\"text-secondary\">\n          Last Added On\n          {{ $safeNavigationMigration(product?.last_stock_receipt?.date) | date : 'MMM d, y' }}\n        </small>\n        }\n      </div>\n      }\n      <!-- Stock Issues -->\n      @if (stockSummary) {\n      <div class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">Stock Issues</small>\n        <p class=\"mb-0 fw-semibold fs-2\">{{ $safeNavigationMigration(stockSummary?.stock_issue_quantity_sum) | number }}</p>\n        @if (product?.last_stock_issue) {\n        <small class=\"text-secondary\">\n          Last Added On\n          {{ $safeNavigationMigration(product?.last_stock_issue?.date) | date : 'MMM d, y' }}\n        </small>\n        }\n      </div>\n      }\n      <!-- On Hand -->\n      <div class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">On Hand</small>\n        <p class=\"mb-0 fw-semibold fs-2 text-success\"\n          [ngClass]=\"{ 'text-danger': $safeNavigationMigration(product?.stock_on_hand) < $safeNavigationMigration(product?.reorder_point) }\">\n          {{ ($safeNavigationMigration(product?.stock_on_hand) | number) ?? 0 }}</p>\n        @if (product?.reorder_point) {\n        <small class=\"text-secondary\">\n          Reorder At {{ product?.reorder_point }}\n        </small>\n        }\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Description -->\n  @if (product?.description) {\n  <mat-card-content class=\"pt-2\">\n    <small class=\"text-secondary\">Description</small>\n    <p class=\"mb-0 mt-1\">{{ product?.description }}</p>\n  </mat-card-content>\n  }\n  <div class=\"d-flex flex-row align-items-center w-100 mt-2 gap-3 overflow-hidden\">\n    <div class=\"barcode-container flex-grow-1 min-width-0 overflow-hidden\">\n      <app-barcode [value]=\"product?.sku\" [displayValue]=\"true\"></app-barcode>\n    </div>\n    <div class=\"flex-shrink-0\">\n      <qrcode [qrdata]=\"$safeNavigationMigration(product?.sku)\" [width]=\"128\"></qrcode>\n    </div>\n  </div>\n\n</mat-card>\n}",
+		styles: [".product-image-container{width:80px;height:80px}.barcode-container{min-width:0}.barcode-container ::ng-deep ngx-barcode6 svg{width:100%;height:auto}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: i19.NgClass,
+				selector: "[ngClass]",
+				inputs: ["class", "ngClass"]
+			},
+			{
+				kind: "component",
+				type: i7.MatCard,
+				selector: "mat-card",
+				inputs: ["appearance"],
+				exportAs: ["matCard"]
+			},
+			{
+				kind: "directive",
+				type: i7.MatCardContent,
+				selector: "mat-card-content"
+			},
+			{
+				kind: "component",
+				type: i1.TechlifyDeleteButtonComponent,
+				selector: "app-techlify-delete-button",
+				inputs: [
+					"data",
+					"model",
+					"message",
+					"service"
+				],
+				outputs: ["deleted", "loading"]
+			},
+			{
+				kind: "component",
+				type: i6.QRCodeComponent,
+				selector: "qrcode",
+				inputs: [
+					"allowEmptyString",
+					"colorDark",
+					"colorLight",
+					"cssClass",
+					"elementType",
+					"errorCorrectionLevel",
+					"imageSrc",
+					"imageHeight",
+					"imageWidth",
+					"margin",
+					"qrdata",
+					"scale",
+					"version",
+					"width",
+					"alt",
+					"ariaLabel",
+					"title"
+				],
+				outputs: ["qrCodeURL"]
+			},
+			{
+				kind: "component",
+				type: BarcodeComponent,
+				selector: "app-barcode",
+				inputs: [
+					"value",
+					"format",
+					"displayValue"
+				]
+			},
+			{
+				kind: "component",
+				type: ProductFormButtonComponent,
+				selector: "app-product-form-button",
+				inputs: ["product"]
+			},
+			{
+				kind: "pipe",
+				type: i19.DecimalPipe,
+				name: "number"
+			},
+			{
+				kind: "pipe",
+				type: i19.CurrencyPipe,
+				name: "currency"
+			},
+			{
+				kind: "pipe",
+				type: i19.DatePipe,
+				name: "date"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductBasicInfoComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-product-basic-info",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			template: "@if (product) {\n<mat-card class=\"w-100\">\n\n  <!-- Header: Image + Product Info + Actions -->\n  <mat-card-content class=\"d-flex gap-3 align-items-start\">\n    <div class=\"product-image-container rounded overflow-hidden flex-shrink-0\">\n      @if (product?.image_file_url) {\n      <img [src]=\"product.image_file_url\" alt=\"{{ product?.name }}\"\n        class=\"w-100 h-100 object-fit-cover\" />\n      } @if (!product?.image_file_url) {\n      <div\n        class=\"w-100 h-100 bg-secondary-subtle d-flex align-items-center justify-content-center rounded\">\n        <span class=\"material-symbols-outlined text-secondary\"\n          style=\"font-size: 40px\"\n          >inventory_2</span>\n      </div>\n      }\n    </div>\n\n    <div class=\"flex-grow-1\">\n      <div class=\"d-flex justify-content-between align-items-start\">\n        <div>\n          <h5 class=\"fw-semibold mb-1\">{{ product?.name }}</h5>\n          <div class=\"d-flex align-items-center gap-1 text-secondary small flex-wrap\">\n            <span>{{ product?.sku }}</span>\n            <span> • </span>\n            <span>{{ product?.type?.title }}</span>\n            <span> • </span>\n            <span class=\"material-symbols-outlined\" style=\"font-size: 16px\"\n              >view_in_ar</span>\n            <span>{{ product?.measure?.title }}</span>\n          </div>\n          @if (product?.average_cost != null) {\n          <div class=\"d-flex align-items-center gap-1 text-secondary small\">\n            <i class=\"fa-solid fa-money-bill\"></i>\n            <span>{{ $safeNavigationMigration(product?.average_cost) | currency }}</span>\n          </div>\n          }\n        </div>\n        <div class=\"d-flex gap-2 flex-shrink-0 align-middle text-secondary\">\n          <app-product-form-button [product]=\"product\" (saved)=\"onProductSaved($event)\"></app-product-form-button>\n          <app-techlify-delete-button [model]=\"product\" [data]=\"{ type: 'Product', title: $safeNavigationMigration(product?.name) }\"\n            [service]=\"service\"></app-techlify-delete-button>\n        </div>\n      </div>\n\n      <!-- Categories -->\n      @if (product?.categories?.length) {\n      <div class=\"d-flex flex-wrap gap-1 mt-2\">\n        @for (category of product?.categories; track category) {\n        <span class=\"badge border bg-light text-dark fw-medium\">\n          {{ category?.title }}\n        </span>\n        }\n      </div>\n      }\n    </div>\n  </mat-card-content>\n\n  <!-- Stock Summary Row -->\n  <mat-card-content class=\"py-3\">\n    <div class=\"row g-0\">\n      <!-- Stock Receipts -->\n      @if (stockSummary) {\n      <div class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">Stock Receipts</small>\n        <p class=\"mb-0 fw-semibold fs-2\">{{ $safeNavigationMigration(stockSummary?.stock_receipts_quantity_sum) | number }}</p>\n        @if (product?.last_stock_receipt) {\n        <small class=\"text-secondary\">\n          Last Added On\n          {{ $safeNavigationMigration(product?.last_stock_receipt?.date) | date : 'MMM d, y' }}\n        </small>\n        }\n      </div>\n      }\n      <!-- Stock Issues -->\n      @if (stockSummary) {\n      <div class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">Stock Issues</small>\n        <p class=\"mb-0 fw-semibold fs-2\">{{ $safeNavigationMigration(stockSummary?.stock_issue_quantity_sum) | number }}</p>\n        @if (product?.last_stock_issue) {\n        <small class=\"text-secondary\">\n          Last Added On\n          {{ $safeNavigationMigration(product?.last_stock_issue?.date) | date : 'MMM d, y' }}\n        </small>\n        }\n      </div>\n      }\n      <!-- On Hand -->\n      <div class=\"col-4 d-flex flex-column\">\n        <small class=\"text-secondary\">On Hand</small>\n        <p class=\"mb-0 fw-semibold fs-2 text-success\"\n          [ngClass]=\"{ 'text-danger': $safeNavigationMigration(product?.stock_on_hand) < $safeNavigationMigration(product?.reorder_point) }\">\n          {{ ($safeNavigationMigration(product?.stock_on_hand) | number) ?? 0 }}</p>\n        @if (product?.reorder_point) {\n        <small class=\"text-secondary\">\n          Reorder At {{ product?.reorder_point }}\n        </small>\n        }\n      </div>\n    </div>\n  </mat-card-content>\n\n  <!-- Description -->\n  @if (product?.description) {\n  <mat-card-content class=\"pt-2\">\n    <small class=\"text-secondary\">Description</small>\n    <p class=\"mb-0 mt-1\">{{ product?.description }}</p>\n  </mat-card-content>\n  }\n  <div class=\"d-flex flex-row align-items-center w-100 mt-2 gap-3 overflow-hidden\">\n    <div class=\"barcode-container flex-grow-1 min-width-0 overflow-hidden\">\n      <app-barcode [value]=\"product?.sku\" [displayValue]=\"true\"></app-barcode>\n    </div>\n    <div class=\"flex-shrink-0\">\n      <qrcode [qrdata]=\"$safeNavigationMigration(product?.sku)\" [width]=\"128\"></qrcode>\n    </div>\n  </div>\n\n</mat-card>\n}",
+			styles: [".product-image-container{width:80px;height:80px}.barcode-container{min-width:0}.barcode-container ::ng-deep ngx-barcode6 svg{width:100%;height:auto}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: StockSummaryService }, { type: ProductService }],
+	propDecorators: {
+		product: [{ type: Input }],
+		saved: [{ type: Output }],
+		deleted: [{ type: Output }]
+	}
+});
+var ProductViewPageComponent = class ProductViewPageComponent {
+	productService;
+	activatedRoute;
+	location;
+	product;
+	id;
+	isLoading;
+	productBasicInfoComponent;
+	productLocationList;
+	stockTransferList;
+	stockReceiptProductListPage;
+	stockIssueProductListPage;
+	constructor(productService, activatedRoute, location) {
+		this.productService = productService;
+		this.activatedRoute = activatedRoute;
+		this.location = location;
+		this.id = this.activatedRoute.snapshot.params?.["id"];
+	}
+	ngOnInit() {
+		if (this.id) this.getProduct(this.id);
+	}
+	getProduct(productId) {
+		this.isLoading = true;
+		this.productService.show(productId, { with: "type,measure,incomeAccount,expenseAccount,categories,lastStockReceipt,lastStockIssue,taxes.tax.type" }).subscribe({
+			next: (result) => {
+				this.isLoading = false;
+				this.product = result?.item;
+			},
+			error: () => this.isLoading = false
+		});
+	}
+	stockTransferChanged() {
+		this.getProduct(this.id);
+		this.productBasicInfoComponent.loadProductStocksSummary();
+		this.productLocationList.reload();
+		this.stockReceiptProductListPage.reload();
+		this.stockIssueProductListPage.reload();
+	}
+	onProductUpdated(product) {
+		this.getProduct(this.id);
+	}
+	onProductDeleted() {
+		this.location.back();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductViewPageComponent,
+		deps: [
+			{ token: ProductService },
+			{ token: i4$1.ActivatedRoute },
+			{ token: i19.Location }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: ProductViewPageComponent,
+		isStandalone: false,
+		selector: "app-product-view-page",
+		viewQueries: [
+			{
+				propertyName: "productBasicInfoComponent",
+				first: true,
+				predicate: ["productBasicInfoComponent"],
+				descendants: true
+			},
+			{
+				propertyName: "productLocationList",
+				first: true,
+				predicate: ["productLocationList"],
+				descendants: true
+			},
+			{
+				propertyName: "stockTransferList",
+				first: true,
+				predicate: ["stockTransferList"],
+				descendants: true
+			},
+			{
+				propertyName: "stockReceiptProductListPage",
+				first: true,
+				predicate: ["stockReceiptProductListPage"],
+				descendants: true
+			},
+			{
+				propertyName: "stockIssueProductListPage",
+				first: true,
+				predicate: ["stockIssueProductListPage"],
+				descendants: true
+			}
+		],
+		ngImport: i0,
+		template: "@if (isLoading) {\n<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n} @if (product) {\n<div class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n  @if (product) {\n  <div class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n    <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n      <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n        (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n      <app-product-location-list [product]=\"product\"\n        (updated)=\"stockTransferList.reload(); stockIssueProductListPage.reload(); stockReceiptProductListPage.reload()\"\n        #productLocationList></app-product-location-list>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"Product\"\n        [relatedModelId]=\"product.id\"></app-note-list>\n\n    </div>\n    <div class=\"d-flex flex-column gap-3 w-100\">\n      <app-stock-receipt-product-list #stockReceiptProductListPage [filters]=\"{ product_ids: $safeNavigationMigration(product?.id) }\"\n        [product]=\"product\" [isProductView]=\"true\"\n        (listUpdated)=\" getProduct(this.id); productBasicInfoComponent.loadProductStocksSummary(); productLocationList.reload() \"\n      ></app-stock-receipt-product-list>\n\n      <app-stock-issue-products-list #stockIssueProductListPage [isProductView]=\"true\"\n        [product]=\"product\" [filters]=\"{ product_ids: $safeNavigationMigration(product?.id) }\"\n        (listUpdated)=\" getProduct(this.id); productBasicInfoComponent.loadProductStocksSummary(); productLocationList.reload() \"\n      ></app-stock-issue-products-list>\n      @if (product) {\n      <app-stock-transfer-list #stockTransferList [productId]=\"product.id\"\n        (changed)=\"stockTransferChanged()\"></app-stock-transfer-list>\n      }\n    </div>\n  </div>\n  }\n</div>\n}",
+		dependencies: [
+			{
+				kind: "component",
+				type: i11.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "component",
+				type: i1.NoteListComponent,
+				selector: "app-note-list",
+				inputs: [
+					"relatedModelId",
+					"modelType",
+					"readonly",
+					"labelText",
+					"commentsView",
+					"viewMode"
+				]
+			},
+			{
+				kind: "component",
+				type: StockReceiptProductsListComponent,
+				selector: "app-stock-receipt-product-list",
+				inputs: [
+					"filters",
+					"isProductView",
+					"selectedColumns",
+					"exportInProgress",
+					"product"
+				],
+				outputs: ["listUpdated", "columnConfigReady"]
+			},
+			{
+				kind: "component",
+				type: StockIssueProductListComponent,
+				selector: "app-stock-issue-products-list",
+				inputs: [
+					"filters",
+					"isProductView",
+					"product",
+					"selectedColumns",
+					"exportInProgress",
+					"issuableData"
+				],
+				outputs: [
+					"selectedColumnsChange",
+					"listUpdated",
+					"columnConfigReady"
+				]
+			},
+			{
+				kind: "component",
+				type: ProductLocationListComponent,
+				selector: "app-product-location-list",
+				inputs: ["product"],
+				outputs: ["updated"]
+			},
+			{
+				kind: "component",
+				type: StockTransferListComponent,
+				selector: "app-stock-transfer-list",
+				inputs: ["productId"],
+				outputs: ["changed"]
+			},
+			{
+				kind: "component",
+				type: ProductBasicInfoComponent,
+				selector: "app-product-basic-info",
+				inputs: ["product"],
+				outputs: ["saved", "deleted"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductViewPageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-product-view-page",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			template: "@if (isLoading) {\n<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n} @if (product) {\n<div class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n  @if (product) {\n  <div class=\"d-flex justify-content-start align-items-start gap-3 w-100\">\n    <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n      <app-product-basic-info [product]=\"product\" #productBasicInfoComponent (deleted)=\"onProductDeleted()\"\n        (saved)=\"onProductUpdated($event)\"></app-product-basic-info>\n\n      <app-product-location-list [product]=\"product\"\n        (updated)=\"stockTransferList.reload(); stockIssueProductListPage.reload(); stockReceiptProductListPage.reload()\"\n        #productLocationList></app-product-location-list>\n\n      <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"Product\"\n        [relatedModelId]=\"product.id\"></app-note-list>\n\n    </div>\n    <div class=\"d-flex flex-column gap-3 w-100\">\n      <app-stock-receipt-product-list #stockReceiptProductListPage [filters]=\"{ product_ids: $safeNavigationMigration(product?.id) }\"\n        [product]=\"product\" [isProductView]=\"true\"\n        (listUpdated)=\" getProduct(this.id); productBasicInfoComponent.loadProductStocksSummary(); productLocationList.reload() \"\n      ></app-stock-receipt-product-list>\n\n      <app-stock-issue-products-list #stockIssueProductListPage [isProductView]=\"true\"\n        [product]=\"product\" [filters]=\"{ product_ids: $safeNavigationMigration(product?.id) }\"\n        (listUpdated)=\" getProduct(this.id); productBasicInfoComponent.loadProductStocksSummary(); productLocationList.reload() \"\n      ></app-stock-issue-products-list>\n      @if (product) {\n      <app-stock-transfer-list #stockTransferList [productId]=\"product.id\"\n        (changed)=\"stockTransferChanged()\"></app-stock-transfer-list>\n      }\n    </div>\n  </div>\n  }\n</div>\n}"
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: ProductService },
+		{ type: i4$1.ActivatedRoute },
+		{ type: i19.Location }
+	],
+	propDecorators: {
+		productBasicInfoComponent: [{
+			type: ViewChild,
+			args: ["productBasicInfoComponent"]
+		}],
+		productLocationList: [{
+			type: ViewChild,
+			args: ["productLocationList"]
+		}],
+		stockTransferList: [{
+			type: ViewChild,
+			args: ["stockTransferList"]
+		}],
+		stockReceiptProductListPage: [{
+			type: ViewChild,
+			args: ["stockReceiptProductListPage"]
+		}],
+		stockIssueProductListPage: [{
+			type: ViewChild,
+			args: ["stockIssueProductListPage"]
+		}]
+	}
+});
+var ProductImportPageComponent = class ProductImportPageComponent {
+	importConfig = {
+		apiUrl: "api/products-import",
+		title: "Products",
+		importType: "product",
+		properties: [
+			{
+				label: "Name",
+				value: "name",
+				type: "text"
+			},
+			{
+				label: "SKU",
+				value: "sku",
+				type: "text"
+			},
+			{
+				label: "Initial Quantity",
+				value: "initial_quantity",
+				type: "number"
+			},
+			{
+				label: "Initial Quantity Date",
+				value: "initial_quantity_date",
+				type: "date"
+			},
+			{
+				label: "Reorder Point",
+				value: "reorder_point",
+				type: "number"
+			},
+			{
+				label: "Measure",
+				value: "measure",
+				type: "text"
+			},
+			{
+				label: "Categories",
+				value: "categories",
+				type: "text"
+			}
+		],
+		sampleFile: {
+			name: "Products Import",
+			path: "assets/product/product-import-sample.csv"
+		},
+		importHistory: {
+			isEnabled: true,
+			type: "product",
+			apiUrl: "api/import-histories"
+		},
+		viewRouterLink: "/inventory/products/"
+	};
+	constructor() {}
+	ngOnInit() {}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductImportPageComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.5",
+		type: ProductImportPageComponent,
+		isStandalone: false,
+		selector: "app-product-import-page",
+		ngImport: i0,
+		template: "<app-import-csv [config]=\"importConfig\"></app-import-csv>\n",
+		styles: [""],
+		dependencies: [{
+			kind: "component",
+			type: i1.ImportCsvComponent,
+			selector: "app-import-csv",
+			inputs: ["config"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductImportPageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-product-import-page",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			template: "<app-import-csv [config]=\"importConfig\"></app-import-csv>\n"
+		}]
+	}],
+	ctorParameters: () => []
+});
+var ProductFormComponent = class ProductFormComponent extends TechlifyFormComponent {
+	fileService;
+	fb;
+	formValidatorService;
+	service;
+	activatedRoute;
+	errorHandler;
+	location;
+	router;
+	formConfigService;
+	displayedFormFields = [
+		"name",
+		"product type",
+		"sku",
+		"color",
+		"description",
+		"product measure",
+		"reorder point",
+		"initial quantity",
+		"initial quantity date",
+		"sales price",
+		"minimum price",
+		"maximum price",
+		"income account",
+		"expense account"
+	];
+	displayedFormSections = [
+		"basic information",
+		"inventory information",
+		"sales information",
+		"accounts information"
+	];
+	product = signal(null, ...ngDevMode ? [{ debugName: "product" }] : /* istanbul ignore next */ []);
+	isFormSetup = signal(false, ...ngDevMode ? [{ debugName: "isFormSetup" }] : /* istanbul ignore next */ []);
+	errorMessages = {
+		type_id: { required: "Please Enter Type" },
+		name: { required: "Please Enter Name" },
+		sale_price: { required: "Please Enter Sales Price" },
+		minimum_price: { required: "Please Enter Minimum Price" },
+		reorder_point: { required: "Please Enter Reorder Point" },
+		color_id: { required: "Please Select Color" }
+	};
+	isCreateAnother = new FormControl(false);
+	savedCount = 0;
+	formConfigurationUtilityService;
+	fileConfig;
+	viewerConfig;
+	fileList = [];
+	constructor(fileService, fb, formValidatorService, service, activatedRoute, errorHandler, location, router, formConfigService) {
+		super(formValidatorService);
+		this.fileService = fileService;
+		this.fb = fb;
+		this.formValidatorService = formValidatorService;
+		this.service = service;
+		this.activatedRoute = activatedRoute;
+		this.errorHandler = errorHandler;
+		this.location = location;
+		this.router = router;
+		this.formConfigService = formConfigService;
+		this.formConfigurationUtilityService = new FormConfigurationUtilityService();
+	}
+	ngOnInit() {
+		this.fileConfig = {
+			fileId: "productImageFile",
+			containerId: "productImageFileContainer",
+			styles: { height: "200px" },
+			multiple: false,
+			acceptFile: "image/*",
+			maxSize: 10,
+			acceptFileText: "PNG, JPEG, and JPG only"
+		};
+		this.viewerConfig = { viewerStyle: { height: "50px" } };
+		this.formConfigurationUtilityService.initialize(this.formConfigService, "product").subscribe({
+			next: (response) => {
+				this.form = this.fb.group({
+					id: [""],
+					type_id: [1, Validators.compose([Validators.required])],
+					color_id: ["", this.formConfigurationUtilityService.getFieldRequired("color_id") ? Validators.required : null],
+					sku: [""],
+					name: ["", Validators.compose([Validators.required])],
+					initial_quantity: [0],
+					initial_quantity_date: [moment().format()],
+					reorder_point: [10, Validators.compose([Validators.required])],
+					description: [""],
+					sale_price: [0, Validators.compose([Validators.required])],
+					income_account_id: [""],
+					expense_account_id: [""],
+					measure_id: [1],
+					minimum_price: ["", Validators.compose([Validators.required])],
+					maximum_price: [""],
+					condition_type_id: [1],
+					current_quantity: [],
+					category_ids: [""],
+					image_file: [null],
+					image_file_url: [null]
+				});
+			},
+			error: (error) => {
+				this.errorHandler.handleError(error);
+			},
+			complete: () => {
+				this.isFormSetup.set(true);
+				this.loadProduct();
+			}
+		});
+	}
+	loadProduct() {
+		let id = this.activatedRoute.snapshot.params["id"];
+		if (!id) return;
+		this.isWorking = true;
+		this.service?.show(id, { with: "measure,categories" }).subscribe({
+			next: (response) => {
+				this.product.set(response?.item);
+				this.isWorking = false;
+			},
+			error: (error) => {
+				this.isWorking = false;
+				this.errorHandler.handleError(error);
+			},
+			complete: () => {
+				this.patchProduct();
+				this.isWorking = false;
+			}
+		});
+	}
+	patchProduct() {
+		this.isUpdate = true;
+		let data = { ...this.product() };
+		if (this.product()?.categories?.length > 0) data.category_ids = this.product().categories.map((category) => category?.id);
+		if (data?.initial_quantity_date) data.initial_quantity_date = moment(data.initial_quantity_date).toISOString();
+		this.form.patchValue(data);
+	}
+	async save() {
+		this.form.markAllAsTouched();
+		if (this.form.invalid) {
+			this.alertService.addAlert("Please Fill All Required Fields", "warn");
+			return;
+		}
+		let product = this.form.value;
+		if (product.maximum_price <= 0 || !product.maximum_price) product.maximum_price = product.minimum_price;
+		if (product?.initial_quantity_date) product.initial_quantity_date = moment(product.initial_quantity_date).format("YYYY-MM-DD");
+		this.isWorking = true;
+		(product.id ? this.service.update(product) : this.service.store(product)).subscribe({
+			next: () => {
+				this.isWorking = false;
+				this.alertService.addAlert("Product saved successfully!", "success");
+			},
+			error: () => this.isWorking = false,
+			complete: () => {
+				if (this.isCreateAnother.value && !this.isUpdate) this.savedCount++;
+				else this.router.navigate(["/inventory/products"]);
+			}
+		});
+	}
+	isFormFieldShown(fieldName) {
+		return this.displayedFormFields.length > 0 && this.displayedFormFields.includes(fieldName);
+	}
+	isFormSectionShown(sectionName) {
+		return this.displayedFormSections.length > 0 && this.displayedFormSections.includes(sectionName);
+	}
+	async fileChanged(event) {
+		this.fileList = event;
+		if (this.fileList.length > 0) {
+			const result = await this.fileService.uploadEntityFile(this.fileList[0], {
+				entity_id: this.product()?.id,
+				entity_type: "product",
+				sub_path: `${this.product()?.id}`
+			});
+			this.form.get("image_file")?.setValue(result.item.file);
+			this.form.get("image_file_url")?.setValue(result.item.url);
+			this.fileList = [];
+		}
+	}
+	async removeFile() {
+		if (this.form.value.image_file) try {
+			this.form.patchValue({
+				image_file: "",
+				image_file_url: ""
+			});
+		} catch (error) {
+			this.alertService.addAlert("Unable to remove file, try later", "warn");
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductFormComponent,
+		deps: [
+			{ token: i1.EntityFileService },
+			{ token: i2.FormBuilder },
+			{ token: i1.FormValidatorService },
+			{ token: ProductService },
+			{ token: i4$1.ActivatedRoute },
+			{ token: i1.ErrorHandlerService },
+			{ token: i19.Location },
+			{ token: i4$1.Router },
+			{ token: i1.FormConfigurationFormService }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: ProductFormComponent,
+		isStandalone: false,
+		selector: "app-product-form",
+		inputs: {
+			displayedFormFields: "displayedFormFields",
+			displayedFormSections: "displayedFormSections"
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: "@if (isFormSetup()) {\n<div class=\"d-flex flex-column gap-2\">\n  <mat-card class='container'>\n    <mat-card-content>\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <span></span>\n        <h3 class=\"text-center m-0\">Product Form</h3>\n        <app-form-configuration-for-form formCode='product'></app-form-configuration-for-form>\n      </div>\n    </mat-card-content>\n  </mat-card>\n  <mat-card class='container'>\n    <mat-card-content>\n      <form [formGroup]=\"form\" (submit)=\"save()\">\n        <div class=\"d-flex flex-column\">\n\n          <div class=\"d-flex flex-column justify-content-center align-items-center\">\n            @if (form.get('image_file')?.value) {\n            <div\n              style=\"width: 200px\"\n              class=\"justify-content-center align-items-center\"\n            >\n              <app-document-viewer\n                (remove)=\"removeFile()\"\n                [config]=\"viewerConfig\"\n                [fileUrl]=\"\n                  $safeNavigationMigration(form.get('image_file_url')?.value)\n                \"\n                [file]=\"$safeNavigationMigration(form.get('image_file')?.value)\"\n              >\n              </app-document-viewer>\n            </div>\n            } @else {\n            <div class=\"w-100\">\n                <app-file-dropper (fileChanged)=\"fileChanged($event)\" [config]=\"fileConfig\" [fileArray]=\"fileList\">\n                </app-file-dropper>\n              </div>\n            }\n          </div>\n\n          @if (isFormSectionShown('basic information')) {\n          <div class=\"d-flex flex-column mt-2\">\n            <h6>Basic Information</h6>\n            <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('name')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Name</mat-label>\n                <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n                @if (isFieldValid('name')) {\n                <mat-error>{{ getErrorMessage('name') }} </mat-error>\n                }\n              </mat-form-field>\n              } @if (isFormFieldShown('product type')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Product Type</mat-label>\n                <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\">\n                </app-searchable-selector>\n                @if (isFieldValid('type_id')) {\n                <mat-error>{{ getErrorMessage('type_id') }} </mat-error>\n                }\n              </mat-form-field>\n              }\n            </div>\n\n            <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('sku')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>SKU</mat-label>\n                <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n                @if (isFieldValid('sku')) {\n                <mat-error>{{ getErrorMessage('sku') }} </mat-error>\n                }\n              </mat-form-field>\n              }\n              <mat-form-field class=\"w-50\">\n                <mat-label>Category</mat-label>\n                <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\"\n                  [multiple]=\"true\">\n                </app-searchable-selector>\n                @if (isFieldValid('category_ids')) {\n                <mat-error>\n                  {{ getErrorMessage('category_ids') }}\n                </mat-error>\n                }\n              </mat-form-field>\n            </div>\n\n          <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('color') &&\n              formConfigurationUtilityService.getFieldEnabled('color_id')) {\n              <mat-form-field class=\"w-50 align-self-start\">\n              <mat-label>\n                  Color @if\n                  (formConfigurationUtilityService.getFieldRequired('color_id'))\n                  {\n                  <sup>*</sup>\n                  }\n                </mat-label>\n              <app-searchable-selector apiUrl=\"api/attributes?type_code=color\"\n                formControlName=\"color_id\"></app-searchable-selector>\n                @if (isFieldValid('color_id')) {\n                <mat-error>{{getErrorMessage('color_id')}}</mat-error>\n                }\n              </mat-form-field>\n              } @if (isFormFieldShown('description')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Description</mat-label>\n                <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n              </mat-form-field>\n              }\n            </div>\n          </div>\n          } @if (isFormSectionShown('inventory information')) {\n          <div class=\"d-flex flex-column\">\n            <h6>Inventory Information</h6>\n            <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('product measure')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Measure</mat-label>\n                <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n                </app-searchable-selector>\n                @if (isFieldValid('measure_id')) {\n                <mat-error>{{ getErrorMessage('measure_id') }} </mat-error>\n                }\n              </mat-form-field>\n              } @if (isFormFieldShown('reorder point')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Reorder Point</mat-label>\n                <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n                @if (isFieldValid('reorder_point')) {\n                <mat-error>{{ getErrorMessage('reorder_point') }} </mat-error>\n                }\n              </mat-form-field>\n              }\n            </div>\n            <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('initial quantity')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Initial Quantity</mat-label>\n                <input matInput placeholder=\"Initial Quantity\" formControlName=\"initial_quantity\" />\n                @if (isFieldValid('initial_quantity')) {\n                <mat-error>{{ getErrorMessage('initial_quantity') }}\n                </mat-error>\n                }\n              </mat-form-field>\n              } @if (isFormFieldShown('initial quantity date')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Initial Quantity Date</mat-label>\n                <input matInput [matDatepicker]=\"pickerInitialQuantityDate\" placeholder=\"Initial Quantity Date\"\n                  formControlName=\"initial_quantity_date\" />\n                <mat-datepicker-toggle matSuffix [for]=\"pickerInitialQuantityDate\"></mat-datepicker-toggle>\n                <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n                @if (isFieldValid('initial_quantity_date')) {\n                <mat-error>{{ getErrorMessage('initial_quantity_date') }}\n                </mat-error>\n                }\n              </mat-form-field>\n              }\n            </div>\n          </div>\n          } @if (isFormSectionShown('sales information')) {\n          <div class=\"d-flex flex-column\">\n            <h6>Sale Information</h6>\n            <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('sales price')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Selling Price</mat-label>\n                <input matInput placeholder=\"Selling Price\" formControlName=\"sale_price\" required type=\"number\"\n                  step=\"any\" />\n                @if (isFieldValid('sale_price')) {\n                <mat-error>{{ getErrorMessage('sale_price') }} </mat-error>\n                }\n              </mat-form-field>\n              } @if (isFormFieldShown('condition types')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Condition</mat-label>\n                <app-searchable-selector apiUrl=\"api/condition-types\"\n                  formControlName=\"condition_type_id\"></app-searchable-selector>\n              </mat-form-field>\n              }\n            </div>\n            <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('minimum price')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Minimum Price</mat-label>\n                <input matInput placeholder=\"Minimum Price\" formControlName=\"minimum_price\" required type=\"number\"\n                  step=\"any\" />\n                @if (isFieldValid('minimum_price')) {\n                <mat-error>{{ getErrorMessage('minimum_price') }} </mat-error>\n                }\n              </mat-form-field>\n              } @if (isFormFieldShown('maximum price')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Maximum Price</mat-label>\n                <input matInput placeholder=\"Maximum Price\" formControlName=\"maximum_price\" type=\"number\" step=\"any\" />\n              </mat-form-field>\n              }\n            </div>\n          </div>\n          }\n\n          <div class=\"w-100 d-flex justify-content-between\">\n            @if (!isUpdate) {\n            <mat-checkbox [formControl]=\"isCreateAnother\">Create Another @if (savedCount > 0) {\n              <span>({{ savedCount }} items saved)</span>\n              }\n            </mat-checkbox>\n            } @else {\n            <span class='d-flex flex-grow'></span>\n            }\n\n            <div class=\"d-flex flex-row gap-3 align-items-center justify-content-end\">\n              <button [disabled]=\"isWorking\" mat-button class=\"mt-2\" type=\"button\" (click)=\"location.back()\">\n                Cancel\n              </button>\n              <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n            </div>\n          </div>\n        </div>\n      </form>\n    </mat-card-content>\n  </mat-card>\n</div>\n} @else {\n<mat-card-content class=\"d-flex vh-100 justify-content-center align-items-center\">\n  <mat-spinner></mat-spinner>\n</mat-card-content>\n}",
+		dependencies: [
+			{
+				kind: "component",
+				type: i1.FormConfigurationForFormComponent,
+				selector: "app-form-configuration-for-form",
+				inputs: ["formCode"]
+			},
+			{
+				kind: "component",
+				type: i6$2.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "component",
+				type: i7.MatCard,
+				selector: "mat-card",
+				inputs: ["appearance"],
+				exportAs: ["matCard"]
+			},
+			{
+				kind: "directive",
+				type: i7.MatCardContent,
+				selector: "mat-card-content"
+			},
+			{
+				kind: "component",
+				type: i8.MatCheckbox,
+				selector: "mat-checkbox",
+				inputs: [
+					"aria-label",
+					"aria-labelledby",
+					"aria-describedby",
+					"aria-expanded",
+					"aria-controls",
+					"aria-owns",
+					"id",
+					"required",
+					"labelPosition",
+					"name",
+					"value",
+					"disableRipple",
+					"tabIndex",
+					"color",
+					"disabledInteractive",
+					"checked",
+					"disabled",
+					"indeterminate"
+				],
+				outputs: ["change", "indeterminateChange"],
+				exportAs: ["matCheckbox"]
+			},
+			{
+				kind: "component",
+				type: i9.MatDatepicker,
+				selector: "mat-datepicker",
+				exportAs: ["matDatepicker"]
+			},
+			{
+				kind: "directive",
+				type: i9.MatDatepickerInput,
+				selector: "input[matDatepicker]",
+				inputs: [
+					"matDatepicker",
+					"min",
+					"max",
+					"matDatepickerFilter"
+				],
+				exportAs: ["matDatepickerInput"]
+			},
+			{
+				kind: "component",
+				type: i9.MatDatepickerToggle,
+				selector: "mat-datepicker-toggle",
+				inputs: [
+					"for",
+					"tabIndex",
+					"aria-label",
+					"disabled",
+					"disableRipple"
+				],
+				exportAs: ["matDatepickerToggle"]
+			},
+			{
+				kind: "component",
+				type: i7$2.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i7$2.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "directive",
+				type: i7$2.MatError,
+				selector: "mat-error, [matError]",
+				inputs: ["id"]
+			},
+			{
+				kind: "directive",
+				type: i7$2.MatSuffix,
+				selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
+				inputs: ["matTextSuffix"]
+			},
+			{
+				kind: "directive",
+				type: i8$1.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "component",
+				type: i12.MatProgressSpinner,
+				selector: "mat-progress-spinner, mat-spinner",
+				inputs: [
+					"color",
+					"mode",
+					"value",
+					"diameter",
+					"strokeWidth"
+				],
+				exportAs: ["matProgressSpinner"]
+			},
+			{
+				kind: "directive",
+				type: i2.ɵNgNoValidate,
+				selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+			},
+			{
+				kind: "directive",
+				type: i2.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NumberValueAccessor,
+				selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i2.NgControlStatusGroup,
+				selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+			},
+			{
+				kind: "directive",
+				type: i2.RequiredValidator,
+				selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]",
+				inputs: ["required"]
+			},
+			{
+				kind: "directive",
+				type: i2.FormControlDirective,
+				selector: "[formControl]",
+				inputs: [
+					"formControl",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i2.FormGroupDirective,
+				selector: "[formGroup]",
+				inputs: ["formGroup"],
+				outputs: ["ngSubmit"],
+				exportAs: ["ngForm"]
+			},
+			{
+				kind: "directive",
+				type: i2.FormControlName,
+				selector: "[formControlName]",
+				inputs: [
+					"formControlName",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"]
+			},
+			{
+				kind: "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.FileDropperComponent,
+				selector: "app-file-dropper",
+				inputs: [
+					"fileArray",
+					"config",
+					"styles"
+				],
+				outputs: ["fileChanged"]
+			},
+			{
+				kind: "component",
+				type: i1.DocumentViewerComponent,
+				selector: "app-document-viewer",
+				inputs: [
+					"config",
+					"file",
+					"fileUrl",
+					"disableEdit"
+				],
+				outputs: ["remove"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductFormComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-product-form",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			template: "@if (isFormSetup()) {\n<div class=\"d-flex flex-column gap-2\">\n  <mat-card class='container'>\n    <mat-card-content>\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <span></span>\n        <h3 class=\"text-center m-0\">Product Form</h3>\n        <app-form-configuration-for-form formCode='product'></app-form-configuration-for-form>\n      </div>\n    </mat-card-content>\n  </mat-card>\n  <mat-card class='container'>\n    <mat-card-content>\n      <form [formGroup]=\"form\" (submit)=\"save()\">\n        <div class=\"d-flex flex-column\">\n\n          <div class=\"d-flex flex-column justify-content-center align-items-center\">\n            @if (form.get('image_file')?.value) {\n            <div\n              style=\"width: 200px\"\n              class=\"justify-content-center align-items-center\"\n            >\n              <app-document-viewer\n                (remove)=\"removeFile()\"\n                [config]=\"viewerConfig\"\n                [fileUrl]=\"\n                  $safeNavigationMigration(form.get('image_file_url')?.value)\n                \"\n                [file]=\"$safeNavigationMigration(form.get('image_file')?.value)\"\n              >\n              </app-document-viewer>\n            </div>\n            } @else {\n            <div class=\"w-100\">\n                <app-file-dropper (fileChanged)=\"fileChanged($event)\" [config]=\"fileConfig\" [fileArray]=\"fileList\">\n                </app-file-dropper>\n              </div>\n            }\n          </div>\n\n          @if (isFormSectionShown('basic information')) {\n          <div class=\"d-flex flex-column mt-2\">\n            <h6>Basic Information</h6>\n            <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('name')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Name</mat-label>\n                <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n                @if (isFieldValid('name')) {\n                <mat-error>{{ getErrorMessage('name') }} </mat-error>\n                }\n              </mat-form-field>\n              } @if (isFormFieldShown('product type')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Product Type</mat-label>\n                <app-searchable-selector apiUrl=\"api/product-types\" formControlName=\"type_id\">\n                </app-searchable-selector>\n                @if (isFieldValid('type_id')) {\n                <mat-error>{{ getErrorMessage('type_id') }} </mat-error>\n                }\n              </mat-form-field>\n              }\n            </div>\n\n            <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('sku')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>SKU</mat-label>\n                <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n                @if (isFieldValid('sku')) {\n                <mat-error>{{ getErrorMessage('sku') }} </mat-error>\n                }\n              </mat-form-field>\n              }\n              <mat-form-field class=\"w-50\">\n                <mat-label>Category</mat-label>\n                <app-searchable-selector apiUrl=\"api/product-categories\" formControlName=\"category_ids\"\n                  [multiple]=\"true\">\n                </app-searchable-selector>\n                @if (isFieldValid('category_ids')) {\n                <mat-error>\n                  {{ getErrorMessage('category_ids') }}\n                </mat-error>\n                }\n              </mat-form-field>\n            </div>\n\n          <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('color') &&\n              formConfigurationUtilityService.getFieldEnabled('color_id')) {\n              <mat-form-field class=\"w-50 align-self-start\">\n              <mat-label>\n                  Color @if\n                  (formConfigurationUtilityService.getFieldRequired('color_id'))\n                  {\n                  <sup>*</sup>\n                  }\n                </mat-label>\n              <app-searchable-selector apiUrl=\"api/attributes?type_code=color\"\n                formControlName=\"color_id\"></app-searchable-selector>\n                @if (isFieldValid('color_id')) {\n                <mat-error>{{getErrorMessage('color_id')}}</mat-error>\n                }\n              </mat-form-field>\n              } @if (isFormFieldShown('description')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Description</mat-label>\n                <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n              </mat-form-field>\n              }\n            </div>\n          </div>\n          } @if (isFormSectionShown('inventory information')) {\n          <div class=\"d-flex flex-column\">\n            <h6>Inventory Information</h6>\n            <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('product measure')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Measure</mat-label>\n                <app-searchable-selector apiUrl=\"api/product-measures\" formControlName=\"measure_id\">\n                </app-searchable-selector>\n                @if (isFieldValid('measure_id')) {\n                <mat-error>{{ getErrorMessage('measure_id') }} </mat-error>\n                }\n              </mat-form-field>\n              } @if (isFormFieldShown('reorder point')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Reorder Point</mat-label>\n                <input matInput placeholder=\"Reorder Point\" formControlName=\"reorder_point\" type=\"number\" />\n                @if (isFieldValid('reorder_point')) {\n                <mat-error>{{ getErrorMessage('reorder_point') }} </mat-error>\n                }\n              </mat-form-field>\n              }\n            </div>\n            <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('initial quantity')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Initial Quantity</mat-label>\n                <input matInput placeholder=\"Initial Quantity\" formControlName=\"initial_quantity\" />\n                @if (isFieldValid('initial_quantity')) {\n                <mat-error>{{ getErrorMessage('initial_quantity') }}\n                </mat-error>\n                }\n              </mat-form-field>\n              } @if (isFormFieldShown('initial quantity date')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Initial Quantity Date</mat-label>\n                <input matInput [matDatepicker]=\"pickerInitialQuantityDate\" placeholder=\"Initial Quantity Date\"\n                  formControlName=\"initial_quantity_date\" />\n                <mat-datepicker-toggle matSuffix [for]=\"pickerInitialQuantityDate\"></mat-datepicker-toggle>\n                <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n                @if (isFieldValid('initial_quantity_date')) {\n                <mat-error>{{ getErrorMessage('initial_quantity_date') }}\n                </mat-error>\n                }\n              </mat-form-field>\n              }\n            </div>\n          </div>\n          } @if (isFormSectionShown('sales information')) {\n          <div class=\"d-flex flex-column\">\n            <h6>Sale Information</h6>\n            <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('sales price')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Selling Price</mat-label>\n                <input matInput placeholder=\"Selling Price\" formControlName=\"sale_price\" required type=\"number\"\n                  step=\"any\" />\n                @if (isFieldValid('sale_price')) {\n                <mat-error>{{ getErrorMessage('sale_price') }} </mat-error>\n                }\n              </mat-form-field>\n              } @if (isFormFieldShown('condition types')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Condition</mat-label>\n                <app-searchable-selector apiUrl=\"api/condition-types\"\n                  formControlName=\"condition_type_id\"></app-searchable-selector>\n              </mat-form-field>\n              }\n            </div>\n            <div class=\"d-flex gap-2\">\n              @if (isFormFieldShown('minimum price')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Minimum Price</mat-label>\n                <input matInput placeholder=\"Minimum Price\" formControlName=\"minimum_price\" required type=\"number\"\n                  step=\"any\" />\n                @if (isFieldValid('minimum_price')) {\n                <mat-error>{{ getErrorMessage('minimum_price') }} </mat-error>\n                }\n              </mat-form-field>\n              } @if (isFormFieldShown('maximum price')) {\n              <mat-form-field class=\"w-50\">\n                <mat-label>Maximum Price</mat-label>\n                <input matInput placeholder=\"Maximum Price\" formControlName=\"maximum_price\" type=\"number\" step=\"any\" />\n              </mat-form-field>\n              }\n            </div>\n          </div>\n          }\n\n          <div class=\"w-100 d-flex justify-content-between\">\n            @if (!isUpdate) {\n            <mat-checkbox [formControl]=\"isCreateAnother\">Create Another @if (savedCount > 0) {\n              <span>({{ savedCount }} items saved)</span>\n              }\n            </mat-checkbox>\n            } @else {\n            <span class='d-flex flex-grow'></span>\n            }\n\n            <div class=\"d-flex flex-row gap-3 align-items-center justify-content-end\">\n              <button [disabled]=\"isWorking\" mat-button class=\"mt-2\" type=\"button\" (click)=\"location.back()\">\n                Cancel\n              </button>\n              <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">Save</button>\n            </div>\n          </div>\n        </div>\n      </form>\n    </mat-card-content>\n  </mat-card>\n</div>\n} @else {\n<mat-card-content class=\"d-flex vh-100 justify-content-center align-items-center\">\n  <mat-spinner></mat-spinner>\n</mat-card-content>\n}"
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i1.EntityFileService },
+		{ type: i2.FormBuilder },
+		{ type: i1.FormValidatorService },
+		{ type: ProductService },
+		{ type: i4$1.ActivatedRoute },
+		{ type: i1.ErrorHandlerService },
+		{ type: i19.Location },
+		{ type: i4$1.Router },
+		{ type: i1.FormConfigurationFormService }
+	],
+	propDecorators: {
+		displayedFormFields: [{ type: Input }],
+		displayedFormSections: [{ type: Input }]
+	}
+});
+const routes = [{
+	path: "",
+	component: ProductNavBarComponent,
+	children: [
+		{
+			path: "",
+			component: ProductListComponent,
+			canLoad: [AuthenticationGuard]
+		},
+		{
+			path: "import",
+			component: ProductImportPageComponent,
+			canLoad: [AuthenticationGuard]
+		},
+		{
+			path: "measure",
+			component: ProductMeasuresListComponent,
+			canLoad: [AuthenticationGuard]
+		},
+		{
+			path: ":id/view",
+			component: ProductViewPageComponent,
+			canLoad: [AuthenticationGuard]
+		},
+		{
+			path: "form/:id",
+			component: ProductFormComponent,
+			canLoad: [AuthenticationGuard]
+		},
+		{
+			path: "form",
+			component: ProductFormComponent,
+			canLoad: [AuthenticationGuard]
+		},
+		{
+			path: "**",
+			redirectTo: "",
+			pathMatch: "full",
+			canLoad: [AuthenticationGuard]
+		}
+	]
+}];
+var ProductRoutingModule = class ProductRoutingModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductRoutingModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductRoutingModule,
+		imports: [i4$1.RouterModule],
+		exports: [RouterModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductRoutingModule,
+		imports: [RouterModule.forChild(routes), RouterModule]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductRoutingModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [RouterModule.forChild(routes)],
+			exports: [RouterModule]
+		}]
+	}]
+});
+var ProductDeleteButtonComponent = class ProductDeleteButtonComponent {
+	matDialog;
+	productService;
+	alertService;
+	product;
+	deleted = new EventEmitter();
+	isDeleting;
+	constructor(matDialog, productService, alertService) {
+		this.matDialog = matDialog;
+		this.productService = productService;
+		this.alertService = alertService;
+	}
+	deleteProduct() {
+		this.isDeleting = true;
+		this.productService.delete(this.product).subscribe({
+			next: () => {
+				this.deleted.emit();
+				this.isDeleting = false;
+				this.matDialog.closeAll();
+				this.alertService.addAlert("Product deleted successfully!", "success");
+			},
+			error: () => this.isDeleting = false
+		});
+	}
+	showDeleteDialog(templateRef) {
+		this.matDialog.open(templateRef, { width: "500px" });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductDeleteButtonComponent,
+		deps: [
+			{ token: i3.MatDialog },
+			{ token: ProductService },
+			{ token: i1.AlertService }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.5",
+		type: ProductDeleteButtonComponent,
+		isStandalone: false,
+		selector: "app-product-delete-button",
+		inputs: { product: "product" },
+		outputs: { deleted: "deleted" },
+		ngImport: i0,
+		template: "<mat-icon class=\"cursor-pointer text-secondary\" (click)=\"showDeleteDialog(deleteProductDialog)\"> delete </mat-icon>\n\n<ng-template #deleteProductDialog>\n  <h3 mat-dialog-title>Delete Product</h3>\n  <div mat-dialog-content>\n    Are you sure? You want to delete the\n    <strong>{{ product?.name }}</strong> ?\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-raised-button color=\"warn\" (click)=\"deleteProduct()\">\n      Delete\n    </button>\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-flat-button mat-dialog-close>Cancel</button>\n  </div>\n</ng-template>\n",
+		styles: [""],
+		dependencies: [
+			{
+				kind: "component",
+				type: i6$2.MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "directive",
+				type: i3.MatDialogClose,
+				selector: "[mat-dialog-close], [matDialogClose]",
+				inputs: [
+					"aria-label",
+					"type",
+					"mat-dialog-close",
+					"matDialogClose"
+				],
+				exportAs: ["matDialogClose"]
+			},
+			{
+				kind: "directive",
+				type: i3.MatDialogTitle,
+				selector: "[mat-dialog-title], [matDialogTitle]",
+				inputs: ["id"],
+				exportAs: ["matDialogTitle"]
+			},
+			{
+				kind: "directive",
+				type: i3.MatDialogActions,
+				selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]",
+				inputs: ["align"]
+			},
+			{
+				kind: "directive",
+				type: i3.MatDialogContent,
+				selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]"
+			},
+			{
+				kind: "component",
+				type: i10.MatIcon,
+				selector: "mat-icon",
+				inputs: [
+					"color",
+					"inline",
+					"svgIcon",
+					"fontSet",
+					"fontIcon"
+				],
+				exportAs: ["matIcon"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductDeleteButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-product-delete-button",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			standalone: false,
+			template: "<mat-icon class=\"cursor-pointer text-secondary\" (click)=\"showDeleteDialog(deleteProductDialog)\"> delete </mat-icon>\n\n<ng-template #deleteProductDialog>\n  <h3 mat-dialog-title>Delete Product</h3>\n  <div mat-dialog-content>\n    Are you sure? You want to delete the\n    <strong>{{ product?.name }}</strong> ?\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-raised-button color=\"warn\" (click)=\"deleteProduct()\">\n      Delete\n    </button>\n    <button [disabled]=\"isDeleting\" type=\"button\" mat-flat-button mat-dialog-close>Cancel</button>\n  </div>\n</ng-template>\n"
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i3.MatDialog },
+		{ type: ProductService },
+		{ type: i1.AlertService }
+	],
+	propDecorators: {
+		product: [{ type: Input }],
+		deleted: [{ type: Output }]
+	}
+});
+var product_module_exports = /* @__PURE__ */ __exportAll({ ProductModule: () => ProductModule });
+var ProductModule = class ProductModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductModule,
+		declarations: [
+			ProductListComponent,
+			ProductFormComponent,
+			ProductNavBarComponent,
+			ProductMeasuresListComponent,
+			ProductMeasureFormComponent,
+			ProductViewPageComponent,
+			ProductFormButtonComponent,
+			ProductDeleteButtonComponent,
+			ProductBasicInfoComponent,
+			ProductImportPageComponent,
+			ProductBatchUpdateFormComponent
+		],
+		imports: [
+			SharedModule,
+			ProductRoutingModule,
+			ImportCsvModule,
+			StockReceiptsModule,
+			StockIssuePageModule,
+			FormsModule,
+			ColumnSelectorModule,
+			ProductLocationListComponent,
+			StockTransferListComponent,
+			ExportToExcelButtonComponent,
+			QRCodeComponent,
+			BarcodeComponent,
+			FileDropperModule,
+			DocumentViewerModule
+		],
+		exports: [
+			ProductFormComponent,
+			ProductBasicInfoComponent,
+			ProductFormButtonComponent,
+			ProductBatchUpdateFormComponent
+		]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: ProductModule,
+		imports: [
+			SharedModule,
+			ProductRoutingModule,
+			ImportCsvModule,
+			StockReceiptsModule,
+			StockIssuePageModule,
+			FormsModule,
+			ColumnSelectorModule,
+			ProductLocationListComponent,
+			StockTransferListComponent,
+			QRCodeComponent,
+			FileDropperModule,
+			DocumentViewerModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: ProductModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			declarations: [
+				ProductListComponent,
+				ProductFormComponent,
+				ProductNavBarComponent,
+				ProductMeasuresListComponent,
+				ProductMeasureFormComponent,
+				ProductViewPageComponent,
+				ProductFormButtonComponent,
+				ProductDeleteButtonComponent,
+				ProductBasicInfoComponent,
+				ProductImportPageComponent,
+				ProductBatchUpdateFormComponent
+			],
+			imports: [
+				SharedModule,
+				ProductRoutingModule,
+				ImportCsvModule,
+				StockReceiptsModule,
+				StockIssuePageModule,
+				FormsModule,
+				ColumnSelectorModule,
+				ProductLocationListComponent,
+				StockTransferListComponent,
+				ExportToExcelButtonComponent,
+				QRCodeComponent,
+				BarcodeComponent,
+				FileDropperModule,
+				DocumentViewerModule
+			],
+			exports: [
+				ProductFormComponent,
+				ProductBasicInfoComponent,
+				ProductFormButtonComponent,
+				ProductBatchUpdateFormComponent
+			]
+		}]
+	}]
+});
+export { ProductViewPageComponent as a, StockTransferListComponent as c, ProductListComponent as d, ProductBatchUpdateFormComponent as f, ProductService as h, ProductImportPageComponent as i, StockTransferFormComponent as l, ProductFormService as m, product_module_exports as n, ProductBasicInfoComponent as o, ProductFormButtonComponent as p, ProductFormComponent as r, StockSummaryService as s, ProductModule as t, StockTransferService as u };
+
+//# sourceMappingURL=techlify-inventory-common-product.module-MZoVK3bN.mjs.map