@nettyapps/ntybase 0.0.1 → 0.0.2

package/fesm2022/nettyapps-ntybase.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, inject, NgModule, Inject, signal, input, output, computed, effect, model, ViewContainerRef, ViewChild, Input, ViewEncapsulation, forwardRef, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Injectable, inject, NgModule, Inject, signal, input, output, computed, effect, model, ViewChild, Input, ViewContainerRef, ViewEncapsulation, forwardRef, ChangeDetectionStrategy } from '@angular/core';
 import * as i1$2 from '@angular/common/http';
 import { HttpErrorResponse, HttpResponse, HTTP_INTERCEPTORS, HttpClient, HttpHeaders } from '@angular/common/http';
 import { of, throwError, lastValueFrom, map, catchError as catchError$1, Subject, finalize, take as take$1, takeUntil } from 'rxjs';
@@ -29,6 +29,7 @@ import * as i3$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i3$3 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import * as XLSX from 'xlsx';
 import * as i1$3 from '@angular/forms';
 import { FormBuilder, Validators, FormsModule, ReactiveFormsModule, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$4 from '@angular/material/input';
@@ -481,6 +482,7 @@ class CommonService {
     location = inject(Location);
     datePipe = inject(DatePipe);
     alertService = inject(AlertService);
+    dialog = inject(MatDialog);
     rightSidenavOpen = signal(false, ...(ngDevMode ? [{ debugName: "rightSidenavOpen" }] : []));
     toggleRightSidenav(open) {
         this.rightSidenavOpen.set(open);
@@ -504,6 +506,29 @@ class CommonService {
         return (tree.root.children['primary']?.segments.map((s) => s.path).join('/') ||
             '/');
     }
+    clearOutlet() {
+        const currentUrl = this.router.parseUrl(this.router.url);
+        const primaryOutlet = currentUrl.root.children['primary'];
+        const rightSidenavOutlet = currentUrl.root.children['rightSidenav'];
+        if (rightSidenavOutlet) {
+            this.router.navigate([
+                {
+                    outlets: {
+                        rightSidenav: null,
+                        primary: primaryOutlet ? primaryOutlet.toString() : null,
+                    },
+                },
+            ], {
+                queryParamsHandling: 'preserve',
+                replaceUrl: true,
+            });
+        }
+        this.toggleRightSidenav(false);
+        this.dialog.closeAll();
+    }
+    ngOnDestroy() {
+        this.clearOutlet();
+    }
     /** Merge columns with the given seperator
      *
      * @param columns string array to merge
@@ -927,6 +952,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i2$1.EnvironmentProxy }] });
 
+class ButtonRenderer {
+    params = null;
+    label = '';
+    type = '';
+    toggleValue = null;
+    editValid = false;
+    historyValid = false;
+    lineValid = false;
+    popupSelectValid = false;
+    popupEditValid = false;
+    toggleValid = false;
+    toggle_icon = '';
+    none = false;
+    addValid = false;
+    deleteValid = false;
+    agInit(params) {
+        this.params = params;
+        this.type = this.params.type || null;
+        this.label = this.params.label || null;
+        this.toggleValue = this.params.value || null;
+        switch (this.toggleValue) {
+            case true:
+                this.toggle_icon = 'select_check_box';
+                break;
+            case false:
+                this.toggle_icon = 'check_box_outline_blank';
+                break;
+            default:
+                this.toggle_icon = '';
+                break;
+        }
+        this.resetValids();
+        switch (this.type.toLowerCase().trim()) {
+            case 'edit':
+                this.editValid = true;
+                break;
+            case 'log':
+                this.historyValid = true;
+                break;
+            case 'line':
+                this.lineValid = true;
+                break;
+            case 'popupselect':
+                this.popupSelectValid = true;
+                break;
+            case 'toggle':
+                this.toggleValid = true;
+                break;
+            case 'none':
+                this.none = true;
+                break;
+            case 'add':
+                this.addValid = true;
+                break;
+            case 'delete':
+                this.deleteValid = true;
+                break;
+            default:
+                this.popupEditValid = true;
+                break;
+        }
+    }
+    /** Refresh the display
+     *
+     * @param params
+     * @returns
+     */
+    refresh(params) {
+        return false;
+    }
+    resetValids() {
+        this.editValid = false;
+        this.historyValid = false;
+        this.lineValid = false;
+        this.popupSelectValid = false;
+        this.popupEditValid = false;
+        this.toggleValid = false;
+    }
+    onClick(event) {
+        if (this.params.onClick instanceof Function) {
+            // put anything into params u want pass into parents component
+            const params = {
+                event: event,
+                rowData: this.params.node.data,
+                type: this.type,
+                // ...something
+            };
+            this.params.onClick(params);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ButtonRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: ButtonRenderer, isStandalone: true, selector: "ntybase-button-renderer", ngImport: i0, template: "<mat-icon\n  *ngIf=\"(editValid || popupEditValid)\"\n  class=\"cursor center edit\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"4000\"\n  >edit</mat-icon\n>\n\n<mat-icon\n  *ngIf=\"historyValid\"\n  class=\"cursor center-log\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >log</mat-icon\n>\n\n<mat-icon\n  *ngIf=\"historyValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >history</mat-icon\n>\n<mat-icon\n  *ngIf=\"lineValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n<mat-icon\n  *ngIf=\"popupSelectValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >content_copy</mat-icon\n>\n<mat-icon\n  *ngIf=\"toggleValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >{{toggleValue ? 'check_box' : 'check_box_outline_blank'}}</mat-icon\n>\n<mat-icon\n  *ngIf=\"none\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n<mat-icon\n  *ngIf=\"addValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >playlist_add</mat-icon\n>\n<mat-icon\n  *ngIf=\"deleteValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >delete_outline</mat-icon\n>\n", styles: [".cursor{cursor:pointer}.center{display:flex;justify-content:center;align-items:center;width:100%}.center-log{display:flex;justify-content:center;align-items:center;margin-bottom:-12px}.edit{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ButtonRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ntybase-button-renderer', imports: [MatIconModule, CommonModule, MatTooltipModule, MatMenuModule], template: "<mat-icon\n  *ngIf=\"(editValid || popupEditValid)\"\n  class=\"cursor center edit\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"4000\"\n  >edit</mat-icon\n>\n\n<mat-icon\n  *ngIf=\"historyValid\"\n  class=\"cursor center-log\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >log</mat-icon\n>\n\n<mat-icon\n  *ngIf=\"historyValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >history</mat-icon\n>\n<mat-icon\n  *ngIf=\"lineValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n<mat-icon\n  *ngIf=\"popupSelectValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >content_copy</mat-icon\n>\n<mat-icon\n  *ngIf=\"toggleValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >{{toggleValue ? 'check_box' : 'check_box_outline_blank'}}</mat-icon\n>\n<mat-icon\n  *ngIf=\"none\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n<mat-icon\n  *ngIf=\"addValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >playlist_add</mat-icon\n>\n<mat-icon\n  *ngIf=\"deleteValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >delete_outline</mat-icon\n>\n", styles: [".cursor{cursor:pointer}.center{display:flex;justify-content:center;align-items:center;width:100%}.center-log{display:flex;justify-content:center;align-items:center;margin-bottom:-12px}.edit{margin-top:8px}\n"] }]
+        }] });
+
+class CheckboxRenderer {
+    params = null;
+    label = '';
+    type = '';
+    supportClick = false;
+    checked = null;
+    agInit(params) {
+        this.onProcess(params);
+    }
+    refresh(params) {
+        if (params != null) {
+            this.onProcess(params);
+        }
+        return true;
+    }
+    onProcess(params) {
+        this.params = params;
+        this.checked = this.params.value ?? false;
+        this.type = this.params.type || null;
+        this.label = this.params.label || null;
+        if (this.type != null) {
+            if (this.type.toLowerCase().trim() == 'click') {
+                this.supportClick = true;
+            }
+        }
+    }
+    onClick(event) {
+        this.checked = !this.checked;
+        if (this.params.onClick instanceof Function) {
+            // put anything into params u want pass into parents component
+            const params = {
+                event: event,
+                rowData: this.params.node.data,
+                type: this.type,
+                checked: this.checked,
+                // ...something
+            };
+            this.params.onClick(params);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CheckboxRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CheckboxRenderer, isStandalone: true, selector: "ntybase-checkbox-renderer", ngImport: i0, template: "<input\n  *ngIf=\"supportClick\"\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  (click)=\"onClick($event)\"\n/>\n<input\n  *ngIf=\"!supportClick\"\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"params.value\"\n  disabled\n/>\n<label for=\"checkbox\">{{label}}</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CheckboxRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ntybase-checkbox-renderer', imports: [CommonModule], template: "<input\n  *ngIf=\"supportClick\"\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  (click)=\"onClick($event)\"\n/>\n<input\n  *ngIf=\"!supportClick\"\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"params.value\"\n  disabled\n/>\n<label for=\"checkbox\">{{label}}</label>\n" }]
+        }] });
+
 ModuleRegistry.registerModules([
     AllCommunityModule,
     StatusBarModule,
@@ -950,6 +1121,7 @@ class AgGridBase {
     popupFilterValid = input(false, ...(ngDevMode ? [{ debugName: "popupFilterValid" }] : []));
     popupValid = input(false, ...(ngDevMode ? [{ debugName: "popupValid" }] : []));
     params = input('', ...(ngDevMode ? [{ debugName: "params" }] : []));
+    parameters = input('', ...(ngDevMode ? [{ debugName: "parameters" }] : []));
     // Authentication
     authenticationList = [];
     // User access writes
@@ -1012,8 +1184,8 @@ class AgGridBase {
                 sortable: true,
                 resizable: true,
                 filter: true,
-                minWidth: 120,
-                maxWidth: 120,
+                minWidth: 60,
+                maxWidth: 60,
                 suppressSizeToFit: true,
                 colId: 'editColumn',
                 cellRenderer: 'buttonRenderer',
@@ -1277,32 +1449,6 @@ class AgGridBase {
     backClicked() {
         this.commonService.goBack();
     }
-    async deleteSelected() {
-        if (!this.gridApi)
-            return;
-        const selectedNodes = this.gridApi.getSelectedNodes();
-        if (selectedNodes.length === 0) {
-            await this.alertService.showAlert('@PleaseSelectRowToDelete');
-            return;
-        }
-        const confirmed = await this.alertService.showConfirm('@ConfirmDeleteSelectedRecords');
-        if (confirmed) {
-            const selectedRows = selectedNodes.map((node) => node.data);
-            this.deleteRows(selectedRows);
-        }
-    }
-    async refreshData() {
-        try {
-            const freshData = await this.loadFreshData();
-            if (this.gridApi?.setGridOption) {
-                this.gridApi.setGridOption('rowData', freshData);
-            }
-            await this.alertService.showAlert('@DataRefreshedSuccessfully');
-        }
-        catch (err) {
-            this.alertService.showError(err);
-        }
-    }
     gotoURL(routePrefix, rightSidenav = [], parameters, type, isNewTab = false, embedded = false, dialogComponent) {
         const navigationExtras = {
             queryParams: {
@@ -1333,7 +1479,7 @@ class AgGridBase {
                 .afterClosed()
                 .subscribe((result) => {
                 if (result === 'saved') {
-                    this.refreshData();
+                    this.updateRowInGrid;
                 }
             });
             return;
@@ -1377,6 +1523,10 @@ class AgGridBase {
      *   - The update type doesn't match
      */
     constructor() {
+        this.frameworkComponents = {
+            buttonRenderer: ButtonRenderer,
+            checkboxRenderer: CheckboxRenderer,
+        };
         effect(() => {
             const update = this.commonService.updates();
             if (!update || !this.gridApi)
@@ -1414,6 +1564,21 @@ class AgGridBase {
             this.loadData(); // Reload all data if row not found
         }
     }
+    async deleteSelected() {
+        if (!this.gridApi)
+            return;
+        const selectedNodes = this.gridApi.getSelectedNodes();
+        if (selectedNodes.length === 0) {
+            await this.alertService.showAlert('@PleaseSelectRowToDelete');
+            return;
+        }
+        const confirmed = await this.alertService.showConfirm('@ConfirmDeleteSelectedRecords');
+        if (confirmed) {
+            const selectedRows = selectedNodes.map((node) => node.data);
+            this.deleteRows?.(selectedRows);
+            this.gridApi.applyTransaction({ remove: selectedRows });
+        }
+    }
     /**
      * Delete a row from the grid
      * @param rowData The row to delete
@@ -1421,6 +1586,18 @@ class AgGridBase {
     deleteRowFromGrid(rowData) {
         this.gridApi.applyTransaction({ remove: [rowData] });
     }
+    async refreshData() {
+        try {
+            const freshData = await this.loadFreshData?.();
+            if (this.gridApi?.setGridOption) {
+                this.gridApi.setGridOption('rowData', freshData);
+            }
+            await this.alertService.showAlert('@DataRefreshedSuccessfully');
+        }
+        catch (err) {
+            this.alertService.showError(err);
+        }
+    }
     async setAccessRights() {
         this.authenticationList = await lastValueFrom(this.sysFunctionProxy.getAuthentication(this.componentName())).catch((e) => {
             return throwError(() => new Error(e));
@@ -1458,7 +1635,7 @@ class AgGridBase {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AgGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: AgGridBase, isStandalone: true, selector: "ntybase-ag-grid-base", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, popupFilterValid: { classPropertyName: "popupFilterValid", publicName: "popupFilterValid", isSignal: true, isRequired: false, transformFunction: null }, popupValid: { classPropertyName: "popupValid", publicName: "popupValid", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, filterField: { classPropertyName: "filterField", publicName: "filterField", isSignal: true, isRequired: false, transformFunction: null }, filterFieldValue: { classPropertyName: "filterFieldValue", publicName: "filterFieldValue", isSignal: true, isRequired: false, transformFunction: null }, filterFieldNumeric: { classPropertyName: "filterFieldNumeric", publicName: "filterFieldNumeric", isSignal: true, isRequired: false, transformFunction: null }, filterFieldEquality: { classPropertyName: "filterFieldEquality", publicName: "filterFieldEquality", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedElement: "selectedElement" }, ngImport: i0, template: "<p>ag-grid-base works!</p>\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: AgGridBase, isStandalone: true, selector: "ntybase-ag-grid-base", inputs: { readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, popupFilterValid: { classPropertyName: "popupFilterValid", publicName: "popupFilterValid", isSignal: true, isRequired: false, transformFunction: null }, popupValid: { classPropertyName: "popupValid", publicName: "popupValid", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, parameters: { classPropertyName: "parameters", publicName: "parameters", isSignal: true, isRequired: false, transformFunction: null }, filterField: { classPropertyName: "filterField", publicName: "filterField", isSignal: true, isRequired: false, transformFunction: null }, filterFieldValue: { classPropertyName: "filterFieldValue", publicName: "filterFieldValue", isSignal: true, isRequired: false, transformFunction: null }, filterFieldNumeric: { classPropertyName: "filterFieldNumeric", publicName: "filterFieldNumeric", isSignal: true, isRequired: false, transformFunction: null }, filterFieldEquality: { classPropertyName: "filterFieldEquality", publicName: "filterFieldEquality", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedElement: "selectedElement" }, ngImport: i0, template: "<p>ag-grid-base works!</p>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AgGridBase, decorators: [{
             type: Component,
@@ -1471,10 +1648,12 @@ class AgGridSaveBase {
     route = inject(ActivatedRoute);
     commonService = inject(CommonService);
     alertService = inject(AlertService);
+    parameters = '';
     currentItem = signal({}, ...(ngDevMode ? [{ debugName: "currentItem" }] : []));
     initialItem = {};
     // Form tracking
     formChanged = false;
+    saveForm;
     // Signals
     viewMode = signal('sidenav', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
     // Dialog related properties
@@ -1549,157 +1728,52 @@ class AgGridSaveBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AgGridSaveBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: AgGridSaveBase, isStandalone: true, selector: "ntybase-ag-grid-save-base", inputs: { embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, closeAfterSave: { classPropertyName: "closeAfterSave", publicName: "closeAfterSave", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeAfterSave: "closeAfterSaveChange" }, ngImport: i0, template: "<p>ag-grid-save-base works!</p>\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: AgGridSaveBase, isStandalone: true, selector: "ntybase-ag-grid-save-base", inputs: { parameters: { classPropertyName: "parameters", publicName: "parameters", isSignal: false, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, closeAfterSave: { classPropertyName: "closeAfterSave", publicName: "closeAfterSave", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeAfterSave: "closeAfterSaveChange" }, viewQueries: [{ propertyName: "saveForm", first: true, predicate: ["saveForm"], descendants: true }], ngImport: i0, template: "<p>ag-grid-save-base works!</p>\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AgGridSaveBase, decorators: [{
             type: Component,
             args: [{ selector: 'ntybase-ag-grid-save-base', imports: [], template: "<p>ag-grid-save-base works!</p>\n" }]
-        }] });
-
-class ButtonRenderer {
-    params = null;
-    label = '';
-    type = '';
-    toggleValue = null;
-    editValid = false;
-    historyValid = false;
-    lineValid = false;
-    popupSelectValid = false;
-    popupEditValid = false;
-    toggleValid = false;
-    toggle_icon = '';
-    none = false;
-    addValid = false;
-    deleteValid = false;
-    agInit(params) {
-        this.params = params;
-        this.type = this.params.type || null;
-        this.label = this.params.label || null;
-        this.toggleValue = this.params.value || null;
-        switch (this.toggleValue) {
-            case true:
-                this.toggle_icon = 'select_check_box';
-                break;
-            case false:
-                this.toggle_icon = 'check_box_outline_blank';
-                break;
-            default:
-                this.toggle_icon = '';
-                break;
-        }
-        this.resetValids();
-        switch (this.type.toLowerCase().trim()) {
-            case 'edit':
-                this.editValid = true;
-                break;
-            case 'log':
-                this.historyValid = true;
-                break;
-            case 'line':
-                this.lineValid = true;
-                break;
-            case 'popupselect':
-                this.popupSelectValid = true;
-                break;
-            case 'toggle':
-                this.toggleValid = true;
-                break;
-            case 'none':
-                this.none = true;
-                break;
-            case 'add':
-                this.addValid = true;
-                break;
-            case 'delete':
-                this.deleteValid = true;
-                break;
-            default:
-                this.popupEditValid = true;
-                break;
-        }
-    }
-    /** Refresh the display
-     *
-     * @param params
-     * @returns
-     */
-    refresh(params) {
-        return false;
-    }
-    resetValids() {
-        this.editValid = false;
-        this.historyValid = false;
-        this.lineValid = false;
-        this.popupSelectValid = false;
-        this.popupEditValid = false;
-        this.toggleValid = false;
-    }
-    onClick(event) {
-        if (this.params.onClick instanceof Function) {
-            // put anything into params u want pass into parents component
-            const params = {
-                event: event,
-                rowData: this.params.node.data,
-                type: this.type,
-                // ...something
-            };
-            this.params.onClick(params);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ButtonRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: ButtonRenderer, isStandalone: true, selector: "ntybase-button-renderer", ngImport: i0, template: "<mat-icon\n  *ngIf=\"(editValid || popupEditValid)\"\n  class=\"cursor center edit\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"4000\"\n  >edit</mat-icon\n>\n\n<mat-icon\n  *ngIf=\"historyValid\"\n  class=\"cursor center-log\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >log</mat-icon\n>\n\n<mat-icon\n  *ngIf=\"historyValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >history</mat-icon\n>\n<mat-icon\n  *ngIf=\"lineValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n<mat-icon\n  *ngIf=\"popupSelectValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >content_copy</mat-icon\n>\n<mat-icon\n  *ngIf=\"toggleValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >{{toggleValue ? 'check_box' : 'check_box_outline_blank'}}</mat-icon\n>\n<mat-icon\n  *ngIf=\"none\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n<mat-icon\n  *ngIf=\"addValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >playlist_add</mat-icon\n>\n<mat-icon\n  *ngIf=\"deleteValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >delete_outline</mat-icon\n>\n", styles: [".cursor{cursor:pointer}.center{display:flex;justify-content:center;align-items:center;width:100%}.center-log{display:flex;justify-content:center;align-items:center;margin-bottom:-12px}.edit{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatMenuModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ButtonRenderer, decorators: [{
-            type: Component,
-            args: [{ selector: 'ntybase-button-renderer', imports: [MatIconModule, CommonModule, MatTooltipModule, MatMenuModule], template: "<mat-icon\n  *ngIf=\"(editValid || popupEditValid)\"\n  class=\"cursor center edit\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"4000\"\n  >edit</mat-icon\n>\n\n<mat-icon\n  *ngIf=\"historyValid\"\n  class=\"cursor center-log\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >log</mat-icon\n>\n\n<mat-icon\n  *ngIf=\"historyValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >history</mat-icon\n>\n<mat-icon\n  *ngIf=\"lineValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n<mat-icon\n  *ngIf=\"popupSelectValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >content_copy</mat-icon\n>\n<mat-icon\n  *ngIf=\"toggleValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >{{toggleValue ? 'check_box' : 'check_box_outline_blank'}}</mat-icon\n>\n<mat-icon\n  *ngIf=\"none\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  [matTooltipShowDelay]=\"3000\"\n  >menu_open</mat-icon\n>\n<mat-icon\n  *ngIf=\"addValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >playlist_add</mat-icon\n>\n<mat-icon\n  *ngIf=\"deleteValid\"\n  class=\"cursor center\"\n  matTooltip=\"{{label}}\"\n  (click)=\"onClick($event)\"\n  [matTooltipShowDelay]=\"3000\"\n  >delete_outline</mat-icon\n>\n", styles: [".cursor{cursor:pointer}.center{display:flex;justify-content:center;align-items:center;width:100%}.center-log{display:flex;justify-content:center;align-items:center;margin-bottom:-12px}.edit{margin-top:8px}\n"] }]
-        }] });
+        }], propDecorators: { parameters: [{
+                type: Input
+            }], saveForm: [{
+                type: ViewChild,
+                args: ['saveForm']
+            }] } });
 
-class CheckboxRenderer {
-    params = null;
-    label = '';
-    type = '';
-    supportClick = false;
-    checked = null;
-    agInit(params) {
-        this.onProcess(params);
-    }
-    refresh(params) {
-        if (params != null) {
-            this.onProcess(params);
-        }
-        return true;
-    }
-    onProcess(params) {
-        this.params = params;
-        this.checked = this.params.value ?? false;
-        this.type = this.params.type || null;
-        this.label = this.params.label || null;
-        if (this.type != null) {
-            if (this.type.toLowerCase().trim() == 'click') {
-                this.supportClick = true;
-            }
-        }
-    }
-    onClick(event) {
-        this.checked = !this.checked;
-        if (this.params.onClick instanceof Function) {
-            // put anything into params u want pass into parents component
-            const params = {
-                event: event,
-                rowData: this.params.node.data,
-                type: this.type,
-                checked: this.checked,
-                // ...something
-            };
-            this.params.onClick(params);
-        }
+class ExcelImportBase extends AgGridBase {
+    dataList = [];
+    wopts = { bookType: 'xlsx', type: 'array' };
+    fileName = 'PayrollJournalTrans.xlsx';
+    isDataValidated = false;
+    /*******************************
+     *** EXCEL UPLOAD FUNCTIONS  ***
+     *******************************/
+    onFileChange(evt) {
+        /* wire up file reader */
+        const target = evt.target;
+        if (target.files.length !== 1) {
+            throw new Error('Cannot use multiple files');
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            /* read workbook */
+            const bstr = e.target.result;
+            const wb = XLSX.read(bstr, { type: 'binary' });
+            /* grab first sheet */
+            const wsname = wb.SheetNames[0];
+            const ws = wb.Sheets[wsname];
+            /* save data */
+            this.dataList = XLSX.utils.sheet_to_json(ws, { header: 1 });
+            console.log('dataList:', this.dataList);
+        };
+        reader.readAsBinaryString(target.files[0]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CheckboxRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CheckboxRenderer, isStandalone: true, selector: "ntybase-checkbox-renderer", ngImport: i0, template: "<input\n  *ngIf=\"supportClick\"\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  (click)=\"onClick($event)\"\n/>\n<input\n  *ngIf=\"!supportClick\"\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"params.value\"\n  disabled\n/>\n<label for=\"checkbox\">{{label}}</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ExcelImportBase, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: ExcelImportBase, isStandalone: true, selector: "ntybase-excel-import-base", usesInheritance: true, ngImport: i0, template: "<p>excel-import-base works!</p>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CheckboxRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ExcelImportBase, decorators: [{
             type: Component,
-            args: [{ selector: 'ntybase-checkbox-renderer', imports: [CommonModule], template: "<input\n  *ngIf=\"supportClick\"\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  (click)=\"onClick($event)\"\n/>\n<input\n  *ngIf=\"!supportClick\"\n  id=\"checkbox\"\n  type=\"checkbox\"\n  [checked]=\"params.value\"\n  disabled\n/>\n<label for=\"checkbox\">{{label}}</label>\n" }]
+            args: [{ selector: 'ntybase-excel-import-base', imports: [], template: "<p>excel-import-base works!</p>\n" }]
         }] });
 
 class AuthenticationGuard {
@@ -2939,7 +3013,7 @@ class AutoCompletePopupMenu {
             return;
         // Split the component path into segments
         const pathSegments = this.componentPath.split('/').filter((p) => p);
-        this.GotoNewTab(pathSegments, '', 'new');
+        this.gotoNewTab(pathSegments, '', 'new');
         this.Result.emit('New');
     }
     gotoMain() {
@@ -2947,7 +3021,7 @@ class AutoCompletePopupMenu {
             return;
         // Split the component path into segments
         const pathSegments = this.componentPath.split('/').filter((p) => p);
-        this.GotoNewTab(pathSegments, this.recordGuid, 'edit');
+        this.gotoNewTab(pathSegments, this.recordGuid, 'edit');
         this.Result.emit('Main');
     }
     gotoLookup() {
@@ -2955,7 +3029,7 @@ class AutoCompletePopupMenu {
             this.Result.emit('Lookup');
         }
     }
-    GotoNewTab(target, params, type) {
+    gotoNewTab(target, params, type) {
         if (!target || target.length === 0)
             return;
         // Construct the URL directly in the format you want
@@ -3283,6 +3357,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 args: ['autoCompleteInput']
             }] } });
 
+class Filter {
+    value;
+    text;
+}
+
 /*
  * Public API Surface of ntybase
  */
@@ -3291,5 +3370,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AgGridBase, AgGridSaveBase, AlertService, AuthenticationGuard, AuthenticationInterceptor, AuthenticationService, AutoComplete, ButtonRenderer, CanDeactivateGuard, CheckboxRenderer, ColorPalette, CommonService, ConfirmDialog, CredentialsService, CurrentUserPreference, ForgotPassword, Guid, HttpError403, HttpError404, LeftSidenav, Login, LoginDto, MFACodeDto, MfaLogin, NettyAgGridService, NettyHelper, NettyMenuService, Ntybase, NtybaseModule, SelectionItem, Theme, Toolbar, UrlHelperService };
+export { AgGridBase, AgGridSaveBase, AlertService, AuthenticationGuard, AuthenticationInterceptor, AuthenticationService, AutoComplete, ButtonRenderer, CanDeactivateGuard, CheckboxRenderer, ColorPalette, CommonService, ConfirmDialog, CredentialsService, CurrentUserPreference, ExcelImportBase, Filter, ForgotPassword, Guid, HttpError403, HttpError404, LeftSidenav, Login, LoginDto, MFACodeDto, MfaLogin, NettyAgGridService, NettyHelper, NettyMenuService, Ntybase, NtybaseModule, SelectionItem, Theme, Toolbar, UrlHelperService };
 //# sourceMappingURL=nettyapps-ntybase.mjs.map