techlify-inventory-common 18.0.1 → 18.2.0

package/fesm2022/{techlify-inventory-common-supplier.module-gzHesNtQ.mjs → techlify-inventory-common-supplier.module-CFDwJ-TS.mjs}

@@ -1,52 +1,49 @@
 import * as i1$1 from 'ngx-techlify-core';
 import { ActionPopupComponent, TechlifyListingControllerInterface, SearchableSelectorModule, AuditLogForModelModule, NoteModule } from 'ngx-techlify-core';
 import * as i0 from '@angular/core';
-import { Input, Component, Injectable, NgModule } from '@angular/core';
-import * as i4 from '@angular/common';
+import { Input, Component, Injectable, NgModule, EventEmitter, Output } from '@angular/core';
+import * as i4$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { lastValueFrom, debounceTime } from 'rxjs';
-import { S as SupplierFormComponent, a as SupplierService } from './techlify-inventory-common-supplier-form.component-CHmMG7O8.mjs';
+import { lastValueFrom, debounceTime, distinctUntilChanged } from 'rxjs';
+import { S as SupplierFormComponent, a as SupplierService, T as TechlifyFormService } from './techlify-inventory-common-techlify-inventory-common-CYiCJfk9.mjs';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i3 from '@angular/material/card';
+import * as i4 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i7 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i6$1 from '@angular/material/tabs';
+import * as i6 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i1 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
-import * as i6 from '@angular/material/divider';
+import * as i3 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { T as TechlifyFormService } from './techlify-inventory-common-techlify-form-service-CiVfwYTS.mjs';
 import { __decorate } from 'tslib';
-import * as i6$3 from '@angular/material/table';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import * as i3$2 from 'ngx-spinner';
+import * as i4$2 from 'ngx-spinner';
 import * as i2$1 from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
-import * as i7$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i12 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i6$2 from '@angular/material/form-field';
+import * as i7$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i7$2 from '@angular/material/input';
+import * as i9 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i5 from '@angular/material/sort';
+import * as i13 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
+import * as i14 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
 import * as i2$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i10 from '@angular/flex-layout';
-import { FlexModule } from '@angular/flex-layout';
-import * as i10$1 from 'ngx-infinite-scroll';
+import * as i10 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import * as i5 from 'ngx-permissions';
+import { NgxPermissionsModule } from 'ngx-permissions';
 import { MatCommonModule, MatLineModule, MatNativeDateModule, MatOptionModule, MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -65,6 +62,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTreeModule } from '@angular/material/tree';
