techlify-inventory-common 18.0.1

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

@@ -0,0 +1,1172 @@
+import * as i0 from '@angular/core';
+import { Inject, Component, Injectable, EventEmitter, Input, Output, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { __decorate } from 'tslib';
+import * as i2 from '@angular/forms';
+import { Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { P as ProductService, S as StockSummaryService } from './techlify-inventory-common-techlify-inventory-common-Czyc0jLI.mjs';
+import * as i3 from 'ngx-spinner';
+import * as i1$1 from 'ngx-techlify-core';
+import { TechlifyServiceBaseClass, TechlifyFormComponentInterface, TechlifyListingControllerInterface, AuthenticationGuard, MaterialModule, SearchableSelectorModule, TimelineFilterModule, ImportCsvModule } from 'ngx-techlify-core';
+import * as i7 from '@angular/material/button';
+import * as i6 from '@angular/material/form-field';
+import * as i7$1 from '@angular/material/input';
+import * as i10 from '@angular/flex-layout';
+import { FlexModule } from '@angular/flex-layout';
+import * as i6$1 from '@angular/material/table';
+import { MatTableDataSource } from '@angular/material/table';
+import { debounceTime } from 'rxjs/operators';
+import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
+import * as i2$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i3$1 from '@angular/material/icon';
+import * as i10$1 from '@angular/material/core';
+import * as i11 from '@angular/material/select';
+import * as i5 from '@angular/material/sort';
+import * as i10$2 from 'ngx-infinite-scroll';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import moment from 'moment';
+import { T as TechlifyFormService } from './techlify-inventory-common-techlify-form-service-CiVfwYTS.mjs';
+import * as i9 from '@angular/material/datepicker';
+import { a as StockReceiptFormButtonComponent, S as StockReceiptFormModule } from './techlify-inventory-common-stock-receipt-form.module-BZDrN7la.mjs';
+import { c as StockIssueFormButtonComponent, S as StockIssuancesListComponent, a as StockIssueFormModule, b as StockIssuancesListModule } from './techlify-inventory-common-stock-issuances-list.module-CyFDxARk.mjs';
+import * as i3$2 from '@angular/material/card';
+import * as i2$2 from '@angular/material/tooltip';
+import * as i7$2 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { S as StockReceiptsListPageComponent, a as StockReceiptsModule } from './techlify-inventory-common-stock-receipts.module-CUPdWteR.mjs';
+import * as i6$2 from '@angular/material/divider';
+
+const errorMessages$1 = {
+    title: {
+        required: "Please Enter Title",
+    },
+    description: {
+        required: "Please Enter Description",
+    },
+};
+class ProductMeasureFormComponent {
+    productService;
+    fb;
+    dialogRef;
+    data;
+    spinnerService;
+    formValidatorService;
+    errorService;
+    alertService;
+    productMeasureForm;
+    isWorking = false;
+    isUpdate = false;
+    constructor(productService, fb, dialogRef, data, spinnerService, formValidatorService, errorService, alertService) {
+        this.productService = productService;
+        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.productService.updateProductMeasure(productMeasure)
+                : await this.productService.createProductMeasure(productMeasure);
+            this.dialogRef.close(result);
+        }
+        catch (error) {
+            this.errorService.handleError(error);
+        }
+        finally {
+            this.isWorking = false;
+            this.spinnerService.hide();
+        }
+    }
+    /**
+     * Method to evaluate form fields
+     */
+    isFieldValid(field) {
+        return this.formValidatorService.isFieldValid(field, this.productMeasureForm);
+    }
+    /**
+     * Method to find error in form fields
+     */
+    getErrorMessage(field) {
+        return this.formValidatorService.getErrorMessage(field, this.productMeasureForm, errorMessages$1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductMeasureFormComponent, deps: [{ token: ProductService }, { token: i2.FormBuilder }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i3.NgxSpinnerService }, { token: i1$1.FormValidatorService }, { token: i1$1.ErrorHandlerService }, { token: i1$1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductMeasureFormComponent, selector: "app-product-measure-form", ngImport: i0, template: "<div>\n  <form [formGroup]=\"productMeasureForm\" (ngSubmit)=\"save()\">\n    <h3 class=\"text-center\">Create/Update Product Measure</h3>\n    <div fxLayout=\"column\">\n      <div fxLayout=\"column\">\n        <mat-form-field>\n          <input\n            matInput\n            placeholder=\"Title\"\n            formControlName=\"title\"\n            required\n          />\n          <mat-error *ngIf=\"isFieldValid('title')\"\n            >{{ getErrorMessage(\"title\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            placeholder=\"Description\"\n            formControlName=\"description\"\n            required\n          />\n          <mat-error *ngIf=\"isFieldValid('description')\"\n            >{{ getErrorMessage(\"description\") }}\n          </mat-error>\n        </mat-form-field>\n        <div fxFlex=\"100%\" fxLayout fxLayoutGap=\"1rem\">\n          <button\n            mat-button\n            class=\"mt-2\"\n            type=\"button\"\n            (click)=\"dialogRef.close()\"\n          >\n            Cancel\n          </button>\n          <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductMeasureFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-measure-form", template: "<div>\n  <form [formGroup]=\"productMeasureForm\" (ngSubmit)=\"save()\">\n    <h3 class=\"text-center\">Create/Update Product Measure</h3>\n    <div fxLayout=\"column\">\n      <div fxLayout=\"column\">\n        <mat-form-field>\n          <input\n            matInput\n            placeholder=\"Title\"\n            formControlName=\"title\"\n            required\n          />\n          <mat-error *ngIf=\"isFieldValid('title')\"\n            >{{ getErrorMessage(\"title\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            placeholder=\"Description\"\n            formControlName=\"description\"\n            required\n          />\n          <mat-error *ngIf=\"isFieldValid('description')\"\n            >{{ getErrorMessage(\"description\") }}\n          </mat-error>\n        </mat-form-field>\n        <div fxFlex=\"100%\" fxLayout fxLayoutGap=\"1rem\">\n          <button\n            mat-button\n            class=\"mt-2\"\n            type=\"button\"\n            (click)=\"dialogRef.close()\"\n          >\n            Cancel\n          </button>\n          <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: ProductService }, { type: i2.FormBuilder }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i3.NgxSpinnerService }, { type: i1$1.FormValidatorService }, { type: i1$1.ErrorHandlerService }, { type: i1$1.AlertService }] });
+
+let ProductMeasuresListComponent = class ProductMeasuresListComponent {
+    fb;
+    dialog;
+    filterService;
+    activatedRoute;
+    productService;
+    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, productService) {
+        this.fb = fb;
+        this.dialog = dialog;
+        this.filterService = filterService;
+        this.activatedRoute = activatedRoute;
+        this.productService = productService;
+        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(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.productService.getProductMeasures(filters);
+        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) {
+        const dialogRef = this.dialog.open(ProductMeasureFormComponent, {
+            width: "600px",
+            data: {
+                details: model,
+            },
+        });
+        dialogRef.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);
+    }
+    // eslint-disable-next-line @angular-eslint/use-lifecycle-interface
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+    ngOnDestroy() {
+        //Called once, before the instance is destroyed.
+        //Add 'implements OnDestroy' to the class.
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductMeasuresListComponent, deps: [{ token: i2.FormBuilder }, { token: i1.MatDialog }, { token: i1$1.FilterService }, { token: i2$1.ActivatedRoute }, { token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductMeasuresListComponent, selector: "app-product-measure-list", ngImport: i0, template: "<div fxLayout=\"column\">\n  <div class=\"text-center\" fxLayoutAlign=\"center center\">\n    <h3 fxLayout>\n      <span class=\"mt-1\"> Product Measures </span>\n      <button\n        mat-raised-button\n        class=\"ml-2\"\n        color=\"primary\"\n        (click)=\"modifyProductMeasure()\"\n      >\n        <mat-icon>add</mat-icon>\n        Product Measure\n      </button>\n    </h3>\n  </div>\n\n  <div fxLayout>\n    <form [formGroup]=\"filterFormGroup\" fxLayout fxLayoutGap=\"0.5rem\">\n      <mat-form-field>\n        <input\n          matInput\n          placeholder=\"Item Name, Description, etc.\"\n          formControlName=\"search\"\n        />\n      </mat-form-field>\n    </form>\n\n    <mat-form-field class=\"ml-2\" fxFlex=\"0 1 calc(11.11% - 0.5rem)\">\n      <mat-label>Columns</mat-label>\n      <mat-select [(ngModel)]=\"displayedColumns\" multiple name=\"column\">\n        <mat-option\n          *ngFor=\"let column of columnDefinitions\"\n          [value]=\"column.def\"\n          [disabled]=\"!column.isShow\"\n        >\n          {{ column?.def }}</mat-option\n        >\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <table\n    mat-table\n    #table\n    [dataSource]=\"dataSource\"\n    class=\"mat-elevation-z8 w-100 mt-4 table-hover\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\"\n    [fromRoot]=\"true\"\n    infiniteScrollContainer=\"mat-sidenav-content\"\n    matSort\n    (matSortChange)=\"sortColumn($event)\"\n    matSortDisableClear=\"true\"\n  >\n    <!-- # Column -->\n    <ng-container matColumnDef=\"#\">\n      <th mat-header-cell *matHeaderCellDef>#</th>\n      <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n    </ng-container>\n\n    <!-- Title Column -->\n    <ng-container matColumnDef=\"Title\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>Title</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element.title }}</td>\n    </ng-container>\n\n    <!-- Description Column -->\n    <ng-container matColumnDef=\"Description\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>Description</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element.description }}</td>\n    </ng-container>\n\n    <!-- Actions Column -->\n    <ng-container matColumnDef=\"Actions\">\n      <th mat-header-cell *matHeaderCellDef>Actions</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <div class=\"text-secondary\" fxLayoutGap=\"1rem\">\n          <button mat-icon-button (click)=\"modifyProductMeasure(element)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: 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$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i10.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i10.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }], preserveWhitespaces: true });
+};
+ProductMeasuresListComponent = __decorate([
+    UntilDestroy()
+], ProductMeasuresListComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductMeasuresListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-measure-list", template: "<div fxLayout=\"column\">\n  <div class=\"text-center\" fxLayoutAlign=\"center center\">\n    <h3 fxLayout>\n      <span class=\"mt-1\"> Product Measures </span>\n      <button\n        mat-raised-button\n        class=\"ml-2\"\n        color=\"primary\"\n        (click)=\"modifyProductMeasure()\"\n      >\n        <mat-icon>add</mat-icon>\n        Product Measure\n      </button>\n    </h3>\n  </div>\n\n  <div fxLayout>\n    <form [formGroup]=\"filterFormGroup\" fxLayout fxLayoutGap=\"0.5rem\">\n      <mat-form-field>\n        <input\n          matInput\n          placeholder=\"Item Name, Description, etc.\"\n          formControlName=\"search\"\n        />\n      </mat-form-field>\n    </form>\n\n    <mat-form-field class=\"ml-2\" fxFlex=\"0 1 calc(11.11% - 0.5rem)\">\n      <mat-label>Columns</mat-label>\n      <mat-select [(ngModel)]=\"displayedColumns\" multiple name=\"column\">\n        <mat-option\n          *ngFor=\"let column of columnDefinitions\"\n          [value]=\"column.def\"\n          [disabled]=\"!column.isShow\"\n        >\n          {{ column?.def }}</mat-option\n        >\n      </mat-select>\n    </mat-form-field>\n  </div>\n\n  <table\n    mat-table\n    #table\n    [dataSource]=\"dataSource\"\n    class=\"mat-elevation-z8 w-100 mt-4 table-hover\"\n    infiniteScroll\n    [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\"\n    [fromRoot]=\"true\"\n    infiniteScrollContainer=\"mat-sidenav-content\"\n    matSort\n    (matSortChange)=\"sortColumn($event)\"\n    matSortDisableClear=\"true\"\n  >\n    <!-- # Column -->\n    <ng-container matColumnDef=\"#\">\n      <th mat-header-cell *matHeaderCellDef>#</th>\n      <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n    </ng-container>\n\n    <!-- Title Column -->\n    <ng-container matColumnDef=\"Title\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>Title</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element.title }}</td>\n    </ng-container>\n\n    <!-- Description Column -->\n    <ng-container matColumnDef=\"Description\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>Description</th>\n      <td mat-cell *matCellDef=\"let element\">{{ element.description }}</td>\n    </ng-container>\n\n    <!-- Actions Column -->\n    <ng-container matColumnDef=\"Actions\">\n      <th mat-header-cell *matHeaderCellDef>Actions</th>\n      <td mat-cell *matCellDef=\"let element\">\n        <div class=\"text-secondary\" fxLayoutGap=\"1rem\">\n          <button mat-icon-button (click)=\"modifyProductMeasure(element)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n  </table>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: i1.MatDialog }, { type: i1$1.FilterService }, { type: i2$1.ActivatedRoute }, { type: ProductService }] });
+
+class ProductFormService extends TechlifyFormService {
+    constructor() {
+        super();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [] });
+
+const initial_quantity = 0;
+const reorder_point = 10;
+const 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",
+    },
+};
+class ProductFormComponent {
+    productService;
+    fb;
+    formValidatorService;
+    alertService;
+    datePipe;
+    productFormService;
+    productForm;
+    isWorking = false;
+    isUpdate = false;
+    saved = new EventEmitter();
+    cancelled = new EventEmitter();
+    product;
+    displayedFormFields = [
+        "name",
+        "product type",
+        "sku",
+        "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",
+    ];
+    constructor(productService, fb, formValidatorService, alertService, datePipe, productFormService) {
+        this.productService = productService;
+        this.fb = fb;
+        this.formValidatorService = formValidatorService;
+        this.alertService = alertService;
+        this.datePipe = datePipe;
+        this.productFormService = productFormService;
+        this.productForm = this.fb.group({
+            id: [""],
+            type_id: [1, Validators.compose([Validators.required])],
+            sku: [""],
+            name: ["", Validators.compose([Validators.required])],
+            initial_quantity: [initial_quantity],
+            initial_quantity_date: [moment().format()],
+            reorder_point: [reorder_point, 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: [""],
+        });
+    }
+    ngOnInit() {
+        if (this.product?.id) {
+            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.productForm.patchValue(data);
+        }
+    }
+    async save() {
+        this.productForm.markAllAsTouched();
+        if (this.productForm.invalid) {
+            this.alertService.addAlert("Please Fill All Required Fields", "warn");
+            return;
+        }
+        let product = this.productForm.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.with = "type,measure,incomeAccount,expenseAccount";
+        let request = this.productService.store(product);
+        if (this.isUpdate) {
+            request = this.productService.update(product);
+        }
+        request.subscribe({
+            next: (response) => {
+                this.saved.emit(response?.item);
+                this.isWorking = false;
+                this.productFormService.listUpdated(true);
+                this.alertService.addAlert("Product saved successfully!", "success");
+            },
+            error: () => (this.isWorking = false),
+        });
+    }
+    /**
+     * Method to evaluate form fields
+     */
+    isFieldValid(field) {
+        return this.formValidatorService.isFieldValid(field, this.productForm);
+    }
+    /**
+     * Method to find error in form fields
+     */
+    getErrorMessage(field) {
+        return this.formValidatorService.getErrorMessage(field, this.productForm, errorMessages);
+    }
+    /**
+     * Checks displayed Form Fields array for form field and returns boolean result
+     */
+    isFormFieldShown(fieldName) {
+        return (this.displayedFormFields.length > 0 &&
+            this.displayedFormFields.includes(fieldName));
+    }
+    /**
+     * Checks displayed Form Section array for form section and returns boolean result
+     */
+    isFormSectionShown(sectionName) {
+        return (this.displayedFormSections.length > 0 &&
+            this.displayedFormSections.includes(sectionName));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormComponent, deps: [{ token: ProductService }, { token: i2.FormBuilder }, { token: i1$1.FormValidatorService }, { token: i1$1.AlertService }, { token: i4.DatePipe }, { token: ProductFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductFormComponent, selector: "app-product-form", inputs: { product: "product", displayedFormFields: "displayedFormFields", displayedFormSections: "displayedFormSections" }, outputs: { saved: "saved", cancelled: "cancelled" }, ngImport: i0, template: "<form [formGroup]=\"productForm\" (submit)=\"save()\">\n  <h3 class=\"text-center\">{{ product?.id ? \"Update\" : \"Create\" }} Product</h3>\n  <div fxLayout=\"column\">\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('basic information')\">\n      <h3><strong>Basic Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('name')\">\n          <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n          <mat-error *ngIf=\"isFieldValid('name')\"\n            >{{ getErrorMessage(\"name\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product type')\">\n          <mat-label>Product Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_id\"\n          >\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('type_id')\"\n            >{{ getErrorMessage(\"type_id\") }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sku')\">\n          <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n          <mat-error *ngIf=\"isFieldValid('sku')\"\n            >{{ getErrorMessage(\"sku\") }}\n          </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-categories\"\n            formControlName=\"category_ids\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('category_ids')\">\n            {{ getErrorMessage(\"category_ids\") }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"100%\" *ngIf=\"isFormFieldShown('description')\">\n          <textarea\n            matInput\n            placeholder=\"Description\"\n            formControlName=\"description\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('inventory information')\">\n      <h3><strong>Inventory Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('product measure')\"\n        >\n          <mat-label>Measure</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-measures\"\n            formControlName=\"measure_id\"\n          >\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('measure_id')\"\n            >{{ getErrorMessage(\"measure_id\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('reorder point')\">\n          <input\n            matInput\n            placeholder=\"Reorder Point\"\n            formControlName=\"reorder_point\"\n            type=\"number\"\n          />\n          <mat-error *ngIf=\"isFieldValid('reorder_point')\"\n            >{{ getErrorMessage(\"reorder_point\") }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('initial quantity')\"\n        >\n          <input\n            matInput\n            placeholder=\"Initial Quantity\"\n            formControlName=\"initial_quantity\"\n          />\n          <mat-error *ngIf=\"isFieldValid('initial_quantity')\"\n            >{{ getErrorMessage(\"initial_quantity\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('initial quantity date')\"\n        >\n          <input\n            matInput\n            [matDatepicker]=\"pickerInitialQuantityDate\"\n            placeholder=\"Initial Quantity Date\"\n            formControlName=\"initial_quantity_date\"\n          />\n          <mat-datepicker-toggle\n            matSuffix\n            [for]=\"pickerInitialQuantityDate\"\n          ></mat-datepicker-toggle>\n          <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n          <mat-error *ngIf=\"isFieldValid('initial_quantity_date')\"\n            >{{ getErrorMessage(\"initial_quantity_date\") }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </div>\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('sales information')\">\n      <h3><strong>Sale Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sales price')\">\n          <input\n            matInput\n            placeholder=\"Selling Price\"\n            formControlName=\"sale_price\"\n            required\n            type=\"number\"\n            step=\"any\"\n          />\n          <mat-error *ngIf=\"isFieldValid('sale_price')\"\n            >{{ getErrorMessage(\"sale_price\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('condition types')\"\n        >\n          <mat-label>Condition</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/condition-types\"\n            formControlName=\"condition_type_id\"\n          ></app-searchable-selector>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('minimum price')\">\n          <input\n            matInput\n            placeholder=\"Minimum Price\"\n            formControlName=\"minimum_price\"\n            required\n            type=\"number\"\n            step=\"any\"\n          />\n          <mat-error *ngIf=\"isFieldValid('minimum_price')\"\n            >{{ getErrorMessage(\"minimum_price\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('maximum price')\">\n          <input\n            matInput\n            placeholder=\"Maximum Price\"\n            formControlName=\"maximum_price\"\n            type=\"number\"\n            step=\"any\"\n          />\n        </mat-form-field>\n      </div>\n    </div>\n    <!--    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('accounts information')\">-->\n    <!--      <h3><strong>Accounts Information</strong></h3>-->\n    <!--      <div fxLayout fxLayoutGap=\"0.5rem\">-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('income account')\">-->\n    <!--          <mat-label>Income Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"income_account_id\"> </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('expense account')\">-->\n    <!--          <mat-label>Expense Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"expense_account_id\">-->\n    <!--          </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--      </div>-->\n    <!--    </div>-->\n    <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button\n        [disabled]=\"isWorking\"\n        mat-button\n        class=\"mt-2\"\n        type=\"button\"\n        (click)=\"cancelled.emit(true)\"\n      >\n        Cancel\n      </button>\n      <button\n        [disabled]=\"isWorking\"\n        mat-raised-button\n        color=\"primary\"\n        class=\"mt-2\"\n        type=\"submit\"\n      >\n        Save\n      </button>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.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: "directive", type: i10.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i10.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-form", template: "<form [formGroup]=\"productForm\" (submit)=\"save()\">\n  <h3 class=\"text-center\">{{ product?.id ? \"Update\" : \"Create\" }} Product</h3>\n  <div fxLayout=\"column\">\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('basic information')\">\n      <h3><strong>Basic Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('name')\">\n          <input matInput placeholder=\"Name\" formControlName=\"name\" required />\n          <mat-error *ngIf=\"isFieldValid('name')\"\n            >{{ getErrorMessage(\"name\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('product type')\">\n          <mat-label>Product Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_id\"\n          >\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('type_id')\"\n            >{{ getErrorMessage(\"type_id\") }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sku')\">\n          <input matInput placeholder=\"SKU\" formControlName=\"sku\" />\n          <mat-error *ngIf=\"isFieldValid('sku')\"\n            >{{ getErrorMessage(\"sku\") }}\n          </mat-error>\n        </mat-form-field>\n\n        <mat-form-field fxFlex=\"50%\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-categories\"\n            formControlName=\"category_ids\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('category_ids')\">\n            {{ getErrorMessage(\"category_ids\") }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"100%\" *ngIf=\"isFormFieldShown('description')\">\n          <textarea\n            matInput\n            placeholder=\"Description\"\n            formControlName=\"description\"\n          ></textarea>\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('inventory information')\">\n      <h3><strong>Inventory Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('product measure')\"\n        >\n          <mat-label>Measure</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-measures\"\n            formControlName=\"measure_id\"\n          >\n          </app-searchable-selector>\n          <mat-error *ngIf=\"isFieldValid('measure_id')\"\n            >{{ getErrorMessage(\"measure_id\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('reorder point')\">\n          <input\n            matInput\n            placeholder=\"Reorder Point\"\n            formControlName=\"reorder_point\"\n            type=\"number\"\n          />\n          <mat-error *ngIf=\"isFieldValid('reorder_point')\"\n            >{{ getErrorMessage(\"reorder_point\") }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('initial quantity')\"\n        >\n          <input\n            matInput\n            placeholder=\"Initial Quantity\"\n            formControlName=\"initial_quantity\"\n          />\n          <mat-error *ngIf=\"isFieldValid('initial_quantity')\"\n            >{{ getErrorMessage(\"initial_quantity\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('initial quantity date')\"\n        >\n          <input\n            matInput\n            [matDatepicker]=\"pickerInitialQuantityDate\"\n            placeholder=\"Initial Quantity Date\"\n            formControlName=\"initial_quantity_date\"\n          />\n          <mat-datepicker-toggle\n            matSuffix\n            [for]=\"pickerInitialQuantityDate\"\n          ></mat-datepicker-toggle>\n          <mat-datepicker #pickerInitialQuantityDate></mat-datepicker>\n          <mat-error *ngIf=\"isFieldValid('initial_quantity_date')\"\n            >{{ getErrorMessage(\"initial_quantity_date\") }}\n          </mat-error>\n        </mat-form-field>\n      </div>\n    </div>\n    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('sales information')\">\n      <h3><strong>Sale Information</strong></h3>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('sales price')\">\n          <input\n            matInput\n            placeholder=\"Selling Price\"\n            formControlName=\"sale_price\"\n            required\n            type=\"number\"\n            step=\"any\"\n          />\n          <mat-error *ngIf=\"isFieldValid('sale_price')\"\n            >{{ getErrorMessage(\"sale_price\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field\n          fxFlex=\"50%\"\n          *ngIf=\"isFormFieldShown('condition types')\"\n        >\n          <mat-label>Condition</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/condition-types\"\n            formControlName=\"condition_type_id\"\n          ></app-searchable-selector>\n        </mat-form-field>\n      </div>\n      <div fxLayout fxLayoutGap=\"0.5rem\">\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('minimum price')\">\n          <input\n            matInput\n            placeholder=\"Minimum Price\"\n            formControlName=\"minimum_price\"\n            required\n            type=\"number\"\n            step=\"any\"\n          />\n          <mat-error *ngIf=\"isFieldValid('minimum_price')\"\n            >{{ getErrorMessage(\"minimum_price\") }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('maximum price')\">\n          <input\n            matInput\n            placeholder=\"Maximum Price\"\n            formControlName=\"maximum_price\"\n            type=\"number\"\n            step=\"any\"\n          />\n        </mat-form-field>\n      </div>\n    </div>\n    <!--    <div fxLayout=\"column\" *ngIf=\"isFormSectionShown('accounts information')\">-->\n    <!--      <h3><strong>Accounts Information</strong></h3>-->\n    <!--      <div fxLayout fxLayoutGap=\"0.5rem\">-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('income account')\">-->\n    <!--          <mat-label>Income Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"income_account_id\"> </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--        <mat-form-field fxFlex=\"50%\" *ngIf=\"isFormFieldShown('expense account')\">-->\n    <!--          <mat-label>Expense Account</mat-label>-->\n    <!--          <app-searchable-selector apiUrl=\"api/accounts\" formControlName=\"expense_account_id\">-->\n    <!--          </app-searchable-selector>-->\n    <!--        </mat-form-field>-->\n    <!--      </div>-->\n    <!--    </div>-->\n    <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button\n        [disabled]=\"isWorking\"\n        mat-button\n        class=\"mt-2\"\n        type=\"button\"\n        (click)=\"cancelled.emit(true)\"\n      >\n        Cancel\n      </button>\n      <button\n        [disabled]=\"isWorking\"\n        mat-raised-button\n        color=\"primary\"\n        class=\"mt-2\"\n        type=\"submit\"\n      >\n        Save\n      </button>\n    </div>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: ProductService }, { type: i2.FormBuilder }, { type: i1$1.FormValidatorService }, { type: i1$1.AlertService }, { type: i4.DatePipe }, { type: ProductFormService }], propDecorators: { saved: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }], product: [{
+                type: Input
+            }], displayedFormFields: [{
+                type: Input
+            }], displayedFormSections: [{
+                type: Input
+            }] } });
+
+class ProductFormButtonComponent {
+    matDialog;
+    productFormService;
+    product;
+    saved = new EventEmitter();
+    constructor(matDialog, productFormService) {
+        this.matDialog = matDialog;
+        this.productFormService = productFormService;
+    }
+    showForm(templateRef) {
+        this.matDialog.open(templateRef, { width: "600px" });
+    }
+    /**
+     * Handle on product saved event.
+     *
+     * @param product
+     */
+    onProductSaved(product) {
+        this.saved.emit(product);
+        this.matDialog?.closeAll();
+        this.productFormService.listUpdated(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormButtonComponent, deps: [{ token: i1.MatDialog }, { token: ProductFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: { product: "product" }, outputs: { saved: "saved" }, ngImport: i0, template: "<mat-icon\n  color=\"primary\"\n  class=\"cursor-pointer\"\n  [class.text-secondary]=\"product\"\n  (click)=\"showForm(addProductForm)\"\n>\n  {{ product ? \"edit\" : \"add\" }}\n</mat-icon>\n\n<ng-template #addProductForm>\n  <app-product-form\n    [product]=\"product\"\n    mat-dialog-content\n    (saved)=\"onProductSaved($event)\"\n    (cancelled)=\"matDialog.closeAll()\"\n  ></app-product-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ProductFormComponent, selector: "app-product-form", inputs: ["product", "displayedFormFields", "displayedFormSections"], outputs: ["saved", "cancelled"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-form-button", template: "<mat-icon\n  color=\"primary\"\n  class=\"cursor-pointer\"\n  [class.text-secondary]=\"product\"\n  (click)=\"showForm(addProductForm)\"\n>\n  {{ product ? \"edit\" : \"add\" }}\n</mat-icon>\n\n<ng-template #addProductForm>\n  <app-product-form\n    [product]=\"product\"\n    mat-dialog-content\n    (saved)=\"onProductSaved($event)\"\n    (cancelled)=\"matDialog.closeAll()\"\n  ></app-product-form>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: ProductFormService }], propDecorators: { product: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
+let ProductListComponent = class ProductListComponent {
+    fb;
+    dialog;
+    activatedRoute;
+    productService;
+    requestHelperService;
+    productFormService;
+    filterForm;
+    lastPage;
+    page = 1;
+    perPage = 25;
+    totalItems = 0;
+    currentPage = 1;
+    num_items = 25;
+    routeFilters;
+    products = [];
+    dataSource = new MatTableDataSource();
+    isLoading = false;
+    columnDefinitions = [
+        { def: "#", isShow: true },
+        { def: "name", isShow: true },
+        { def: "type", isShow: true },
+        { def: "sku", isShow: true },
+        { def: "initial_quantity", isShow: true },
+        { def: "initial_quantity_date", isShow: true },
+        { def: "reorder_point", isShow: true },
+        { def: "sale_price", isShow: true },
+        { def: "income_account", isShow: true },
+        { def: "expense_account", isShow: true },
+        { def: "Actions", isShow: true },
+    ];
+    displayedColumns = new FormControl([
+        "#",
+        "name",
+        "type",
+        "categories",
+        "sku",
+        "initial_quantity",
+        "initial_quantity_date",
+        "reorder_point",
+        "sale_price",
+        "income_account",
+        "expense_account",
+        "Actions",
+    ]);
+    importId;
+    constructor(fb, dialog, activatedRoute, productService, requestHelperService, productFormService) {
+        this.fb = fb;
+        this.dialog = dialog;
+        this.activatedRoute = activatedRoute;
+        this.productService = productService;
+        this.requestHelperService = requestHelperService;
+        this.productFormService = productFormService;
+        this.filterForm = this.fb.group({
+            search: [""],
+            category_ids: [""],
+            type_ids: [""],
+            income_account_ids: [""],
+            expense_account_ids: [""],
+            sort_by: [""],
+        });
+    }
+    ngOnInit() {
+        if (this.activatedRoute.snapshot.params?.["import_id"]) {
+            this.importId = parseInt(this.activatedRoute.snapshot.params?.["import_id"]);
+        }
+        // update form with URL query params
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            type_ids: { multiple: true },
+            category_ids: { multiple: true },
+            income_account_ids: { multiple: true },
+            expense_account_ids: { multiple: true },
+        });
+        // Update URL query params on filter change
+        this.filterForm.valueChanges.pipe(debounceTime(800)).subscribe(() => {
+            this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData({
+                ...this.filterForm.value,
+            }));
+        });
+        // fetch task on params change
+        this.activatedRoute.queryParams
+            .pipe(debounceTime(800))
+            .subscribe(() => this.reload());
+        // listen form product add or update event and reload.
+        this.productFormService.isListUpdated().subscribe((val) => {
+            if (val && !this.isLoading) {
+                this.reload();
+            }
+        });
+    }
+    loadData() {
+        let params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+        };
+        params.page = this.page;
+        params.perPage = this.perPage;
+        params.num_items = this.num_items + "|" + this.currentPage;
+        params.with = "categories,lastStockReceipt,lastStockIssuance";
+        if (this.importId) {
+            params.import_id = this.importId;
+        }
+        this.isLoading = true;
+        this.productService.index(params).subscribe({
+            next: (res) => {
+                this.isLoading = false;
+                this.dataSource = new MatTableDataSource(this.dataSource.data.concat(res?.data));
+                this.totalItems = res.total;
+                // stop reloading data once data loaded.
+                this.productFormService.listUpdated(false);
+            },
+            error: () => (this.isLoading = false),
+        });
+    }
+    reload() {
+        if (this.isLoading)
+            return;
+        this.dataSource = new MatTableDataSource();
+        this.currentPage = 1;
+        this.loadData();
+    }
+    modifyProduct(model) {
+        const dialogRef = this.dialog.open(ProductFormComponent, {
+            width: "600px",
+            data: {
+                details: model,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.reload();
+            }
+        });
+    }
+    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);
+    }
+    onScroll() {
+        if (this.totalItems > this.dataSource.data.length) {
+            this.currentPage += 1;
+            this.loadData();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: i2.FormBuilder }, { token: i1.MatDialog }, { token: i2$1.ActivatedRoute }, { token: ProductService }, { token: i1$1.RequestHelperService }, { token: ProductFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, selector: "app-product-list", ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form\n      [formGroup]=\"filterForm\"\n      class=\"d-flex justify-content-between align-items-center gap-2\"\n    >\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        <mat-icon\n          routerLink=\"import\"\n          class=\"cursor-pointer\"\n          matTooltip=\"Import\"\n        >\n          download\n        </mat-icon>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field style=\"width: 120px\">\n          <input matInput placeholder=\"Product\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-categories\"\n            formControlName=\"category_ids\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Income Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"income_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Expense Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"expense_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n        <mat-form-field>\n          <mat-label>Columns</mat-label>\n          <mat-select [formControl]=\"displayedColumns\" multiple>\n            <mat-option\n              *ngFor=\"let column of columnDefinitions\"\n              [value]=\"column.def\"\n              [disabled]=\"!column.isShow\"\n            >\n              {{ column?.def }}</mat-option\n            >\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n      matSort\n      (matSortChange)=\"sortColumn($event)\"\n      matSortDisableClear=\"true\"\n      aria-describedby=\"Products List\"\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      <!-- 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\">{{ element.name }}</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\">{{ element.type?.title }}</td>\n      </ng-container>\n\n      <!-- Categories Column -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Category</th>\n        <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n          <div\n            *ngIf=\"element?.categories?.length > 0\"\n            class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n          >\n            <span\n              class=\"badge badge-primary\"\n              *ngFor=\"let category of element?.categories\"\n            >\n              {{ category?.title }}\n            </span>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n      </ng-container>\n\n      <!-- Initial Quantity Column -->\n      <ng-container matColumnDef=\"initial_quantity\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          Initial Quantity\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.initial_quantity }}\n        </td>\n      </ng-container>\n\n      <!-- Initial Quantity Date Column -->\n      <ng-container matColumnDef=\"initial_quantity_date\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          Initial Quantity Date\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.initial_quantity_date }}\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      <!-- 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-product-form-button\n              [product]=\"element\"\n            ></app-product-form-button>\n            <mat-icon\n              class=\"cursor-pointer\"\n              matTooltip=\"View\"\n              [routerLink]=\"[element.id, 'view']\"\n              routerLinkActive=\"route-link-active\"\n            >\n              remove_red_eye\n            </mat-icon>\n\n            <app-stock-receipt-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-issue-form-button>\n          </div>\n        </td>\n      </ng-container>\n      <tr\n        mat-header-row\n        *matHeaderRowDef=\"displayedColumns.value; sticky: true\"\n      ></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns.value\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "icon"], outputs: ["saved"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: 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$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }], preserveWhitespaces: true });
+};
+ProductListComponent = __decorate([
+    UntilDestroy()
+], ProductListComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-list", template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form\n      [formGroup]=\"filterForm\"\n      class=\"d-flex justify-content-between align-items-center gap-2\"\n    >\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        <mat-icon\n          routerLink=\"import\"\n          class=\"cursor-pointer\"\n          matTooltip=\"Import\"\n        >\n          download\n        </mat-icon>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field style=\"width: 120px\">\n          <input matInput placeholder=\"Product\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-categories\"\n            formControlName=\"category_ids\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Income Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"income_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Expense Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"expense_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n        <mat-form-field>\n          <mat-label>Columns</mat-label>\n          <mat-select [formControl]=\"displayedColumns\" multiple>\n            <mat-option\n              *ngFor=\"let column of columnDefinitions\"\n              [value]=\"column.def\"\n              [disabled]=\"!column.isShow\"\n            >\n              {{ column?.def }}</mat-option\n            >\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n      matSort\n      (matSortChange)=\"sortColumn($event)\"\n      matSortDisableClear=\"true\"\n      aria-describedby=\"Products List\"\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      <!-- 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\">{{ element.name }}</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\">{{ element.type?.title }}</td>\n      </ng-container>\n\n      <!-- Categories Column -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Category</th>\n        <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n          <div\n            *ngIf=\"element?.categories?.length > 0\"\n            class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n          >\n            <span\n              class=\"badge badge-primary\"\n              *ngFor=\"let category of element?.categories\"\n            >\n              {{ category?.title }}\n            </span>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n      </ng-container>\n\n      <!-- Initial Quantity Column -->\n      <ng-container matColumnDef=\"initial_quantity\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          Initial Quantity\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.initial_quantity }}\n        </td>\n      </ng-container>\n\n      <!-- Initial Quantity Date Column -->\n      <ng-container matColumnDef=\"initial_quantity_date\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          Initial Quantity Date\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.initial_quantity_date }}\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      <!-- 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-product-form-button\n              [product]=\"element\"\n            ></app-product-form-button>\n            <mat-icon\n              class=\"cursor-pointer\"\n              matTooltip=\"View\"\n              [routerLink]=\"[element.id, 'view']\"\n              routerLinkActive=\"route-link-active\"\n            >\n              remove_red_eye\n            </mat-icon>\n\n            <app-stock-receipt-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-issue-form-button>\n          </div>\n        </td>\n      </ng-container>\n      <tr\n        mat-header-row\n        *matHeaderRowDef=\"displayedColumns.value; sticky: true\"\n      ></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns.value\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: i1.MatDialog }, { type: i2$1.ActivatedRoute }, { type: ProductService }, { type: i1$1.RequestHelperService }, { type: ProductFormService }] });
+
+class ProductNavBarComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductNavBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductNavBarComponent, selector: "app-product-nav-bar", ngImport: i0, template: "<div>\n  <router-outlet></router-outlet>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductNavBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-nav-bar", template: "<div>\n  <router-outlet></router-outlet>\n</div>\n" }]
+        }] });
+
+class ProductTaxService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, "product-taxes");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxService, deps: [{ token: i1$1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpService }] });
+
+class ProductTaxFormButtonComponent extends TechlifyFormComponentInterface {
+    matDialog;
+    productTaxService;
+    formBuilder;
+    alertService;
+    product;
+    saved = new EventEmitter();
+    isSaving;
+    constructor(matDialog, productTaxService, formValidatorService, formBuilder, alertService) {
+        super(formValidatorService);
+        this.matDialog = matDialog;
+        this.productTaxService = productTaxService;
+        this.formBuilder = formBuilder;
+        this.alertService = alertService;
+        this.errorMessages = {
+            tax_id: {
+                required: "The tax field is required.",
+            },
+        };
+        this.form = this.formBuilder.group({
+            product_id: [""],
+            tax_id: ["", Validators.required],
+        });
+    }
+    ngOnInit() {
+        if (this.product) {
+            this.form.get("product_id")?.setValue(this.product?.id);
+        }
+    }
+    showForm(templateRef) {
+        this.matDialog.open(templateRef, { width: "400px" });
+    }
+    save() {
+        this.form.markAllAsTouched();
+        if (this.form.invalid) {
+            this.alertService.addAlert("Please check the form for errors.", "error");
+            return;
+        }
+        const data = { ...this.form.value };
+        const params = {
+            with: "tax.type",
+        };
+        this.isSaving = true;
+        this.productTaxService.store(data, params).subscribe({
+            next: (response) => {
+                this.isSaving = false;
+                this.matDialog.closeAll();
+                this.alertService.addAlert("Product tax saved successfully!", "success");
+                this.saved.emit(response?.item);
+            },
+            error: () => (this.isSaving = false),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxFormButtonComponent, deps: [{ token: i1.MatDialog }, { token: ProductTaxService }, { token: i1$1.FormValidatorService }, { token: i2.FormBuilder }, { token: i1$1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductTaxFormButtonComponent, selector: "app-product-tax-form-button", inputs: { product: "product" }, outputs: { saved: "saved" }, usesInheritance: true, ngImport: i0, template: "<mat-icon\n  color=\"primary\"\n  class=\"cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<ng-template #formTemplate>\n  <form\n    [formGroup]=\"form\"\n    (submit)=\"save()\"\n    mat-dialog-content\n    class=\"d-flex flex-column gap-2\"\n  >\n    <h3 class=\"text-dark\">Add tax for {{ product?.name }}</h3>\n    <mat-form-field>\n      <mat-label>Tax</mat-label>\n      <app-searchable-selector\n        formControlName=\"tax_id\"\n        required\n        apiUrl=\"api/taxes\"\n        [enableSearch]=\"false\"\n      ></app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('tax_id')\">\n        {{ getErrorMessage(\"tax_id\") }}\n      </mat-error>\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button\n        [disabled]=\"isSaving\"\n        type=\"submit\"\n        mat-raised-button\n        color=\"primary\"\n      >\n        Save\n      </button>\n      <button\n        [disabled]=\"isSaving\"\n        type=\"button\"\n        mat-flat-button\n        mat-dialog-close\n      >\n        Cancel\n      </button>\n    </div>\n  </form>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.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"] }, { 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", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-tax-form-button", template: "<mat-icon\n  color=\"primary\"\n  class=\"cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  add\n</mat-icon>\n\n<ng-template #formTemplate>\n  <form\n    [formGroup]=\"form\"\n    (submit)=\"save()\"\n    mat-dialog-content\n    class=\"d-flex flex-column gap-2\"\n  >\n    <h3 class=\"text-dark\">Add tax for {{ product?.name }}</h3>\n    <mat-form-field>\n      <mat-label>Tax</mat-label>\n      <app-searchable-selector\n        formControlName=\"tax_id\"\n        required\n        apiUrl=\"api/taxes\"\n        [enableSearch]=\"false\"\n      ></app-searchable-selector>\n      <mat-error *ngIf=\"isFieldValid('tax_id')\">\n        {{ getErrorMessage(\"tax_id\") }}\n      </mat-error>\n    </mat-form-field>\n\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button\n        [disabled]=\"isSaving\"\n        type=\"submit\"\n        mat-raised-button\n        color=\"primary\"\n      >\n        Save\n      </button>\n      <button\n        [disabled]=\"isSaving\"\n        type=\"button\"\n        mat-flat-button\n        mat-dialog-close\n      >\n        Cancel\n      </button>\n    </div>\n  </form>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: ProductTaxService }, { type: i1$1.FormValidatorService }, { type: i2.FormBuilder }, { type: i1$1.AlertService }], propDecorators: { product: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
+class ProductTaxDeleteButtonComponent {
+    matDialog;
+    productTaxService;
+    alertService;
+    productTax;
+    deleted = new EventEmitter();
+    isDeleting;
+    constructor(matDialog, productTaxService, alertService) {
+        this.matDialog = matDialog;
+        this.productTaxService = productTaxService;
+        this.alertService = alertService;
+    }
+    /**
+     * Delete the product.
+     */
+    delete() {
+        this.isDeleting = true;
+        this.productTaxService.delete(this.productTax).subscribe({
+            next: () => {
+                this.matDialog?.closeAll();
+                this.deleted.emit();
+                this.isDeleting = false;
+                this.alertService.addAlert("Product tax deleted successfully!", "success");
+            },
+            error: () => (this.isDeleting = false),
+        });
+    }
+    /**
+     * Show delete product dialog.
+     *
+     * @param templateRef
+     */
+    showDeleteDialog(templateRef) {
+        this.matDialog.open(templateRef, { width: "500px" });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxDeleteButtonComponent, deps: [{ token: i1.MatDialog }, { token: ProductTaxService }, { token: i1$1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductTaxDeleteButtonComponent, selector: "app-product-tax-delete-button", inputs: { productTax: "productTax" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"showDeleteDialog(deleteConfirmDialog)\"\n>\n  delete\n</mat-icon>\n\n<ng-template #deleteConfirmDialog>\n  <h3 mat-dialog-title>Delete Product Tax</h3>\n  <div mat-dialog-content>\n    Are you sure? You want to delete the product tax?\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-raised-button\n      color=\"warn\"\n      (click)=\"delete()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxDeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-tax-delete-button", template: "<mat-icon\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"showDeleteDialog(deleteConfirmDialog)\"\n>\n  delete\n</mat-icon>\n\n<ng-template #deleteConfirmDialog>\n  <h3 mat-dialog-title>Delete Product Tax</h3>\n  <div mat-dialog-content>\n    Are you sure? You want to delete the product tax?\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-raised-button\n      color=\"warn\"\n      (click)=\"delete()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </button>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: ProductTaxService }, { type: i1$1.AlertService }], propDecorators: { productTax: [{
+                type: Input
+            }], deleted: [{
+                type: Output
+            }] } });
+
+class ProductTaxListComponent extends TechlifyListingControllerInterface {
+    product;
+    displayedColumns = ["#", "Tax", "Actions"];
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        this.models = this.product?.taxes ?? [];
+    }
+    onCreated(productTax) {
+        this.models.unshift(productTax);
+        this.models = [...this.models];
+    }
+    onDeleted(index) {
+        this.models.splice(index, 1);
+        this.models = [...this.models];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductTaxListComponent, selector: "app-product-tax-list", inputs: { product: "product" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content\n    class=\"pb-3 d-flex justify-content-between align-items-center gap-3\"\n  >\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> percent </span>\n      <strong class=\"mb-0 text-dark\">Product Taxes</strong>\n    </div>\n    <app-product-tax-form-button\n      [product]=\"product\"\n      (saved)=\"onCreated($event)\"\n    ></app-product-tax-form-button>\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      <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=\"Tax\">\n        <th mat-header-cell *matHeaderCellDef>Tax</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">\n            {{ element?.tax?.title }} ({{ element?.tax?.code }})\n          </p>\n          <small class=\"text-secondary\"\n            >{{ element?.tax?.value }} - {{ element?.tax?.type?.title }}</small\n          >\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <app-product-tax-delete-button\n            [productTax]=\"element\"\n            (deleted)=\"onDeleted(i)\"\n          ></app-product-tax-delete-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ProductTaxFormButtonComponent, selector: "app-product-tax-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "component", type: ProductTaxDeleteButtonComponent, selector: "app-product-tax-delete-button", inputs: ["productTax"], outputs: ["deleted"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-tax-list", template: "<mat-card>\n  <mat-card-content\n    class=\"pb-3 d-flex justify-content-between align-items-center gap-3\"\n  >\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> percent </span>\n      <strong class=\"mb-0 text-dark\">Product Taxes</strong>\n    </div>\n    <app-product-tax-form-button\n      [product]=\"product\"\n      (saved)=\"onCreated($event)\"\n    ></app-product-tax-form-button>\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      <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=\"Tax\">\n        <th mat-header-cell *matHeaderCellDef>Tax</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">\n            {{ element?.tax?.title }} ({{ element?.tax?.code }})\n          </p>\n          <small class=\"text-secondary\"\n            >{{ element?.tax?.value }} - {{ element?.tax?.type?.title }}</small\n          >\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <app-product-tax-delete-button\n            [productTax]=\"element\"\n            (deleted)=\"onDeleted(i)\"\n          ></app-product-tax-delete-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n  </mat-card-content>\n</mat-card>\n" }]
+        }], propDecorators: { product: [{
+                type: Input
+            }] } });
+
+class ProductDeleteButtonComponent {
+    matDialog;
+    productService;
+    alertService;
+    product;
+    deleted = new EventEmitter();
+    isDeleting;
+    constructor(matDialog, productService, alertService) {
+        this.matDialog = matDialog;
+        this.productService = productService;
+        this.alertService = alertService;
+    }
+    /**
+     * Delete the product.
+     */
+    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),
+        });
+    }
+    /**
+     * Show delete product dialog.
+     *
+     * @param templateRef
+     */
+    showDeleteDialog(templateRef) {
+        this.matDialog.open(templateRef, { width: "500px" });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDeleteButtonComponent, deps: [{ token: i1.MatDialog }, { token: ProductService }, { token: i1$1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDeleteButtonComponent, selector: "app-product-delete-button", inputs: { product: "product" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"showDeleteDialog(deleteProductDialog)\"\n>\n  delete\n</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\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-raised-button\n      color=\"warn\"\n      (click)=\"deleteProduct()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-delete-button", template: "<mat-icon\n  class=\"cursor-pointer text-secondary\"\n  (click)=\"showDeleteDialog(deleteProductDialog)\"\n>\n  delete\n</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\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-raised-button\n      color=\"warn\"\n      (click)=\"deleteProduct()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </button>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: ProductService }, { type: i1$1.AlertService }], propDecorators: { product: [{
+                type: Input
+            }], deleted: [{
+                type: Output
+            }] } });
+
+class ProductBasicInfoComponent {
+    stockSummaryService;
+    product;
+    saved = new EventEmitter();
+    deleted = new EventEmitter();
+    stockSummary;
+    constructor(stockSummaryService) {
+        this.stockSummaryService = stockSummaryService;
+    }
+    ngOnInit() {
+        if (this.product) {
+            this.loadProductStocksSummary();
+        }
+    }
+    onProductSaved(product) {
+        this.product = product;
+        this.saved.emit(this.product);
+    }
+    /**
+     * Load product stocks summary.
+     */
+    loadProductStocksSummary() {
+        const params = {
+            product_ids: this.product?.id,
+            include: "stock_receipts_quantity_sum,stock_issuances_quantity_sum,stock_quantity_remaining",
+        };
+        this.stockSummaryService.summary(params).subscribe({
+            next: (response) => {
+                this.stockSummary = response;
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductBasicInfoComponent, deps: [{ token: StockSummaryService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: { product: "product" }, outputs: { saved: "saved", deleted: "deleted" }, ngImport: i0, template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n  <mat-card-content\n    class=\"d-flex justify-content-between align-items-center mb-1 mb-2\"\n  >\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> campaign </span>\n      <strong class=\"mb-0 text-dark\">Product Information</strong>\n    </div>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-product-form-button\n        [product]=\"product\"\n        (saved)=\"onProductSaved($event)\"\n      ></app-product-form-button>\n      <app-product-delete-button\n        [product]=\"product\"\n        (deleted)=\"deleted.emit()\"\n      ></app-product-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"mt-3\">\n    <h3 class=\"mb-1 font-weight-bold\">{{ product?.name }}</h3>\n    <div class=\"d-flex flex-wrap gap-1\">\n      <span\n        class=\"badge badge-primary\"\n        *ngFor=\"let category of product?.categories\"\n      >\n        {{ category?.title }}\n      </span>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content\n    class=\"mt-3 d-flex justify-content-between align-items-start\"\n  >\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">SKU</small>\n      <p class=\"mb-0\">{{ product?.sku }}</p>\n    </div>\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">Measure</small>\n      <p class=\"mb-0\">{{ product?.measure?.title }}</p>\n    </div>\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">Reorder Point</small>\n      <p class=\"mb-0\">{{ product?.reorder_point }}</p>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content\n    class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\"\n  >\n    <small class=\"text-secondary\">Description</small>\n    <p class=\"mb-0\">{{ product?.description }}</p>\n  </mat-card-content>\n\n  <mat-card-content\n    class=\"mt-5 d-flex justify-content-between align-items-start\"\n  >\n    <div\n      *ngIf=\"stockSummary\"\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">Stock Receipts</small>\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <span class=\"material-symbols-outlined\"> arrow_downward </span>\n        <p class=\"mb-0\" style=\"font-size: 24px\">\n          {{ stockSummary?.stock_receipts_quantity_sum }}\n        </p>\n      </div>\n      <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary\">\n        Last Added On {{ product?.last_stock_receipt?.date | date }}\n      </small>\n    </div>\n    <div\n      *ngIf=\"stockSummary\"\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">Stock Issuances</small>\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <span class=\"material-symbols-outlined\"> ungroup </span>\n        <p class=\"mb-0\" style=\"font-size: 24px\">\n          {{ stockSummary?.stock_issuances_quantity_sum }}\n        </p>\n      </div>\n      <small *ngIf=\"product?.last_stock_issuance\" class=\"text-secondary\">\n        Last Added On {{ product?.last_stock_issuance?.date | date }}\n      </small>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content\n    *ngIf=\"stockSummary\"\n    class=\"mt-3 d-flex justify-content-center align-items-center\"\n  >\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">On Hand</small>\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <span class=\"material-symbols-outlined\"> inventory_2 </span>\n        <p class=\"mb-0\" style=\"font-size: 24px\">\n          {{ stockSummary?.stock_quantity_remaining }}\n        </p>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "component", type: ProductDeleteButtonComponent, selector: "app-product-delete-button", inputs: ["product"], outputs: ["deleted"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductBasicInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-basic-info", template: "<mat-card *ngIf=\"product\" class=\"w-100\">\n  <mat-card-content\n    class=\"d-flex justify-content-between align-items-center mb-1 mb-2\"\n  >\n    <div class=\"d-flex justify-content-start gap-2\">\n      <span class=\"material-symbols-outlined\"> campaign </span>\n      <strong class=\"mb-0 text-dark\">Product Information</strong>\n    </div>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-product-form-button\n        [product]=\"product\"\n        (saved)=\"onProductSaved($event)\"\n      ></app-product-form-button>\n      <app-product-delete-button\n        [product]=\"product\"\n        (deleted)=\"deleted.emit()\"\n      ></app-product-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider></mat-divider>\n  <mat-card-content class=\"mt-3\">\n    <h3 class=\"mb-1 font-weight-bold\">{{ product?.name }}</h3>\n    <div class=\"d-flex flex-wrap gap-1\">\n      <span\n        class=\"badge badge-primary\"\n        *ngFor=\"let category of product?.categories\"\n      >\n        {{ category?.title }}\n      </span>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content\n    class=\"mt-3 d-flex justify-content-between align-items-start\"\n  >\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">SKU</small>\n      <p class=\"mb-0\">{{ product?.sku }}</p>\n    </div>\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">Measure</small>\n      <p class=\"mb-0\">{{ product?.measure?.title }}</p>\n    </div>\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">Reorder Point</small>\n      <p class=\"mb-0\">{{ product?.reorder_point }}</p>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content\n    class=\"mt-3 d-flex flex-column justify-content-start align-items-start gap-1\"\n  >\n    <small class=\"text-secondary\">Description</small>\n    <p class=\"mb-0\">{{ product?.description }}</p>\n  </mat-card-content>\n\n  <mat-card-content\n    class=\"mt-5 d-flex justify-content-between align-items-start\"\n  >\n    <div\n      *ngIf=\"stockSummary\"\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">Stock Receipts</small>\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <span class=\"material-symbols-outlined\"> arrow_downward </span>\n        <p class=\"mb-0\" style=\"font-size: 24px\">\n          {{ stockSummary?.stock_receipts_quantity_sum }}\n        </p>\n      </div>\n      <small *ngIf=\"product?.last_stock_receipt\" class=\"text-secondary\">\n        Last Added On {{ product?.last_stock_receipt?.date | date }}\n      </small>\n    </div>\n    <div\n      *ngIf=\"stockSummary\"\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">Stock Issuances</small>\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <span class=\"material-symbols-outlined\"> ungroup </span>\n        <p class=\"mb-0\" style=\"font-size: 24px\">\n          {{ stockSummary?.stock_issuances_quantity_sum }}\n        </p>\n      </div>\n      <small *ngIf=\"product?.last_stock_issuance\" class=\"text-secondary\">\n        Last Added On {{ product?.last_stock_issuance?.date | date }}\n      </small>\n    </div>\n  </mat-card-content>\n\n  <mat-card-content\n    *ngIf=\"stockSummary\"\n    class=\"mt-3 d-flex justify-content-center align-items-center\"\n  >\n    <div\n      class=\"d-flex flex-column justify-content-start align-items-start gap-1\"\n    >\n      <small class=\"text-secondary\">On Hand</small>\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <span class=\"material-symbols-outlined\"> inventory_2 </span>\n        <p class=\"mb-0\" style=\"font-size: 24px\">\n          {{ stockSummary?.stock_quantity_remaining }}\n        </p>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: StockSummaryService }], propDecorators: { product: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }], deleted: [{
+                type: Output
+            }] } });
+
+class ProductViewPageComponent {
+    productService;
+    activatedRoute;
+    location;
+    product;
+    id;
+    isLoading;
+    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);
+        }
+    }
+    /**
+     * Get the product details.
+     *
+     * @param productId
+     */
+    getProduct(productId) {
+        this.isLoading = true;
+        const params = {
+            with: "type,measure,incomeAccount,expenseAccount,categories,lastStockReceipt,lastStockIssuance,taxes.tax.type",
+        };
+        this.productService.show(productId, params).subscribe({
+            next: (result) => {
+                this.isLoading = false;
+                this.product = result?.item;
+            },
+            error: () => (this.isLoading = false),
+        });
+    }
+    /**
+     * Handle the on product update event.
+     *
+     * @param product
+     */
+    onProductUpdated(product) {
+        this.getProduct(this.id);
+    }
+    /**
+     * Handle on product delete event.
+     */
+    onProductDeleted() {
+        this.location.back();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductViewPageComponent, deps: [{ token: ProductService }, { token: i2$1.ActivatedRoute }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductViewPageComponent, selector: "app-product-view-page", ngImport: i0, template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div\n  *ngIf=\"product\"\n  class=\"d-flex justify-content-start align-items-start gap-3\"\n>\n  <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n    <app-product-basic-info\n      [product]=\"product\"\n      #productBasicInfoComponent\n      (deleted)=\"onProductDeleted()\"\n      (saved)=\"onProductUpdated($event)\"\n    ></app-product-basic-info>\n\n    <app-product-tax-list [product]=\"product\"></app-product-tax-list>\n  </div>\n  <div style=\"width: calc(75%)\" class=\"d-flex flex-column gap-3\">\n    <app-stock-receipts-list-page\n      [product]=\"product\"\n      (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"\n    ></app-stock-receipts-list-page>\n\n    <app-stock-issuances-list\n      [product]=\"product\"\n      (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"\n    ></app-stock-issuances-list>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StockReceiptsListPageComponent, selector: "app-stock-receipts-list-page", inputs: ["product"], outputs: ["listUpdated"] }, { kind: "component", type: StockIssuancesListComponent, selector: "app-stock-issuances-list", inputs: ["product", "issuableType", "issuableId", "label"], outputs: ["listUpdated"] }, { kind: "component", type: ProductTaxListComponent, selector: "app-product-tax-list", inputs: ["product"] }, { kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ProductBasicInfoComponent, selector: "app-product-basic-info", inputs: ["product"], outputs: ["saved", "deleted"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductViewPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-view-page", template: "<mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n\n<div\n  *ngIf=\"product\"\n  class=\"d-flex justify-content-start align-items-start gap-3\"\n>\n  <div style=\"width: calc(25% - 1rem)\" class=\"d-flex flex-column gap-3\">\n    <app-product-basic-info\n      [product]=\"product\"\n      #productBasicInfoComponent\n      (deleted)=\"onProductDeleted()\"\n      (saved)=\"onProductUpdated($event)\"\n    ></app-product-basic-info>\n\n    <app-product-tax-list [product]=\"product\"></app-product-tax-list>\n  </div>\n  <div style=\"width: calc(75%)\" class=\"d-flex flex-column gap-3\">\n    <app-stock-receipts-list-page\n      [product]=\"product\"\n      (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"\n    ></app-stock-receipts-list-page>\n\n    <app-stock-issuances-list\n      [product]=\"product\"\n      (listUpdated)=\"\n        getProduct(this.id);\n        productBasicInfoComponent.loadProductStocksSummary()\n      \"\n    ></app-stock-issuances-list>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: ProductService }, { type: i2$1.ActivatedRoute }, { type: i4.Location }] });
+
+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: "18.2.13", ngImport: i0, type: ProductImportPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductImportPageComponent, selector: "app-product-import-page", ngImport: i0, template: "<app-import-csv [config]=\"importConfig\"></app-import-csv>\n", styles: [""], dependencies: [{ kind: "component", type: i1$1.ImportCsvComponent, selector: "app-import-csv", inputs: ["config"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductImportPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-product-import-page", template: "<app-import-csv [config]=\"importConfig\"></app-import-csv>\n" }]
+        }], ctorParameters: () => [] });
+
+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: "**",
+                redirectTo: "",
+                pathMatch: "full",
+                canLoad: [AuthenticationGuard],
+            },
+        ],
+    },
+];
+class ProductRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ProductRoutingModule, imports: [i2$1.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+class ProductTaxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxModule, declarations: [ProductTaxListComponent,
+            ProductTaxFormButtonComponent,
+            ProductTaxDeleteButtonComponent], imports: [CommonModule,
+            MaterialModule,
+            ReactiveFormsModule,
+            SearchableSelectorModule], exports: [ProductTaxListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxModule, imports: [CommonModule,
+            MaterialModule,
+            ReactiveFormsModule,
+            SearchableSelectorModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductTaxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ProductTaxListComponent,
+                        ProductTaxFormButtonComponent,
+                        ProductTaxDeleteButtonComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        MaterialModule,
+                        ReactiveFormsModule,
+                        SearchableSelectorModule,
+                    ],
+                    exports: [ProductTaxListComponent],
+                }]
+        }] });
+
+class ProductModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ProductModule, declarations: [ProductListComponent,
+            ProductFormComponent,
+            ProductNavBarComponent,
+            ProductMeasuresListComponent,
+            ProductMeasureFormComponent,
+            ProductViewPageComponent,
+            ProductFormButtonComponent,
+            ProductDeleteButtonComponent,
+            ProductBasicInfoComponent,
+            ProductImportPageComponent], imports: [CommonModule,
+            ProductRoutingModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            StockReceiptFormModule,
+            StockIssueFormModule,
+            ImportCsvModule,
+            StockReceiptsModule,
+            StockIssuancesListModule,
+            ProductTaxModule,
+            MaterialModule,
+            MatProgressBarModule,
+            InfiniteScrollModule,
+            FlexModule,
+            ReactiveFormsModule,
+            FormsModule], exports: [ProductFormComponent,
+            ProductBasicInfoComponent,
+            ProductFormButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductModule, imports: [CommonModule,
+            ProductRoutingModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            StockReceiptFormModule,
+            StockIssueFormModule,
+            ImportCsvModule,
+            StockReceiptsModule,
+            StockIssuancesListModule,
+            ProductTaxModule,
+            MaterialModule,
+            MatProgressBarModule,
+            InfiniteScrollModule,
+            FlexModule,
+            ReactiveFormsModule,
+            FormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ProductListComponent,
+                        ProductFormComponent,
+                        ProductNavBarComponent,
+                        ProductMeasuresListComponent,
+                        ProductMeasureFormComponent,
+                        ProductViewPageComponent,
+                        ProductFormButtonComponent,
+                        ProductDeleteButtonComponent,
+                        ProductBasicInfoComponent,
+                        ProductImportPageComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        ProductRoutingModule,
+                        SearchableSelectorModule,
+                        TimelineFilterModule,
+                        StockReceiptFormModule,
+                        StockIssueFormModule,
+                        ImportCsvModule,
+                        StockReceiptsModule,
+                        StockIssuancesListModule,
+                        ProductTaxModule,
+                        MaterialModule,
+                        MatProgressBarModule,
+                        InfiniteScrollModule,
+                        FlexModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                    ],
+                    exports: [
+                        ProductFormComponent,
+                        ProductBasicInfoComponent,
+                        ProductFormButtonComponent,
+                    ],
+                }]
+        }] });
+
+export { ProductModule };
+//# sourceMappingURL=techlify-inventory-common-product.module-qdeafFV5.mjs.map