techlify-inventory-common 18.50.0 → 22.0.0

package/fesm2022/techlify-inventory-common-purchase-order-view.component-CjED8n4_.mjs

@@ -0,0 +1,852 @@
+import { t as MaterialModule$1 } from "./techlify-inventory-common-material.module-ClupVm7-.mjs";
+import { t as PurchaseOrderService } from "./techlify-inventory-common-purchase-order.service-ztJ5RRH5.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Inject, Injectable, effect, input, output } from "@angular/core";
+import * as i1 from "@angular/router";
+import { RouterLink } from "@angular/router";
+import * as i1$1 from "ngx-techlify-core";
+import { NoteModule, SearchableSelectorModule, TechlifyDeleteButtonComponent, TechlifyFormComponent, TechlifyIconModule, TechlifyListComponent, TechlifyService } from "ngx-techlify-core";
+import * as i3$1 from "@angular/material/card";
+import * as i6 from "@angular/material/table";
+import * as i4 from "@angular/material/progress-bar";
+import * as i2 from "@angular/forms";
+import { ReactiveFormsModule, Validators } from "@angular/forms";
+import * as i4$1 from "@angular/material/dialog";
+import { MAT_DIALOG_DATA, MatDialogContent, MatDialogTitle } from "@angular/material/dialog";
+import * as i5$1 from "@angular/material/button";
+import * as i6$1 from "@angular/material/form-field";
+import * as i7 from "@angular/material/input";
+import * as i5 from "@angular/material/sort";
+import * as i3 from "@angular/common";
+import { CommonModule } from "@angular/common";
+var PurchaseOrderProductService = class PurchaseOrderProductService extends TechlifyService {
+	http;
+	constructor(http) {
+		super(http, "purchase-order-products");
+		this.http = http;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: PurchaseOrderProductService,
+		deps: [{ token: i1$1.HttpService }],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: PurchaseOrderProductService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: PurchaseOrderProductService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{ type: i1$1.HttpService }]
+});
+var PurchaseOrderProductFormComponent = class PurchaseOrderProductFormComponent extends TechlifyFormComponent {
+	fb;
+	service;
+	data;
+	constructor(formValidatorService, fb, service, dialogRef, data) {
+		super(formValidatorService);
+		this.fb = fb;
+		this.service = service;
+		this.data = data;
+		this.dialogRef = dialogRef;
+		this.errorMessages = {
+			product_id: { required: "Product is required." },
+			quantity: {
+				required: "Quantity is required.",
+				min: "Quantity must be at least 1."
+			},
+			unit_id: { required: "Unit is required." }
+		};
+		this.form = this.fb.group({
+			id: [""],
+			purchase_order_id: ["", Validators.required],
+			product_id: ["", Validators.required],
+			quantity: [1, [Validators.required, Validators.min(1)]],
+			unit_id: ["", Validators.required],
+			details: [""]
+		});
+	}
+	ngOnInit() {
+		this.form.patchValue({ purchase_order_id: this.data.purchaseOrderId });
+		const product = this.data.purchaseOrderProduct;
+		if (product) {
+			this.isUpdate = true;
+			this.form.patchValue({
+				id: product.id,
+				product_id: product.product_id,
+				quantity: product.quantity,
+				unit_id: product.unit_id,
+				details: product.details ?? ""
+			});
+		}
+	}
+	cancel() {
+		this.dialogRef.close();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: PurchaseOrderProductFormComponent,
+		deps: [
+			{ token: i1$1.FormValidatorService },
+			{ token: i2.FormBuilder },
+			{ token: PurchaseOrderProductService },
+			{ token: i4$1.MatDialogRef },
+			{ token: MAT_DIALOG_DATA }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: PurchaseOrderProductFormComponent,
+		isStandalone: true,
+		selector: "app-purchase-order-product-form",
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<h3 mat-dialog-title class='text-center'> Product Form </h3>\n\n<mat-dialog-content>\n    <form [formGroup]=\"form\" (submit)=\"submit(form.value)\" class=\"d-flex flex-column gap-3 mt-2\">\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Product</mat-label>\n            <app-searchable-selector formControlName=\"product_id\" apiUrl=\"api/products\" titleField=\"name\"\n                [cache]=\"true\"></app-searchable-selector>\n      @if (isFieldValid('product_id')) {\n      <mat-error>{{ getErrorMessage('product_id') }}</mat-error>\n      }\n    </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Quantity</mat-label>\n            <input matInput type=\"number\" formControlName=\"quantity\" min=\"1\">\n      @if (isFieldValid('quantity')) {\n      <mat-error>{{ getErrorMessage('quantity') }}</mat-error>\n      }\n    </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Unit</mat-label>\n            <app-searchable-selector formControlName=\"unit_id\" apiUrl=\"api/product-measures\"\n                titleField=\"title\"></app-searchable-selector>\n      @if (isFieldValid('unit_id')) {\n      <mat-error>{{ getErrorMessage('unit_id') }}</mat-error>\n      }\n    </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Details</mat-label>\n            <textarea matInput formControlName=\"details\" rows=\"3\"></textarea>\n        </mat-form-field>\n\n        <div class=\"d-flex justify-content-end gap-2\">\n            <button mat-flat-button type=\"button\" [disabled]=\"isWorking\" (click)=\"cancel()\">Cancel</button>\n            <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"isWorking\">Save</button>\n        </div>\n\n    </form>\n</mat-dialog-content>",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: 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.MinValidator,
+				selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",
+				inputs: ["min"]
+			},
+			{
+				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: "ngmodule",
+				type: MaterialModule$1
+			},
+			{
+				kind: "component",
+				type: i5$1.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: i4$1.MatDialogTitle,
+				selector: "[mat-dialog-title], [matDialogTitle]",
+				inputs: ["id"],
+				exportAs: ["matDialogTitle"]
+			},
+			{
+				kind: "directive",
+				type: i4$1.MatDialogContent,
+				selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]"
+			},
+			{
+				kind: "component",
+				type: i6$1.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i6$1.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "directive",
+				type: i6$1.MatError,
+				selector: "mat-error, [matError]",
+				inputs: ["id"]
+			},
+			{
+				kind: "directive",
+				type: i7.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: "ngmodule",
+				type: SearchableSelectorModule
+			},
+			{
+				kind: "component",
+				type: i1$1.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: PurchaseOrderProductFormComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-purchase-order-product-form",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			imports: [
+				ReactiveFormsModule,
+				MaterialModule$1,
+				SearchableSelectorModule,
+				MatDialogTitle,
+				MatDialogContent
+			],
+			template: "<h3 mat-dialog-title class='text-center'> Product Form </h3>\n\n<mat-dialog-content>\n    <form [formGroup]=\"form\" (submit)=\"submit(form.value)\" class=\"d-flex flex-column gap-3 mt-2\">\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Product</mat-label>\n            <app-searchable-selector formControlName=\"product_id\" apiUrl=\"api/products\" titleField=\"name\"\n                [cache]=\"true\"></app-searchable-selector>\n      @if (isFieldValid('product_id')) {\n      <mat-error>{{ getErrorMessage('product_id') }}</mat-error>\n      }\n    </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Quantity</mat-label>\n            <input matInput type=\"number\" formControlName=\"quantity\" min=\"1\">\n      @if (isFieldValid('quantity')) {\n      <mat-error>{{ getErrorMessage('quantity') }}</mat-error>\n      }\n    </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Unit</mat-label>\n            <app-searchable-selector formControlName=\"unit_id\" apiUrl=\"api/product-measures\"\n                titleField=\"title\"></app-searchable-selector>\n      @if (isFieldValid('unit_id')) {\n      <mat-error>{{ getErrorMessage('unit_id') }}</mat-error>\n      }\n    </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n            <mat-label>Details</mat-label>\n            <textarea matInput formControlName=\"details\" rows=\"3\"></textarea>\n        </mat-form-field>\n\n        <div class=\"d-flex justify-content-end gap-2\">\n            <button mat-flat-button type=\"button\" [disabled]=\"isWorking\" (click)=\"cancel()\">Cancel</button>\n            <button mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"isWorking\">Save</button>\n        </div>\n\n    </form>\n</mat-dialog-content>"
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i1$1.FormValidatorService },
+		{ type: i2.FormBuilder },
+		{ type: PurchaseOrderProductService },
+		{ type: i4$1.MatDialogRef },
+		{
+			type: void 0,
+			decorators: [{
+				type: Inject,
+				args: [MAT_DIALOG_DATA]
+			}]
+		}
+	]
+});
+var PurchaseOrderProductFormButtonComponent = class PurchaseOrderProductFormButtonComponent {
+	dialog;
+	purchaseOrderProduct = input(...ngDevMode ? [void 0, { debugName: "purchaseOrderProduct" }] : /* istanbul ignore next */ []);
+	purchaseOrderId = input.required(...ngDevMode ? [{ debugName: "purchaseOrderId" }] : /* istanbul ignore next */ []);
+	saved = output();
+	constructor(dialog) {
+		this.dialog = dialog;
+	}
+	open() {
+		this.dialog.open(PurchaseOrderProductFormComponent, {
+			width: "500px",
+			data: {
+				purchaseOrderId: this.purchaseOrderId(),
+				purchaseOrderProduct: this.purchaseOrderProduct()
+			}
+		}).afterClosed().subscribe((item) => {
+			if (item) this.saved.emit(item);
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: PurchaseOrderProductFormButtonComponent,
+		deps: [{ token: i4$1.MatDialog }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.5",
+		type: PurchaseOrderProductFormButtonComponent,
+		isStandalone: true,
+		selector: "app-purchase-order-product-form-button",
+		inputs: {
+			purchaseOrderProduct: {
+				classPropertyName: "purchaseOrderProduct",
+				publicName: "purchaseOrderProduct",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			purchaseOrderId: {
+				classPropertyName: "purchaseOrderId",
+				publicName: "purchaseOrderId",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		outputs: { saved: "saved" },
+		ngImport: i0,
+		template: "<app-techlify-icon\n    role=\"button\"\n    [name]=\"purchaseOrderProduct() ? 'edit' : 'add'\"\n    (click)=\"open()\">\n</app-techlify-icon>\n",
+		dependencies: [{
+			kind: "ngmodule",
+			type: TechlifyIconModule
+		}, {
+			kind: "component",
+			type: i1$1.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: PurchaseOrderProductFormButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-purchase-order-product-form-button",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			imports: [TechlifyIconModule],
+			template: "<app-techlify-icon\n    role=\"button\"\n    [name]=\"purchaseOrderProduct() ? 'edit' : 'add'\"\n    (click)=\"open()\">\n</app-techlify-icon>\n"
+		}]
+	}],
+	ctorParameters: () => [{ type: i4$1.MatDialog }],
+	propDecorators: {
+		purchaseOrderProduct: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "purchaseOrderProduct",
+				required: false
+			}]
+		}],
+		purchaseOrderId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "purchaseOrderId",
+				required: true
+			}]
+		}],
+		saved: [{
+			type: i0.Output,
+			args: ["saved"]
+		}]
+	}
+});
+var PurchaseOrderProductListComponent = class PurchaseOrderProductListComponent extends TechlifyListComponent {
+	service;
+	fb;
+	purchaseOrderId = input(...ngDevMode ? [void 0, { debugName: "purchaseOrderId" }] : /* istanbul ignore next */ []);
+	displayedColumns = [
+		"#",
+		"product",
+		"quantity",
+		"unit",
+		"details",
+		"actions"
+	];
+	constructor(service, fb) {
+		super(service);
+		this.service = service;
+		this.fb = fb;
+		this.isFilterPatchFromRoute = false;
+		this.filterForm = this.fb.group({
+			purchase_order_id: [""],
+			sort_by: ["product|ASC"]
+		});
+		effect(() => {
+			const id = this.purchaseOrderId();
+			if (id) {
+				this.filterForm.get("purchase_order_id")?.setValue(id, { emitEvent: false });
+				this.reload();
+			}
+		});
+	}
+	ngOnInit() {
+		this.listenFilterChanges();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: PurchaseOrderProductListComponent,
+		deps: [{ token: PurchaseOrderProductService }, { token: i2.FormBuilder }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: PurchaseOrderProductListComponent,
+		isStandalone: true,
+		selector: "app-purchase-order-product-list",
+		inputs: { purchaseOrderId: {
+			classPropertyName: "purchaseOrderId",
+			publicName: "purchaseOrderId",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<mat-card class=\"w-100\">\n    <mat-card-content>\n        <div class=\"d-flex justify-content-between align-items-center mb-2\">\n            <div class=\"d-flex flex-row gap-2\">\n                <h5>Products</h5>\n                <app-purchase-order-product-form-button [purchaseOrderId]=\"purchaseOrderId()!\"\n                    (saved)=\"reload()\">\n                </app-purchase-order-product-form-button>\n            </div>\n        </div>\n\n        <table mat-table [dataSource]=\"models\" class=\"w-100\" matSort (matSortChange)=\"sortColumn($event)\">\n            <!-- # Column -->\n            <ng-container matColumnDef=\"#\">\n                <th mat-header-cell *matHeaderCellDef>#</th>\n                <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n            </ng-container>\n\n            <!-- Product Column -->\n            <ng-container matColumnDef=\"product\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header=\"product\" disableClear>Product</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.product?.name }}</td>\n            </ng-container>\n\n            <!-- Quantity Column -->\n            <ng-container matColumnDef=\"quantity\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header=\"quantity\" disableClear>Quantity</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.quantity }}</td>\n            </ng-container>\n\n            <!-- Unit Column -->\n            <ng-container matColumnDef=\"unit\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header=\"unit\" disableClear>Unit</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.unit?.title }}</td>\n            </ng-container>\n\n            <!-- Details Column -->\n            <ng-container matColumnDef=\"details\">\n                <th mat-header-cell *matHeaderCellDef>Details</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</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; let i = index\">\n                    <span class=\"text-secondary d-flex align-items-center gap-2\">\n                        <app-purchase-order-product-form-button [purchaseOrderId]=\"purchaseOrderId()!\"\n                            [purchaseOrderProduct]=\"element\" (saved)=\"reload()\">\n                        </app-purchase-order-product-form-button>\n\n                        <app-techlify-delete-button (deleted)=\"reload()\" [service]=\"service\" [model]=\"element\"\n                            [data]=\"{ title: $safeNavigationMigration(element?.product?.name), type: 'Purchase Order Product' }\"></app-techlify-delete-button>\n                    </span>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n        </table>\n\n    @if (isWorking) {\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    }\n  </mat-card-content>\n</mat-card>",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: MaterialModule$1
+			},
+			{
+				kind: "component",
+				type: i3$1.MatCard,
+				selector: "mat-card",
+				inputs: ["appearance"],
+				exportAs: ["matCard"]
+			},
+			{
+				kind: "directive",
+				type: i3$1.MatCardContent,
+				selector: "mat-card-content"
+			},
+			{
+				kind: "component",
+				type: i4.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "directive",
+				type: i5.MatSort,
+				selector: "[matSort]",
+				inputs: [
+					"matSortActive",
+					"matSortStart",
+					"matSortDirection",
+					"matSortDisableClear",
+					"matSortDisabled"
+				],
+				outputs: ["matSortChange"],
+				exportAs: ["matSort"]
+			},
+			{
+				kind: "component",
+				type: i5.MatSortHeader,
+				selector: "[mat-sort-header]",
+				inputs: [
+					"mat-sort-header",
+					"arrowPosition",
+					"start",
+					"disabled",
+					"sortActionDescription",
+					"disableClear"
+				],
+				exportAs: ["matSortHeader"]
+			},
+			{
+				kind: "component",
+				type: i6.MatTable,
+				selector: "mat-table, table[mat-table]",
+				exportAs: ["matTable"]
+			},
+			{
+				kind: "directive",
+				type: i6.MatHeaderCellDef,
+				selector: "[matHeaderCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i6.MatHeaderRowDef,
+				selector: "[matHeaderRowDef]",
+				inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"]
+			},
+			{
+				kind: "directive",
+				type: i6.MatColumnDef,
+				selector: "[matColumnDef]",
+				inputs: ["matColumnDef"]
+			},
+			{
+				kind: "directive",
+				type: i6.MatCellDef,
+				selector: "[matCellDef]"
+			},
+			{
+				kind: "directive",
+				type: i6.MatRowDef,
+				selector: "[matRowDef]",
+				inputs: ["matRowDefColumns", "matRowDefWhen"]
+			},
+			{
+				kind: "directive",
+				type: i6.MatHeaderCell,
+				selector: "mat-header-cell, th[mat-header-cell]"
+			},
+			{
+				kind: "directive",
+				type: i6.MatCell,
+				selector: "mat-cell, td[mat-cell]"
+			},
+			{
+				kind: "component",
+				type: i6.MatHeaderRow,
+				selector: "mat-header-row, tr[mat-header-row]",
+				exportAs: ["matHeaderRow"]
+			},
+			{
+				kind: "component",
+				type: i6.MatRow,
+				selector: "mat-row, tr[mat-row]",
+				exportAs: ["matRow"]
+			},
+			{
+				kind: "ngmodule",
+				type: ReactiveFormsModule
+			},
+			{
+				kind: "ngmodule",
+				type: TechlifyIconModule
+			},
+			{
+				kind: "component",
+				type: PurchaseOrderProductFormButtonComponent,
+				selector: "app-purchase-order-product-form-button",
+				inputs: ["purchaseOrderProduct", "purchaseOrderId"],
+				outputs: ["saved"]
+			},
+			{
+				kind: "component",
+				type: TechlifyDeleteButtonComponent,
+				selector: "app-techlify-delete-button",
+				inputs: [
+					"data",
+					"model",
+					"message",
+					"service"
+				],
+				outputs: ["deleted", "loading"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: PurchaseOrderProductListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-purchase-order-product-list",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			imports: [
+				MaterialModule$1,
+				ReactiveFormsModule,
+				TechlifyIconModule,
+				PurchaseOrderProductFormButtonComponent,
+				TechlifyDeleteButtonComponent
+			],
+			template: "<mat-card class=\"w-100\">\n    <mat-card-content>\n        <div class=\"d-flex justify-content-between align-items-center mb-2\">\n            <div class=\"d-flex flex-row gap-2\">\n                <h5>Products</h5>\n                <app-purchase-order-product-form-button [purchaseOrderId]=\"purchaseOrderId()!\"\n                    (saved)=\"reload()\">\n                </app-purchase-order-product-form-button>\n            </div>\n        </div>\n\n        <table mat-table [dataSource]=\"models\" class=\"w-100\" matSort (matSortChange)=\"sortColumn($event)\">\n            <!-- # Column -->\n            <ng-container matColumnDef=\"#\">\n                <th mat-header-cell *matHeaderCellDef>#</th>\n                <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n            </ng-container>\n\n            <!-- Product Column -->\n            <ng-container matColumnDef=\"product\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header=\"product\" disableClear>Product</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.product?.name }}</td>\n            </ng-container>\n\n            <!-- Quantity Column -->\n            <ng-container matColumnDef=\"quantity\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header=\"quantity\" disableClear>Quantity</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.quantity }}</td>\n            </ng-container>\n\n            <!-- Unit Column -->\n            <ng-container matColumnDef=\"unit\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header=\"unit\" disableClear>Unit</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.unit?.title }}</td>\n            </ng-container>\n\n            <!-- Details Column -->\n            <ng-container matColumnDef=\"details\">\n                <th mat-header-cell *matHeaderCellDef>Details</th>\n                <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</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; let i = index\">\n                    <span class=\"text-secondary d-flex align-items-center gap-2\">\n                        <app-purchase-order-product-form-button [purchaseOrderId]=\"purchaseOrderId()!\"\n                            [purchaseOrderProduct]=\"element\" (saved)=\"reload()\">\n                        </app-purchase-order-product-form-button>\n\n                        <app-techlify-delete-button (deleted)=\"reload()\" [service]=\"service\" [model]=\"element\"\n                            [data]=\"{ title: $safeNavigationMigration(element?.product?.name), type: 'Purchase Order Product' }\"></app-techlify-delete-button>\n                    </span>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n        </table>\n\n    @if (isWorking) {\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    }\n  </mat-card-content>\n</mat-card>"
+		}]
+	}],
+	ctorParameters: () => [{ type: PurchaseOrderProductService }, { type: i2.FormBuilder }],
+	propDecorators: { purchaseOrderId: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "purchaseOrderId",
+			required: false
+		}]
+	}] }
+});
+var PurchaseOrderViewComponent = class PurchaseOrderViewComponent {
+	activatedRoute;
+	service;
+	location;
+	id;
+	isLoading;
+	purchaseOrder;
+	constructor(activatedRoute, service, location) {
+		this.activatedRoute = activatedRoute;
+		this.service = service;
+		this.location = location;
+	}
+	ngOnInit() {
+		this.activatedRoute.params.subscribe((params) => {
+			this.id = parseInt(params["id"]);
+			if (this.id) this.loadData();
+		});
+	}
+	loadData() {
+		this.isLoading = true;
+		this.service.show(this.id, { with: "supplier" }).subscribe({
+			next: (response) => {
+				this.purchaseOrder = response?.item;
+				this.isLoading = false;
+			},
+			error: () => {
+				this.isLoading = false;
+			}
+		});
+	}
+	redirectBack() {
+		this.location.back();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.5",
+		ngImport: i0,
+		type: PurchaseOrderViewComponent,
+		deps: [
+			{ token: i1.ActivatedRoute },
+			{ token: PurchaseOrderService },
+			{ token: i3.Location }
+		],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.5",
+		type: PurchaseOrderViewComponent,
+		isStandalone: true,
+		selector: "app-purchase-order-view",
+		ngImport: i0,
+		template: "@if (isLoading) {\n<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n} @if (purchaseOrder) {\n<div class=\"d-flex flex-column justify-content-start gap-2\">\n    <div class=\"d-flex justify-content-start align-items-start gap-2\">\n        <div class=\"d-flex flex-column gap-2\" style=\"width: 400px\">\n            <mat-card>\n                <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n                    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n                        <span class=\"material-symbols-outlined\">ungroup</span>\n                        <strong class=\"mb-0 text-dark\">PO #{{ purchaseOrder?.po_number }}</strong>\n                    </div>\n                    <div class=\"d-flex justify-content-start align-items-center gap-2 text-secondary\">\n                        <app-techlify-icon role='button' name='edit' class='text-secondary'\n                            [routerLink]=\"['/inventory/suppliers/purchase-orders/form', $safeNavigationMigration(purchaseOrder?.id)]\"></app-techlify-icon>\n\n                        <app-techlify-delete-button [service]=\"service\" [model]=\"purchaseOrder\"\n                            [data]=\"{ title: $safeNavigationMigration(purchaseOrder?.po_number), type: 'Purchase Order' }\"\n                            (deleted)=\"redirectBack()\"></app-techlify-delete-button>\n                    </div>\n                </mat-card-content>\n                <mat-card-content class=\"d-flex flex-wrap justify-content-between gap-2 mt-3\">\n                    <!-- Date -->\n          @if (purchaseOrder?.date) {\n          <div class=\"row\">\n                        <div class=\"col-12\">\n                            <div class=\"d-flex flex-column gap-0\">\n                                <small class=\"text-secondary\">Date</small>\n                                <p class=\"mb-0\">{{ $safeNavigationMigration(purchaseOrder?.date) | date : 'mediumDate' }}</p>\n                            </div>\n                        </div>\n                    </div>\n          }\n          <!-- PO # -->\n          @if (purchaseOrder?.po_number) {\n          <div class=\"row\">\n                        <div class=\"col-12\">\n                            <div class=\"d-flex flex-column gap-0\">\n                                <small class=\"text-secondary\">PO #</small>\n                                <p class=\"mb-0\">{{ purchaseOrder?.po_number }}</p>\n                            </div>\n                        </div>\n                    </div>\n          }\n          <!-- Supplier -->\n          @if (purchaseOrder?.supplier) {\n          <div class=\"row\">\n                        <div class=\"col-12\">\n                            <div class=\"d-flex flex-column gap-0\">\n                                <small class=\"text-secondary\">Supplier</small>\n                                <a class=\"text-decoration-none text-dark\"\n                                    [routerLink]=\"['/inventory/suppliers', $safeNavigationMigration(purchaseOrder?.supplier?.id), 'view']\">\n                                    {{ purchaseOrder?.supplier?.company_name }}\n                                </a>\n                            </div>\n                        </div>\n                    </div>\n          }\n          <!-- Details -->\n          @if (purchaseOrder?.details) {\n          <div class=\"row\">\n                        <div class=\"col-12\">\n                            <div class=\"d-flex flex-column gap-0\">\n                                <small class=\"text-secondary\">Details</small>\n                                <p class=\"mb-0\">{{ purchaseOrder?.details }}</p>\n                            </div>\n                        </div>\n                    </div>\n          }\n        </mat-card-content>\n            </mat-card>\n\n            <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"PurchaseOrder\"\n                [relatedModelId]=\"$safeNavigationMigration(purchaseOrder?.id)\"></app-note-list>\n        </div>\n\n        <app-purchase-order-product-list class='w-100'\n            [purchaseOrderId]=\"$safeNavigationMigration(purchaseOrder?.id)\"></app-purchase-order-product-list>\n    </div>\n</div>\n}",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "ngmodule",
+				type: MaterialModule$1
+			},
+			{
+				kind: "component",
+				type: i3$1.MatCard,
+				selector: "mat-card",
+				inputs: ["appearance"],
+				exportAs: ["matCard"]
+			},
+			{
+				kind: "directive",
+				type: i3$1.MatCardContent,
+				selector: "mat-card-content"
+			},
+			{
+				kind: "component",
+				type: i4.MatProgressBar,
+				selector: "mat-progress-bar",
+				inputs: [
+					"color",
+					"value",
+					"bufferValue",
+					"mode"
+				],
+				outputs: ["animationEnd"],
+				exportAs: ["matProgressBar"]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: NoteModule
+			},
+			{
+				kind: "component",
+				type: i1$1.NoteListComponent,
+				selector: "app-note-list",
+				inputs: [
+					"relatedModelId",
+					"modelType",
+					"readonly",
+					"labelText",
+					"commentsView",
+					"viewMode"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: TechlifyIconModule
+			},
+			{
+				kind: "component",
+				type: i1$1.TechlifyIconComponent,
+				selector: "app-techlify-icon",
+				inputs: ["name", "size"]
+			},
+			{
+				kind: "component",
+				type: PurchaseOrderProductListComponent,
+				selector: "app-purchase-order-product-list",
+				inputs: ["purchaseOrderId"]
+			},
+			{
+				kind: "component",
+				type: TechlifyDeleteButtonComponent,
+				selector: "app-techlify-delete-button",
+				inputs: [
+					"data",
+					"model",
+					"message",
+					"service"
+				],
+				outputs: ["deleted", "loading"]
+			},
+			{
+				kind: "pipe",
+				type: i3.DatePipe,
+				name: "date"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		preserveWhitespaces: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.5",
+	ngImport: i0,
+	type: PurchaseOrderViewComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-purchase-order-view",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			imports: [
+				CommonModule,
+				MaterialModule$1,
+				RouterLink,
+				NoteModule,
+				TechlifyIconModule,
+				PurchaseOrderProductListComponent,
+				TechlifyDeleteButtonComponent
+			],
+			template: "@if (isLoading) {\n<mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n} @if (purchaseOrder) {\n<div class=\"d-flex flex-column justify-content-start gap-2\">\n    <div class=\"d-flex justify-content-start align-items-start gap-2\">\n        <div class=\"d-flex flex-column gap-2\" style=\"width: 400px\">\n            <mat-card>\n                <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n                    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n                        <span class=\"material-symbols-outlined\">ungroup</span>\n                        <strong class=\"mb-0 text-dark\">PO #{{ purchaseOrder?.po_number }}</strong>\n                    </div>\n                    <div class=\"d-flex justify-content-start align-items-center gap-2 text-secondary\">\n                        <app-techlify-icon role='button' name='edit' class='text-secondary'\n                            [routerLink]=\"['/inventory/suppliers/purchase-orders/form', $safeNavigationMigration(purchaseOrder?.id)]\"></app-techlify-icon>\n\n                        <app-techlify-delete-button [service]=\"service\" [model]=\"purchaseOrder\"\n                            [data]=\"{ title: $safeNavigationMigration(purchaseOrder?.po_number), type: 'Purchase Order' }\"\n                            (deleted)=\"redirectBack()\"></app-techlify-delete-button>\n                    </div>\n                </mat-card-content>\n                <mat-card-content class=\"d-flex flex-wrap justify-content-between gap-2 mt-3\">\n                    <!-- Date -->\n          @if (purchaseOrder?.date) {\n          <div class=\"row\">\n                        <div class=\"col-12\">\n                            <div class=\"d-flex flex-column gap-0\">\n                                <small class=\"text-secondary\">Date</small>\n                                <p class=\"mb-0\">{{ $safeNavigationMigration(purchaseOrder?.date) | date : 'mediumDate' }}</p>\n                            </div>\n                        </div>\n                    </div>\n          }\n          <!-- PO # -->\n          @if (purchaseOrder?.po_number) {\n          <div class=\"row\">\n                        <div class=\"col-12\">\n                            <div class=\"d-flex flex-column gap-0\">\n                                <small class=\"text-secondary\">PO #</small>\n                                <p class=\"mb-0\">{{ purchaseOrder?.po_number }}</p>\n                            </div>\n                        </div>\n                    </div>\n          }\n          <!-- Supplier -->\n          @if (purchaseOrder?.supplier) {\n          <div class=\"row\">\n                        <div class=\"col-12\">\n                            <div class=\"d-flex flex-column gap-0\">\n                                <small class=\"text-secondary\">Supplier</small>\n                                <a class=\"text-decoration-none text-dark\"\n                                    [routerLink]=\"['/inventory/suppliers', $safeNavigationMigration(purchaseOrder?.supplier?.id), 'view']\">\n                                    {{ purchaseOrder?.supplier?.company_name }}\n                                </a>\n                            </div>\n                        </div>\n                    </div>\n          }\n          <!-- Details -->\n          @if (purchaseOrder?.details) {\n          <div class=\"row\">\n                        <div class=\"col-12\">\n                            <div class=\"d-flex flex-column gap-0\">\n                                <small class=\"text-secondary\">Details</small>\n                                <p class=\"mb-0\">{{ purchaseOrder?.details }}</p>\n                            </div>\n                        </div>\n                    </div>\n          }\n        </mat-card-content>\n            </mat-card>\n\n            <app-note-list labelText=\"Notes\" viewMode=\"timeline\" modelType=\"PurchaseOrder\"\n                [relatedModelId]=\"$safeNavigationMigration(purchaseOrder?.id)\"></app-note-list>\n        </div>\n\n        <app-purchase-order-product-list class='w-100'\n            [purchaseOrderId]=\"$safeNavigationMigration(purchaseOrder?.id)\"></app-purchase-order-product-list>\n    </div>\n</div>\n}"
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i1.ActivatedRoute },
+		{ type: PurchaseOrderService },
+		{ type: i3.Location }
+	]
+});
+export { PurchaseOrderViewComponent };
+
+//# sourceMappingURL=techlify-inventory-common-purchase-order-view.component-CjED8n4_.mjs.map