techlify-inventory-common 18.0.1

package/fesm2022/techlify-inventory-common-supplier.module-gzHesNtQ.mjs

@@ -0,0 +1,665 @@
+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 { 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 * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i3 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 { 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 { 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 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 { MatFormFieldModule } from '@angular/material/form-field';
+import * as i7$2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
+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 { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { MatCommonModule, MatLineModule, MatNativeDateModule, MatOptionModule, MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
+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';
+
+class SupplierInformationComponent {
+    dialog;
+    supplierService;
+    alertService;
+    router;
+    errorService;
+    supplier;
+    constructor(dialog, supplierService, alertService, router, errorService) {
+        this.dialog = dialog;
+        this.supplierService = supplierService;
+        this.alertService = alertService;
+        this.router = router;
+        this.errorService = errorService;
+    }
+    modifySupplier(model) {
+        const dialogRef = this.dialog.open(SupplierFormComponent, {
+            width: "600px",
+            data: {
+                details: model,
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                location.reload();
+            }
+        });
+    }
+    deleteSupplier(id) {
+        const dialogRef = this.dialog.open(ActionPopupComponent, {
+            width: "400px",
+            data: {
+                title: "Delete Supplier",
+                message: "Are you sure you want to delete this supplier?",
+            },
+            autoFocus: false,
+        });
+        dialogRef.afterClosed().subscribe(async (result) => {
+            if (result) {
+                try {
+                    const result = await this.supplierService.destroy(id);
+                    this.alertService.addAlert("Successfully Deleted Supplier", "success");
+                }
+                catch (error) {
+                    this.errorService.handleError(error);
+                }
+                finally {
+                    this.router.navigateByUrl("/suppliers");
+                }
+            }
+        });
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierInformationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-supplier-information", 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" }]
+        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: SupplierService }, { type: i1$1.AlertService }, { type: i2.Router }, { type: i1$1.ErrorHandlerService }], propDecorators: { supplier: [{
+                type: Input
+            }] } });
+
+class SupplierViewComponent {
+    supplierService;
+    route;
+    router;
+    supplier;
+    supplierId = 0;
+    selectedTabIndex = 0;
+    isLoading = false;
+    constructor(supplierService, route, router) {
+        this.supplierService = supplierService;
+        this.route = route;
+        this.router = router;
+    }
+    ngOnInit() {
+        this.route.firstChild?.url.subscribe((url) => {
+            if (url[0].path === "ratings") {
+                this.selectedTabIndex = 1;
+            }
+            else if (url[0].path === "estimates") {
+                this.selectedTabIndex = 2;
+            }
+            else {
+                this.selectedTabIndex = 0;
+            }
+        });
+        this.supplierId = this.route.snapshot.params["id"];
+        this.getSupplier(this.supplierId);
+    }
+    onTabChange(event) {
+        switch (event.index) {
+            case 0:
+                this.router.navigate(["incidents"], { relativeTo: this.route });
+                return;
+            case 1:
+                this.router.navigate(["ratings"], { relativeTo: this.route });
+                return;
+            case 2:
+                this.router.navigate(["estimates"], { relativeTo: this.route });
+                return;
+        }
+    }
+    async getSupplier(id) {
+        this.isLoading = true;
+        let result = await lastValueFrom(this.supplierService.show(id));
+        this.isLoading = false;
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-supplier-view", 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" }]
+        }], ctorParameters: () => [{ type: SupplierService }, { type: i2.ActivatedRoute }, { type: i2.Router }] });
+
+class SupplierFormService extends TechlifyFormService {
+    constructor() {
+        super();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierFormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [] });
+
+class SupplierComponent {
+    dialog;
+    supplierFormService;
+    constructor(dialog, supplierFormService) {
+        this.dialog = dialog;
+        this.supplierFormService = supplierFormService;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierComponent, deps: [{ token: i1.MatDialog }, { token: SupplierFormService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SupplierComponent, selector: "app-supplier", ngImport: i0, template: "<div>\n  <router-outlet></router-outlet>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierComponent, decorators: [{
+            type: Component,
+            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.
+ * See https://material.angular.io/guide/getting-started#step-3-import-the-component-modules.
+ *
+ * To optimize your production builds, you should only import the components used in your app.
+ */
+class MaterialModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MaterialModule, exports: [MatAutocompleteModule,
+            MatBadgeModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatCommonModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatFormFieldModule,
+            MatGridListModule,
+            MatIconModule,
+            MatInputModule,
+            MatLineModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatOptionModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatPseudoCheckboxModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSlideToggleModule,
+            MatSliderModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatStepperModule,
+            MatTableModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MaterialModule, imports: [MatAutocompleteModule,
+            MatBadgeModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatCheckboxModule,
+            MatChipsModule,
+            MatCommonModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatExpansionModule,
+            MatFormFieldModule,
+            MatGridListModule,
+            MatIconModule,
+            MatInputModule,
+            MatLineModule,
+            MatListModule,
+            MatMenuModule,
+            MatNativeDateModule,
+            MatOptionModule,
+            MatPaginatorModule,
+            MatProgressBarModule,
+            MatProgressSpinnerModule,
+            MatPseudoCheckboxModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSelectModule,
+            MatSidenavModule,
+            MatSlideToggleModule,
+            MatSliderModule,
+            MatSnackBarModule,
+            MatSortModule,
+            MatStepperModule,
+            MatTableModule,
+            MatTabsModule,
+            MatToolbarModule,
+            MatTooltipModule,
+            MatTreeModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        MatAutocompleteModule,
+                        MatBadgeModule,
+                        MatButtonModule,
+                        MatButtonToggleModule,
+                        MatCardModule,
+                        MatCheckboxModule,
+                        MatChipsModule,
+                        MatCommonModule,
+                        MatDatepickerModule,
+                        MatDialogModule,
+                        MatDividerModule,
+                        MatExpansionModule,
+                        MatFormFieldModule,
+                        MatGridListModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatLineModule,
+                        MatListModule,
+                        MatMenuModule,
+                        MatNativeDateModule,
+                        MatOptionModule,
+                        MatPaginatorModule,
+                        MatProgressBarModule,
+                        MatProgressSpinnerModule,
+                        MatPseudoCheckboxModule,
+                        MatRadioModule,
+                        MatRippleModule,
+                        MatSelectModule,
+                        MatSidenavModule,
+                        MatSlideToggleModule,
+                        MatSliderModule,
+                        MatSnackBarModule,
+                        MatSortModule,
+                        MatStepperModule,
+                        MatTableModule,
+                        MatTabsModule,
+                        MatToolbarModule,
+                        MatTooltipModule,
+                        MatTreeModule,
+                    ],
+                }]
+        }] });
+
+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,
+            SupplierViewComponent,
+            SuppliersListComponent,
+            SupplierFormComponent,
+            SupplierInformationComponent], imports: [CommonModule,
+            SupplierRoutingModule,
+            MaterialModule,
+            SearchableSelectorModule,
+            AuditLogForModelModule,
+            NoteModule,
+            FlexModule,
+            ReactiveFormsModule,
+            InfiniteScrollModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierModule, imports: [CommonModule,
+            SupplierRoutingModule,
+            MaterialModule,
+            SearchableSelectorModule,
+            AuditLogForModelModule,
+            NoteModule,
+            FlexModule,
+            ReactiveFormsModule,
+            InfiniteScrollModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SupplierModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SupplierComponent,
+                        SupplierViewComponent,
+                        SuppliersListComponent,
+                        SupplierFormComponent,
+                        SupplierInformationComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SupplierRoutingModule,
+                        MaterialModule,
+                        SearchableSelectorModule,
+                        AuditLogForModelModule,
+                        NoteModule,
+                        FlexModule,
+                        ReactiveFormsModule,
+                        InfiniteScrollModule,
+                    ],
+                }]
+        }] });
+
+export { SupplierModule };
+//# sourceMappingURL=techlify-inventory-common-supplier.module-gzHesNtQ.mjs.map