techlify-inventory-common 18.2.0 → 18.3.0

package/fesm2022/techlify-inventory-common-location.module-Cwx9mHKE.mjs

@@ -0,0 +1,529 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, Component, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { NgIf, DatePipe, CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/router';
+import { RouterLink, RouterModule } from '@angular/router';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import * as i1 from 'ngx-techlify-core';
+import { TechlifyServiceBaseClass, TechlifyFormComponentInterface, SearchableSelectorModule, TechlifyListingControllerInterface } from 'ngx-techlify-core';
+import * as i2 from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { debounceTime, distinctUntilChanged } from 'rxjs';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
+import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
+import { MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef, MatTable, MatHeaderCellDef } from '@angular/material/table';
+import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import * as i1$1 from '@angular/material/dialog';
+import { MatDialogContent, MatDialogTitle, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatDivider } from '@angular/material/divider';
+import { P as ProductModule, b as ProductCategoryBadgesComponent, c as StockTransferFormButtonComponent } from './techlify-inventory-common-techlify-inventory-common-BMNkSTd6.mjs';
+
+class LocationService extends TechlifyServiceBaseClass {
+    httpService;
+    constructor(httpService) {
+        super(httpService, 'inventory-locations');
+        this.httpService = httpService;
+    }
+    productStatistics(model, params) {
+        return this.httpService.get(`api/inventory-locations/${model.id}/product-statistics`, { params });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpService }] });
+
+class LocationFormComponent extends TechlifyFormComponentInterface {
+    formBuilder;
+    alertService;
+    service;
+    model;
+    saved = new EventEmitter();
+    cancelled = new EventEmitter();
+    isSaving;
+    constructor(formValidatorService, formBuilder, alertService, service) {
+        super(formValidatorService);
+        this.formBuilder = formBuilder;
+        this.alertService = alertService;
+        this.service = service;
+        this.errorMessages = {
+            title: {
+                required: 'The title field is required.'
+            }
+        };
+        this.form = this.formBuilder.group({
+            id: [''],
+            title: ['', Validators.required],
+            address: [''],
+            description: [''],
+        });
+    }
+    ngOnInit() {
+        if (this.model) {
+            this.form.patchValue({ ...this.model });
+        }
+    }
+    save() {
+        this.form.markAllAsTouched();
+        if (this.form.invalid) {
+            this.alertService.addAlert('Please check the form for errors.', 'error');
+            return;
+        }
+        const data = this.form.value;
+        this.isSaving = true;
+        let request = this.service.store(data);
+        if (data?.id) {
+            request = this.service.update(data);
+        }
+        request.subscribe({
+            next: (response) => {
+                this.isSaving = false;
+                this.saved.emit(response?.item);
+                this.alertService.addAlert('The location saved successfully!', 'success');
+            },
+            error: () => (this.isSaving = false)
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2.FormBuilder }, { token: i1.AlertService }, { token: LocationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LocationFormComponent, isStandalone: true, selector: "app-location-form", inputs: { model: "model" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  (submit)=\"save()\"\n  class=\"d-flex flex-column gap-1\"\n>\n  <mat-form-field>\n    <mat-label>Title</mat-label>\n    <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Title\">\n    <mat-error *ngIf=\"isFieldValid('title')\">\n      {{ getErrorMessage('title') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Address</mat-label>\n    <input type=\"text\" matInput formControlName=\"address\" placeholder=\"Address\">\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Description</mat-label>\n    <textarea matInput formControlName=\"description\" placeholder=\"Description\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button (click)=\"cancelled.emit()\" [disabled]=\"isSaving\" type=\"button\" mat-flat-button>\n      Cancel\n    </button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SearchableSelectorModule }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-location-form', standalone: true, imports: [
+                        FormsModule,
+                        MatButton,
+                        MatError,
+                        MatFormField,
+                        MatInput,
+                        MatLabel,
+                        NgIf,
+                        ReactiveFormsModule,
+                        SearchableSelectorModule
+                    ], template: "<form\n  [formGroup]=\"form\"\n  (submit)=\"save()\"\n  class=\"d-flex flex-column gap-1\"\n>\n  <mat-form-field>\n    <mat-label>Title</mat-label>\n    <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Title\">\n    <mat-error *ngIf=\"isFieldValid('title')\">\n      {{ getErrorMessage('title') }}\n    </mat-error>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Address</mat-label>\n    <input type=\"text\" matInput formControlName=\"address\" placeholder=\"Address\">\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Description</mat-label>\n    <textarea matInput formControlName=\"description\" placeholder=\"Description\"></textarea>\n  </mat-form-field>\n\n  <div class=\"d-flex justify-content-end align-items-center gap-2\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">\n      Save\n    </button>\n    <button (click)=\"cancelled.emit()\" [disabled]=\"isSaving\" type=\"button\" mat-flat-button>\n      Cancel\n    </button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2.FormBuilder }, { type: i1.AlertService }, { type: LocationService }], propDecorators: { model: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }] } });
+
+class LocationFormButtonComponent {
+    matDialog;
+    model;
+    saved = new EventEmitter();
+    constructor(matDialog) {
+        this.matDialog = matDialog;
+    }
+    showForm(templateRef) {
+        this.matDialog.open(templateRef, { width: '400px' });
+    }
+    onSaved(model) {
+        this.matDialog.closeAll();
+        this.saved.emit(model);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationFormButtonComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LocationFormButtonComponent, isStandalone: true, selector: "app-location-form-button", inputs: { model: "model" }, outputs: { saved: "saved" }, ngImport: i0, template: "<span\n  class=\"material-symbols-outlined cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  {{ model ? 'edit' : 'add' }}\n</span>\n\n<ng-template #formTemplate>\n  <h3 mat-dialog-title>{{ model ? 'Edit' : 'Create' }} Location</h3>\n  <app-location-form\n    mat-dialog-content\n    [model]=\"model\"\n    (saved)=\"onSaved($event)\"\n    (cancelled)=\"matDialog.closeAll()\"\n  ></app-location-form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: LocationFormComponent, selector: "app-location-form", inputs: ["model"], outputs: ["saved", "cancelled"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-location-form-button', standalone: true, imports: [
+                        MatDialogContent,
+                        MatDialogTitle,
+                        LocationFormComponent
+                    ], template: "<span\n  class=\"material-symbols-outlined cursor-pointer\"\n  (click)=\"showForm(formTemplate)\"\n>\n  {{ model ? 'edit' : 'add' }}\n</span>\n\n<ng-template #formTemplate>\n  <h3 mat-dialog-title>{{ model ? 'Edit' : 'Create' }} Location</h3>\n  <app-location-form\n    mat-dialog-content\n    [model]=\"model\"\n    (saved)=\"onSaved($event)\"\n    (cancelled)=\"matDialog.closeAll()\"\n  ></app-location-form>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { model: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
+class LocationDeleteButtonComponent {
+    matDialog;
+    service;
+    alertService;
+    credentialsService;
+    model;
+    deleted = new EventEmitter();
+    isDeleting;
+    user;
+    constructor(matDialog, service, alertService, credentialsService) {
+        this.matDialog = matDialog;
+        this.service = service;
+        this.alertService = alertService;
+        this.credentialsService = credentialsService;
+        this.user = this.credentialsService.credentials?.user;
+    }
+    /**
+     * Delete the product.
+     */
+    delete() {
+        this.isDeleting = true;
+        this.service.delete(this.model).subscribe({
+            next: () => {
+                this.deleted.emit();
+                this.isDeleting = false;
+                this.matDialog.closeAll();
+                this.alertService.addAlert('Location deleted successfully!', 'success');
+            },
+            error: () => (this.isDeleting = false)
+        });
+    }
+    /**
+     * Show delete product dialog.
+     *
+     * @param templateRef
+     */
+    showDeleteDialog(templateRef) {
+        this.matDialog.open(templateRef, { width: '500px' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationDeleteButtonComponent, deps: [{ token: i1$1.MatDialog }, { token: LocationService }, { token: i1.AlertService }, { token: i1.CredentialsService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LocationDeleteButtonComponent, isStandalone: true, selector: "app-location-delete-button", inputs: { model: "model" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<mat-icon\n  *ngIf=\"model?.client_id === user?.client_id\"\n  class=\"cursor-pointer text-dark\"\n  (click)=\"showDeleteDialog(deleteConfirmDialog)\"\n>\n  delete\n</mat-icon>\n\n<ng-template #deleteConfirmDialog>\n  <h3 mat-dialog-title>Delete Location</h3>\n  <div mat-dialog-content>\n    Are you sure? You want to delete the location\n    <strong>{{ model?.title }}</strong> ?\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-raised-button\n      color=\"warn\"\n      (click)=\"delete()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationDeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-location-delete-button', standalone: true, imports: [
+                        MatButton,
+                        MatDialogActions,
+                        MatDialogClose,
+                        MatDialogContent,
+                        MatDialogTitle,
+                        MatIcon,
+                        NgIf
+                    ], template: "<mat-icon\n  *ngIf=\"model?.client_id === user?.client_id\"\n  class=\"cursor-pointer text-dark\"\n  (click)=\"showDeleteDialog(deleteConfirmDialog)\"\n>\n  delete\n</mat-icon>\n\n<ng-template #deleteConfirmDialog>\n  <h3 mat-dialog-title>Delete Location</h3>\n  <div mat-dialog-content>\n    Are you sure? You want to delete the location\n    <strong>{{ model?.title }}</strong> ?\n  </div>\n  <div mat-dialog-actions class=\"d-flex justify-content-end gap-1 mb-2\">\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-raised-button\n      color=\"warn\"\n      (click)=\"delete()\"\n    >\n      Delete\n    </button>\n    <button\n      [disabled]=\"isDeleting\"\n      type=\"button\"\n      mat-flat-button\n      mat-dialog-close\n    >\n      Cancel\n    </button>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: LocationService }, { type: i1.AlertService }, { type: i1.CredentialsService }], propDecorators: { model: [{
+                type: Input
+            }], deleted: [{
+                type: Output
+            }] } });
+
+class LocationListComponent extends TechlifyListingControllerInterface {
+    service;
+    formBuilder;
+    requestHelperService;
+    activatedRoute;
+    displayedColumns = [
+        '#',
+        'Title',
+        'Address',
+        'Description',
+        'Actions',
+    ];
+    constructor(service, formBuilder, requestHelperService, activatedRoute) {
+        super();
+        this.service = service;
+        this.formBuilder = formBuilder;
+        this.requestHelperService = requestHelperService;
+        this.activatedRoute = activatedRoute;
+        this.lastPage = 0;
+        this.filterForm = this.formBuilder.group({
+            search: [''],
+            sort_by: ['id|desc'],
+        });
+    }
+    ngOnInit() {
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {});
+        this.filterForm.valueChanges.pipe(debounceTime(800)).subscribe({
+            next: () => {
+                this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData(this.filterForm.value));
+            }
+        });
+        // listen for route change
+        this.activatedRoute.queryParams
+            .pipe(debounceTime(500), distinctUntilChanged())
+            .subscribe((val) => {
+            this.reload();
+        });
+    }
+    loadData() {
+        if (this.isWorking) {
+            return;
+        }
+        const params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+            page: this.page,
+            perPage: this.perPage,
+        };
+        this.isWorking = true;
+        this.service.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models?.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    onSortChange(sort) {
+        let { active, direction } = sort;
+        if (!active)
+            active = 'id';
+        if (!direction)
+            direction = 'desc';
+        this.filterForm.get('sort_by')?.setValue(active + '|' + direction);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationListComponent, deps: [{ token: LocationService }, { token: i2.FormBuilder }, { token: i1.RequestHelperService }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LocationListComponent, isStandalone: true, selector: "app-location-list", usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3\">\n      <strong>Locations</strong>\n      <app-location-form-button (saved)=\"modelCreated($event)\"></app-location-form-button>\n    </div>\n    <form class=\"d-flex justify-content-end align-items-center gap-2\"\n          [formGroup]=\"filterForm\" (submit)=\"reload()\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search locations\" matInput formControlName=\"search\">\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table\n      #table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n      matSort\n      (matSortChange)=\"onSortChange($event)\"\n    >\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=\"Title\">\n        <th mat-header-cell mat-sort-header=\"title\" *matHeaderCellDef> Title </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Address\">\n        <th mat-header-cell mat-sort-header=\"address\" *matHeaderCellDef> Address </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Description\">\n        <th mat-header-cell *matHeaderCellDef> Description </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.description }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <app-location-form-button\n              [model]=\"element\"\n              (saved)=\"modelUpdated($event, i)\"\n            ></app-location-form-button>\n            <a\n              [routerLink]=\"['/inventory/locations', element?.id, 'view']\"\n              class=\"text-decoration-none text-dark\"\n            >\n              <span class=\"material-symbols-outlined\">visibility</span>\n            </a>\n            <app-location-delete-button\n              [model]=\"element\"\n              (deleted)=\"modelDeleted(i)\"\n            ></app-location-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: 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: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: LocationFormButtonComponent, selector: "app-location-form-button", inputs: ["model"], outputs: ["saved"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LocationDeleteButtonComponent, selector: "app-location-delete-button", inputs: ["model"], outputs: ["deleted"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-location-list', standalone: true, imports: [
+                        MatCard,
+                        MatCardContent,
+                        DatePipe,
+                        FormsModule,
+                        InfiniteScrollDirective,
+                        MatCell,
+                        MatCellDef,
+                        MatColumnDef,
+                        MatFormField,
+                        MatHeaderCell,
+                        MatHeaderRow,
+                        MatHeaderRowDef,
+                        MatInput,
+                        MatLabel,
+                        MatProgressBar,
+                        MatRow,
+                        MatRowDef,
+                        MatSort,
+                        MatSortHeader,
+                        MatTable,
+                        NgIf,
+                        ReactiveFormsModule,
+                        SearchableSelectorModule,
+                        MatHeaderCellDef,
+                        LocationFormButtonComponent,
+                        RouterLink,
+                        LocationDeleteButtonComponent
+                    ], template: "<mat-card>\n  <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n    <div class=\"d-flex justify-content-start align-items-center gap-3\">\n      <strong>Locations</strong>\n      <app-location-form-button (saved)=\"modelCreated($event)\"></app-location-form-button>\n    </div>\n    <form class=\"d-flex justify-content-end align-items-center gap-2\"\n          [formGroup]=\"filterForm\" (submit)=\"reload()\">\n      <mat-form-field>\n        <mat-label>Search</mat-label>\n        <input type=\"text\" placeholder=\"Search locations\" matInput formControlName=\"search\">\n      </mat-form-field>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-3\">\n  <mat-card-content class=\"p-0\">\n    <table\n      #table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n      matSort\n      (matSortChange)=\"onSortChange($event)\"\n    >\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=\"Title\">\n        <th mat-header-cell mat-sort-header=\"title\" *matHeaderCellDef> Title </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.title }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Address\">\n        <th mat-header-cell mat-sort-header=\"address\" *matHeaderCellDef> Address </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.address }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Description\">\n        <th mat-header-cell *matHeaderCellDef> Description </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.description }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <app-location-form-button\n              [model]=\"element\"\n              (saved)=\"modelUpdated($event, i)\"\n            ></app-location-form-button>\n            <a\n              [routerLink]=\"['/inventory/locations', element?.id, 'view']\"\n              class=\"text-decoration-none text-dark\"\n            >\n              <span class=\"material-symbols-outlined\">visibility</span>\n            </a>\n            <app-location-delete-button\n              [model]=\"element\"\n              (deleted)=\"modelDeleted(i)\"\n            ></app-location-delete-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: LocationService }, { type: i2.FormBuilder }, { type: i1.RequestHelperService }, { type: i2$1.ActivatedRoute }] });
+
+class LocationInformationComponent {
+    location;
+    model;
+    constructor(location) {
+        this.location = location;
+    }
+    redirectBack() {
+        this.location.back();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationInformationComponent, deps: [{ token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LocationInformationComponent, isStandalone: true, selector: "app-location-information", inputs: { model: "model" }, ngImport: i0, template: "<mat-card *ngIf=\"model\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center\">\n    <h3 class=\"mb-2 fw-bold\">{{ model?.title }}</h3>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-location-form-button [model]=\"model\" (saved)=\"model = $event\"></app-location-form-button>\n      <app-location-delete-button [model]=\"model\" (deleted)=\"redirectBack()\"></app-location-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider class=\"mx-2\"></mat-divider>\n  <mat-card-content class=\"mt-2 d-flex flex-column justify-content-start gap-2\">\n    <div class=\"d-flex justify-content-start align-items-start flex-wrap\">\n      <strong class=\"w-100 mb-2\">Location Details</strong>\n      <div *ngIf=\"model?.address\" class=\"d-flex flex-column gap-1 justify-content-start w-100 mb-2\">\n        <small class=\"text-secondary\">Address</small>\n        <p class=\"mb-0\">{{ model?.address }}</p>\n      </div>\n      <div *ngIf=\"model?.description\" class=\"d-flex flex-column gap-1 justify-content-start w-100 mb-2\">\n        <small class=\"text-secondary\">Description</small>\n        <p class=\"mb-0\">{{ model?.description }}</p>\n      </div>\n    </div>\n\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LocationFormButtonComponent, selector: "app-location-form-button", inputs: ["model"], outputs: ["saved"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: LocationDeleteButtonComponent, selector: "app-location-delete-button", inputs: ["model"], outputs: ["deleted"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationInformationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-location-information', standalone: true, imports: [
+                        MatCard,
+                        MatCardContent,
+                        NgIf,
+                        LocationFormButtonComponent,
+                        MatDivider,
+                        LocationDeleteButtonComponent
+                    ], template: "<mat-card *ngIf=\"model\">\n  <mat-card-content class=\"d-flex justify-content-between align-items-center\">\n    <h3 class=\"mb-2 fw-bold\">{{ model?.title }}</h3>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <app-location-form-button [model]=\"model\" (saved)=\"model = $event\"></app-location-form-button>\n      <app-location-delete-button [model]=\"model\" (deleted)=\"redirectBack()\"></app-location-delete-button>\n    </div>\n  </mat-card-content>\n  <mat-divider class=\"mx-2\"></mat-divider>\n  <mat-card-content class=\"mt-2 d-flex flex-column justify-content-start gap-2\">\n    <div class=\"d-flex justify-content-start align-items-start flex-wrap\">\n      <strong class=\"w-100 mb-2\">Location Details</strong>\n      <div *ngIf=\"model?.address\" class=\"d-flex flex-column gap-1 justify-content-start w-100 mb-2\">\n        <small class=\"text-secondary\">Address</small>\n        <p class=\"mb-0\">{{ model?.address }}</p>\n      </div>\n      <div *ngIf=\"model?.description\" class=\"d-flex flex-column gap-1 justify-content-start w-100 mb-2\">\n        <small class=\"text-secondary\">Description</small>\n        <p class=\"mb-0\">{{ model?.description }}</p>\n      </div>\n    </div>\n\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: i4.Location }], propDecorators: { model: [{
+                type: Input
+            }] } });
+
+class LocationProductStatisticsComponent extends TechlifyListingControllerInterface {
+    service;
+    formBuilder;
+    requestHelperService;
+    activatedRoute;
+    location;
+    displayedColumns = [
+        '#',
+        'SKU',
+        'Product',
+        'Category',
+        'Quantity',
+        'Actions'
+    ];
+    constructor(service, formBuilder, requestHelperService, activatedRoute) {
+        super();
+        this.service = service;
+        this.formBuilder = formBuilder;
+        this.requestHelperService = requestHelperService;
+        this.activatedRoute = activatedRoute;
+        this.lastPage = 0;
+        this.filterForm = this.formBuilder.group({
+            search: [''],
+            sort_by: ['id|desc'],
+        });
+    }
+    ngOnInit() {
+        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {});
+        this.filterForm.valueChanges.pipe(debounceTime(800)).subscribe({
+            next: () => {
+                this.requestHelperService.updateQueryParams(this.requestHelperService.convertToFormData(this.filterForm.value));
+            }
+        });
+        // listen for route change
+        this.activatedRoute.queryParams
+            .pipe(debounceTime(500), distinctUntilChanged())
+            .subscribe((val) => {
+            this.reload();
+        });
+    }
+    loadData() {
+        if (this.isWorking) {
+            return;
+        }
+        const params = {
+            ...this.requestHelperService.convertToFormData(this.filterForm.value),
+            page: this.page,
+            perPage: this.perPage,
+            with: 'categories',
+        };
+        this.isWorking = true;
+        this.service.productStatistics(this.location, params).subscribe({
+            next: (response) => {
+                this.models = this.models?.concat(response?.data);
+                this.lastPage = response?.last_page;
+                this.isWorking = false;
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    onSortChange(sort) {
+        let { active, direction } = sort;
+        if (!active)
+            active = 'id';
+        if (!direction)
+            direction = 'desc';
+        this.filterForm.get('sort_by')?.setValue(active + '|' + direction);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationProductStatisticsComponent, deps: [{ token: LocationService }, { token: i2.FormBuilder }, { token: i1.RequestHelperService }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LocationProductStatisticsComponent, isStandalone: true, selector: "app-location-product-statistics", inputs: { location: "location" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <h3>Location Products</h3>\n  </mat-card-content>\n  <mat-divider class=\"mt-3\"></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table\n      #table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n      matSort\n      (matSortChange)=\"onSortChange($event)\"\n    >\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=\"SKU\">\n        <th mat-header-cell *matHeaderCellDef> SKU </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.sku }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Product\">\n        <th mat-header-cell *matHeaderCellDef> Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a\n            class=\"text-dark\"\n            [routerLink]=\"['/inventory/products', element.id, 'view']\"\n          >\n            {{ element?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Category\">\n        <th mat-header-cell *matHeaderCellDef> Category </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Quantity\">\n        <th mat-header-cell *matHeaderCellDef> Quantity </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.current_stock }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <app-stock-transfer-form-button\n              *ngIf=\"location?.id\"\n              [productId]=\"element?.id\"\n              (saved)=\"reload()\"\n            ></app-stock-transfer-form-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: ProductModule }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: ProductCategoryBadgesComponent, selector: "app-product-category-badges", inputs: ["product"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: StockTransferFormButtonComponent, selector: "app-stock-transfer-form-button", inputs: ["productId"], outputs: ["saved"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationProductStatisticsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-location-product-statistics', standalone: true, imports: [
+                        MatCard,
+                        MatCardContent,
+                        ProductModule,
+                        MatProgressBar,
+                        NgIf,
+                        MatHeaderCellDef,
+                        MatHeaderCellDef,
+                        MatCellDef,
+                        MatCellDef,
+                        MatHeaderRowDef,
+                        MatRowDef,
+                        MatCell,
+                        MatCell,
+                        MatRow,
+                        MatColumnDef,
+                        MatHeaderCell,
+                        MatTable,
+                        InfiniteScrollDirective,
+                        InfiniteScrollDirective,
+                        InfiniteScrollDirective,
+                        InfiniteScrollDirective,
+                        InfiniteScrollDirective,
+                        MatHeaderRow,
+                        MatSort,
+                        MatSort,
+                        ProductCategoryBadgesComponent,
+                        RouterLink,
+                        StockTransferFormButtonComponent,
+                        MatDivider
+                    ], template: "<mat-card>\n  <mat-card-content>\n    <h3>Location Products</h3>\n  </mat-card-content>\n  <mat-divider class=\"mt-3\"></mat-divider>\n  <mat-card-content class=\"p-0\">\n    <table\n      #table\n      mat-table [dataSource]=\"models\" class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n      matSort\n      (matSortChange)=\"onSortChange($event)\"\n    >\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=\"SKU\">\n        <th mat-header-cell *matHeaderCellDef> SKU </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element?.sku }}</td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Product\">\n        <th mat-header-cell *matHeaderCellDef> Product</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <a\n            class=\"text-dark\"\n            [routerLink]=\"['/inventory/products', element.id, 'view']\"\n          >\n            {{ element?.name }}\n          </a>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Category\">\n        <th mat-header-cell *matHeaderCellDef> Category </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-product-category-badges [product]=\"element\"></app-product-category-badges>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Quantity\">\n        <th mat-header-cell *matHeaderCellDef> Quantity </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.current_stock }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">\n          <div class=\"d-flex justify-content-start align-items-center gap-2\">\n            <app-stock-transfer-form-button\n              *ngIf=\"location?.id\"\n              [productId]=\"element?.id\"\n              (saved)=\"reload()\"\n            ></app-stock-transfer-form-button>\n          </div>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: () => [{ type: LocationService }, { type: i2.FormBuilder }, { type: i1.RequestHelperService }, { type: i2$1.ActivatedRoute }], propDecorators: { location: [{
+                type: Input
+            }] } });
+
+class LocationViewComponent {
+    service;
+    activatedRoute;
+    id;
+    isLoading;
+    model;
+    constructor(service, activatedRoute) {
+        this.service = service;
+        this.activatedRoute = activatedRoute;
+        this.id = parseInt(this.activatedRoute.snapshot.params['id']);
+    }
+    ngOnInit() {
+        if (this.id) {
+            this.loadModel();
+        }
+    }
+    loadModel() {
+        this.isLoading = true;
+        const params = {};
+        this.service.show(this.id, params).subscribe({
+            next: (response) => {
+                this.model = response?.item;
+                this.isLoading = false;
+            },
+            error: () => (this.isLoading = false)
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationViewComponent, deps: [{ token: LocationService }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LocationViewComponent, isStandalone: true, selector: "app-location-view", ngImport: i0, template: "<div *ngIf=\"model\" class=\"d-flex justify-content-start align-items-start flex-wrap gap-3\">\n  <div class=\"d-flex flex-column gap-2\" style=\"width: 400px\">\n    <app-location-information\n      [model]=\"model\"\n    ></app-location-information>\n  </div>\n\n  <app-location-product-statistics\n    style=\"width: calc(100% - 400px - 1rem)\"\n    [location]=\"model\"\n  ></app-location-product-statistics>\n\n</div>\n\n<mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: LocationInformationComponent, selector: "app-location-information", inputs: ["model"] }, { kind: "ngmodule", type: ProductModule }, { kind: "component", type: LocationProductStatisticsComponent, selector: "app-location-product-statistics", inputs: ["location"] }], preserveWhitespaces: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-location-view', standalone: true, imports: [
+                        NgIf,
+                        MatCard,
+                        MatCardContent,
+                        MatProgressBar,
+                        LocationInformationComponent,
+                        ProductModule,
+                        LocationProductStatisticsComponent
+                    ], template: "<div *ngIf=\"model\" class=\"d-flex justify-content-start align-items-start flex-wrap gap-3\">\n  <div class=\"d-flex flex-column gap-2\" style=\"width: 400px\">\n    <app-location-information\n      [model]=\"model\"\n    ></app-location-information>\n  </div>\n\n  <app-location-product-statistics\n    style=\"width: calc(100% - 400px - 1rem)\"\n    [location]=\"model\"\n  ></app-location-product-statistics>\n\n</div>\n\n<mat-progress-bar *ngIf=\"isLoading\" mode=\"indeterminate\"></mat-progress-bar>\n" }]
+        }], ctorParameters: () => [{ type: LocationService }, { type: i2$1.ActivatedRoute }] });
+
+const routes = [
+    {
+        path: '',
+        component: LocationListComponent
+    },
+    {
+        path: ':id/view',
+        component: LocationViewComponent
+    }
+];
+class LocationRoutingModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LocationRoutingModule, imports: [i2$1.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+class LocationModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LocationModule, imports: [CommonModule,
+            LocationRoutingModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationModule, imports: [CommonModule,
+            LocationRoutingModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LocationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        LocationRoutingModule
+                    ]
+                }]
+        }] });
+
+export { LocationModule };
+//# sourceMappingURL=techlify-inventory-common-location.module-Cwx9mHKE.mjs.map