+import { FlexModule } from '@angular/flex-layout';
 
 class SupplierInformationComponent {
     dialog;
@@ -118,7 +116,7 @@ class SupplierInformationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierInformationComponent, deps: [{ token: i1.MatDialog }, { token: SupplierService }, { token: i1$1.AlertService }, { token: i2.Router }, { token: i1$1.ErrorHandlerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierInformationComponent, selector: "app-supplier-information", inputs: { supplier: "supplier" }, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <div class=\"d-flex justify-content-between align-items-center\">\n      <h3 class=\"mb-0\">Personal Information</h3>\n      <div class=\"d-flex justify-content-end align-items-center gap-1\">\n        <app-audit-log-for-model\n          [modelId]=\"supplier?.id\"\n          modelType=\"Supplier\"\n          logView=\"all\"\n        ></app-audit-log-for-model>\n        <mat-icon\n          class=\"material-icons cursor-pointer\"\n          (click)=\"modifySupplier(supplier)\"\n        >\n          edit\n        </mat-icon>\n        <mat-icon\n          class=\"material-icons cursor-pointer\"\n          (click)=\"deleteSupplier(supplier)\"\n        >\n          delete\n        </mat-icon>\n      </div>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <div class=\"mt-2\">\n      <div class=\"d-flex justify-content-start gap-2\">\n        <div>\n          <h3 class=\"mb-0\">{{ supplier?.company_name }}</h3>\n          <span class=\"status-pill-sm status-light-orange\">{{\n            supplier?.type?.title\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row mt-3\">\n      <div class=\"col-6\">\n        <p class=\"text-muted mb-0\">Contact Name</p>\n        <p class=\"text-wrap\">{{ supplier?.contact_name }}</p>\n      </div>\n      <div class=\"col-6\">\n        <p class=\"text-muted mb-0\">Email</p>\n        <p class=\"text-wrap\">{{ supplier?.email }}</p>\n      </div>\n      <div class=\"col-6\">\n        <p class=\"text-muted mb-0\">Phone</p>\n        <p class=\"text-wrap\">{{ supplier?.phone }}</p>\n      </div>\n      <div class=\"col-6\">\n        <p class=\"text-muted mb-0\">Details</p>\n        <p class=\"text-wrap\">{{ supplier?.details }}</p>\n      </div>\n    </div>\n\n    <div class=\"row mt-2 h-100\">\n      <div class=\"d-flex\">\n        <mat-icon class=\"material-icons text-primary my-auto\"\n          >location_on</mat-icon\n        >\n        <p class=\"ms-2 my-auto\">{{ supplier?.address }}</p>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["modelType", "modelId", "logView"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierInformationComponent, selector: "app-supplier-information", inputs: { supplier: "supplier" }, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <div class=\"d-flex justify-content-between align-items-center\">\n      <h3 class=\"mb-0\">Personal Information</h3>\n      <div class=\"d-flex justify-content-end align-items-center gap-1\">\n        <app-audit-log-for-model\n          [modelId]=\"supplier?.id\"\n          modelType=\"Supplier\"\n          logView=\"all\"\n        ></app-audit-log-for-model>\n        <mat-icon\n          class=\"material-icons cursor-pointer\"\n          (click)=\"modifySupplier(supplier)\"\n        >\n          edit\n        </mat-icon>\n        <mat-icon\n          class=\"material-icons cursor-pointer\"\n          (click)=\"deleteSupplier(supplier)\"\n        >\n          delete\n        </mat-icon>\n      </div>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <div class=\"mt-2\">\n      <div class=\"d-flex justify-content-start gap-2\">\n        <div>\n          <h3 class=\"mb-0\">{{ supplier?.company_name }}</h3>\n          <span class=\"status-pill-sm status-light-orange\">{{\n            supplier?.type?.title\n          }}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row mt-3\">\n      <div class=\"col-6\">\n        <p class=\"text-muted mb-0\">Contact Name</p>\n        <p class=\"text-wrap\">{{ supplier?.contact_name }}</p>\n      </div>\n      <div class=\"col-6\">\n        <p class=\"text-muted mb-0\">Email</p>\n        <p class=\"text-wrap\">{{ supplier?.email }}</p>\n      </div>\n      <div class=\"col-6\">\n        <p class=\"text-muted mb-0\">Phone</p>\n        <p class=\"text-wrap\">{{ supplier?.phone }}</p>\n      </div>\n      <div class=\"col-6\">\n        <p class=\"text-muted mb-0\">Details</p>\n        <p class=\"text-wrap\">{{ supplier?.details }}</p>\n      </div>\n    </div>\n\n    <div class=\"row mt-2 h-100\">\n      <div class=\"d-flex\">\n        <mat-icon class=\"material-icons text-primary my-auto\"\n          >location_on</mat-icon\n        >\n        <p class=\"ms-2 my-auto\">{{ supplier?.address }}</p>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["modelType", "modelId", "logView"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierInformationComponent, decorators: [{
             type: Component,
@@ -175,7 +173,7 @@ class SupplierViewComponent {
         this.supplier = result.item;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierViewComponent, deps: [{ token: SupplierService }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierViewComponent, selector: "app-supplier-view", ngImport: i0, template: "<mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n\n<div *ngIf=\"supplier\" class=\"d-flex justify-content-start gap-3\">\n  <div style=\"width: 300px\">\n    <app-supplier-information [supplier]=\"supplier\"></app-supplier-information>\n    <mat-card class=\"mt-3\">\n      <mat-card-content class=\"p-0\">\n        <app-note-list\n          modelType=\"Supplier\"\n          [relatedModelId]=\"supplier?.id\"\n        ></app-note-list>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <div style=\"width: calc(100% - 300px - 1rem)\">\n    <mat-card style=\"width: fit-content\">\n      <mat-card-content class=\"p-0\">\n        <mat-tab-group\n          mat-stretch-tabs=\"false\"\n          mat-align-tabs=\"start\"\n          [selectedIndex]=\"selectedTabIndex\"\n          (selectedTabChange)=\"onTabChange($event)\"\n        >\n          <mat-tab>\n            <ng-template mat-tab-label>\n              <div\n                class=\"d-flex justify-content-start align-items-center gap-1\"\n              >\n                <span class=\"material-symbols-outlined\">unknown_document</span>\n                <span class=\"pl-2\">Incidents</span>\n              </div>\n            </ng-template>\n          </mat-tab>\n          <mat-tab>\n            <ng-template mat-tab-label>\n              <div\n                class=\"d-flex justify-content-start align-items-center gap-1\"\n              >\n                <span class=\"material-symbols-outlined\">star</span>\n                <span class=\"pl-2\">Ratings</span>\n              </div>\n            </ng-template>\n          </mat-tab>\n          <mat-tab>\n            <ng-template mat-tab-label>\n              <div\n                class=\"d-flex justify-content-start align-items-center gap-1\"\n              >\n                <span class=\"material-symbols-outlined\">price_change</span>\n                <span class=\"pl-2\">Estimates</span>\n              </div>\n            </ng-template>\n          </mat-tab>\n        </mat-tab-group>\n      </mat-card-content>\n    </mat-card>\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i6$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i1$1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: SupplierInformationComponent, selector: "app-supplier-information", inputs: ["supplier"] }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierViewComponent, selector: "app-supplier-view", ngImport: i0, template: "<mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n\n<div *ngIf=\"supplier\" class=\"d-flex justify-content-start gap-3\">\n  <div style=\"width: 300px\">\n    <app-supplier-information [supplier]=\"supplier\"></app-supplier-information>\n    <mat-card class=\"mt-3\">\n      <mat-card-content class=\"p-0\">\n        <app-note-list\n          modelType=\"Supplier\"\n          [relatedModelId]=\"supplier?.id\"\n        ></app-note-list>\n      </mat-card-content>\n    </mat-card>\n  </div>\n\n  <div style=\"width: calc(100% - 300px - 1rem)\">\n    <mat-card style=\"width: fit-content\">\n      <mat-card-content class=\"p-0\">\n        <mat-tab-group\n          mat-stretch-tabs=\"false\"\n          mat-align-tabs=\"start\"\n          [selectedIndex]=\"selectedTabIndex\"\n          (selectedTabChange)=\"onTabChange($event)\"\n        >\n          <mat-tab>\n            <ng-template mat-tab-label>\n              <div\n                class=\"d-flex justify-content-start align-items-center gap-1\"\n              >\n                <span class=\"material-symbols-outlined\">unknown_document</span>\n                <span class=\"pl-2\">Incidents</span>\n              </div>\n            </ng-template>\n          </mat-tab>\n          <mat-tab>\n            <ng-template mat-tab-label>\n              <div\n                class=\"d-flex justify-content-start align-items-center gap-1\"\n              >\n                <span class=\"material-symbols-outlined\">star</span>\n                <span class=\"pl-2\">Ratings</span>\n              </div>\n            </ng-template>\n          </mat-tab>\n          <mat-tab>\n            <ng-template mat-tab-label>\n              <div\n                class=\"d-flex justify-content-start align-items-center gap-1\"\n              >\n                <span class=\"material-symbols-outlined\">price_change</span>\n                <span class=\"pl-2\">Estimates</span>\n              </div>\n            </ng-template>\n          </mat-tab>\n        </mat-tab-group>\n      </mat-card-content>\n    </mat-card>\n    <router-outlet></router-outlet>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i1$1.NoteListComponent, selector: "app-note-list", inputs: ["relatedModelId", "modelType", "readonly", "labelText", "commentsView", "viewMode"] }, { kind: "component", type: SupplierInformationComponent, selector: "app-supplier-information", inputs: ["supplier"] }], preserveWhitespaces: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierViewComponent, decorators: [{
             type: Component,
@@ -211,272 +209,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: "app-supplier", template: "<div>\n  <router-outlet></router-outlet>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: SupplierFormService }] });
 
-class SupplierTypeService {
-    httpService;
-    constructor(httpService) {
-        this.httpService = httpService;
-    }
-    /**
-     * get all suppliers from API
-     *
-     */
-    index() {
-        return this.httpService.get(`api/supplier-types`);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierTypeService, deps: [{ token: i1$1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierTypeService, providedIn: "root" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierTypeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root",
-                }]
-        }], ctorParameters: () => [{ type: i1$1.HttpService }] });
-
-let SuppliersListComponent = class SuppliersListComponent extends TechlifyListingControllerInterface {
-    spinner;
-    fb;
-    supplierService;
-    supplierTypeService;
-    errorHandler;
-    filterService;
-    activatedRoute;
-    alertService;
-    dialog;
-    supplierFormService;
-    displayedColumns = [
-        "#",
-        "company_name",
-        "contact_name",
-        "phone",
-        "address",
-        "email",
-        "details",
-        "actions",
-    ];
-    filterFormGroup;
-    dataSource = new MatTableDataSource();
-    totalItems = 0;
-    currentPage = 1;
-    routeFilters;
-    supplierTypes;
-    isLoading = false;
-    constructor(spinner, fb, supplierService, supplierTypeService, errorHandler, filterService, activatedRoute, alertService, dialog, supplierFormService) {
-        super();
-        this.spinner = spinner;
-        this.fb = fb;
-        this.supplierService = supplierService;
-        this.supplierTypeService = supplierTypeService;
-        this.errorHandler = errorHandler;
-        this.filterService = filterService;
-        this.activatedRoute = activatedRoute;
-        this.alertService = alertService;
-        this.dialog = dialog;
-        this.supplierFormService = supplierFormService;
-        this.page = 1;
-        this.perPage = 25;
-        this.models = [];
-        this.filterFormGroup = this.fb.group({
-            search: [""],
-            supplier_type_ids: ["1,2"],
-            num_items: [this.perPage + "|" + this.currentPage],
-            sort_by: [""],
-        });
-        this.supplierTypes = [];
-    }
-    ngOnInit() {
-        this.patchFiltersFromRoute();
-        this.listenForChanges();
-        this.getSupplierTypes();
-        this.loadData();
-    }
-    listenForChanges() {
-        // listen for supplier added event to update the list.
-        this.supplierFormService.isListUpdated().subscribe((val) => {
-            if (val && !this.isLoading)
-                this.reload();
-        });
-        // listen for form group changes.
-        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.supplier_type_ids) {
-            this.filterFormGroup
-                .get("supplier_type_ids")
-                .setValue(this.routeFilters.supplier_type_ids.split(",").map(Number));
-        }
-    }
-    sortColumn(event) {
-        var direction = event.direction.toString().toUpperCase();
-        this.assignFilter(event.active, direction);
-    }
-    assignFilter(column, direction) {
-        return this.filterFormGroup
-            .get("sort_by")
-            ?.setValue(column + "|" + direction);
-    }
-    async getSupplierTypes() {
-        try {
-            let res = await lastValueFrom(this.supplierTypeService.index());
-            this.supplierTypes = res.data;
-            console.log(this.supplierTypes);
-        }
-        catch (error) {
-            this.errorHandler.handleError(error);
-        }
-    }
-    async loadData() {
-        let filters = this.filterFormGroup.value;
-        filters.page = this.page = 1;
-        filters.per_page = this.perPage;
-        filters.supplier_type_ids = filters?.supplier_type_ids?.toString();
-        filters.num_items = this.perPage + "|" + this.currentPage;
-        try {
-            this.isLoading = true;
-            let res = await lastValueFrom(this.supplierService.index(filters));
-            if (this.models.length < 1) {
-                this.models = res.data;
-            }
-            else {
-                res.data.forEach((item) => this.models.push(item));
-            }
-            this.dataSource = new MatTableDataSource(this.models);
-            this.totalItems = res.total;
-            this.lastPage = res.last_page || this.page;
-            // list is updated do not listen form isListUpdated
-            this.supplierFormService.listUpdated(false);
-        }
-        catch (error) {
-            this.errorHandler.handleError(error);
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    reload() {
-        if (this.isLoading)
-            return;
-        this.models = [];
-        this.currentPage = 1;
-        this.loadData();
-    }
-    onScroll() {
-        if (this.totalItems > this.models.length && !this.isLoading) {
-            this.currentPage += 1;
-            this.loadData();
-        }
-    }
-    editForm(model) {
-        const dialogRef = this.dialog.open(SupplierFormComponent, {
-            width: "400px",
-            autoFocus: false,
-            data: {
-                details: model,
-            },
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result) {
-                this.reload();
-            }
-        });
-    }
-    deleteForm(supplier) {
-        const dialogRef = this.dialog.open(ActionPopupComponent, {
-            width: "400px",
-            data: {
-                title: "Delete Supplier",
-                message: "Are you sure you want to delete the Supplier?",
-            },
-            autoFocus: false,
-        });
-        dialogRef.afterClosed().subscribe(async (result) => {
-            if (result) {
-                this.spinner.show();
-                try {
-                    const result = await lastValueFrom(this.supplierService.destroy(supplier.id));
-                    this.alertService.addAlert("Successfully deleted the Supplier", "success");
-                    this.reload();
-                }
-                catch (error) {
-                    this.errorHandler.handleError(error);
-                }
-                finally {
-                    this.spinner.hide();
-                }
-            }
-        });
-    }
-    /**
-     * Show the supplier create form.
-     *
-     * @param model
-     */
-    showAddSupplierDialog(model) {
-        const dialogRef = this.dialog.open(SupplierFormComponent, {
-            width: "400px",
-            autoFocus: false,
-            data: {
-                model,
-            },
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result) {
-                // record added successfully, inform the list component.
-                this.supplierFormService.listUpdated(true);
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuppliersListComponent, deps: [{ token: i3$2.NgxSpinnerService }, { token: i2$1.FormBuilder }, { token: SupplierService }, { token: SupplierTypeService }, { token: i1$1.ErrorHandlerService }, { token: i1$1.FilterService }, { token: i2.ActivatedRoute }, { token: i1$1.AlertService }, { token: i1.MatDialog }, { token: SupplierFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SuppliersListComponent, selector: "app-suppliers-list", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-center align-items-center gap-3 mb-3\">\n  <h2 class=\"mb-0\">Suppliers</h2>\n  <mat-icon\n    color=\"primary\"\n    class=\"cursor-pointer\"\n    (click)=\"showAddSupplierDialog()\"\n  >\n    add\n  </mat-icon>\n</div>\n<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form\n      [formGroup]=\"filterFormGroup\"\n      fxLayout\n      fxLayoutGap=\"1rem\"\n      fxLayoutAlign=\"start center\"\n    >\n      <mat-form-field fxFlex=\"24\">\n        <input\n          matInput\n          placeholder=\"Search Supplier by Name, Phone, Address, Email, Description\"\n          formControlName=\"search\"\n        />\n        <mat-icon matSuffix>search</mat-icon>\n      </mat-form-field>\n      <mat-label class=\"ml-4\">Type</mat-label>\n      <mat-button-toggle-group formControlName=\"supplier_type_ids\" multiple>\n        <mat-button-toggle\n          *ngFor=\"let item of supplierTypes\"\n          [value]=\"item.id\"\n          >{{ item.title }}</mat-button-toggle\n        >\n      </mat-button-toggle-group>\n    </form>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      #table\n      [dataSource]=\"dataSource\"\n      class=\"w-100 table-hover\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n      matSort\n      (matSortChange)=\"sortColumn($event)\"\n      aria-describedby=\"Suppliers List\"\n    >\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"company_name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Company</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column gap-1\">\n            <strong>{{ element?.company_name }}</strong>\n            <span class=\"status-pill status-pill-sm status-ongoing\">\n              {{ element?.type?.title }}\n            </span>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"contact_name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Contact Name</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.contact_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"phone\">\n        <th mat-header-cell *matHeaderCellDef>Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.phone }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"address\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Address</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.email }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"details\">\n        <th mat-header-cell *matHeaderCellDef>Description</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary\" fxLayoutGap=\"1rem\">\n            <app-audit-log-for-model\n              [modelId]=\"element?.id\"\n              modelType=\"Supplier\"\n              logView=\"all\"\n            ></app-audit-log-for-model>\n            <button\n              mat-icon-button\n              [routerLink]=\"['/suppliers', element.id, 'view']\"\n              routerLinkActive=\"route-link-active\"\n              *ngxPermissionsOnly=\"['supplier.read']\"\n            >\n              <mat-icon matTooltip=\"View\">remove_red_eye</mat-icon>\n            </button>\n            <button\n              *ngxPermissionsOnly=\"['supplier.update']\"\n              mat-icon-button\n              (click)=\"editForm(element)\"\n            >\n              <mat-icon>edit</mat-icon>\n            </button>\n            <button\n              *ngxPermissionsOnly=\"['supplier.delete']\"\n              type=\"button\"\n              mat-icon-button\n              (click)=\"deleteForm(element)\"\n            >\n              <mat-icon>delete</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\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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i7$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$2.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$2.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: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1$1.AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["modelType", "modelId", "logView"] }, { 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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i10$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }], preserveWhitespaces: true });
-};
-SuppliersListComponent = __decorate([
-    UntilDestroy()
-], SuppliersListComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuppliersListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "app-suppliers-list", template: "<div class=\"d-flex justify-content-center align-items-center gap-3 mb-3\">\n  <h2 class=\"mb-0\">Suppliers</h2>\n  <mat-icon\n    color=\"primary\"\n    class=\"cursor-pointer\"\n    (click)=\"showAddSupplierDialog()\"\n  >\n    add\n  </mat-icon>\n</div>\n<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form\n      [formGroup]=\"filterFormGroup\"\n      fxLayout\n      fxLayoutGap=\"1rem\"\n      fxLayoutAlign=\"start center\"\n    >\n      <mat-form-field fxFlex=\"24\">\n        <input\n          matInput\n          placeholder=\"Search Supplier by Name, Phone, Address, Email, Description\"\n          formControlName=\"search\"\n        />\n        <mat-icon matSuffix>search</mat-icon>\n      </mat-form-field>\n      <mat-label class=\"ml-4\">Type</mat-label>\n      <mat-button-toggle-group formControlName=\"supplier_type_ids\" multiple>\n        <mat-button-toggle\n          *ngFor=\"let item of supplierTypes\"\n          [value]=\"item.id\"\n          >{{ item.title }}</mat-button-toggle\n        >\n      </mat-button-toggle-group>\n    </form>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      #table\n      [dataSource]=\"dataSource\"\n      class=\"w-100 table-hover\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n      matSort\n      (matSortChange)=\"sortColumn($event)\"\n      aria-describedby=\"Suppliers List\"\n    >\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"company_name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Company</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column gap-1\">\n            <strong>{{ element?.company_name }}</strong>\n            <span class=\"status-pill status-pill-sm status-ongoing\">\n              {{ element?.type?.title }}\n            </span>\n          </div>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"contact_name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Contact Name</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.contact_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"phone\">\n        <th mat-header-cell *matHeaderCellDef>Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.phone }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"address\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Address</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.email }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"details\">\n        <th mat-header-cell *matHeaderCellDef>Description</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary\" fxLayoutGap=\"1rem\">\n            <app-audit-log-for-model\n              [modelId]=\"element?.id\"\n              modelType=\"Supplier\"\n              logView=\"all\"\n            ></app-audit-log-for-model>\n            <button\n              mat-icon-button\n              [routerLink]=\"['/suppliers', element.id, 'view']\"\n              routerLinkActive=\"route-link-active\"\n              *ngxPermissionsOnly=\"['supplier.read']\"\n            >\n              <mat-icon matTooltip=\"View\">remove_red_eye</mat-icon>\n            </button>\n            <button\n              *ngxPermissionsOnly=\"['supplier.update']\"\n              mat-icon-button\n              (click)=\"editForm(element)\"\n            >\n              <mat-icon>edit</mat-icon>\n            </button>\n            <button\n              *ngxPermissionsOnly=\"['supplier.delete']\"\n              type=\"button\"\n              mat-icon-button\n              (click)=\"deleteForm(element)\"\n            >\n              <mat-icon>delete</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\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
-        }], ctorParameters: () => [{ type: i3$2.NgxSpinnerService }, { type: i2$1.FormBuilder }, { type: SupplierService }, { type: SupplierTypeService }, { type: i1$1.ErrorHandlerService }, { type: i1$1.FilterService }, { type: i2.ActivatedRoute }, { type: i1$1.AlertService }, { type: i1.MatDialog }, { type: SupplierFormService }] });
-
-const routes = [
-    {
-        path: "",
-        component: SupplierComponent,
-        children: [
-            { path: "", component: SuppliersListComponent },
-            {
-                path: ":id/view",
-                component: SupplierViewComponent,
-                children: [
-                    {
-                        path: "",
-                        redirectTo: "incidents",
-                        pathMatch: "full",
-                    },
-                ],
-            },
-        ],
-    },
-];
-class SupplierRoutingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SupplierRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierRoutingModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [RouterModule.forChild(routes)],
-                    exports: [RouterModule],
-                }]
-        }] });
-
 /*
  * This module imports and re-exports all Angular Material modules for convenience,
  * so only 1 module import is needed in your feature modules.
@@ -612,6 +344,241 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class SupplierFormButtonComponent {
+    matDialog;
+    supplier;
+    onSaved = new EventEmitter();
+    constructor(matDialog) {
+        this.matDialog = matDialog;
+    }
+    ngOnInit() {
+    }
+    openDialog() {
+        this.matDialog.open(SupplierFormComponent, {
+            width: '600px',
+            data: {
+                details: this.supplier
+            },
+        }).afterClosed().subscribe((result) => {
+            if (result) {
+                this.onSaved.emit(result);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormButtonComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierFormButtonComponent, isStandalone: true, selector: "app-supplier-form-button", inputs: { supplier: "supplier" }, outputs: { onSaved: "onSaved" }, ngImport: i0, template: "<mat-icon color=\"primary\" class=\"cursor-pointer\" [class.text-secondary]=\"supplier\" (click)=\"openDialog()\">\n  {{ supplier ? \"edit\" : \"add\" }}\n</mat-icon>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MaterialModule }, { 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: SupplierFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-supplier-form-button', standalone: true, imports: [
+                        CommonModule,
+                        MaterialModule
+                    ], template: "<mat-icon color=\"primary\" class=\"cursor-pointer\" [class.text-secondary]=\"supplier\" (click)=\"openDialog()\">\n  {{ supplier ? \"edit\" : \"add\" }}\n</mat-icon>" }]
+        }], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { supplier: [{
+                type: Input
+            }], onSaved: [{
+                type: Output
+            }] } });
+
+class SupplierDeleteButtonComponent {
+    dialog;
+    alertService;
+    errorHandler;
+    supplierService;
+    supplier;
+    onDelete = new EventEmitter();
+    constructor(dialog, alertService, errorHandler, supplierService) {
+        this.dialog = dialog;
+        this.alertService = alertService;
+        this.errorHandler = errorHandler;
+        this.supplierService = supplierService;
+    }
+    ngOnInit() {
+    }
+    openDialog() {
+        this.dialog.open(ActionPopupComponent, {
+            width: '400px',
+            data: {
+                title: 'Delete Supplier',
+                message: 'Are you sure you want to delete the Supplier?',
+            },
+            autoFocus: false,
+        }).afterClosed().subscribe(async (result) => {
+            if (result) {
+                try {
+                    await lastValueFrom(this.supplierService.destroy(this.supplier.id));
+                    this.alertService.addAlert('Successfully deleted the Supplier', 'success');
+                    this.onDelete.emit(this.supplier);
+                }
+                catch (error) {
+                    this.errorHandler.handleError(error);
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierDeleteButtonComponent, deps: [{ token: i1.MatDialog }, { token: i1$1.AlertService }, { token: i1$1.ErrorHandlerService }, { token: SupplierService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierDeleteButtonComponent, isStandalone: true, selector: "app-supplier-delete-button", inputs: { supplier: "supplier" }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer\" *ngxPermissionsOnly=\"['supplier.delete']\" (click)=\"openDialog()\">\n  delete\n</mat-icon>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i5.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierDeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-supplier-delete-button', standalone: true, imports: [
+                        CommonModule,
+                        MaterialModule,
+                        NgxPermissionsModule
+                    ], template: "<mat-icon class=\"cursor-pointer\" *ngxPermissionsOnly=\"['supplier.delete']\" (click)=\"openDialog()\">\n  delete\n</mat-icon>" }]
+        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i1$1.AlertService }, { type: i1$1.ErrorHandlerService }, { type: SupplierService }], propDecorators: { supplier: [{
+                type: Input
+            }], onDelete: [{
+                type: Output
+            }] } });
+
+let SuppliersListComponent = class SuppliersListComponent extends TechlifyListingControllerInterface {
+    spinner;
+    fb;
+    supplierService;
+    errorHandler;
+    filterService;
+    activatedRoute;
+    alertService;
+    dialog;
+    supplierFormService;
+    requestHelperService;
+    displayedColumns = [
+        '#',
+        'company_name',
+        'type',
+        'contact_name',
+        'phone',
+        'address',
+        'email',
+        'details',
+        'actions',
+    ];
+    constructor(spinner, fb, supplierService, errorHandler, filterService, activatedRoute, alertService, dialog, supplierFormService, requestHelperService) {
+        super();
+        this.spinner = spinner;
+        this.fb = fb;
+        this.supplierService = supplierService;
+        this.errorHandler = errorHandler;
+        this.filterService = filterService;
+        this.activatedRoute = activatedRoute;
+        this.alertService = alertService;
+        this.dialog = dialog;
+        this.supplierFormService = supplierFormService;
+        this.requestHelperService = requestHelperService;
+        this.page = 1;
+        this.perPage = 25;
+        this.models = [];
+        this.filterForm = this.fb.group({
+            search: [''],
+            supplier_type_ids: [''],
+            sort_by: ['created_at|desc'],
+        });
+    }
+    ngOnInit() {
+        this.updateFormWithQueryParams();
+        this.subscribeToFormChanges();
+        this.subscribeToRouteChanges();
+    }
+    listenForChanges() {
+        // listen for supplier added event to update the list.
+        this.supplierFormService.isListUpdated().subscribe((val) => {
+            if (val && !this.isWorking)
+                this.reload();
+        });
+        // listen for form group changes.
+        this.filterForm.valueChanges.pipe(debounceTime(500), untilDestroyed(this)).subscribe(() => {
+            this.filterService.applyFilterToRoute(this.activatedRoute, this.filterForm.value);
+            this.reload();
+        });
+    }
+    sortColumn(event) {
+        var direction = event.direction.toString().toUpperCase();
+        this.assignFilter(event.active, direction);
+    }
+    assignFilter(column, direction) {
+        return this.filterForm.get('sort_by')?.setValue(column + '|' + direction);
+    }
+    async loadData() {
+        let filters = { ...this.requestHelperService.convertToFormData(this.filterForm.value) };
+        filters.page = this.page = 1;
+        filters.perPage = this.perPage;
+        try {
+            this.isWorking = true;
+            let res = await lastValueFrom(this.supplierService.index(filters));
+            this.models = this.models?.concat(res?.data);
+            this.lastPage = res.last_page;
+            // list is updated do not listen form isListUpdated
+            this.supplierFormService.listUpdated(false);
+        }
+        catch (error) {
+            this.errorHandler.handleError(error);
+        }
+        finally {
+            this.isWorking = false;
+        }
+    }
+    updateFormWithQueryParams() {
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+            supplier_type_ids: { multiple: true },
+        });
+    }
+    subscribeToFormChanges() {
+        this.filterForm.valueChanges.pipe(debounceTime(800)).subscribe({
+            next: () => {
+                this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData(this.filterForm.value));
+            },
+        });
+    }
+    subscribeToRouteChanges() {
+        this.activatedRoute.queryParams.pipe(debounceTime(500), distinctUntilChanged()).subscribe(() => {
+            this.reload();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuppliersListComponent, deps: [{ token: i4$2.NgxSpinnerService }, { token: i2$1.FormBuilder }, { token: SupplierService }, { token: i1$1.ErrorHandlerService }, { token: i1$1.FilterService }, { token: i2.ActivatedRoute }, { token: i1$1.AlertService }, { token: i1.MatDialog }, { token: SupplierFormService }, { token: i1$1.RequestHelperService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SuppliersListComponent, selector: "app-suppliers-list", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3\">\n      <h3 class=\"mb-0\">Suppliers</h3>\n      <app-supplier-form-button (onSaved)=\"reload()\"></app-supplier-form-button>\n    </div>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search Supplier by Name, Phone, Address, Email, Description\"\n          formControlName=\"search\" />\n        <mat-icon matSuffix>search</mat-icon>\n      </mat-form-field>\n      <mat-form-field>\n        <mat-label>Type</mat-label>\n        <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table #table [dataSource]=\"models\" class=\"w-100 table-hover\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n      (matSortChange)=\"sortColumn($event)\" aria-describedby=\"Suppliers List\">\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"company_name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.company_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"type\">\n        <th mat-header-cell *matHeaderCellDef>Type</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.type?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"contact_name\">\n        <th mat-header-cell *matHeaderCellDef>Contact</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.contact_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"phone\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.phone }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"address\">\n        <th mat-header-cell *matHeaderCellDef>Address</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.email }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"details\">\n        <th mat-header-cell *matHeaderCellDef>Details</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex align-items-center gap-1\">\n\n            <a class=\"text-decoration-none text-dark\" [routerLink]=\"['/suppliers', element.id, 'view']\"\n              routerLinkActive=\"route-link-active\" *ngxPermissionsOnly=\"['supplier.read']\">\n              <mat-icon matTooltip=\"View\">remove_red_eye</mat-icon>\n            </a>\n            <app-supplier-form-button *ngxPermissionsOnly=\"['supplier.update']\" [supplier]=\"element\"\n              (onSaved)=\"reload()\"></app-supplier-form-button>\n            <app-supplier-delete-button [supplier]=\"element\" (onDelete)=\"reload()\"></app-supplier-delete-button>\n            <app-audit-log-for-model [modelId]=\"element?.id\" modelType=\"Supplier\"\n              logView=\"all\"></app-audit-log-for-model>\n\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$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: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: i1$1.AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["modelType", "modelId", "logView"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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: i5.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }, { kind: "component", type: SupplierFormButtonComponent, selector: "app-supplier-form-button", inputs: ["supplier"], outputs: ["onSaved"] }, { kind: "component", type: SupplierDeleteButtonComponent, selector: "app-supplier-delete-button", inputs: ["supplier"], outputs: ["onDelete"] }], preserveWhitespaces: true });
+};
+SuppliersListComponent = __decorate([
+    UntilDestroy()
+], SuppliersListComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuppliersListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-suppliers-list', template: "<mat-card class=\"mb-3\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3\">\n      <h3 class=\"mb-0\">Suppliers</h3>\n      <app-supplier-form-button (onSaved)=\"reload()\"></app-supplier-form-button>\n    </div>\n    <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input matInput placeholder=\"Search Supplier by Name, Phone, Address, Email, Description\"\n          formControlName=\"search\" />\n        <mat-icon matSuffix>search</mat-icon>\n      </mat-form-field>\n      <mat-form-field>\n        <mat-label>Type</mat-label>\n        <app-searchable-selector apiUrl=\"api/supplier-types\" formControlName=\"supplier_type_ids\" [multiple]=\"true\">\n        </app-searchable-selector>\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table mat-table #table [dataSource]=\"models\" class=\"w-100 table-hover\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\" matSort\n      (matSortChange)=\"sortColumn($event)\" aria-describedby=\"Suppliers List\">\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"company_name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.company_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"type\">\n        <th mat-header-cell *matHeaderCellDef>Type</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.type?.title }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"contact_name\">\n        <th mat-header-cell *matHeaderCellDef>Contact</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.contact_name }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"phone\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.phone }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"address\">\n        <th mat-header-cell *matHeaderCellDef>Address</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.email }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"details\">\n        <th mat-header-cell *matHeaderCellDef>Details</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.details }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex align-items-center gap-1\">\n\n            <a class=\"text-decoration-none text-dark\" [routerLink]=\"['/suppliers', element.id, 'view']\"\n              routerLinkActive=\"route-link-active\" *ngxPermissionsOnly=\"['supplier.read']\">\n              <mat-icon matTooltip=\"View\">remove_red_eye</mat-icon>\n            </a>\n            <app-supplier-form-button *ngxPermissionsOnly=\"['supplier.update']\" [supplier]=\"element\"\n              (onSaved)=\"reload()\"></app-supplier-form-button>\n            <app-supplier-delete-button [supplier]=\"element\" (onDelete)=\"reload()\"></app-supplier-delete-button>\n            <app-audit-log-for-model [modelId]=\"element?.id\" modelType=\"Supplier\"\n              logView=\"all\"></app-audit-log-for-model>\n\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>" }]
+        }], ctorParameters: () => [{ type: i4$2.NgxSpinnerService }, { type: i2$1.FormBuilder }, { type: SupplierService }, { type: i1$1.ErrorHandlerService }, { type: i1$1.FilterService }, { type: i2.ActivatedRoute }, { type: i1$1.AlertService }, { type: i1.MatDialog }, { type: SupplierFormService }, { type: i1$1.RequestHelperService }] });
+
+const routes = [
+    {
+        path: "",
+        component: SupplierComponent,
+        children: [
+            { path: "", component: SuppliersListComponent },
+            {
+                path: ":id/view",
+                component: SupplierViewComponent,
+                children: [
+                    {
+                        path: "",
+                        redirectTo: "incidents",
+                        pathMatch: "full",
+                    },
+                ],
+            },
+        ],
+    },
+];
+class SupplierRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SupplierRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
 class SupplierModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SupplierModule, declarations: [SupplierComponent,
@@ -626,7 +593,10 @@ class SupplierModule {
             NoteModule,
             FlexModule,
             ReactiveFormsModule,
-            InfiniteScrollModule] });
+            InfiniteScrollModule,
+            NgxPermissionsModule,
+            SupplierFormButtonComponent,
+            SupplierDeleteButtonComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierModule, imports: [CommonModule,
             SupplierRoutingModule,
             MaterialModule,
@@ -635,7 +605,10 @@ class SupplierModule {
             NoteModule,
             FlexModule,
             ReactiveFormsModule,
-            InfiniteScrollModule] });
+            InfiniteScrollModule,
+            NgxPermissionsModule,
+            SupplierFormButtonComponent,
+            SupplierDeleteButtonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierModule, decorators: [{
             type: NgModule,
@@ -657,9 +630,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FlexModule,
                         ReactiveFormsModule,
                         InfiniteScrollModule,
+                        NgxPermissionsModule,
+                        SupplierFormButtonComponent,
+                        SupplierDeleteButtonComponent
                     ],
                 }]
         }] });
 
 export { SupplierModule };
-//# sourceMappingURL=techlify-inventory-common-supplier.module-gzHesNtQ.mjs.map
+//# sourceMappingURL=techlify-inventory-common-supplier.module-CFDwJ-TS.mjs.map