techlify-inventory-common 18.0.1 → 18.1.0

package/fesm2022/{techlify-inventory-common-product.module-qdeafFV5.mjs → techlify-inventory-common-product.module-BV9Cy88x.mjs}

@@ -4,13 +4,13 @@ import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { __decorate } from 'tslib';
 import * as i2 from '@angular/forms';
-import { Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { P as ProductService, S as StockSummaryService } from './techlify-inventory-common-techlify-inventory-common-Czyc0jLI.mjs';
+import { P as ProductService, S as StockSummaryService } from './techlify-inventory-common-techlify-inventory-common-GFYF7JCA.mjs';
 import * as i3 from 'ngx-spinner';
 import * as i1$1 from 'ngx-techlify-core';
-import { TechlifyServiceBaseClass, TechlifyFormComponentInterface, TechlifyListingControllerInterface, AuthenticationGuard, MaterialModule, SearchableSelectorModule, TimelineFilterModule, ImportCsvModule } from 'ngx-techlify-core';
+import { TechlifyServiceBaseClass, TechlifyFormComponentInterface, TechlifyListingControllerInterface, AuthenticationGuard, MaterialModule, SearchableSelectorModule, TimelineFilterModule, ImportCsvModule, ColumnSelectorModule } from 'ngx-techlify-core';
 import * as i7 from '@angular/material/button';
 import * as i6 from '@angular/material/form-field';
 import * as i7$1 from '@angular/material/input';
@@ -31,13 +31,13 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import moment from 'moment';
 import { T as TechlifyFormService } from './techlify-inventory-common-techlify-form-service-CiVfwYTS.mjs';
 import * as i9 from '@angular/material/datepicker';
-import { a as StockReceiptFormButtonComponent, S as StockReceiptFormModule } from './techlify-inventory-common-stock-receipt-form.module-BZDrN7la.mjs';
-import { c as StockIssueFormButtonComponent, S as StockIssuancesListComponent, a as StockIssueFormModule, b as StockIssuancesListModule } from './techlify-inventory-common-stock-issuances-list.module-CyFDxARk.mjs';
+import { a as StockReceiptFormButtonComponent, S as StockReceiptFormModule } from './techlify-inventory-common-stock-receipt-form.module-DND0GNlf.mjs';
+import { c as StockIssueFormButtonComponent, S as StockIssuancesListComponent, a as StockIssueFormModule, b as StockIssuancesListModule } from './techlify-inventory-common-stock-issuances-list.module-Dt6gx-ji.mjs';
 import * as i3$2 from '@angular/material/card';
 import * as i2$2 from '@angular/material/tooltip';
 import * as i7$2 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { S as StockReceiptsListPageComponent, a as StockReceiptsModule } from './techlify-inventory-common-stock-receipts.module-CUPdWteR.mjs';
+import { S as StockReceiptsListPageComponent, a as StockReceiptsModule } from './techlify-inventory-common-stock-receipts.module-BvYaKITT.mjs';
 import * as i6$2 from '@angular/material/divider';
 
 const errorMessages$1 = {
@@ -486,33 +486,26 @@ let ProductListComponent = class ProductListComponent {
     products = [];
     dataSource = new MatTableDataSource();
     isLoading = false;
-    columnDefinitions = [
-        { def: "#", isShow: true },
-        { def: "name", isShow: true },
-        { def: "type", isShow: true },
-        { def: "sku", isShow: true },
-        { def: "initial_quantity", isShow: true },
-        { def: "initial_quantity_date", isShow: true },
-        { def: "reorder_point", isShow: true },
-        { def: "sale_price", isShow: true },
-        { def: "income_account", isShow: true },
-        { def: "expense_account", isShow: true },
-        { def: "Actions", isShow: true },
+    columnConfig = [
+        { label: '#', def: '#', isSelected: true, isEditable: true },
+        { label: 'Name', def: 'name', isSelected: true, isEditable: true },
+        { label: 'SKU', def: 'sku', isSelected: true, isEditable: true },
+        { label: 'Categories', def: 'categories', isSelected: true, isEditable: true },
+        { label: 'Initial Quantity', def: 'initial_quantity', isSelected: true, isEditable: true },
+        { label: 'Reorder Point', def: 'reorder_point', isSelected: true, isEditable: true },
+        { label: 'Stock Receipts', def: 'stock_receipts', isSelected: true, isEditable: true },
+        { label: 'Stock Issuances', def: 'stock_issuances', isSelected: true, isEditable: true },
+        { label: 'On Hand', def: 'on_hand', isSelected: true, isEditable: true },
+        { label: 'Sale Price', def: 'sale_price', isSelected: true, isEditable: true },
+        { label: 'Income Account', def: 'income_account', isSelected: false, isEditable: true },
+        { label: 'Expense Account', def: 'expense_account', isSelected: false, isEditable: true },
+        { label: 'Creator', def: 'creator', isSelected: false, isEditable: true },
+        { label: 'Actions', def: 'Actions', isSelected: true, isEditable: true },
     ];
-    displayedColumns = new FormControl([
-        "#",
-        "name",
-        "type",
-        "categories",
-        "sku",
-        "initial_quantity",
-        "initial_quantity_date",
-        "reorder_point",
-        "sale_price",
-        "income_account",
-        "expense_account",
-        "Actions",
-    ]);
+    selectedColumns = this.columnConfig.filter(col => col.isSelected);
+    get displayedColumns() {
+        return this.selectedColumns.map(col => col.def);
+    }
     importId;
     constructor(fb, dialog, activatedRoute, productService, requestHelperService, productFormService) {
         this.fb = fb;
@@ -565,7 +558,7 @@ let ProductListComponent = class ProductListComponent {
         params.page = this.page;
         params.perPage = this.perPage;
         params.num_items = this.num_items + "|" + this.currentPage;
-        params.with = "categories,lastStockReceipt,lastStockIssuance";
+        params.with = "categories,lastStockReceipt,lastStockIssuance,creator";
         if (this.importId) {
             params.import_id = this.importId;
         }
@@ -617,14 +610,14 @@ let ProductListComponent = class ProductListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: i2.FormBuilder }, { token: i1.MatDialog }, { token: i2$1.ActivatedRoute }, { token: ProductService }, { token: i1$1.RequestHelperService }, { token: ProductFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, selector: "app-product-list", ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form\n      [formGroup]=\"filterForm\"\n      class=\"d-flex justify-content-between align-items-center gap-2\"\n    >\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button></app-product-form-button>\n        <mat-icon\n          routerLink=\"import\"\n          class=\"cursor-pointer\"\n          matTooltip=\"Import\"\n        >\n          download\n        </mat-icon>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field style=\"width: 120px\">\n          <input matInput placeholder=\"Product\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-categories\"\n            formControlName=\"category_ids\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Income Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"income_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Expense Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"expense_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n        <mat-form-field>\n          <mat-label>Columns</mat-label>\n          <mat-select [formControl]=\"displayedColumns\" multiple>\n            <mat-option\n              *ngFor=\"let column of columnDefinitions\"\n              [value]=\"column.def\"\n              [disabled]=\"!column.isShow\"\n            >\n              {{ column?.def }}</mat-option\n            >\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n      matSort\n      (matSortChange)=\"sortColumn($event)\"\n      matSortDisableClear=\"true\"\n      aria-describedby=\"Products List\"\n    >\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Name Column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element.name }}</td>\n      </ng-container>\n\n      <!-- Type Column -->\n      <ng-container matColumnDef=\"type\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Type</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element.type?.title }}</td>\n      </ng-container>\n\n      <!-- Categories Column -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Category</th>\n        <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n          <div\n            *ngIf=\"element?.categories?.length > 0\"\n            class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n          >\n            <span\n              class=\"badge badge-primary\"\n              *ngFor=\"let category of element?.categories\"\n            >\n              {{ category?.title }}\n            </span>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n      </ng-container>\n\n      <!-- Initial Quantity Column -->\n      <ng-container matColumnDef=\"initial_quantity\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          Initial Quantity\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.initial_quantity }}\n        </td>\n      </ng-container>\n\n      <!-- Initial Quantity Date Column -->\n      <ng-container matColumnDef=\"initial_quantity_date\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          Initial Quantity Date\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.initial_quantity_date }}\n        </td>\n      </ng-container>\n\n      <!-- Reorder Point Column -->\n      <ng-container matColumnDef=\"reorder_point\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.reorder_point }}\n        </td>\n      </ng-container>\n\n      <!-- Selling Price Column -->\n      <ng-container matColumnDef=\"sale_price\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.sale_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Income Account Column -->\n      <ng-container matColumnDef=\"income_account\">\n        <th mat-header-cell *matHeaderCellDef>Income Account</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.income_account?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Expense Account Column -->\n      <ng-container matColumnDef=\"expense_account\">\n        <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.expense_account?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex gap-1\">\n            <app-product-form-button\n              [product]=\"element\"\n            ></app-product-form-button>\n            <mat-icon\n              class=\"cursor-pointer\"\n              matTooltip=\"View\"\n              [routerLink]=\"[element.id, 'view']\"\n              routerLinkActive=\"route-link-active\"\n            >\n              remove_red_eye\n            </mat-icon>\n\n            <app-stock-receipt-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-issue-form-button>\n          </div>\n        </td>\n      </ng-container>\n      <tr\n        mat-header-row\n        *matHeaderRowDef=\"displayedColumns.value; sticky: true\"\n      ></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns.value\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1$1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "icon"], outputs: ["saved"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }], preserveWhitespaces: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, selector: "app-product-list", ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form\n      [formGroup]=\"filterForm\"\n      class=\"d-flex justify-content-between align-items-center gap-2\"\n    >\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button class=\"mt-2\"></app-product-form-button>\n        <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n          file_save\n        </span>\n        <app-column-selector\n          mode=\"icon\"\n          class=\"mb-2 d-print-none\"\n          [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"\n        ></app-column-selector>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field style=\"width: 120px\">\n          <input matInput placeholder=\"Product\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-categories\"\n            formControlName=\"category_ids\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Income Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"income_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Expense Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"expense_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n      matSort\n      (matSortChange)=\"sortColumn($event)\"\n      matSortDisableClear=\"true\"\n      aria-describedby=\"Products List\"\n    >\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Name Column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\" [routerLink]=\"[element?.id, 'view']\">{{ element.name }}</a>\n            <small class=\"text-secondary\" *ngIf=\"element.type\">{{ element.type?.title }}</small>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n          <div\n            *ngIf=\"element?.categories?.length > 0\"\n            class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n          >\n            <span\n              class=\"badge bg-secondary\"\n              *ngFor=\"let category of element?.categories\"\n            >\n              {{ category?.title }}\n            </span>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n      </ng-container>\n\n      <!-- Initial Quantity Column -->\n      <ng-container matColumnDef=\"initial_quantity\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          Initial Quantity\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">{{ element.initial_quantity }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.initial_quantity_date\">\n            on {{ element?.initial_quantity_date | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Stock Receipts Column -->\n      <ng-container matColumnDef=\"stock_receipts\">\n        <th mat-header-cell mat-sort-header=\"stock_receipts_sum_quantity\" *matHeaderCellDef>\n          Stock Receipts\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">{{ element?.stock_receipts_sum_quantity }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt\">\n            last added on {{ element?.last_stock_receipt?.date | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Stock Issuances Column -->\n      <ng-container matColumnDef=\"stock_issuances\">\n        <th mat-header-cell mat-sort-header=\"stock_issuances_sum_quantity\" *matHeaderCellDef>\n          Stock Issuances\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">{{ element?.stock_issuances_sum_quantity }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.last_stock_issuance\">\n            last issued on {{ element?.last_stock_issuance?.date | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- On Hand Column -->\n      <ng-container matColumnDef=\"on_hand\">\n        <th mat-header-cell mat-sort-header=\"stock_balance\" *matHeaderCellDef>On Hand</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_balance }}\n        </td>\n      </ng-container>\n\n      <!-- Reorder Point Column -->\n      <ng-container matColumnDef=\"reorder_point\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.reorder_point }}\n        </td>\n      </ng-container>\n\n      <!-- Selling Price Column -->\n      <ng-container matColumnDef=\"sale_price\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.sale_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Income Account Column -->\n      <ng-container matColumnDef=\"income_account\">\n        <th mat-header-cell *matHeaderCellDef>Income Account</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.income_account?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Expense Account Column -->\n      <ng-container matColumnDef=\"expense_account\">\n        <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.expense_account?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex gap-1\">\n            <app-product-form-button\n              [product]=\"element\"\n            ></app-product-form-button>\n            <mat-icon\n              class=\"cursor-pointer\"\n              matTooltip=\"View\"\n              [routerLink]=\"[element.id, 'view']\"\n              routerLinkActive=\"route-link-active\"\n            >\n              remove_red_eye\n            </mat-icon>\n\n            <app-stock-receipt-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-issue-form-button>\n          </div>\n        </td>\n      </ng-container>\n      <tr\n        mat-header-row\n        *matHeaderRowDef=\"displayedColumns; sticky: true\"\n      ></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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1$1.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: StockReceiptFormButtonComponent, selector: "app-stock-receipt-form-button", inputs: ["product", "stockReceipt", "icon"], outputs: ["saved"] }, { kind: "component", type: StockIssueFormButtonComponent, selector: "app-stock-issue-form-button", inputs: ["product", "stockIssuance", "icon", "issuableType", "issuableId"], outputs: ["saved"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$1.ColumnSelectorComponent, selector: "app-column-selector", inputs: ["label", "mode", "columnConfigs", "selectedColumns"], outputs: ["selectedColumnsChange", "displayedColumnsChange"] }, { kind: "component", type: ProductFormButtonComponent, selector: "app-product-form-button", inputs: ["product"], outputs: ["saved"] }, { kind: "pipe", type: i4.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i4.DatePipe, name: "date" }], preserveWhitespaces: true });
 };
 ProductListComponent = __decorate([
     UntilDestroy()
 ], ProductListComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-product-list", template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form\n      [formGroup]=\"filterForm\"\n      class=\"d-flex justify-content-between align-items-center gap-2\"\n    >\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button></app-product-form-button>\n        <mat-icon\n          routerLink=\"import\"\n          class=\"cursor-pointer\"\n          matTooltip=\"Import\"\n        >\n          download\n        </mat-icon>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field style=\"width: 120px\">\n          <input matInput placeholder=\"Product\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-categories\"\n            formControlName=\"category_ids\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Income Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"income_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Expense Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"expense_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n        <mat-form-field>\n          <mat-label>Columns</mat-label>\n          <mat-select [formControl]=\"displayedColumns\" multiple>\n            <mat-option\n              *ngFor=\"let column of columnDefinitions\"\n              [value]=\"column.def\"\n              [disabled]=\"!column.isShow\"\n            >\n              {{ column?.def }}</mat-option\n            >\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n      matSort\n      (matSortChange)=\"sortColumn($event)\"\n      matSortDisableClear=\"true\"\n      aria-describedby=\"Products List\"\n    >\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Name Column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element.name }}</td>\n      </ng-container>\n\n      <!-- Type Column -->\n      <ng-container matColumnDef=\"type\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Type</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element.type?.title }}</td>\n      </ng-container>\n\n      <!-- Categories Column -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Category</th>\n        <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n          <div\n            *ngIf=\"element?.categories?.length > 0\"\n            class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n          >\n            <span\n              class=\"badge badge-primary\"\n              *ngFor=\"let category of element?.categories\"\n            >\n              {{ category?.title }}\n            </span>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n      </ng-container>\n\n      <!-- Initial Quantity Column -->\n      <ng-container matColumnDef=\"initial_quantity\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          Initial Quantity\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.initial_quantity }}\n        </td>\n      </ng-container>\n\n      <!-- Initial Quantity Date Column -->\n      <ng-container matColumnDef=\"initial_quantity_date\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          Initial Quantity Date\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.initial_quantity_date }}\n        </td>\n      </ng-container>\n\n      <!-- Reorder Point Column -->\n      <ng-container matColumnDef=\"reorder_point\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.reorder_point }}\n        </td>\n      </ng-container>\n\n      <!-- Selling Price Column -->\n      <ng-container matColumnDef=\"sale_price\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.sale_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Income Account Column -->\n      <ng-container matColumnDef=\"income_account\">\n        <th mat-header-cell *matHeaderCellDef>Income Account</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.income_account?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Expense Account Column -->\n      <ng-container matColumnDef=\"expense_account\">\n        <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.expense_account?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex gap-1\">\n            <app-product-form-button\n              [product]=\"element\"\n            ></app-product-form-button>\n            <mat-icon\n              class=\"cursor-pointer\"\n              matTooltip=\"View\"\n              [routerLink]=\"[element.id, 'view']\"\n              routerLinkActive=\"route-link-active\"\n            >\n              remove_red_eye\n            </mat-icon>\n\n            <app-stock-receipt-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-issue-form-button>\n          </div>\n        </td>\n      </ng-container>\n      <tr\n        mat-header-row\n        *matHeaderRowDef=\"displayedColumns.value; sticky: true\"\n      ></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns.value\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isLoading\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n" }]
+            args: [{ selector: "app-product-list", template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <form\n      [formGroup]=\"filterForm\"\n      class=\"d-flex justify-content-between align-items-center gap-2\"\n    >\n      <div class=\"d-flex justify-content-center align-items-center gap-2\">\n        <h3 class=\"mb-0\">Products</h3>\n        <app-product-form-button class=\"mt-2\"></app-product-form-button>\n        <span matTooltip=\"Import\" routerLink=\"import\" class=\"cursor-pointer mt-1 material-symbols-outlined\">\n          file_save\n        </span>\n        <app-column-selector\n          mode=\"icon\"\n          class=\"mb-2 d-print-none\"\n          [columnConfigs]=\"columnConfig\"\n          [(selectedColumns)]=\"selectedColumns\"\n        ></app-column-selector>\n      </div>\n\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <mat-form-field style=\"width: 120px\">\n          <input matInput placeholder=\"Product\" formControlName=\"search\" />\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\n          <mat-label>Category</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-categories\"\n            formControlName=\"category_ids\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n\n        <mat-form-field style=\"width: 120px\">\n          <mat-label>Type</mat-label>\n          <app-searchable-selector\n            apiUrl=\"api/product-types\"\n            formControlName=\"type_ids\"\n            titleField=\"title\"\n            [multiple]=\"true\"\n          >\n          </app-searchable-selector>\n        </mat-form-field>\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Income Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"income_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n        <!--        <mat-form-field style=\"width: 150px\">-->\n        <!--          <mat-label>Expense Account</mat-label>-->\n        <!--          <app-searchable-selector-->\n        <!--            apiUrl=\"api/accounts\"-->\n        <!--            formControlName=\"expense_account_ids\"-->\n        <!--            titleField=\"title\"-->\n        <!--            [multiple]=\"true\"-->\n        <!--          >-->\n        <!--          </app-searchable-selector>-->\n        <!--        </mat-form-field>-->\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card>\n  <mat-card-content class=\"p-0\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      class=\"w-100\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n      matSort\n      (matSortChange)=\"sortColumn($event)\"\n      matSortDisableClear=\"true\"\n      aria-describedby=\"Products List\"\n    >\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef>#</th>\n        <td mat-cell *matCellDef=\"let element; let i = index\">{{ i + 1 }}</td>\n      </ng-container>\n\n      <!-- Name Column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Name</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"d-flex flex-column gap-1\">\n            <a class=\"text-decoration-none text-dark\" [routerLink]=\"[element?.id, 'view']\">{{ element.name }}</a>\n            <small class=\"text-secondary\" *ngIf=\"element.type\">{{ element.type?.title }}</small>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Categories Column -->\n      <ng-container matColumnDef=\"categories\">\n        <th mat-header-cell *matHeaderCellDef>Categories</th>\n        <td mat-cell *matCellDef=\"let element\" style=\"max-width: 200px\">\n          <div\n            *ngIf=\"element?.categories?.length > 0\"\n            class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\"\n          >\n            <span\n              class=\"badge bg-secondary\"\n              *ngFor=\"let category of element?.categories\"\n            >\n              {{ category?.title }}\n            </span>\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- SKU Column -->\n      <ng-container matColumnDef=\"sku\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>SKU</th>\n        <td mat-cell *matCellDef=\"let element\">{{ element.sku }}</td>\n      </ng-container>\n\n      <!-- Initial Quantity Column -->\n      <ng-container matColumnDef=\"initial_quantity\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          Initial Quantity\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">{{ element.initial_quantity }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.initial_quantity_date\">\n            on {{ element?.initial_quantity_date | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Stock Receipts Column -->\n      <ng-container matColumnDef=\"stock_receipts\">\n        <th mat-header-cell mat-sort-header=\"stock_receipts_sum_quantity\" *matHeaderCellDef>\n          Stock Receipts\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">{{ element?.stock_receipts_sum_quantity }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.last_stock_receipt\">\n            last added on {{ element?.last_stock_receipt?.date | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- Stock Issuances Column -->\n      <ng-container matColumnDef=\"stock_issuances\">\n        <th mat-header-cell mat-sort-header=\"stock_issuances_sum_quantity\" *matHeaderCellDef>\n          Stock Issuances\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">{{ element?.stock_issuances_sum_quantity }}</p>\n          <small class=\"text-secondary\" *ngIf=\"element?.last_stock_issuance\">\n            last issued on {{ element?.last_stock_issuance?.date | date }}\n          </small>\n        </td>\n      </ng-container>\n\n      <!-- On Hand Column -->\n      <ng-container matColumnDef=\"on_hand\">\n        <th mat-header-cell mat-sort-header=\"stock_balance\" *matHeaderCellDef>On Hand</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.stock_balance }}\n        </td>\n      </ng-container>\n\n      <!-- Reorder Point Column -->\n      <ng-container matColumnDef=\"reorder_point\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Reorder Point</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.reorder_point }}\n        </td>\n      </ng-container>\n\n      <!-- Selling Price Column -->\n      <ng-container matColumnDef=\"sale_price\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>Selling Price</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element.sale_price | currency }}\n        </td>\n      </ng-container>\n\n      <!-- Income Account Column -->\n      <ng-container matColumnDef=\"income_account\">\n        <th mat-header-cell *matHeaderCellDef>Income Account</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.income_account?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Expense Account Column -->\n      <ng-container matColumnDef=\"expense_account\">\n        <th mat-header-cell *matHeaderCellDef>Expense Account</th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.expense_account?.title }}\n        </td>\n      </ng-container>\n\n      <!-- Creator Column -->\n      <ng-container matColumnDef=\"creator\">\n        <th mat-header-cell *matHeaderCellDef>Creator</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n          <small class=\"text-secondary\">{{ element?.created_at | date }}</small>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef>Actions</th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div class=\"text-secondary d-flex gap-1\">\n            <app-product-form-button\n              [product]=\"element\"\n            ></app-product-form-button>\n            <mat-icon\n              class=\"cursor-pointer\"\n              matTooltip=\"View\"\n              [routerLink]=\"[element.id, 'view']\"\n              routerLinkActive=\"route-link-active\"\n            >\n              remove_red_eye\n            </mat-icon>\n\n            <app-stock-receipt-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-receipt-form-button>\n\n            <app-stock-issue-form-button\n              [product]=\"element\"\n              (saved)=\"reload()\"\n            ></app-stock-issue-form-button>\n          </div>\n        </td>\n      </ng-container>\n      <tr\n        mat-header-row\n        *matHeaderRowDef=\"displayedColumns; sticky: true\"\n      ></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: i2.FormBuilder }, { type: i1.MatDialog }, { type: i2$1.ActivatedRoute }, { type: ProductService }, { type: i1$1.RequestHelperService }, { type: ProductFormService }] });
 
 class ProductNavBarComponent {
@@ -1107,7 +1100,8 @@ class ProductModule {
             InfiniteScrollModule,
             FlexModule,
             ReactiveFormsModule,
-            FormsModule], exports: [ProductFormComponent,
+            FormsModule,
+            ColumnSelectorModule], exports: [ProductFormComponent,
             ProductBasicInfoComponent,
             ProductFormButtonComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductModule, imports: [CommonModule,
@@ -1125,7 +1119,8 @@ class ProductModule {
             InfiniteScrollModule,
             FlexModule,
             ReactiveFormsModule,
-            FormsModule] });
+            FormsModule,
+            ColumnSelectorModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductModule, decorators: [{
             type: NgModule,
@@ -1159,6 +1154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FlexModule,
                         ReactiveFormsModule,
                         FormsModule,
+                        ColumnSelectorModule,
                     ],
                     exports: [
                         ProductFormComponent,
@@ -1169,4 +1165,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 export { ProductModule };
-//# sourceMappingURL=techlify-inventory-common-product.module-qdeafFV5.mjs.map
+//# sourceMappingURL=techlify-inventory-common-product.module-BV9Cy88x.mjs.map