techlify-inventory-common 18.0.1

package/fesm2022/techlify-inventory-common-techlify-inventory-common-Czyc0jLI.mjs

@@ -0,0 +1,495 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, NgModule, EventEmitter, Output } from '@angular/core';
+import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import moment from 'moment';
+import * as i1 from 'ngx-techlify-core';
+import { TechlifyServiceBaseClass, TechlifyListingControllerInterface, MaterialModule, SearchableSelectorModule, TimelineFilterModule } from 'ngx-techlify-core';
+import * as i3$1 from '@angular/material/icon';
+import * as i3 from '@angular/material/card';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import * as i6 from '@angular/material/table';
+import * as i10 from 'ngx-infinite-scroll';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import * as i2$1 from 'angular-google-charts';
+import { ChartType, GoogleChartsModule } from 'angular-google-charts';
+import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i4 from '@angular/common';
+import { NgIf, CommonModule } from '@angular/common';
+import { debounceTime, distinctUntilChanged } from 'rxjs';
+import * as i2$2 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i10$1 from '@angular/flex-layout';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import * as i7 from '@angular/material/button';
+import * as i6$1 from '@angular/material/form-field';
+import * as i7$1 from '@angular/material/input';
+import * as i10$2 from '@angular/material/core';
+import * as i11 from '@angular/material/select';
+import * as i12 from '@angular/material/button-toggle';
+
+class ProductService extends TechlifyServiceBaseClass {
+    dataManager;
+    httpService;
+    constructor(dataManager, httpService) {
+        super(httpService, "products");
+        this.dataManager = dataManager;
+        this.httpService = httpService;
+    }
+    getProducts(filters) {
+        return this.dataManager.GET(`api/products`, filters);
+    }
+    getProduct(id) {
+        return this.dataManager.GET(`api/products/${id}`);
+    }
+    createProduct(model) {
+        return this.dataManager.POST(`api/products`, model);
+    }
+    updateProducts(model) {
+        return this.dataManager.PUT(`api/products/${model.id}`, model);
+    }
+    deleteProduct(id) {
+        return this.dataManager.DELETE(`api/products/${id}`);
+    }
+    getProductMeasures(filters) {
+        return this.dataManager.GET(`api/product-measures`, filters);
+    }
+    createProductMeasure(model) {
+        return this.dataManager.POST(`api/product-measures`, model);
+    }
+    updateProductMeasure(model) {
+        return this.dataManager.PUT(`api/product-measures/${model.id}`, model);
+    }
+    summary(params) {
+        return this.httpService.get("api/products-summary", { params });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductService, deps: [{ token: i1.DataManager }, { token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: i1.DataManager }, { type: i1.HttpService }] });
+
+class LowStockProductsWidgetComponent extends TechlifyListingControllerInterface {
+    productService;
+    displayedColumns = ["#", "Product", "Stock", "Reorder Point"];
+    constructor(productService) {
+        super();
+        this.productService = productService;
+        this.lastPage = 0;
+        this.perPage = 1000;
+    }
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        const params = {
+            page: this.page,
+            perPage: this.perPage,
+            is_low_stock: true,
+            num_items: this.perPage + "|" + this.page,
+        };
+        this.isWorking = true;
+        this.productService.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models?.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            },
+            error: () => (this.isWorking = false),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetComponent, deps: [{ token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LowStockProductsWidgetComponent, selector: "app-low-stock-products-widget", usesInheritance: true, ngImport: i0, template: "<mat-card style=\"max-height: 460px; overflow: auto\">\n  <mat-card-content>\n    <h3>Low Stock Products</h3>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"models\"\n      class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    >\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"Product\">\n        <th mat-header-cell *matHeaderCellDef>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a\n            [routerLink]=\"['/inventory/products', element?.id, 'view']\"\n            class=\"text-dark\"\n          >\n            {{ element?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Stock Column -->\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef>Stock</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.current_stock }}</td>\n      </ng-container>\n\n      <!-- Reorder Point Column -->\n      <ng-container matColumnDef=\"Reorder Point\">\n        <th mat-header-cell *matHeaderCellDef>Reorder Point</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.reorder_point }}</td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <!--    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>-->\n  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "component", type: i6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i10.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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-low-stock-products-widget", template: "<mat-card style=\"max-height: 460px; overflow: auto\">\n  <mat-card-content>\n    <h3>Low Stock Products</h3>\n  </mat-card-content>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"models\"\n      class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n    >\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Product Column -->\n      <ng-container matColumnDef=\"Product\">\n        <th mat-header-cell *matHeaderCellDef>Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a\n            [routerLink]=\"['/inventory/products', element?.id, 'view']\"\n            class=\"text-dark\"\n          >\n            {{ element?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <!-- Stock Column -->\n      <ng-container matColumnDef=\"Stock\">\n        <th mat-header-cell *matHeaderCellDef>Stock</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.current_stock }}</td>\n      </ng-container>\n\n      <!-- Reorder Point Column -->\n      <ng-container matColumnDef=\"Reorder Point\">\n        <th mat-header-cell *matHeaderCellDef>Reorder Point</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.reorder_point }}</td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <!--    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>-->\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: ProductService }] });
+
+class ProductSummaryChartComponent {
+    productService;
+    height = 400;
+    title = 'Product Summary';
+    constructor(productService) {
+        this.productService = productService;
+    }
+    chart = {
+        title: 'Pie Chart',
+        type: ChartType.PieChart,
+        data: [],
+        options: {
+            pieSliceText: 'value'
+        }
+    };
+    isLoading = false;
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        const params = {
+            include: 'products_aggregated',
+            group_by: 'category_id',
+        };
+        this.isLoading = true;
+        this.productService.summary(params).subscribe({
+            next: (response) => {
+                let data = [];
+                response?.products_aggregated?.forEach((item) => {
+                    data.push([item?.title, item?.product_count]);
+                });
+                this.chart.data = data;
+                this.isLoading = false;
+            },
+            error: () => (this.isLoading = false)
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartComponent, deps: [{ token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductSummaryChartComponent, isStandalone: true, selector: "app-product-summary-chart", inputs: { height: "height", title: "title" }, ngImport: i0, template: "<mat-card>\n    <mat-card-content>\n        <h3>{{ title }}</h3>\n    </mat-card-content>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n    <mat-card-content *ngIf=\"chart.data?.length > 0\">\n        <google-chart class=\"w-100\" [height]=\"height\" [type]=\"chart.type\" [data]=\"chart.data\" [columns]=\"chart.columns\"\n            [options]=\"chart.options\">\n        </google-chart>\n    </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: GoogleChartsModule }, { kind: "component", type: i2$1.GoogleChartComponent, selector: "google-chart", inputs: ["type", "data", "columns", "title", "width", "height", "options", "formatters", "dynamicResize"], outputs: ["ready", "error", "select", "mouseover", "mouseleave"], exportAs: ["googleChart"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-product-summary-chart', standalone: true, imports: [
+                        MatCard,
+                        MatCardContent,
+                        GoogleChartsModule,
+                        MatProgressBar,
+                        NgIf
+                    ], template: "<mat-card>\n    <mat-card-content>\n        <h3>{{ title }}</h3>\n    </mat-card-content>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n    <mat-card-content *ngIf=\"chart.data?.length > 0\">\n        <google-chart class=\"w-100\" [height]=\"height\" [type]=\"chart.type\" [data]=\"chart.data\" [columns]=\"chart.columns\"\n            [options]=\"chart.options\">\n        </google-chart>\n    </mat-card-content>\n</mat-card>" }]
+        }], ctorParameters: () => [{ type: ProductService }], propDecorators: { height: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class InventoryDashboardPageComponent {
+    productService;
+    lowStockProductsCount;
+    stockReceiptsQtySum;
+    stockIssuanceQtySum;
+    constructor(productService) {
+        this.productService = productService;
+    }
+    ngOnInit() {
+        this.loadProductSummary();
+    }
+    loadProductSummary() {
+        const params = {
+            include: 'low_stock_products_count,stock_receipts_quantity_sum,stock_issuances_quantity_sum',
+            date_from: moment().startOf('month').format('YYYY-MM-DD'),
+            date_to: moment().endOf('month').format('YYYY-MM-DD'),
+        };
+        this.productService.summary(params).subscribe({
+            next: (response) => {
+                this.lowStockProductsCount = response?.low_stock_products_count;
+                this.stockReceiptsQtySum = response?.stock_receipts_quantity_sum;
+                this.stockIssuanceQtySum = response?.stock_issuances_quantity_sum;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryDashboardPageComponent, deps: [{ token: ProductService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InventoryDashboardPageComponent, selector: "app-inventory-dashboard-page", ngImport: i0, template: "<div class=\"d-flex justify-content-start align-items-start gap-3 vh-100\">\n  <div class=\"row\" style=\"width: calc(100% - 300px)\">\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\" style=\"color: #F5222D !important;\">\n            inventory_2\n          </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Low Stock Products</small>\n            <h1 class=\"mb-0 fw-bold\">{{ lowStockProductsCount | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\">\n            arrow_circle_down\n          </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Products Received This Month</small>\n            <h1 class=\"mb-0 fw-bold\">{{ stockReceiptsQtySum | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\">\n            arrow_circle_up\n          </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Products Issued This Month</small>\n            <h1 class=\"mb-0 fw-bold\">{{ stockIssuanceQtySum | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-product-summary-chart title=\"Product By Category\"></app-product-summary-chart>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-low-stock-products-widget></app-low-stock-products-widget>\n    </div>\n  </div>\n  <div style=\"width: 300px\" class=\"d-flex flex-column gap-3 h-100\">\n    <mat-card class=\"h-100\">\n      <mat-card-content>\n        <div class=\"d-flex justify-content-start align-items-center gap-2\">\n          <mat-icon>flag</mat-icon>\n          <h3 class=\"mb-0 fw-bold\">Reports</h3>\n        </div>\n      </mat-card-content>\n      <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start gap-3\">\n        <a class=\"d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark cursor-pointer\">\n          <span class=\"material-symbols-outlined fs-3\">\n            description\n          </span>\n          <h3 class=\"mb-0\">On Hand Report</h3>\n          <span class=\"material-symbols-outlined\">\n            chevron_forward\n          </span>\n        </a>\n        <a class=\"d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark cursor-pointer\">\n          <span class=\"material-symbols-outlined fs-3\">\n            description\n          </span>\n          <h3 class=\"mb-0\">Inventory Value Report</h3>\n          <span class=\"material-symbols-outlined\">\n            chevron_forward\n          </span>\n        </a>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: LowStockProductsWidgetComponent, selector: "app-low-stock-products-widget" }, { kind: "component", type: ProductSummaryChartComponent, selector: "app-product-summary-chart", inputs: ["height", "title"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryDashboardPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-inventory-dashboard-page', template: "<div class=\"d-flex justify-content-start align-items-start gap-3 vh-100\">\n  <div class=\"row\" style=\"width: calc(100% - 300px)\">\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\" style=\"color: #F5222D !important;\">\n            inventory_2\n          </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Low Stock Products</small>\n            <h1 class=\"mb-0 fw-bold\">{{ lowStockProductsCount | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\">\n            arrow_circle_down\n          </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Products Received This Month</small>\n            <h1 class=\"mb-0 fw-bold\">{{ stockReceiptsQtySum | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-4 mb-3\">\n      <mat-card>\n        <mat-card-content class=\"d-flex justify-content-center align-items-center gap-3\">\n          <span class=\"material-symbols-outlined fs-1 fw-bold\">\n            arrow_circle_up\n          </span>\n          <div class=\"d-flex flex-column gap-0\">\n            <small class=\"text-secondary\">Products Issued This Month</small>\n            <h1 class=\"mb-0 fw-bold\">{{ stockIssuanceQtySum | number }}</h1>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-product-summary-chart title=\"Product By Category\"></app-product-summary-chart>\n    </div>\n    <div class=\"col-lg-6 mb-3\">\n      <app-low-stock-products-widget></app-low-stock-products-widget>\n    </div>\n  </div>\n  <div style=\"width: 300px\" class=\"d-flex flex-column gap-3 h-100\">\n    <mat-card class=\"h-100\">\n      <mat-card-content>\n        <div class=\"d-flex justify-content-start align-items-center gap-2\">\n          <mat-icon>flag</mat-icon>\n          <h3 class=\"mb-0 fw-bold\">Reports</h3>\n        </div>\n      </mat-card-content>\n      <mat-card-content class=\"mt-3 d-flex flex-column justify-content-start gap-3\">\n        <a class=\"d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark cursor-pointer\">\n          <span class=\"material-symbols-outlined fs-3\">\n            description\n          </span>\n          <h3 class=\"mb-0\">On Hand Report</h3>\n          <span class=\"material-symbols-outlined\">\n            chevron_forward\n          </span>\n        </a>\n        <a class=\"d-flex justify-content-start align-items-center gap-2 text-decoration-none text-dark cursor-pointer\">\n          <span class=\"material-symbols-outlined fs-3\">\n            description\n          </span>\n          <h3 class=\"mb-0\">Inventory Value Report</h3>\n          <span class=\"material-symbols-outlined\">\n            chevron_forward\n          </span>\n        </a>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>" }]
+        }], ctorParameters: () => [{ type: ProductService }] });
+
+const routes = [
+    {
+        path: "suppliers",
+        loadChildren: () => import('./techlify-inventory-common-supplier.module-gzHesNtQ.mjs').then((m) => m.SupplierModule),
+    },
+    {
+        path: "measures",
+        loadChildren: () => import('./techlify-inventory-common-measure.module-CirswKXn.mjs').then((mod) => mod.MeasureModule),
+    },
+    {
+        path: "stock-issuances",
+        loadChildren: () => import('./techlify-inventory-common-stock-issuances.module-Dm9i2kcf.mjs').then((mod) => mod.StockIssuancesModule),
+    },
+    {
+        path: "stock-receipts",
+        loadChildren: () => import('./techlify-inventory-common-stock-receipts.module-CUPdWteR.mjs').then(function (n) { return n.s; }).then((mod) => mod.StockReceiptsModule),
+    },
+    {
+        path: "categories",
+        loadChildren: () => import('./techlify-inventory-common-category.module-Stn6e73V.mjs').then((mod) => mod.CategoryModule),
+    },
+    {
+        path: "products",
+        loadChildren: () => import('./techlify-inventory-common-product.module-qdeafFV5.mjs').then((mod) => mod.ProductModule),
+    },
+    {
+        path: "dashboard",
+        component: InventoryDashboardPageComponent,
+    },
+    {
+        path: "**",
+        redirectTo: "dashboard",
+        pathMatch: "full",
+    },
+];
+class InventoryCommonRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+class LowStockProductsWidgetModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetModule, declarations: [LowStockProductsWidgetComponent], imports: [CommonModule,
+            MaterialModule,
+            InfiniteScrollModule,
+            MatProgressBarModule,
+            RouterModule], exports: [LowStockProductsWidgetComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetModule, imports: [CommonModule,
+            MaterialModule,
+            InfiniteScrollModule,
+            MatProgressBarModule,
+            RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LowStockProductsWidgetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LowStockProductsWidgetComponent],
+                    imports: [
+                        CommonModule,
+                        MaterialModule,
+                        InfiniteScrollModule,
+                        MatProgressBarModule,
+                        RouterModule,
+                    ],
+                    exports: [LowStockProductsWidgetComponent],
+                }]
+        }] });
+
+class ProductSummaryChartModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartModule, imports: [CommonModule,
+            MaterialModule,
+            MatProgressBarModule,
+            GoogleChartsModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartModule, imports: [CommonModule,
+            MaterialModule,
+            MatProgressBarModule,
+            GoogleChartsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductSummaryChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MaterialModule,
+                        MatProgressBarModule,
+                        GoogleChartsModule,
+                    ],
+                }]
+        }] });
+
+class InventoryCommonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonModule, declarations: [InventoryDashboardPageComponent], imports: [CommonModule,
+            InventoryCommonRoutingModule,
+            MaterialModule,
+            LowStockProductsWidgetModule,
+            ProductSummaryChartModule,
+            ProductSummaryChartComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonModule, imports: [CommonModule,
+            InventoryCommonRoutingModule,
+            MaterialModule,
+            LowStockProductsWidgetModule,
+            ProductSummaryChartModule,
+            ProductSummaryChartComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InventoryCommonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [InventoryDashboardPageComponent],
+                    imports: [
+                        CommonModule,
+                        InventoryCommonRoutingModule,
+                        MaterialModule,
+                        LowStockProductsWidgetModule,
+                        ProductSummaryChartModule,
+                        ProductSummaryChartComponent
+                    ],
+                }]
+        }] });
+
+class StockSummaryService {
+    httpService;
+    constructor(httpService) {
+        this.httpService = httpService;
+    }
+    /**
+     * Get the stocks summary.
+     *
+     * @param params
+     */
+    summary(params) {
+        return this.httpService.get("api/stocks-summary", { params });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockSummaryService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockSummaryService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StockSummaryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class TechlifyFilterComponent {
+    requestHelperService;
+    activatedRoute;
+    filterForm;
+    filterConfig;
+    filterUpdated = new EventEmitter();
+    constructor(requestHelperService, activatedRoute) {
+        this.requestHelperService = requestHelperService;
+        this.activatedRoute = activatedRoute;
+    }
+    ngOnInit() {
+        // listen for filter changes
+        this.filterForm.valueChanges.subscribe({
+            next: (value) => {
+                const params = this.requestHelperService.convertToFormData(value);
+                this.requestHelperService.updateQueryParams(params);
+            },
+        });
+        // update form with query params
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            duration: { number: true },
+            expiry_duration: { number: true },
+            payment_method_ids: { multiple: true },
+            payment_account_ids: { multiple: true },
+            project_ids: { multiple: true },
+            invoice_status_ids: { multiple: true },
+            customer_ids: { multiple: true },
+            cost_category_ids: { multiple: true },
+            team_member_ids: { multiple: true },
+            task_status_ids: { multiple: true },
+            asset_account_ids: { multiple: true },
+            depreciation_method_ids: { multiple: true },
+            depreciation_expense_account_ids: { multiple: true },
+            fixed_asset_type_ids: { multiple: true },
+            fixed_asset_document_type_ids: { multiple: true },
+            service_center_ids: { multiple: true },
+            fixed_asset_maintenance_status_ids: { multiple: true },
+            milestone_ids: { multiple: true },
+            product_ids: { multiple: true },
+            supplier_ids: { multiple: true },
+            measure_ids: { multiple: true },
+            type_ids: { multiple: true },
+            fixed_asset_ids: { multiple: true },
+        });
+        // listen for route change
+        this.activatedRoute.queryParams
+            .pipe(debounceTime(800), distinctUntilChanged())
+            .subscribe((val) => {
+            this.filterUpdated.emit(this.filterForm.value);
+        });
+    }
+    resetField(field) {
+        this.filterForm.get(field)?.setValue("");
+    }
+    onDurationChange(timelineValue) {
+        let { date_to, date_from } = timelineValue;
+        this.filterForm.patchValue({
+            date_from: date_from ? moment(date_from).format("YYYY-MM-DD") : "",
+            date_to: date_to ? moment(date_to).format("YYYY-MM-DD") : "",
+        }, { emitEvent: false });
+    }
+    /**
+     * Update expiry date from and date to on value change.
+     *
+     * @param timelineValue
+     */
+    onExpiryDurationChange(timelineValue) {
+        let { date_to, date_from } = timelineValue;
+        this.filterForm.patchValue({
+            expiry_date_from: date_from ? moment(date_from).format("YYYY-MM-DD") : "",
+            expiry_date_to: date_to ? moment(date_to).format("YYYY-MM-DD") : "",
+        });
+    }
+    /**
+     * Get the attribute value for the field.
+     *
+     * @param attribute
+     * @param field
+     */
+    getFilterConfig(attribute, field) {
+        if (!this.filterConfig)
+            return "";
+        // Check if the field and attribute exist in the filter config, return the value or an empty string
+        return this.filterConfig[field] &&
+            this.filterConfig[field][attribute] !== undefined
+            ? this.filterConfig[field][attribute]
+            : "";
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterComponent, deps: [{ token: i1.RequestHelperService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyFilterComponent, selector: "app-techlify-filter", inputs: { filterForm: "filterForm", filterConfig: "filterConfig" }, outputs: { filterUpdated: "filterUpdated" }, ngImport: i0, template: "<form\n  [formGroup]=\"filterForm\"\n  fxLayout\n  fxLayoutAlign=\"start center\"\n  fxLayoutGap=\"10px\"\n>\n  <mat-form-field\n    *ngIf=\"filterForm.get('search')\"\n    [appearance]=\"getFilterConfig('appearance', 'search')\"\n  >\n    <mat-label>Search</mat-label>\n    <input\n      formControlName=\"search\"\n      matInput\n      [placeholder]=\"getFilterConfig('placeholder', 'search')\"\n    />\n    <button\n      *ngIf=\"filterForm.value?.search\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('search')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <app-timeline-filter\n    *ngIf=\"filterForm?.get('duration')\"\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'duration')\"\n    [appearance]=\"getFilterConfig('appearance', 'duration')\"\n    formControlName=\"duration\"\n    (selectionChange)=\"onDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.date_from\"\n    [dateTo]=\"filterForm.value?.date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('payment_method_ids')\">\n    <mat-label>Payment Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"payment_method_ids\"\n      apiUrl=\"api/payment-methods\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.payment_method_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('payment_method_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('payment_account_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['accountingcommon_account.read']\">\n      <mat-label>{{\n        getFilterConfig(\"label\", \"payment_account_ids\") || \"Payment Account\"\n      }}</mat-label>\n      <app-searchable-selector\n        formControlName=\"payment_account_ids\"\n        [apiUrl]=\"\n          getFilterConfig('apiUrl', 'payment_account_ids') || 'api/accounts'\n        \"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.payment_account_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('payment_account_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('invoice_status_ids')\">\n    <mat-label>Invoice Status</mat-label>\n    <app-searchable-selector\n      formControlName=\"invoice_status_ids\"\n      apiUrl=\"api/invoice-statuses\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.invoice_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('invoice_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('customer_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['customer_read']\">\n      <mat-label>Customer</mat-label>\n      <app-searchable-selector\n        formControlName=\"customer_ids\"\n        titleField=\"name\"\n        apiUrl=\"api/customers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.customer_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('customer_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"\n      filterForm.get('project_ids') &&\n      getFilterConfig('disabled', 'project_ids') === false\n    \"\n  >\n    <mat-form-field *ngxPermissionsOnly=\"['project.read']\">\n      <mat-label>Project</mat-label>\n      <app-searchable-selector\n        formControlName=\"project_ids\"\n        apiUrl=\"api/projects\"\n        titleField=\"project_name\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.project_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('project_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('product_ids')\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector\n      formControlName=\"product_ids\"\n      apiUrl=\"api/products\"\n      titleField=\"name\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.product_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('product_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('measure_ids')\">\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector\n      formControlName=\"measure_ids\"\n      apiUrl=\"api/product-measures\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.measure_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('measure_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngxPermissionsOnly=\"['supplier.read']\">\n    <mat-form-field\n      *ngIf=\"filterForm.get('supplier_ids')\"\n      [appearance]=\"getFilterConfig('appearance', 'supplier_ids')\"\n    >\n      <mat-label>Supplier</mat-label>\n      <app-searchable-selector\n        formControlName=\"supplier_ids\"\n        titleField=\"company_name\"\n        apiUrl=\"api/suppliers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.supplier_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('supplier_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <app-timeline-filter\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'expiry_duration')\"\n    *ngIf=\"filterForm?.get('expiry_duration')\"\n    formControlName=\"expiry_duration\"\n    (selectionChange)=\"onExpiryDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.expiry_date_from\"\n    [dateTo]=\"filterForm.value?.expiry_date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field\n    *ngIf=\"filterForm.get('cost_category_ids')\"\n    style=\"width: 150px\"\n  >\n    <mat-label>Cost Category</mat-label>\n    <app-searchable-selector\n      formControlName=\"cost_category_ids\"\n      apiUrl=\"api/cost-code-categories\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.cost_category_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('cost_category_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('milestone_ids')\" style=\"width: 150px\">\n    <mat-label>Milestone</mat-label>\n    <app-searchable-selector\n      formControlName=\"milestone_ids\"\n      apiUrl=\"api/milestones\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.milestone_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('milestone_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('team_member_ids')\">\n    <mat-label>Assignee</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/persons\"\n      formControlName=\"team_member_ids\"\n      titleField=\"name\"\n      [multiple]=\"true\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.team_member_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('team_member_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-types\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_document_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_document_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-document-types\"\n      [multiple]=\"true\"\n      [enableSearch]=\"\n        getFilterConfig('enableSearch', 'fixed_asset_document_type_ids')\n      \"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_document_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_document_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <div *ngIf=\"filterForm.get('fixed_asset_document_status')\">\n    <small\n      class=\"mr-2 text-secondary\"\n      *ngIf=\"getFilterConfig('showLabel', 'fixed_asset_document_status')\"\n    >\n      Status\n    </small>\n    <mat-button-toggle-group\n      formControlName=\"fixed_asset_document_status\"\n      [multiple]=\"false\"\n    >\n      <mat-button-toggle value=\"all\">All</mat-button-toggle>\n      <mat-button-toggle value=\"active\">Active</mat-button-toggle>\n      <mat-button-toggle value=\"expired\">Expired</mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <mat-form-field *ngIf=\"filterForm.get('asset_account_ids')\">\n    <mat-label>Asset Account</mat-label>\n    <app-searchable-selector\n      formControlName=\"asset_account_ids\"\n      apiUrl=\"api/accounts\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.asset_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('asset_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_expense_account_ids')\">\n    <mat-label>Depreciation Expense Account</mat-label>\n    <app-searchable-selector\n      [multiple]=\"true\"\n      apiUrl=\"api/accounts\"\n      formControlName=\"depreciation_expense_account_ids\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.depreciation_expense_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('depreciation_expense_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_method_ids')\">\n    <mat-label>Depreciation Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"depreciation_method_ids\"\n      apiUrl=\"api/accounting-plus/depreciation-methods\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      (click)=\"resetField('depreciation_method_ids')\"\n      *ngIf=\"filterForm.value?.depreciation_method_ids\"\n      mat-icon-button\n      matSuffix\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field\n    *ngIf=\"filterForm.get('task_status_ids')\"\n    style=\"width: 150px\"\n  >\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/task-statuses\"\n      formControlName=\"task_status_ids\"\n      titleField=\"title\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.task_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('task_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('service_center_ids')\">\n    <mat-label>Service Center</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/service-centers\"\n      formControlName=\"service_center_ids\"\n      titleField=\"name\"\n      [enableSearch]=\"false\"\n      [multiple]=\"true\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.service_center_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('service_center_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_maintenance_status_ids')\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/fixed-asset-maintenance-statuses\"\n      formControlName=\"fixed_asset_maintenance_status_ids\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_maintenance_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_maintenance_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('group_by')\">\n    <mat-label>Group By</mat-label>\n    <mat-select formControlName=\"group_by\">\n      <mat-option value=\"week\">Week</mat-option>\n      <mat-option value=\"month\">Month</mat-option>\n      <mat-option value=\"year\">Year</mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10$1.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$1.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$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i1.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: 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$2.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: i12.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i12.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-techlify-filter", template: "<form\n  [formGroup]=\"filterForm\"\n  fxLayout\n  fxLayoutAlign=\"start center\"\n  fxLayoutGap=\"10px\"\n>\n  <mat-form-field\n    *ngIf=\"filterForm.get('search')\"\n    [appearance]=\"getFilterConfig('appearance', 'search')\"\n  >\n    <mat-label>Search</mat-label>\n    <input\n      formControlName=\"search\"\n      matInput\n      [placeholder]=\"getFilterConfig('placeholder', 'search')\"\n    />\n    <button\n      *ngIf=\"filterForm.value?.search\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('search')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <app-timeline-filter\n    *ngIf=\"filterForm?.get('duration')\"\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'duration')\"\n    [appearance]=\"getFilterConfig('appearance', 'duration')\"\n    formControlName=\"duration\"\n    (selectionChange)=\"onDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.date_from\"\n    [dateTo]=\"filterForm.value?.date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field *ngIf=\"filterForm.get('payment_method_ids')\">\n    <mat-label>Payment Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"payment_method_ids\"\n      apiUrl=\"api/payment-methods\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.payment_method_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('payment_method_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('payment_account_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['accountingcommon_account.read']\">\n      <mat-label>{{\n        getFilterConfig(\"label\", \"payment_account_ids\") || \"Payment Account\"\n      }}</mat-label>\n      <app-searchable-selector\n        formControlName=\"payment_account_ids\"\n        [apiUrl]=\"\n          getFilterConfig('apiUrl', 'payment_account_ids') || 'api/accounts'\n        \"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.payment_account_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('payment_account_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('invoice_status_ids')\">\n    <mat-label>Invoice Status</mat-label>\n    <app-searchable-selector\n      formControlName=\"invoice_status_ids\"\n      apiUrl=\"api/invoice-statuses\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.invoice_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('invoice_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"filterForm.get('customer_ids')\">\n    <mat-form-field *ngxPermissionsOnly=\"['customer_read']\">\n      <mat-label>Customer</mat-label>\n      <app-searchable-selector\n        formControlName=\"customer_ids\"\n        titleField=\"name\"\n        apiUrl=\"api/customers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.customer_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('customer_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"\n      filterForm.get('project_ids') &&\n      getFilterConfig('disabled', 'project_ids') === false\n    \"\n  >\n    <mat-form-field *ngxPermissionsOnly=\"['project.read']\">\n      <mat-label>Project</mat-label>\n      <app-searchable-selector\n        formControlName=\"project_ids\"\n        apiUrl=\"api/projects\"\n        titleField=\"project_name\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.project_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('project_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <mat-form-field *ngIf=\"filterForm.get('product_ids')\">\n    <mat-label>Product</mat-label>\n    <app-searchable-selector\n      formControlName=\"product_ids\"\n      apiUrl=\"api/products\"\n      titleField=\"name\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.product_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('product_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('measure_ids')\">\n    <mat-label>Measure</mat-label>\n    <app-searchable-selector\n      formControlName=\"measure_ids\"\n      apiUrl=\"api/product-measures\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.measure_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('measure_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <ng-container *ngxPermissionsOnly=\"['supplier.read']\">\n    <mat-form-field\n      *ngIf=\"filterForm.get('supplier_ids')\"\n      [appearance]=\"getFilterConfig('appearance', 'supplier_ids')\"\n    >\n      <mat-label>Supplier</mat-label>\n      <app-searchable-selector\n        formControlName=\"supplier_ids\"\n        titleField=\"company_name\"\n        apiUrl=\"api/suppliers\"\n        [multiple]=\"true\"\n      ></app-searchable-selector>\n      <button\n        *ngIf=\"filterForm.value?.supplier_ids\"\n        mat-icon-button\n        matSuffix\n        (click)=\"resetField('supplier_ids')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </ng-container>\n\n  <app-timeline-filter\n    appearance=\"fill\"\n    [labelText]=\"getFilterConfig('label', 'expiry_duration')\"\n    *ngIf=\"filterForm?.get('expiry_duration')\"\n    formControlName=\"expiry_duration\"\n    (selectionChange)=\"onExpiryDurationChange($event)\"\n    [showClearButton]=\"true\"\n    [dateFrom]=\"filterForm.value?.expiry_date_from\"\n    [dateTo]=\"filterForm.value?.expiry_date_to\"\n  ></app-timeline-filter>\n\n  <mat-form-field\n    *ngIf=\"filterForm.get('cost_category_ids')\"\n    style=\"width: 150px\"\n  >\n    <mat-label>Cost Category</mat-label>\n    <app-searchable-selector\n      formControlName=\"cost_category_ids\"\n      apiUrl=\"api/cost-code-categories\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.cost_category_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('cost_category_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('milestone_ids')\" style=\"width: 150px\">\n    <mat-label>Milestone</mat-label>\n    <app-searchable-selector\n      formControlName=\"milestone_ids\"\n      apiUrl=\"api/milestones\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.milestone_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('milestone_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('team_member_ids')\">\n    <mat-label>Assignee</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/persons\"\n      formControlName=\"team_member_ids\"\n      titleField=\"name\"\n      [multiple]=\"true\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.team_member_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('team_member_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-types\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_document_type_ids')\">\n    <mat-label>Type</mat-label>\n    <app-searchable-selector\n      formControlName=\"fixed_asset_document_type_ids\"\n      apiUrl=\"api/accounting-plus/fixed-asset-document-types\"\n      [multiple]=\"true\"\n      [enableSearch]=\"\n        getFilterConfig('enableSearch', 'fixed_asset_document_type_ids')\n      \"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_document_type_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_document_type_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <div *ngIf=\"filterForm.get('fixed_asset_document_status')\">\n    <small\n      class=\"mr-2 text-secondary\"\n      *ngIf=\"getFilterConfig('showLabel', 'fixed_asset_document_status')\"\n    >\n      Status\n    </small>\n    <mat-button-toggle-group\n      formControlName=\"fixed_asset_document_status\"\n      [multiple]=\"false\"\n    >\n      <mat-button-toggle value=\"all\">All</mat-button-toggle>\n      <mat-button-toggle value=\"active\">Active</mat-button-toggle>\n      <mat-button-toggle value=\"expired\">Expired</mat-button-toggle>\n    </mat-button-toggle-group>\n  </div>\n\n  <mat-form-field *ngIf=\"filterForm.get('asset_account_ids')\">\n    <mat-label>Asset Account</mat-label>\n    <app-searchable-selector\n      formControlName=\"asset_account_ids\"\n      apiUrl=\"api/accounts\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.asset_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('asset_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_expense_account_ids')\">\n    <mat-label>Depreciation Expense Account</mat-label>\n    <app-searchable-selector\n      [multiple]=\"true\"\n      apiUrl=\"api/accounts\"\n      formControlName=\"depreciation_expense_account_ids\"\n    ></app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.depreciation_expense_account_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('depreciation_expense_account_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('depreciation_method_ids')\">\n    <mat-label>Depreciation Method</mat-label>\n    <app-searchable-selector\n      formControlName=\"depreciation_method_ids\"\n      apiUrl=\"api/accounting-plus/depreciation-methods\"\n      [multiple]=\"true\"\n    ></app-searchable-selector>\n    <button\n      (click)=\"resetField('depreciation_method_ids')\"\n      *ngIf=\"filterForm.value?.depreciation_method_ids\"\n      mat-icon-button\n      matSuffix\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field\n    *ngIf=\"filterForm.get('task_status_ids')\"\n    style=\"width: 150px\"\n  >\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/task-statuses\"\n      formControlName=\"task_status_ids\"\n      titleField=\"title\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.task_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('task_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('service_center_ids')\">\n    <mat-label>Service Center</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/service-centers\"\n      formControlName=\"service_center_ids\"\n      titleField=\"name\"\n      [enableSearch]=\"false\"\n      [multiple]=\"true\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.service_center_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('service_center_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('fixed_asset_maintenance_status_ids')\">\n    <mat-label>Status</mat-label>\n    <app-searchable-selector\n      apiUrl=\"api/accounting-plus/fixed-asset-maintenance-statuses\"\n      formControlName=\"fixed_asset_maintenance_status_ids\"\n      [multiple]=\"true\"\n      [enableSearch]=\"false\"\n    >\n    </app-searchable-selector>\n    <button\n      *ngIf=\"filterForm.value?.fixed_asset_maintenance_status_ids\"\n      mat-icon-button\n      matSuffix\n      (click)=\"resetField('fixed_asset_maintenance_status_ids')\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"filterForm.get('group_by')\">\n    <mat-label>Group By</mat-label>\n    <mat-select formControlName=\"group_by\">\n      <mat-option value=\"week\">Week</mat-option>\n      <mat-option value=\"month\">Month</mat-option>\n      <mat-option value=\"year\">Year</mat-option>\n    </mat-select>\n  </mat-form-field>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1.RequestHelperService }, { type: i2.ActivatedRoute }], propDecorators: { filterForm: [{
+                type: Input
+            }], filterConfig: [{
+                type: Input
+            }], filterUpdated: [{
+                type: Output
+            }] } });
+
+class TechlifyFilterModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterModule, declarations: [TechlifyFilterComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            FlexLayoutModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            MaterialModule], exports: [TechlifyFilterComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            FlexLayoutModule,
+            SearchableSelectorModule,
+            TimelineFilterModule,
+            MaterialModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TechlifyFilterComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FlexLayoutModule,
+                        SearchableSelectorModule,
+                        TimelineFilterModule,
+                        MaterialModule,
+                    ],
+                    exports: [TechlifyFilterComponent],
+                }]
+        }] });
+
+/*
+ * Public API Surface of inventory-common
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InventoryCommonRoutingModule as I, ProductService as P, StockSummaryService as S, TechlifyFilterComponent as T, TechlifyFilterModule as a, InventoryCommonModule as b };
+//# sourceMappingURL=techlify-inventory-common-techlify-inventory-common-Czyc0jLI.mjs.map