verben-ng-ui 1.3.2 → 1.3.4

package/fesm2022/verben-ng-ui-src-lib-components-data-columns.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"verben-ng-ui-src-lib-components-data-columns.mjs","sources":["../../../projects/verben-ng-ui/src/lib/components/data-columns/data-columns.component.ts","../../../projects/verben-ng-ui/src/lib/components/data-columns/data-columns.component.html","../../../projects/verben-ng-ui/src/lib/components/data-columns/data-columns.module.ts","../../../projects/verben-ng-ui/src/lib/components/data-columns/data-columns.service.ts","../../../projects/verben-ng-ui/src/lib/components/data-columns/verben-ng-ui-src-lib-components-data-columns.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { ColumnDefinition } from 'verben-ng-ui/src/lib/components/data-table';\n\n@Component({\n  selector: 'lib-data-columns',\n  templateUrl: './data-columns.component.html',\n  styleUrl: './data-columns.component.css',\n})\nexport class DataColumnsComponent<T> implements OnInit {\n  @Input() columns!: ColumnDefinition<T>[];\n  @Input() enableDragAndDrop: boolean = true;\n  @Input() maxVisibleItems: number = 5;\n  @Output() columnsUpdated = new EventEmitter<ColumnDefinition<T>[]>();\n\n  visibleColumns: ColumnDefinition<T>[] = [];\n  showAllColumns = false;\n  draggedIndex: number | null = null;\n  selectAll: boolean = false;\n  columnVisibility: Map<string, boolean> = new Map();\n\n  ngOnInit() {\n    this.initializeColumns();\n  }\n\n  private initializeColumns() {\n    this.visibleColumns = [...this.columns];\n    // Initialize visibility map with current column states\n    this.visibleColumns.forEach((column) => {\n      this.columnVisibility.set(column.id, true);\n    });\n    this.updateSelectAllStatus();\n  }\n\n  get columnsToShow() {\n    return this.showAllColumns\n      ? this.visibleColumns\n      : this.visibleColumns.slice(0, this.maxVisibleItems);\n  }\n\n  // Drag and Drop functionality\n  onDragStart(index: number, event: DragEvent) {\n    if (!this.enableDragAndDrop) return;\n    this.draggedIndex = index;\n    event.dataTransfer?.setData('text/plain', String(index));\n  }\n\n  onDragOver(event: DragEvent) {\n    if (!this.enableDragAndDrop) return;\n    event.preventDefault();\n  }\n\n  onDrop(index: number, event: DragEvent) {\n    if (!this.enableDragAndDrop) return;\n    event.preventDefault();\n    if (this.draggedIndex !== null && this.draggedIndex !== index) {\n      this.swapColumns(this.draggedIndex, index);\n    }\n    this.draggedIndex = null;\n  }\n\n  private swapColumns(fromIndex: number, toIndex: number) {\n    const temp = this.visibleColumns[fromIndex];\n    this.visibleColumns[fromIndex] = this.visibleColumns[toIndex];\n    this.visibleColumns[toIndex] = temp;\n    this.emitUpdatedColumns();\n  }\n\n  // Column Selection functionality\n  toggleSelectAll() {\n    this.selectAll = !this.selectAll;\n    const newValue = this.selectAll;\n    this.visibleColumns.forEach((column) => {\n      this.columnVisibility.set(column.id, newValue);\n    });\n    this.emitUpdatedColumns();\n  }\n\n  toggleColumnVisibility(columnId: string) {\n    const currentValue = this.columnVisibility.get(columnId);\n    this.columnVisibility.set(columnId, !currentValue);\n    this.updateSelectAllStatus();\n    this.emitUpdatedColumns();\n  }\n\n  isColumnVisible(columnId: string): boolean {\n    return this.columnVisibility.get(columnId) ?? false;\n  }\n\n  private updateSelectAllStatus() {\n    this.selectAll = Array.from(this.columnVisibility.values()).every(\n      (value) => value\n    );\n  }\n\n  getColumnHeader(column: ColumnDefinition<T>): string {\n    return typeof column.header === 'function'\n      ? column.header({})\n      : column.header;\n  }\n\n  resetColumns() {\n    this.initializeColumns();\n    this.emitUpdatedColumns();\n  }\n\n  emitUpdatedColumns() {\n    const updatedColumns = this.visibleColumns.filter((column) =>\n      this.columnVisibility.get(column.id)\n    );\n    this.columnsUpdated.emit(updatedColumns);\n  }\n\n  get activeColumnCount(): number {\n    return Array.from(this.columnVisibility.values()).filter((value) => value)\n      .length;\n  }\n}\n","<verben-card width=\"24rem\" borderRadius=\"1rem\" [border]=\"'1px solid var(--vbn-color-primary)'\" bgColor=\"var(--vbn-color-surface)\">\n    <div card-header class=\"card-header\">\n      <h4 class=\"header-title\">Column <sup>({{ activeColumnCount }})</sup></h4>\n      <button class=\"reset-button\" (click)=\"resetColumns()\">Reset</button>\n    </div>\n  \n    <div card-body class=\"card-body\">\n      <!-- Column Options -->\n      <section class=\"section\">\n        <div class=\"section-header\">\n          <h3 class=\"section-title\">Properties</h3>\n          <verben-svg icon=\"info\" [width]=\"15\" [height]=\"15\" fill=\"var(--vbn-color-text-muted)\"></verben-svg>\n        </div>\n  \n        <!-- Select All -->\n        <div class=\"select-all-wrapper\">\n          <label class=\"select-all\">\n            <input \n              type=\"checkbox\" \n              [checked]=\"selectAll\"\n              (change)=\"toggleSelectAll()\"\n            />\n            <span>Select All</span>\n          </label>\n        </div>\n  \n        @for (column of columnsToShow; track column.id) {\n          <div \n            class=\"column-option\"\n            [attr.draggable]=\"enableDragAndDrop\"\n            (dragstart)=\"onDragStart($index, $event)\"\n            (dragover)=\"onDragOver($event)\"\n            (drop)=\"onDrop($index, $event)\"\n          >\n            <div class=\"column-option-content\">\n              @if (enableDragAndDrop) {\n                <verben-svg\n                  icon=\"square-dot\"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  fill=\"var(--vbn-color-text)\"\n                  class=\"drag-handle\"\n                ></verben-svg>\n              }\n              <input \n                type=\"checkbox\" \n                [checked]=\"isColumnVisible(column.id)\"\n                (change)=\"toggleColumnVisibility(column.id)\"\n              />\n              <span>{{ getColumnHeader(column) }}</span>\n            </div>\n          </div>\n        }\n  \n        @if (visibleColumns.length > maxVisibleItems) {\n          <button\n          (click)=\"showAllColumns = !showAllColumns\"\n          class=\"show-more\"\n        >\n          <span>{{ showAllColumns ? \"Show Less\" : \"Show More\" }}</span>\n          <verben-svg\n            icon=\"chevron\"\n            [width]=\"8\"\n            [height]=\"6\"\n            fill=\"var(--vbn-color-text)\"\n            stroke=\"var(--vbn-color-text)\"\n          ></verben-svg>\n        </button>\n        }\n      </section>\n    </div>\n  \n    <div card-footer class=\"card-footer\">\n      <button class=\"save-button\" (click)=\"emitUpdatedColumns()\">Save</button>\n    </div>\n  </verben-card>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DataColumnsComponent } from './data-columns.component';\nimport { SvgModule } from 'verben-ng-ui/src/lib/components/svg';\nimport { CardModule } from 'verben-ng-ui/src/lib/components/card';\nimport { DropDownModule } from 'verben-ng-ui/src/lib/components/drop-down';\nimport { TooltipModule } from 'verben-ng-ui/src/lib/components/tooltip';\n\n@NgModule({\n  declarations: [DataColumnsComponent],\n  imports: [CommonModule, SvgModule, CardModule, DropDownModule, TooltipModule],\n  exports: [DataColumnsComponent],\n})\nexport class DataColumnsModule {}\n","import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class DataColumnsService {\n\n  constructor() { }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"verben-ng-ui-src-lib-components-data-columns.mjs","sources":["../../../projects/verben-ng-ui/src/lib/components/data-columns/data-columns.component.ts","../../../projects/verben-ng-ui/src/lib/components/data-columns/data-columns.component.html","../../../projects/verben-ng-ui/src/lib/components/data-columns/data-columns.module.ts","../../../projects/verben-ng-ui/src/lib/components/data-columns/data-columns.service.ts","../../../projects/verben-ng-ui/src/lib/components/data-columns/verben-ng-ui-src-lib-components-data-columns.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { ColumnDefinition } from 'verben-ng-ui/src/lib/components/data-table';\n\n@Component({\n  selector: 'lib-data-columns',\n  templateUrl: './data-columns.component.html',\n  styleUrl: './data-columns.component.css',\n})\nexport class DataColumnsComponent<T> implements OnInit {\n  @Input() columns!: ColumnDefinition<T>[];\n  @Input() enableDragAndDrop: boolean = true;\n  @Input() maxVisibleItems: number = 5;\n  @Output() columnsUpdated = new EventEmitter<ColumnDefinition<T>[]>();\n\n  visibleColumns: ColumnDefinition<T>[] = [];\n  showAllColumns = false;\n  draggedIndex: number | null = null;\n  selectAll: boolean = false;\n  columnVisibility: Map<string, boolean> = new Map();\n\n  ngOnInit() {\n    this.initializeColumns();\n  }\n\n  private initializeColumns() {\n    this.visibleColumns = [...this.columns];\n    // Initialize visibility map with current column states\n    this.visibleColumns.forEach((column) => {\n      this.columnVisibility.set(column.id, true);\n    });\n    this.updateSelectAllStatus();\n  }\n\n  get columnsToShow() {\n    return this.showAllColumns\n      ? this.visibleColumns\n      : this.visibleColumns.slice(0, this.maxVisibleItems);\n  }\n\n  // Drag and Drop functionality\n  onDragStart(index: number, event: DragEvent) {\n    if (!this.enableDragAndDrop) return;\n    this.draggedIndex = index;\n    event.dataTransfer?.setData('text/plain', String(index));\n  }\n\n  onDragOver(event: DragEvent) {\n    if (!this.enableDragAndDrop) return;\n    event.preventDefault();\n  }\n\n  onDrop(index: number, event: DragEvent) {\n    if (!this.enableDragAndDrop) return;\n    event.preventDefault();\n    if (this.draggedIndex !== null && this.draggedIndex !== index) {\n      this.swapColumns(this.draggedIndex, index);\n    }\n    this.draggedIndex = null;\n  }\n\n  private swapColumns(fromIndex: number, toIndex: number) {\n    const temp = this.visibleColumns[fromIndex];\n    this.visibleColumns[fromIndex] = this.visibleColumns[toIndex];\n    this.visibleColumns[toIndex] = temp;\n    // Staged only — applied/emitted when the user clicks Save (see template).\n  }\n\n  // Column Selection functionality\n  toggleSelectAll() {\n    this.selectAll = !this.selectAll;\n    const newValue = this.selectAll;\n    this.visibleColumns.forEach((column) => {\n      this.columnVisibility.set(column.id, newValue);\n    });\n    // Staged only — applied/emitted when the user clicks Save (see template).\n  }\n\n  toggleColumnVisibility(columnId: string) {\n    const currentValue = this.columnVisibility.get(columnId);\n    this.columnVisibility.set(columnId, !currentValue);\n    this.updateSelectAllStatus();\n    // Staged only — applied/emitted when the user clicks Save (see template).\n  }\n\n  isColumnVisible(columnId: string): boolean {\n    return this.columnVisibility.get(columnId) ?? false;\n  }\n\n  private updateSelectAllStatus() {\n    this.selectAll = Array.from(this.columnVisibility.values()).every(\n      (value) => value\n    );\n  }\n\n  getColumnHeader(column: ColumnDefinition<T>): string {\n    return typeof column.header === 'function'\n      ? column.header({})\n      : column.header;\n  }\n\n  resetColumns() {\n    this.initializeColumns();\n    this.emitUpdatedColumns();\n  }\n\n  emitUpdatedColumns() {\n    const updatedColumns = this.visibleColumns.filter((column) =>\n      this.columnVisibility.get(column.id)\n    );\n    this.columnsUpdated.emit(updatedColumns);\n  }\n\n  get activeColumnCount(): number {\n    return Array.from(this.columnVisibility.values()).filter((value) => value)\n      .length;\n  }\n}\n","<verben-card width=\"24rem\" borderRadius=\"1rem\" [border]=\"'1px solid var(--vbn-color-primary)'\" bgColor=\"var(--vbn-color-surface)\">\n    <div card-header class=\"card-header\">\n      <h4 class=\"header-title\">Column <sup>({{ activeColumnCount }})</sup></h4>\n      <button class=\"reset-button\" (click)=\"resetColumns()\">Reset</button>\n    </div>\n  \n    <div card-body class=\"card-body\">\n      <!-- Column Options -->\n      <section class=\"section\">\n        <div class=\"section-header\">\n          <h3 class=\"section-title\">Properties</h3>\n          <verben-svg icon=\"info\" [width]=\"15\" [height]=\"15\" fill=\"var(--vbn-color-text-muted)\"></verben-svg>\n        </div>\n  \n        <!-- Select All -->\n        <div class=\"select-all-wrapper\">\n          <label class=\"select-all\">\n            <input \n              type=\"checkbox\" \n              [checked]=\"selectAll\"\n              (change)=\"toggleSelectAll()\"\n            />\n            <span>Select All</span>\n          </label>\n        </div>\n  \n        @for (column of columnsToShow; track column.id) {\n          <div \n            class=\"column-option\"\n            [attr.draggable]=\"enableDragAndDrop\"\n            (dragstart)=\"onDragStart($index, $event)\"\n            (dragover)=\"onDragOver($event)\"\n            (drop)=\"onDrop($index, $event)\"\n          >\n            <div class=\"column-option-content\">\n              @if (enableDragAndDrop) {\n                <verben-svg\n                  icon=\"square-dot\"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  fill=\"var(--vbn-color-text)\"\n                  class=\"drag-handle\"\n                ></verben-svg>\n              }\n              <input \n                type=\"checkbox\" \n                [checked]=\"isColumnVisible(column.id)\"\n                (change)=\"toggleColumnVisibility(column.id)\"\n              />\n              <span>{{ getColumnHeader(column) }}</span>\n            </div>\n          </div>\n        }\n  \n        @if (visibleColumns.length > maxVisibleItems) {\n          <button\n          (click)=\"showAllColumns = !showAllColumns\"\n          class=\"show-more\"\n        >\n          <span>{{ showAllColumns ? \"Show Less\" : \"Show More\" }}</span>\n          <verben-svg\n            icon=\"chevron\"\n            [width]=\"8\"\n            [height]=\"6\"\n            fill=\"var(--vbn-color-text)\"\n            stroke=\"var(--vbn-color-text)\"\n          ></verben-svg>\n        </button>\n        }\n      </section>\n    </div>\n  \n    <div card-footer class=\"card-footer\">\n      <button class=\"save-button\" (click)=\"emitUpdatedColumns()\">Save</button>\n    </div>\n  </verben-card>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DataColumnsComponent } from './data-columns.component';\nimport { SvgModule } from 'verben-ng-ui/src/lib/components/svg';\nimport { CardModule } from 'verben-ng-ui/src/lib/components/card';\nimport { DropDownModule } from 'verben-ng-ui/src/lib/components/drop-down';\nimport { TooltipModule } from 'verben-ng-ui/src/lib/components/tooltip';\n\n@NgModule({\n  declarations: [DataColumnsComponent],\n  imports: [CommonModule, SvgModule, CardModule, DropDownModule, TooltipModule],\n  exports: [DataColumnsComponent],\n})\nexport class DataColumnsModule {}\n","import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class DataColumnsService {\n\n  constructor() { }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/verben-ng-ui-src-lib-components-data-import.mjs

@@ -20,6 +20,29 @@ import { VerbenaInputModule } from 'verben-ng-ui/src/lib/verbena-input';
 class DataImportService {
     importedData = signal([]);
     constructor() { }
+    /**
+     * A value carries no information if it is nullish, an empty/whitespace string,
+     * an invalid date, or a collection whose every member is itself blank.
+     * Numbers (including 0) and booleans (including false) are never blank.
+     */
+    isBlankValue(value) {
+        if (value === null || value === undefined)
+            return true;
+        if (typeof value === 'string')
+            return value.trim() === '';
+        if (value instanceof Date)
+            return Number.isNaN(value.getTime());
+        if (Array.isArray(value))
+            return value.every((v) => this.isBlankValue(v));
+        if (typeof value === 'object') {
+            return Object.values(value).every((v) => this.isBlankValue(v));
+        }
+        return false;
+    }
+    isBlankRow(row) {
+        const values = Object.values(row);
+        return values.length === 0 || values.every((v) => this.isBlankValue(v));
+    }
     // Function to transform imported data to match your model structure
     transformImportData(importedData, columnDefinitions) {
         // Create mappings from header to importKey and importBy
@@ -39,8 +62,12 @@ class DataImportService {
                 headerToImportByMap.set(header, col.importBy);
             }
         });
-        // Transform each row in the imported data
-        return importedData.map((row) => {
+        // Transform each row in the imported data. Rows the sheet still reports but
+        // that hold nothing (whitespace, leftover formatting) are dropped up front so
+        // importBy never fabricates values out of them.
+        return importedData
+            .filter((row) => !this.isBlankRow(row))
+            .map((row) => {
             const transformedRow = {};
             // Process each key in the row
             Object.entries(row).forEach(([key, value]) => {
@@ -68,7 +95,10 @@ class DataImportService {
                 }
             });
             return transformedRow;
-        });
+        })
+            // A row can still end up empty here when none of its populated cells map to
+            // an importable column.
+            .filter((row) => !this.isBlankRow(row));
     }
     handleImport(file, 
     // previewer?: (data: any[]) => void,
@@ -89,6 +119,7 @@ class DataImportService {
             if (sheets.length) {
                 const rows = utils.sheet_to_json(wb.Sheets[sheets[0]], {
                     defval: null,
+                    blankrows: false,
                 });
                 imported = this.transformImportData(rows, columnDefinitions);
                 // console.log('TRANSFORMED', imported);
@@ -188,6 +219,9 @@ class DataImportComponent {
     invalidIndexSet = new Map();
     headers;
     _ext = 'xlsx';
+    static nextFileInputId = 0;
+    /** Unique per instance so several import cards can coexist on one page. */
+    fileInputId = `vbn-data-import-file-${DataImportComponent.nextFileInputId++}`;
     files = [];
     isDragging = false;
     showPreview = false;
@@ -307,11 +341,11 @@ class DataImportComponent {
         // this.exportTemplateEvent.emit(this.headers());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataImportComponent, deps: [{ token: DataImportService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.10", type: DataImportComponent, selector: "lib-data-import", inputs: { previewColumns: { classPropertyName: "previewColumns", publicName: "previewColumns", isSignal: true, isRequired: true, transformFunction: null }, formGroupConfig: { classPropertyName: "formGroupConfig", publicName: "formGroupConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columnTemplates: { classPropertyName: "columnTemplates", publicName: "columnTemplates", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, previewData: { classPropertyName: "previewData", publicName: "previewData", isSignal: true, isRequired: false, transformFunction: null }, onImportComplete: { classPropertyName: "onImportComplete", publicName: "onImportComplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportTemplateEvent: "exportTemplateEvent", importEvent: "importEvent", importEventData: "importEventData", rowSave: "rowSave" }, providers: [DataImportService], ngImport: i0, template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid var(--vbn-color-primary)'\"\n  bgColor=\"var(--vbn-color-surface)\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'var(--vbn-color-border-focus)'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <label for=\"fileInput\" class=\"export-button\">Upload File</label>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label for=\"fileInput\" [style.color]=\"'var(--vbn-color-border-focus)'\"\n            >click to browse</label\n          >\n        </p>\n        <input\n          type=\"file\"\n          id=\"fileInput\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button\n      [disabled]=\"service.importedData().length < 1\"\n      class=\"export-button\"\n      (click)=\"save()\"\n    >\n      Import\n    </button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: {} }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  dialogueWidth=\"85%\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between my-4\">\n    <p class=\"\">Total Items: {{ service.importedData().length }}</p>\n\n    <p class=\"\">Duplicates: {{ duplicateIndexSet.size }}</p>\n\n    <p class=\"\">Invalid Items: {{ invalidIndexSet.size }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"headers()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <div style=\"max-height: min(75vh, 780px); overflow: auto\">\n    <lib-data-table\n      [data]=\"service.importedData()\"\n      [columns]=\"previewColumnsList()\"\n      [formGroupConfig]=\"formGroupConfig()\"\n      [useVirtualScroll]=\"true\"\n      (rowSave)=\"service.addRow($event)\"\n    >\n      <ng-container libColumn=\"actions\">\n        <ng-template\n          #cell\n          let-value\n          let-deleteRow=\"deleteRow\"\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-row=\"row\"\n          let-rowIndex=\"rowIndex\"\n        >\n          <div class=\"flex action-buttons\">\n            <verben-svg\n              (click)=\"toggleRowEdit()\"\n              icon=\"edit\"\n              [width]=\"15\"\n              [height]=\"15\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              (click)=\"deleteRow()\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n          </div>\n        </ng-template>\n\n        <ng-template\n          #cellEdit\n          let-value\n          let-deleteRow=\"deleteRow\"\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-row=\"row\"\n          let-rowIndex=\"rowIndex\"\n        >\n          <div class=\"flex action-buttons\">\n            <verben-svg\n              (click)=\"toggleRowEdit()\"\n              icon=\"tick\"\n              [width]=\"15\"\n              [height]=\"15\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              (click)=\"deleteRow()\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n          </div>\n        </ng-template>\n      </ng-container>\n    </lib-data-table>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"footer-buttons flex gap-4 items-center justify-between my-4\">\n    <button\n      class=\"btn btn-secondary cancel-button\"\n      (click)=\"showPreview = false\"\n    >\n      Cancel\n    </button>\n    <button class=\"btn btn-primary export-button\" (click)=\"save()\">\n      Complete\n    </button>\n  </div>\n</ng-template>\n", styles: [".drop-area{border:2px dashed var(--vbn-color-border);padding:20px;text-align:center;cursor:pointer}.drop-area.drag-active{background-color:var(--vbn-color-surface-alt)}.export-card{font-size:.75rem;z-index:10}.card-header,.card-footer{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body{display:flex;flex-direction:column;gap:.5rem;padding-top:-8px!important}.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center}.item-label{display:flex;align-items:center;gap:.5rem}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.show-more{display:flex;gap:.5em;align-items:center;color:var(--vbn-color-text-muted);cursor:pointer}.divider{border:none;border-top:1px solid var(--vbn-color-border)}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.add-button{margin-top:.5rem;margin-left:auto;outline:none;border:none;background-color:transparent;color:var(--vbn-color-border-focus);font-size:.75rem;font-weight:500;cursor:pointer}.footer-buttons{display:flex;gap:.5rem;align-items:center;justify-content:space-between;width:100%}.cancel-button,.export-button{outline:none;border:none;padding:.2rem 1.6rem;font-size:.75rem;font-weight:600;cursor:pointer}.cancel-button{background-color:var(--vbn-color-on-primary);color:var(--vbn-color-surface)}.export-button{background-color:var(--vbn-color-primary);color:var(--vbn-color-on-primary)}.value-range{display:flex;gap:.5rem;align-items:center}.action-buttons{display:flex;align-items:center;gap:2rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i4.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "component", type: i5.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i5.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i6.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.10", type: DataImportComponent, selector: "lib-data-import", inputs: { previewColumns: { classPropertyName: "previewColumns", publicName: "previewColumns", isSignal: true, isRequired: true, transformFunction: null }, formGroupConfig: { classPropertyName: "formGroupConfig", publicName: "formGroupConfig", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columnTemplates: { classPropertyName: "columnTemplates", publicName: "columnTemplates", isSignal: true, isRequired: false, transformFunction: null }, parser: { classPropertyName: "parser", publicName: "parser", isSignal: true, isRequired: false, transformFunction: null }, previewData: { classPropertyName: "previewData", publicName: "previewData", isSignal: true, isRequired: false, transformFunction: null }, onImportComplete: { classPropertyName: "onImportComplete", publicName: "onImportComplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportTemplateEvent: "exportTemplateEvent", importEvent: "importEvent", importEventData: "importEventData", rowSave: "rowSave" }, providers: [DataImportService], ngImport: i0, template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid var(--vbn-color-primary)'\"\n  bgColor=\"var(--vbn-color-surface)\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'var(--vbn-color-border-focus)'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <label [attr.for]=\"fileInputId\" class=\"export-button\">Upload File</label>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label\n            [attr.for]=\"fileInputId\"\n            [style.color]=\"'var(--vbn-color-border-focus)'\"\n            >click to browse</label\n          >\n        </p>\n        <input\n          type=\"file\"\n          [attr.id]=\"fileInputId\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button\n      [disabled]=\"service.importedData().length < 1\"\n      class=\"export-button\"\n      (click)=\"save()\"\n    >\n      Import\n    </button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: {} }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  dialogueWidth=\"85%\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between my-4\">\n    <p class=\"\">Total Items: {{ service.importedData().length }}</p>\n\n    <p class=\"\">Duplicates: {{ duplicateIndexSet.size }}</p>\n\n    <p class=\"\">Invalid Items: {{ invalidIndexSet.size }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"headers()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <div style=\"max-height: min(75vh, 780px); overflow: auto\">\n    <lib-data-table\n      [data]=\"service.importedData()\"\n      [columns]=\"previewColumnsList()\"\n      [formGroupConfig]=\"formGroupConfig()\"\n      [useVirtualScroll]=\"true\"\n      (rowSave)=\"service.addRow($event)\"\n    >\n      <ng-container libColumn=\"actions\">\n        <ng-template\n          #cell\n          let-value\n          let-deleteRow=\"deleteRow\"\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-row=\"row\"\n          let-rowIndex=\"rowIndex\"\n        >\n          <div class=\"flex action-buttons\">\n            <verben-svg\n              (click)=\"toggleRowEdit()\"\n              icon=\"edit\"\n              [width]=\"15\"\n              [height]=\"15\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              (click)=\"deleteRow()\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n          </div>\n        </ng-template>\n\n        <ng-template\n          #cellEdit\n          let-value\n          let-deleteRow=\"deleteRow\"\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-row=\"row\"\n          let-rowIndex=\"rowIndex\"\n        >\n          <div class=\"flex action-buttons\">\n            <verben-svg\n              (click)=\"toggleRowEdit()\"\n              icon=\"tick\"\n              [width]=\"15\"\n              [height]=\"15\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              (click)=\"deleteRow()\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n          </div>\n        </ng-template>\n      </ng-container>\n    </lib-data-table>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"footer-buttons flex gap-4 items-center justify-between my-4\">\n    <button\n      class=\"btn btn-secondary cancel-button\"\n      (click)=\"showPreview = false\"\n    >\n      Cancel\n    </button>\n    <button class=\"btn btn-primary export-button\" (click)=\"save()\">\n      Complete\n    </button>\n  </div>\n</ng-template>\n", styles: [".drop-area{border:2px dashed var(--vbn-color-border);padding:20px;text-align:center;cursor:pointer}.drop-area.drag-active{background-color:var(--vbn-color-surface-alt)}.export-card{font-size:.75rem;z-index:10}.card-header,.card-footer{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body{display:flex;flex-direction:column;gap:.5rem;padding-top:-8px!important}.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center}.item-label{display:flex;align-items:center;gap:.5rem}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.show-more{display:flex;gap:.5em;align-items:center;color:var(--vbn-color-text-muted);cursor:pointer}.divider{border:none;border-top:1px solid var(--vbn-color-border)}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.add-button{margin-top:.5rem;margin-left:auto;outline:none;border:none;background-color:transparent;color:var(--vbn-color-border-focus);font-size:.75rem;font-weight:500;cursor:pointer}.footer-buttons{display:flex;gap:.5rem;align-items:center;justify-content:space-between;width:100%}.cancel-button,.export-button{outline:none;border:none;padding:.2rem 1.6rem;font-size:.75rem;font-weight:600;cursor:pointer}.cancel-button{background-color:var(--vbn-color-on-primary);color:var(--vbn-color-surface)}.export-button{background-color:var(--vbn-color-primary);color:var(--vbn-color-on-primary)}.value-range{display:flex;gap:.5rem;align-items:center}.action-buttons{display:flex;align-items:center;gap:2rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.CardComponent, selector: "verben-card", inputs: ["pd", "mg", "height", "width", "textColor", "bgColor", "border", "borderRadius", "disabled", "aspectRatio"] }, { kind: "component", type: i4.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "component", type: i5.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i5.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i6.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DataImportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-data-import', providers: [DataImportService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid var(--vbn-color-primary)'\"\n  bgColor=\"var(--vbn-color-surface)\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'var(--vbn-color-border-focus)'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <label for=\"fileInput\" class=\"export-button\">Upload File</label>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label for=\"fileInput\" [style.color]=\"'var(--vbn-color-border-focus)'\"\n            >click to browse</label\n          >\n        </p>\n        <input\n          type=\"file\"\n          id=\"fileInput\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button\n      [disabled]=\"service.importedData().length < 1\"\n      class=\"export-button\"\n      (click)=\"save()\"\n    >\n      Import\n    </button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: {} }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  dialogueWidth=\"85%\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between my-4\">\n    <p class=\"\">Total Items: {{ service.importedData().length }}</p>\n\n    <p class=\"\">Duplicates: {{ duplicateIndexSet.size }}</p>\n\n    <p class=\"\">Invalid Items: {{ invalidIndexSet.size }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"headers()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <div style=\"max-height: min(75vh, 780px); overflow: auto\">\n    <lib-data-table\n      [data]=\"service.importedData()\"\n      [columns]=\"previewColumnsList()\"\n      [formGroupConfig]=\"formGroupConfig()\"\n      [useVirtualScroll]=\"true\"\n      (rowSave)=\"service.addRow($event)\"\n    >\n      <ng-container libColumn=\"actions\">\n        <ng-template\n          #cell\n          let-value\n          let-deleteRow=\"deleteRow\"\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-row=\"row\"\n          let-rowIndex=\"rowIndex\"\n        >\n          <div class=\"flex action-buttons\">\n            <verben-svg\n              (click)=\"toggleRowEdit()\"\n              icon=\"edit\"\n              [width]=\"15\"\n              [height]=\"15\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              (click)=\"deleteRow()\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n          </div>\n        </ng-template>\n\n        <ng-template\n          #cellEdit\n          let-value\n          let-deleteRow=\"deleteRow\"\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-row=\"row\"\n          let-rowIndex=\"rowIndex\"\n        >\n          <div class=\"flex action-buttons\">\n            <verben-svg\n              (click)=\"toggleRowEdit()\"\n              icon=\"tick\"\n              [width]=\"15\"\n              [height]=\"15\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              (click)=\"deleteRow()\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n          </div>\n        </ng-template>\n      </ng-container>\n    </lib-data-table>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"footer-buttons flex gap-4 items-center justify-between my-4\">\n    <button\n      class=\"btn btn-secondary cancel-button\"\n      (click)=\"showPreview = false\"\n    >\n      Cancel\n    </button>\n    <button class=\"btn btn-primary export-button\" (click)=\"save()\">\n      Complete\n    </button>\n  </div>\n</ng-template>\n", styles: [".drop-area{border:2px dashed var(--vbn-color-border);padding:20px;text-align:center;cursor:pointer}.drop-area.drag-active{background-color:var(--vbn-color-surface-alt)}.export-card{font-size:.75rem;z-index:10}.card-header,.card-footer{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body{display:flex;flex-direction:column;gap:.5rem;padding-top:-8px!important}.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center}.item-label{display:flex;align-items:center;gap:.5rem}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.show-more{display:flex;gap:.5em;align-items:center;color:var(--vbn-color-text-muted);cursor:pointer}.divider{border:none;border-top:1px solid var(--vbn-color-border)}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.add-button{margin-top:.5rem;margin-left:auto;outline:none;border:none;background-color:transparent;color:var(--vbn-color-border-focus);font-size:.75rem;font-weight:500;cursor:pointer}.footer-buttons{display:flex;gap:.5rem;align-items:center;justify-content:space-between;width:100%}.cancel-button,.export-button{outline:none;border:none;padding:.2rem 1.6rem;font-size:.75rem;font-weight:600;cursor:pointer}.cancel-button{background-color:var(--vbn-color-on-primary);color:var(--vbn-color-surface)}.export-button{background-color:var(--vbn-color-primary);color:var(--vbn-color-on-primary)}.value-range{display:flex;gap:.5rem;align-items:center}.action-buttons{display:flex;align-items:center;gap:2rem}\n"] }]
+            args: [{ selector: 'lib-data-import', providers: [DataImportService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid var(--vbn-color-primary)'\"\n  bgColor=\"var(--vbn-color-surface)\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'var(--vbn-color-border-focus)'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <label [attr.for]=\"fileInputId\" class=\"export-button\">Upload File</label>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label\n            [attr.for]=\"fileInputId\"\n            [style.color]=\"'var(--vbn-color-border-focus)'\"\n            >click to browse</label\n          >\n        </p>\n        <input\n          type=\"file\"\n          [attr.id]=\"fileInputId\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button\n      [disabled]=\"service.importedData().length < 1\"\n      class=\"export-button\"\n      (click)=\"save()\"\n    >\n      Import\n    </button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: {} }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  dialogueWidth=\"85%\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between my-4\">\n    <p class=\"\">Total Items: {{ service.importedData().length }}</p>\n\n    <p class=\"\">Duplicates: {{ duplicateIndexSet.size }}</p>\n\n    <p class=\"\">Invalid Items: {{ invalidIndexSet.size }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"headers()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <div style=\"max-height: min(75vh, 780px); overflow: auto\">\n    <lib-data-table\n      [data]=\"service.importedData()\"\n      [columns]=\"previewColumnsList()\"\n      [formGroupConfig]=\"formGroupConfig()\"\n      [useVirtualScroll]=\"true\"\n      (rowSave)=\"service.addRow($event)\"\n    >\n      <ng-container libColumn=\"actions\">\n        <ng-template\n          #cell\n          let-value\n          let-deleteRow=\"deleteRow\"\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-row=\"row\"\n          let-rowIndex=\"rowIndex\"\n        >\n          <div class=\"flex action-buttons\">\n            <verben-svg\n              (click)=\"toggleRowEdit()\"\n              icon=\"edit\"\n              [width]=\"15\"\n              [height]=\"15\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              (click)=\"deleteRow()\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n          </div>\n        </ng-template>\n\n        <ng-template\n          #cellEdit\n          let-value\n          let-deleteRow=\"deleteRow\"\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-row=\"row\"\n          let-rowIndex=\"rowIndex\"\n        >\n          <div class=\"flex action-buttons\">\n            <verben-svg\n              (click)=\"toggleRowEdit()\"\n              icon=\"tick\"\n              [width]=\"15\"\n              [height]=\"15\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              (click)=\"deleteRow()\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n          </div>\n        </ng-template>\n      </ng-container>\n    </lib-data-table>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"footer-buttons flex gap-4 items-center justify-between my-4\">\n    <button\n      class=\"btn btn-secondary cancel-button\"\n      (click)=\"showPreview = false\"\n    >\n      Cancel\n    </button>\n    <button class=\"btn btn-primary export-button\" (click)=\"save()\">\n      Complete\n    </button>\n  </div>\n</ng-template>\n", styles: [".drop-area{border:2px dashed var(--vbn-color-border);padding:20px;text-align:center;cursor:pointer}.drop-area.drag-active{background-color:var(--vbn-color-surface-alt)}.export-card{font-size:.75rem;z-index:10}.card-header,.card-footer{display:flex;justify-content:space-between;align-items:center;background-color:transparent;padding:4px!important}.header-title{font-weight:600;font-size:.8125rem}.card-body{display:flex;flex-direction:column;gap:.5rem;padding-top:-8px!important}.section{display:flex;flex-direction:column;gap:.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-title{font-size:.8125rem}.item{display:flex;justify-content:space-between;align-items:center}.item-label{display:flex;align-items:center;gap:.5rem}.checkbox-label{line-height:1}.item-actions{display:flex;gap:.5rem}.show-more{display:flex;gap:.5em;align-items:center;color:var(--vbn-color-text-muted);cursor:pointer}.divider{border:none;border-top:1px solid var(--vbn-color-border)}.operation-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.add-button{margin-top:.5rem;margin-left:auto;outline:none;border:none;background-color:transparent;color:var(--vbn-color-border-focus);font-size:.75rem;font-weight:500;cursor:pointer}.footer-buttons{display:flex;gap:.5rem;align-items:center;justify-content:space-between;width:100%}.cancel-button,.export-button{outline:none;border:none;padding:.2rem 1.6rem;font-size:.75rem;font-weight:600;cursor:pointer}.cancel-button{background-color:var(--vbn-color-on-primary);color:var(--vbn-color-surface)}.export-button{background-color:var(--vbn-color-primary);color:var(--vbn-color-on-primary)}.value-range{display:flex;gap:.5rem;align-items:center}.action-buttons{display:flex;align-items:center;gap:2rem}\n"] }]
         }], ctorParameters: () => [{ type: DataImportService }] });
 
 class DataImportModule {

package/fesm2022/verben-ng-ui-src-lib-components-data-import.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"verben-ng-ui-src-lib-components-data-import.mjs","sources":["../../../projects/verben-ng-ui/src/lib/components/data-import/data-import.service.ts","../../../projects/verben-ng-ui/src/lib/components/data-import/data-import.component.ts","../../../projects/verben-ng-ui/src/lib/components/data-import/data-import.component.html","../../../projects/verben-ng-ui/src/lib/components/data-import/data-import.module.ts","../../../projects/verben-ng-ui/src/lib/components/data-import/verben-ng-ui-src-lib-components-data-import.ts"],"sourcesContent":["import { Injectable, signal, WritableSignal } from '@angular/core';\nimport { ColumnDefinition } from 'verben-ng-ui/src/lib/components/data-table';\nimport { read, utils, writeFile } from 'xlsx';\n\n@Injectable()\nexport class DataImportService<T> {\n  importedData: WritableSignal<T[]> = signal([]);\n\n  constructor() {}\n\n  // Function to transform imported data to match your model structure\n  transformImportData<T>(\n    importedData: Record<string, any>[],\n    columnDefinitions: ColumnDefinition<T>[],\n  ): Partial<T>[] {\n    // Create mappings from header to importKey and importBy\n    const headerToImportKeyMap = new Map<string, keyof T>();\n    const headerToImportByMap = new Map<\n      string,\n      keyof T | ((importedRow: any) => T[keyof T])\n    >();\n\n    // Filter column definitions to only those with importKey or importBy and populate the maps\n    columnDefinitions\n      .filter((col) => col.importKey || col.importBy)\n      .forEach((col) => {\n        const header =\n          typeof col.header === 'string'\n            ? col.header\n            : col.header({}).toString();\n\n        if (col.importKey) {\n          headerToImportKeyMap.set(header, col.importKey as keyof T);\n        }\n\n        if (col.importBy) {\n          headerToImportByMap.set(header, col.importBy);\n        }\n      });\n\n    // Transform each row in the imported data\n    return importedData.map((row) => {\n      const transformedRow: Partial<T> = {};\n\n      // Process each key in the row\n      Object.entries(row).forEach(([key, value]) => {\n        // Check if there's an importBy transformation first (takes priority)\n        const importBy = headerToImportByMap.get(key);\n\n        if (importBy) {\n          if (typeof importBy === 'function') {\n            // Use the importBy function to transform the entire imported row\n            const importKey = headerToImportKeyMap.get(key);\n            if (importKey) {\n              transformedRow[importKey] = importBy(row);\n            }\n          } else {\n            // importBy is a direct key reference\n            transformedRow[importBy] = value;\n          }\n        } else {\n          // Fall back to importKey if no importBy is defined\n          const importKey = headerToImportKeyMap.get(key);\n          if (importKey) {\n            transformedRow[importKey] = value;\n          }\n        }\n      });\n\n      return transformedRow;\n    });\n  }\n\n  handleImport(\n    file: File,\n    // previewer?: (data: any[]) => void,\n    columnDefinitions: ColumnDefinition<T>[],\n    parseImport?: (data: any) => Partial<T>[],\n  ) {\n    const reader = new FileReader();\n    reader.onload = (event: any) => {\n      // const wb = read(event.target.result, {\n      //   type: 'string',\n      //   raw: true,\n      //   cellText: true,\n      //   cellFormula: false,\n      //   cellNF: false,\n      // });\n      // console.time('Begin');\n      let imported: any[] = [];\n      const wb = read(event.target.result, { cellDates: true });\n      const sheets = wb.SheetNames;\n      if (sheets.length) {\n        const rows = utils.sheet_to_json(wb.Sheets[sheets[0]], {\n          defval: null,\n        }) as Record<string, any>[];\n\n        imported = this.transformImportData(rows, columnDefinitions) as T[];\n        // console.log('TRANSFORMED', imported);\n\n        if (parseImport) {\n          imported = parseImport(imported);\n          // console.log('PARSED', imported);\n        }\n        // previewer(imported);\n      }\n      // console.log('Imported data:', JSON.stringify(imported, null, 2));\n      // console.time('Start Process');\n      this.importedData.set(imported);\n      // console.timeEnd('Begin');\n      return imported;\n    };\n    return reader.readAsArrayBuffer(file);\n  }\n\n  handleTemplateExport(fields: string[], title: string) {\n    // console.log(fields);\n    const wb = utils.book_new();\n    const ws: any = utils.json_to_sheet([]);\n    utils.sheet_add_aoa(ws, [fields]);\n    // utils.sheet_add_json(ws, this._data, { origin: 'A2', skipHeader: true });\n    utils.book_append_sheet(wb, ws, title);\n    writeFile(wb, title + '-template.' + 'xlsx');\n  }\n\n  addRow(event: { index: number; key: string | number; data: Partial<T> }) {\n    // console.log(event);\n    this.importedData.update((dat) => {\n      // dat[event.index] = { ...dat[event.index], ...event.data };\n      return dat.map((d, i) => {\n        if (i === event.index) {\n          return { ...d, ...event.data };\n        }\n        return d;\n      });\n    });\n    // console.log(this.importedData());\n  }\n\n  isDuplicate(datum: Partial<T>, array: Partial<T>[], identifiers: string[]) {\n    return (\n      array.filter(\n        (dat) =>\n          identifiers.length > 0 &&\n          identifiers.every(\n            (identifier) =>\n              datum[identifier as keyof T] &&\n              datum[identifier as keyof T] === dat[identifier as keyof T],\n          ),\n      ).length > 1\n    );\n  }\n\n  clearData() {\n    this.importedData.set([]);\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  input,\n  output,\n  Signal,\n  signal,\n  WritableSignal,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  FormArray,\n  FormGroup\n} from '@angular/forms';\nimport {\n  ColumnDefinition,\n  ColumnDirective,\n  FormGroupConfig,\n} from 'verben-ng-ui/src/lib/components/data-table';\nimport { DataImportService } from './data-import.service';\n\n@Component({\n  selector: 'lib-data-import',\n  templateUrl: './data-import.component.html',\n  styleUrl: './data-import.component.css',\n  providers: [DataImportService],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataImportComponent<T extends {}> {\n  previewColumns = input.required<ColumnDefinition<T>[]>();\n  formGroupConfig = input<\n    FormGroupConfig<{\n      [K in keyof T]: AbstractControl;\n    }>\n  >();\n  /**\n   * @deprecated Use importKey of previewColumns instead\n   */\n  fields = input<string[]>();\n  title = input<string>('export-template');\n  columnTemplates = input<readonly ColumnDirective[]>([]);\n  parser = input<(data: any) => Partial<T>[]>();\n  /**\n   * @deprecated Please remove, now handled internally\n   */\n  previewData = input<T[]>();\n  /**\n   * Pass the method to use the imported data,\n   * and eventually returns true if successfully used\n   */\n  onImportComplete = input<(data: Partial<T>[]) => Promise<boolean>>();\n  /**\n   * @deprecated Please remove, now handled internally\n   */\n  exportTemplateEvent = output<string[]>();\n  /**\n   * @deprecated Please remove, now handled internally\n   */\n  importEvent = output<File>();\n  /**\n   * @deprecated Use the onImportComplete input instead\n   */\n  importEventData = output<Partial<T>[]>();\n  /**\n   * @deprecated Please remove, now handled internally\n   */\n  rowSave = output<{\n    index: number;\n    key: number | string;\n    data: Partial<T>;\n  }>();\n\n  // data: Signal<(T & { isDuplicate: boolean })[]>;\n  previewColumnsList: Signal<ColumnDefinition<T>[]>;\n  forms = new FormArray<FormGroup>([]);\n  uniqueIdentifiers: WritableSignal<string[]> = signal([]);\n  // duplicateDataMap: Map<string, number> = new Map();\n  duplicateIndexSet = new Set<number>();\n  invalidIndexSet = new Map<number, ColumnDirective['columnId'][]>();\n\n  headers: Signal<string[]>;\n\n  private _ext: 'xlsx' | 'xls' | 'csv' = 'xlsx';\n\n  files: File[] = [];\n  isDragging = false;\n  showPreview = false;\n\n  constructor(public service: DataImportService<T>) {\n    effect(() => {\n      // const columns = this.previewColumnsList();\n\n      const identifiers = this.uniqueIdentifiers();\n\n      this.service.importedData()?.forEach((d, i, arr) => {\n        if (service.isDuplicate(d, arr, identifiers)) {\n          this.duplicateIndexSet.add(i);\n        }\n\n        // columns\n        //   .filter(({ validatorFn }) => validatorFn !== undefined)\n        //   .forEach((column) => {\n        //     const invalidFields = Object.entries(d).reduce<string[]>(\n        //       (f, [k, v], i) => {\n        //         if (\n        //           column.validatorFn &&\n        //           !column.validatorFn(v as T[keyof T])\n        //         ) {\n        //           f.push(column.id);\n        //         }\n        //         return f;\n        //       },\n        //       []\n        //     );\n\n        //     if (invalidFields.length > 0) {\n        //       this.invalidIndexSet.set(i, invalidFields);\n        //     }\n        //   });\n      });\n    });\n\n    this.previewColumnsList = computed(() => {\n      return this.previewColumns()\n        .filter((col) => col.importKey || col.importBy || col.formControlName)\n        .map((column) => {\n          const matchingTemplate = this.columnTemplates().find(\n            (t) => t.columnId === column.id\n          );\n          if (matchingTemplate) {\n            return {\n              ...column,\n              // accessorKey: column.importKey,\n              cellTemplate: matchingTemplate.cellTemplate,\n              cellEditTemplate: matchingTemplate.cellEditTemplate,\n              headerTemplate: matchingTemplate.headerTemplate,\n              footerTemplate: matchingTemplate.footerTemplate,\n            };\n          }\n          return column;\n        })\n        .concat([\n          {\n            id: 'actions',\n            header: 'Actions',\n          },\n        ]);\n    });\n\n    this.headers = computed(() => {\n      return (\n        this.fields() ??\n        this.previewColumnsList()\n          .filter((col) => col.importKey || col.importBy)\n          .map((col) => col.header.toString())\n      );\n    });\n  }\n\n  onDragOver(event: DragEvent) {\n    event.preventDefault();\n    this.isDragging = true;\n  }\n\n  onDragLeave(event: DragEvent) {\n    event.preventDefault();\n    this.isDragging = false;\n  }\n\n  onDrop(event: DragEvent) {\n    event.preventDefault();\n    this.isDragging = false;\n    this.files = Array.from(event.dataTransfer!.files);\n\n    this.service.handleImport(\n      this.files[0],\n      this.previewColumnsList(),\n      this.parser()\n    );\n    // this.importEvent.emit(this.files[0]);\n    this.showPreview = true;\n  }\n\n  onFileSelected(event: any) {\n    this.files = Array.from(event.target.files);\n    this.service.handleImport(\n      this.files[0],\n      this.previewColumnsList(),\n      this.parser()\n    );\n\n    event.target.value = '';\n\n    // this.importEvent.emit(this.files[0]);\n    this.showPreview = true;\n  }\n\n  reset() {\n    this.files = [];\n    this.showPreview = false;\n    this.service.clearData();\n  }\n\n  save() {\n    // console.log('PREVDATA', this.service.importedData());\n    const onComplete = this.onImportComplete();\n    if (onComplete) {\n      onComplete(this.service.importedData()).then((success) => {\n        if (success) {\n          this.showPreview = false;\n        }\n      });\n    } else {\n      this.importEventData.emit(this.service.importedData() || []);\n      this.showPreview = false;\n    }\n  }\n\n  getControlNames() {\n    const controls = this.formGroupConfig()?.controls;\n    if (controls) {\n      return Object.keys(controls);\n    }\n    return [];\n  }\n\n  handleTemplateExport() {\n    this.service.handleTemplateExport(this.headers(), this.title());\n    // this.exportTemplateEvent.emit(this.headers());\n  }\n\n  // getFormControl(index: number, field: string) {\n  //   const control = this..get(index)?.get(field) as FormControl<any>;\n  //   console.log(control);\n  //   return control;\n  // }\n}\n","<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid var(--vbn-color-primary)'\"\n  bgColor=\"var(--vbn-color-surface)\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'var(--vbn-color-border-focus)'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <label for=\"fileInput\" class=\"export-button\">Upload File</label>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label for=\"fileInput\" [style.color]=\"'var(--vbn-color-border-focus)'\"\n            >click to browse</label\n          >\n        </p>\n        <input\n          type=\"file\"\n          id=\"fileInput\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button\n      [disabled]=\"service.importedData().length < 1\"\n      class=\"export-button\"\n      (click)=\"save()\"\n    >\n      Import\n    </button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: {} }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  dialogueWidth=\"85%\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between my-4\">\n    <p class=\"\">Total Items: {{ service.importedData().length }}</p>\n\n    <p class=\"\">Duplicates: {{ duplicateIndexSet.size }}</p>\n\n    <p class=\"\">Invalid Items: {{ invalidIndexSet.size }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"headers()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <div style=\"max-height: min(75vh, 780px); overflow: auto\">\n    <lib-data-table\n      [data]=\"service.importedData()\"\n      [columns]=\"previewColumnsList()\"\n      [formGroupConfig]=\"formGroupConfig()\"\n      [useVirtualScroll]=\"true\"\n      (rowSave)=\"service.addRow($event)\"\n    >\n      <ng-container libColumn=\"actions\">\n        <ng-template\n          #cell\n          let-value\n          let-deleteRow=\"deleteRow\"\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-row=\"row\"\n          let-rowIndex=\"rowIndex\"\n        >\n          <div class=\"flex action-buttons\">\n            <verben-svg\n              (click)=\"toggleRowEdit()\"\n              icon=\"edit\"\n              [width]=\"15\"\n              [height]=\"15\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              (click)=\"deleteRow()\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n          </div>\n        </ng-template>\n\n        <ng-template\n          #cellEdit\n          let-value\n          let-deleteRow=\"deleteRow\"\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-row=\"row\"\n          let-rowIndex=\"rowIndex\"\n        >\n          <div class=\"flex action-buttons\">\n            <verben-svg\n              (click)=\"toggleRowEdit()\"\n              icon=\"tick\"\n              [width]=\"15\"\n              [height]=\"15\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              (click)=\"deleteRow()\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n          </div>\n        </ng-template>\n      </ng-container>\n    </lib-data-table>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"footer-buttons flex gap-4 items-center justify-between my-4\">\n    <button\n      class=\"btn btn-secondary cancel-button\"\n      (click)=\"showPreview = false\"\n    >\n      Cancel\n    </button>\n    <button class=\"btn btn-primary export-button\" (click)=\"save()\">\n      Complete\n    </button>\n  </div>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DataImportComponent } from './data-import.component';\nimport { CardModule } from 'verben-ng-ui/src/lib/components/card';\nimport { VerbenDialogueModule } from 'verben-ng-ui/src/lib/components/verben-dialogue';\nimport { DataTableModule } from 'verben-ng-ui/src/lib/components/data-table';\nimport { VerbenaInputModule } from 'verben-ng-ui/src/lib/verbena-input';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SvgModule } from 'verben-ng-ui/src/lib/components/svg';\nimport { DropDownModule } from 'verben-ng-ui/src/lib/components/drop-down';\n\n@NgModule({\n  declarations: [DataImportComponent],\n  imports: [\n    CommonModule,\n    CardModule,\n    VerbenDialogueModule,\n    DataTableModule,\n    VerbenaInputModule,\n    DropDownModule,\n    ReactiveFormsModule,\n    FormsModule,\n    SvgModule,\n  ],\n  exports: [DataImportComponent],\n})\nexport class DataImportModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.DataImportService"],"mappings":"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"}
+{"version":3,"file":"verben-ng-ui-src-lib-components-data-import.mjs","sources":["../../../projects/verben-ng-ui/src/lib/components/data-import/data-import.service.ts","../../../projects/verben-ng-ui/src/lib/components/data-import/data-import.component.ts","../../../projects/verben-ng-ui/src/lib/components/data-import/data-import.component.html","../../../projects/verben-ng-ui/src/lib/components/data-import/data-import.module.ts","../../../projects/verben-ng-ui/src/lib/components/data-import/verben-ng-ui-src-lib-components-data-import.ts"],"sourcesContent":["import { Injectable, signal, WritableSignal } from '@angular/core';\nimport { ColumnDefinition } from 'verben-ng-ui/src/lib/components/data-table';\nimport { read, utils, writeFile } from 'xlsx';\n\n@Injectable()\nexport class DataImportService<T> {\n  importedData: WritableSignal<T[]> = signal([]);\n\n  constructor() {}\n\n  /**\n   * A value carries no information if it is nullish, an empty/whitespace string,\n   * an invalid date, or a collection whose every member is itself blank.\n   * Numbers (including 0) and booleans (including false) are never blank.\n   */\n  private isBlankValue(value: unknown): boolean {\n    if (value === null || value === undefined) return true;\n    if (typeof value === 'string') return value.trim() === '';\n    if (value instanceof Date) return Number.isNaN(value.getTime());\n    if (Array.isArray(value)) return value.every((v) => this.isBlankValue(v));\n    if (typeof value === 'object') {\n      return Object.values(value as object).every((v) => this.isBlankValue(v));\n    }\n    return false;\n  }\n\n  private isBlankRow(row: object): boolean {\n    const values = Object.values(row);\n    return values.length === 0 || values.every((v) => this.isBlankValue(v));\n  }\n\n  // Function to transform imported data to match your model structure\n  transformImportData<T>(\n    importedData: Record<string, any>[],\n    columnDefinitions: ColumnDefinition<T>[],\n  ): Partial<T>[] {\n    // Create mappings from header to importKey and importBy\n    const headerToImportKeyMap = new Map<string, keyof T>();\n    const headerToImportByMap = new Map<\n      string,\n      keyof T | ((importedRow: any) => T[keyof T])\n    >();\n\n    // Filter column definitions to only those with importKey or importBy and populate the maps\n    columnDefinitions\n      .filter((col) => col.importKey || col.importBy)\n      .forEach((col) => {\n        const header =\n          typeof col.header === 'string'\n            ? col.header\n            : col.header({}).toString();\n\n        if (col.importKey) {\n          headerToImportKeyMap.set(header, col.importKey as keyof T);\n        }\n\n        if (col.importBy) {\n          headerToImportByMap.set(header, col.importBy);\n        }\n      });\n\n    // Transform each row in the imported data. Rows the sheet still reports but\n    // that hold nothing (whitespace, leftover formatting) are dropped up front so\n    // importBy never fabricates values out of them.\n    return importedData\n      .filter((row) => !this.isBlankRow(row))\n      .map((row) => {\n        const transformedRow: Partial<T> = {};\n\n        // Process each key in the row\n        Object.entries(row).forEach(([key, value]) => {\n          // Check if there's an importBy transformation first (takes priority)\n          const importBy = headerToImportByMap.get(key);\n\n          if (importBy) {\n            if (typeof importBy === 'function') {\n              // Use the importBy function to transform the entire imported row\n              const importKey = headerToImportKeyMap.get(key);\n              if (importKey) {\n                transformedRow[importKey] = importBy(row);\n              }\n            } else {\n              // importBy is a direct key reference\n              transformedRow[importBy] = value;\n            }\n          } else {\n            // Fall back to importKey if no importBy is defined\n            const importKey = headerToImportKeyMap.get(key);\n            if (importKey) {\n              transformedRow[importKey] = value;\n            }\n          }\n        });\n\n        return transformedRow;\n      })\n      // A row can still end up empty here when none of its populated cells map to\n      // an importable column.\n      .filter((row) => !this.isBlankRow(row));\n  }\n\n  handleImport(\n    file: File,\n    // previewer?: (data: any[]) => void,\n    columnDefinitions: ColumnDefinition<T>[],\n    parseImport?: (data: any) => Partial<T>[],\n  ) {\n    const reader = new FileReader();\n    reader.onload = (event: any) => {\n      // const wb = read(event.target.result, {\n      //   type: 'string',\n      //   raw: true,\n      //   cellText: true,\n      //   cellFormula: false,\n      //   cellNF: false,\n      // });\n      // console.time('Begin');\n      let imported: any[] = [];\n      const wb = read(event.target.result, { cellDates: true });\n      const sheets = wb.SheetNames;\n      if (sheets.length) {\n        const rows = utils.sheet_to_json(wb.Sheets[sheets[0]], {\n          defval: null,\n          blankrows: false,\n        }) as Record<string, any>[];\n\n        imported = this.transformImportData(rows, columnDefinitions) as T[];\n        // console.log('TRANSFORMED', imported);\n\n        if (parseImport) {\n          imported = parseImport(imported);\n          // console.log('PARSED', imported);\n        }\n        // previewer(imported);\n      }\n      // console.log('Imported data:', JSON.stringify(imported, null, 2));\n      // console.time('Start Process');\n      this.importedData.set(imported);\n      // console.timeEnd('Begin');\n      return imported;\n    };\n    return reader.readAsArrayBuffer(file);\n  }\n\n  handleTemplateExport(fields: string[], title: string) {\n    // console.log(fields);\n    const wb = utils.book_new();\n    const ws: any = utils.json_to_sheet([]);\n    utils.sheet_add_aoa(ws, [fields]);\n    // utils.sheet_add_json(ws, this._data, { origin: 'A2', skipHeader: true });\n    utils.book_append_sheet(wb, ws, title);\n    writeFile(wb, title + '-template.' + 'xlsx');\n  }\n\n  addRow(event: { index: number; key: string | number; data: Partial<T> }) {\n    // console.log(event);\n    this.importedData.update((dat) => {\n      // dat[event.index] = { ...dat[event.index], ...event.data };\n      return dat.map((d, i) => {\n        if (i === event.index) {\n          return { ...d, ...event.data };\n        }\n        return d;\n      });\n    });\n    // console.log(this.importedData());\n  }\n\n  isDuplicate(datum: Partial<T>, array: Partial<T>[], identifiers: string[]) {\n    return (\n      array.filter(\n        (dat) =>\n          identifiers.length > 0 &&\n          identifiers.every(\n            (identifier) =>\n              datum[identifier as keyof T] &&\n              datum[identifier as keyof T] === dat[identifier as keyof T],\n          ),\n      ).length > 1\n    );\n  }\n\n  clearData() {\n    this.importedData.set([]);\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  input,\n  output,\n  Signal,\n  signal,\n  WritableSignal,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  FormArray,\n  FormGroup\n} from '@angular/forms';\nimport {\n  ColumnDefinition,\n  ColumnDirective,\n  FormGroupConfig,\n} from 'verben-ng-ui/src/lib/components/data-table';\nimport { DataImportService } from './data-import.service';\n\n@Component({\n  selector: 'lib-data-import',\n  templateUrl: './data-import.component.html',\n  styleUrl: './data-import.component.css',\n  providers: [DataImportService],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DataImportComponent<T extends {}> {\n  previewColumns = input.required<ColumnDefinition<T>[]>();\n  formGroupConfig = input<\n    FormGroupConfig<{\n      [K in keyof T]: AbstractControl;\n    }>\n  >();\n  /**\n   * @deprecated Use importKey of previewColumns instead\n   */\n  fields = input<string[]>();\n  title = input<string>('export-template');\n  columnTemplates = input<readonly ColumnDirective[]>([]);\n  parser = input<(data: any) => Partial<T>[]>();\n  /**\n   * @deprecated Please remove, now handled internally\n   */\n  previewData = input<T[]>();\n  /**\n   * Pass the method to use the imported data,\n   * and eventually returns true if successfully used\n   */\n  onImportComplete = input<(data: Partial<T>[]) => Promise<boolean>>();\n  /**\n   * @deprecated Please remove, now handled internally\n   */\n  exportTemplateEvent = output<string[]>();\n  /**\n   * @deprecated Please remove, now handled internally\n   */\n  importEvent = output<File>();\n  /**\n   * @deprecated Use the onImportComplete input instead\n   */\n  importEventData = output<Partial<T>[]>();\n  /**\n   * @deprecated Please remove, now handled internally\n   */\n  rowSave = output<{\n    index: number;\n    key: number | string;\n    data: Partial<T>;\n  }>();\n\n  // data: Signal<(T & { isDuplicate: boolean })[]>;\n  previewColumnsList: Signal<ColumnDefinition<T>[]>;\n  forms = new FormArray<FormGroup>([]);\n  uniqueIdentifiers: WritableSignal<string[]> = signal([]);\n  // duplicateDataMap: Map<string, number> = new Map();\n  duplicateIndexSet = new Set<number>();\n  invalidIndexSet = new Map<number, ColumnDirective['columnId'][]>();\n\n  headers: Signal<string[]>;\n\n  private _ext: 'xlsx' | 'xls' | 'csv' = 'xlsx';\n\n  private static nextFileInputId = 0;\n  /** Unique per instance so several import cards can coexist on one page. */\n  readonly fileInputId = `vbn-data-import-file-${DataImportComponent.nextFileInputId++}`;\n\n  files: File[] = [];\n  isDragging = false;\n  showPreview = false;\n\n  constructor(public service: DataImportService<T>) {\n    effect(() => {\n      // const columns = this.previewColumnsList();\n\n      const identifiers = this.uniqueIdentifiers();\n\n      this.service.importedData()?.forEach((d, i, arr) => {\n        if (service.isDuplicate(d, arr, identifiers)) {\n          this.duplicateIndexSet.add(i);\n        }\n\n        // columns\n        //   .filter(({ validatorFn }) => validatorFn !== undefined)\n        //   .forEach((column) => {\n        //     const invalidFields = Object.entries(d).reduce<string[]>(\n        //       (f, [k, v], i) => {\n        //         if (\n        //           column.validatorFn &&\n        //           !column.validatorFn(v as T[keyof T])\n        //         ) {\n        //           f.push(column.id);\n        //         }\n        //         return f;\n        //       },\n        //       []\n        //     );\n\n        //     if (invalidFields.length > 0) {\n        //       this.invalidIndexSet.set(i, invalidFields);\n        //     }\n        //   });\n      });\n    });\n\n    this.previewColumnsList = computed(() => {\n      return this.previewColumns()\n        .filter((col) => col.importKey || col.importBy || col.formControlName)\n        .map((column) => {\n          const matchingTemplate = this.columnTemplates().find(\n            (t) => t.columnId === column.id\n          );\n          if (matchingTemplate) {\n            return {\n              ...column,\n              // accessorKey: column.importKey,\n              cellTemplate: matchingTemplate.cellTemplate,\n              cellEditTemplate: matchingTemplate.cellEditTemplate,\n              headerTemplate: matchingTemplate.headerTemplate,\n              footerTemplate: matchingTemplate.footerTemplate,\n            };\n          }\n          return column;\n        })\n        .concat([\n          {\n            id: 'actions',\n            header: 'Actions',\n          },\n        ]);\n    });\n\n    this.headers = computed(() => {\n      return (\n        this.fields() ??\n        this.previewColumnsList()\n          .filter((col) => col.importKey || col.importBy)\n          .map((col) => col.header.toString())\n      );\n    });\n  }\n\n  onDragOver(event: DragEvent) {\n    event.preventDefault();\n    this.isDragging = true;\n  }\n\n  onDragLeave(event: DragEvent) {\n    event.preventDefault();\n    this.isDragging = false;\n  }\n\n  onDrop(event: DragEvent) {\n    event.preventDefault();\n    this.isDragging = false;\n    this.files = Array.from(event.dataTransfer!.files);\n\n    this.service.handleImport(\n      this.files[0],\n      this.previewColumnsList(),\n      this.parser()\n    );\n    // this.importEvent.emit(this.files[0]);\n    this.showPreview = true;\n  }\n\n  onFileSelected(event: any) {\n    this.files = Array.from(event.target.files);\n    this.service.handleImport(\n      this.files[0],\n      this.previewColumnsList(),\n      this.parser()\n    );\n\n    event.target.value = '';\n\n    // this.importEvent.emit(this.files[0]);\n    this.showPreview = true;\n  }\n\n  reset() {\n    this.files = [];\n    this.showPreview = false;\n    this.service.clearData();\n  }\n\n  save() {\n    // console.log('PREVDATA', this.service.importedData());\n    const onComplete = this.onImportComplete();\n    if (onComplete) {\n      onComplete(this.service.importedData()).then((success) => {\n        if (success) {\n          this.showPreview = false;\n        }\n      });\n    } else {\n      this.importEventData.emit(this.service.importedData() || []);\n      this.showPreview = false;\n    }\n  }\n\n  getControlNames() {\n    const controls = this.formGroupConfig()?.controls;\n    if (controls) {\n      return Object.keys(controls);\n    }\n    return [];\n  }\n\n  handleTemplateExport() {\n    this.service.handleTemplateExport(this.headers(), this.title());\n    // this.exportTemplateEvent.emit(this.headers());\n  }\n\n  // getFormControl(index: number, field: string) {\n  //   const control = this..get(index)?.get(field) as FormControl<any>;\n  //   console.log(control);\n  //   return control;\n  // }\n}\n","<verben-card\n  width=\"24rem\"\n  borderRadius=\"1rem\"\n  [border]=\"'1px solid var(--vbn-color-primary)'\"\n  bgColor=\"var(--vbn-color-surface)\"\n  class=\"export-card\"\n>\n  <div card-header class=\"card-header\">\n    <h4 class=\"header-title\">Import</h4>\n    <button\n      class=\"reset-button\"\n      [style.color]=\"'var(--vbn-color-border-focus)'\"\n      [style.background-color]=\"'transparent'\"\n      [style.border]=\"'none'\"\n      [style.cursor]=\"'pointer'\"\n      [style.font-size]=\"'12px'\"\n      (click)=\"reset()\"\n    >\n      Reset\n    </button>\n  </div>\n  <div card-body class=\"card-body\">\n    <div class=\"flex gap-4 justify-between\">\n      <button class=\"export-button\" (click)=\"handleTemplateExport()\">\n        Download Template\n      </button>\n      <label [attr.for]=\"fileInputId\" class=\"export-button\">Upload File</label>\n    </div>\n    <hr class=\"divider\" />\n    <section class=\"section\">\n      <div\n        class=\"drop-area\"\n        (dragover)=\"onDragOver($event)\"\n        (dragleave)=\"onDragLeave($event)\"\n        (drop)=\"onDrop($event)\"\n      >\n        <p>\n          Drag and drop files here or\n          <label\n            [attr.for]=\"fileInputId\"\n            [style.color]=\"'var(--vbn-color-border-focus)'\"\n            >click to browse</label\n          >\n        </p>\n        <input\n          type=\"file\"\n          [attr.id]=\"fileInputId\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          accept=\".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel\"\n          multiple\n        />\n      </div>\n      <div *ngIf=\"files.length > 0\">\n        <h3>Uploaded Files:</h3>\n        <ul>\n          <li *ngFor=\"let file of files\">{{ file.name }}</li>\n        </ul>\n      </div>\n    </section>\n  </div>\n  <div card-footer class=\"card-footer\">\n    <button\n      [disabled]=\"service.importedData().length < 1\"\n      class=\"export-button\"\n      (click)=\"save()\"\n    >\n      Import\n    </button>\n  </div>\n</verben-card>\n\n<!-- Modal Component -->\n<verben-dialogue\n  [showCloseIcon]=\"true\"\n  [dismissOutsideClick]=\"true\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'large'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'my-modal-custom-class'\"\n  [disableFooter]=\"false\"\n  [modalData]=\"[{ data: {} }]\"\n  [isVisible]=\"showPreview\"\n  [headerTemplate]=\"headerTemplate\"\n  [bodyTemplate]=\"bodyTemplate\"\n  [footerTemplate]=\"footerTemplate\"\n  dialogueWidth=\"85%\"\n>\n  <a download=\"\"></a>\n</verben-dialogue>\n\n<!-- Define templates -->\n<ng-template #headerTemplate>\n  <h2>Upload Preview</h2>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <div class=\"flex gap-4 items-center justify-between my-4\">\n    <p class=\"\">Total Items: {{ service.importedData().length }}</p>\n\n    <p class=\"\">Duplicates: {{ duplicateIndexSet.size }}</p>\n\n    <p class=\"\">Invalid Items: {{ invalidIndexSet.size }}</p>\n\n    <verben-drop-down\n      [multiselect]=\"true\"\n      placeholder=\"Find duplicates by\"\n      [options]=\"headers()\"\n      [ngModel]=\"uniqueIdentifiers()\"\n      (ngModelChange)=\"uniqueIdentifiers.set($event)\"\n    ></verben-drop-down>\n  </div>\n  <div style=\"max-height: min(75vh, 780px); overflow: auto\">\n    <lib-data-table\n      [data]=\"service.importedData()\"\n      [columns]=\"previewColumnsList()\"\n      [formGroupConfig]=\"formGroupConfig()\"\n      [useVirtualScroll]=\"true\"\n      (rowSave)=\"service.addRow($event)\"\n    >\n      <ng-container libColumn=\"actions\">\n        <ng-template\n          #cell\n          let-value\n          let-deleteRow=\"deleteRow\"\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-row=\"row\"\n          let-rowIndex=\"rowIndex\"\n        >\n          <div class=\"flex action-buttons\">\n            <verben-svg\n              (click)=\"toggleRowEdit()\"\n              icon=\"edit\"\n              [width]=\"15\"\n              [height]=\"15\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              (click)=\"deleteRow()\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n          </div>\n        </ng-template>\n\n        <ng-template\n          #cellEdit\n          let-value\n          let-deleteRow=\"deleteRow\"\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-row=\"row\"\n          let-rowIndex=\"rowIndex\"\n        >\n          <div class=\"flex action-buttons\">\n            <verben-svg\n              (click)=\"toggleRowEdit()\"\n              icon=\"tick\"\n              [width]=\"15\"\n              [height]=\"15\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n\n            <verben-svg\n              icon=\"delete\"\n              [width]=\"15\"\n              [height]=\"15\"\n              (click)=\"deleteRow()\"\n              class=\"cursor-pointer\"\n            ></verben-svg>\n          </div>\n        </ng-template>\n      </ng-container>\n    </lib-data-table>\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  <div class=\"footer-buttons flex gap-4 items-center justify-between my-4\">\n    <button\n      class=\"btn btn-secondary cancel-button\"\n      (click)=\"showPreview = false\"\n    >\n      Cancel\n    </button>\n    <button class=\"btn btn-primary export-button\" (click)=\"save()\">\n      Complete\n    </button>\n  </div>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DataImportComponent } from './data-import.component';\nimport { CardModule } from 'verben-ng-ui/src/lib/components/card';\nimport { VerbenDialogueModule } from 'verben-ng-ui/src/lib/components/verben-dialogue';\nimport { DataTableModule } from 'verben-ng-ui/src/lib/components/data-table';\nimport { VerbenaInputModule } from 'verben-ng-ui/src/lib/verbena-input';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { SvgModule } from 'verben-ng-ui/src/lib/components/svg';\nimport { DropDownModule } from 'verben-ng-ui/src/lib/components/drop-down';\n\n@NgModule({\n  declarations: [DataImportComponent],\n  imports: [\n    CommonModule,\n    CardModule,\n    VerbenDialogueModule,\n    DataTableModule,\n    VerbenaInputModule,\n    DropDownModule,\n    ReactiveFormsModule,\n    FormsModule,\n    SvgModule,\n  ],\n  exports: [DataImportComponent],\n})\nexport class DataImportModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.DataImportService"],"mappings":"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"}

package/fesm2022/verben-ng-ui-src-lib-components-visible-column.mjs

@@ -8,7 +8,15 @@ import * as i3 from 'verben-ng-ui/src/lib/components/svg';
 import { SvgModule } from 'verben-ng-ui/src/lib/components/svg';
 
 class VisibleColumnComponent {
-    columns = [];
+    _columns = [];
+    set columns(value) {
+        this._columns = value ?? [];
+        this.visibleColumns = this._columns.map((column) => !!column.checked);
+        this.updateSelectAllStatus();
+    }
+    get columns() {
+        return this._columns;
+    }
     items = [];
     enableDragAndDrop = true;
     displayedColumns = 5;

package/fesm2022/verben-ng-ui-src-lib-components-visible-column.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"verben-ng-ui-src-lib-components-visible-column.mjs","sources":["../../../projects/verben-ng-ui/src/lib/components/visible-column/visible-column.component.ts","../../../projects/verben-ng-ui/src/lib/components/visible-column/visible-column.component.html","../../../projects/verben-ng-ui/src/lib/components/visible-column/visible-column.module.ts","../../../projects/verben-ng-ui/src/lib/components/visible-column/verben-ng-ui-src-lib-components-visible-column.ts"],"sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  ChangeDetectionStrategy,\n} from '@angular/core';\nimport { IDataFilter } from 'verben-ng-ui/src/lib/models';\n\ninterface Item {\n  [key: string]: any;\n}\n\n@Component({\n  selector: 'verben-visible-column',\n  templateUrl: './visible-column.component.html',\n  styleUrls: ['./visible-column.component.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class VisibleColumnComponent {\n  @Input() columns: IDataFilter[] = [];\n  @Input() items: Item[] = [];\n  @Input() enableDragAndDrop: boolean = true;\n  @Input() displayedColumns: number = 5;\n  @Input() showMore: boolean = false;\n  @Input() pd?: string;\n  @Input() mg?: string;\n  @Input() height?: string;\n  @Input() width?: string;\n  @Input() bgColor?: string;\n  @Input() boxShadow?: string;\n  @Input() textColor?: string;\n  @Input() primaryColor?: string;\n  @Input() secondaryColor?: string;\n  @Input() tertiaryColor?: string;\n  @Input() border?: string;\n  @Input() borderRadius?: string;\n  @Input() selectWidth?: string;\n  @Input() closeColumn?: boolean;\n  @Input() saveCallback?: (items: IDataFilter[]) => Promise<void>;\n  @Output() columnsUpdated = new EventEmitter<IDataFilter[]>();\n  @Output() resetFilter = new EventEmitter();\n\n  originalColumnOrder: IDataFilter[] = [];\n  visibleColumns: boolean[] = [];\n  draggedIndex: number | null = null;\n  selectAll: boolean = false;\n\n  ngOnInit() {\n    this.originalColumnOrder = [...this.columns];\n    this.initializeColumnVisibility();\n  }\n\n  private initializeColumnVisibility() {\n    this.visibleColumns = this.columns.map((column) => column.checked);\n    this.updateSelectAllStatus();\n  }\n\n  resetColumns() {\n    this.columns = JSON.parse(JSON.stringify(this.originalColumnOrder)); // Ensure it's a deep copy\n    this.initializeColumnVisibility();\n    this.selectAll = false; // Reset select all\n    this.updateSelectAllStatus();\n    this.resetFilter.emit();\n  }\n\n  getSelectedColumnCount(): number {\n    return this.visibleColumns.filter((isVisible) => isVisible).length;\n  }\n\n  saveColumnVisibility() {\n    this.columns.forEach((column, index) => {\n      column.checked = this.visibleColumns[index];\n    });\n\n    const selectedColumns = this.columns.filter((column) => column.checked);\n    if (this.saveCallback) {\n      this.saveCallback(selectedColumns);\n    }\n    this.columnsUpdated.emit(selectedColumns);\n  }\n\n  toggleShowMore() {\n    this.showMore = !this.showMore;\n    this.displayedColumns = this.showMore ? this.columns.length : 5;\n  }\n\n  toggleSelectAll() {\n    this.selectAll = !this.selectAll;\n    this.visibleColumns = this.visibleColumns.map(() => this.selectAll);\n  }\n\n  updateSelectAllStatus() {\n    this.selectAll = this.visibleColumns.every((isVisible) => isVisible);\n  }\n\n  onDragStart(index: number, event: DragEvent) {\n    this.draggedIndex = index;\n    event.dataTransfer?.setData('text/plain', String(index));\n  }\n\n  onDragOver(event: DragEvent) {\n    event.preventDefault();\n  }\n\n  onDrop(index: number, event: DragEvent) {\n    event.preventDefault();\n    if (this.draggedIndex !== null && this.draggedIndex !== index) {\n      this.swapColumns(this.draggedIndex, index);\n    }\n    this.draggedIndex = null;\n  }\n\n  private swapColumns(fromIndex: number, toIndex: number) {\n    [this.columns[fromIndex], this.columns[toIndex]] = [\n      this.columns[toIndex],\n      this.columns[fromIndex],\n    ];\n    [this.visibleColumns[fromIndex], this.visibleColumns[toIndex]] = [\n      this.visibleColumns[toIndex],\n      this.visibleColumns[fromIndex],\n    ];\n  }\n}\n","<div\n  [style.background-color]=\"bgColor\"\n  [style.box-shadow]=\"boxShadow\"\n  [style.border]=\"border\"\n  [style.border-radius]=\"borderRadius\"\n  [style.color]=\"textColor\"\n  [style.width]=\"width\"\n  [style.height]=\"height\"\n  [style.padding]=\"pd\"\n  class=\"column-control\"\n>\n  <div class=\"visible-column-header flex justify-between text-sm\">\n    <span class=\"column-title\">\n      Column <sup>[{{ getSelectedColumnCount() }}]</sup>\n    </span>\n    <span class=\"column-reset\" (click)=\"resetColumns()\">Reset</span>\n  </div>\n  <hr />\n\n  <!-- Select All Checkbox -->\n  <div class=\"flex items-center gap\" [style.padding]=\"'4px 10px'\">\n    <label [style.font-size]=\"'13px'\" [style.font-weight]=\"'500'\">\n      <input type=\"checkbox\" [checked]=\"selectAll\" (change)=\"toggleSelectAll()\" />\n      Select All\n    </label>\n  </div>\n\n <div class=\"center\">\n  <ul *ngFor=\"let column of columns; let i = index\" class=\"column-options-container\">\n    <li\n      [attr.draggable]=\"enableDragAndDrop\"\n      (dragstart)=\"onDragStart(i, $event)\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(i, $event)\"\n      *ngIf=\"i < displayedColumns\"\n      [style.font-size]=\"'14px'\"\n      [style.margin-top]=\"'14px'\"\n      class=\"flex gap-sm items-center\"\n    >\n      <verben-svg *ngIf=\"enableDragAndDrop\" fill=\"var(--vbn-color-text)\" class=\"svg\" icon=\"square-dot\"></verben-svg>\n      <label class=\"flex gap-md items-center\">\n        <input type=\"checkbox\" [(ngModel)]=\"visibleColumns[i]\" (ngModelChange)=\"updateSelectAllStatus()\" />\n        {{ column.name }}\n      </label>\n    </li>\n  </ul>\n\n  <!-- Show More / Show Less -->\n  <div *ngIf=\"displayedColumns <= columns.length\" class=\"cursor-pointer\" [style.padding]=\"'20px 10px 0px 10px'\">\n    <span (click)=\"toggleShowMore()\">\n      {{ displayedColumns === columns.length ? \"Show Less\" : \"Show More\" }}\n    </span>\n  </div>\n </div>\n\n  <hr />\n\n  <!-- Save Button -->\n  <div class=\"btn-wrapper\">\n    <button\n      [style.margin-top]=\"'0.5rem'\"\n      [style.outline]=\"'none'\"\n      [style.border]=\"'none'\"\n      [style.padding]=\"'0.2rem 1.6rem'\"\n      [style.background-color]=\"primaryColor\"\n      [style.color]=\"tertiaryColor\"\n      [style.font-size]=\"'12px'\"\n      [style.font-weight]=\"'600'\" \n      [disabled]=\"getSelectedColumnCount() === 0\"\n      [ngClass]=\"{\n        disabledBtn: getSelectedColumnCount() === 0,\n        enableBtn: getSelectedColumnCount() !== 0\n      }\"\n      (click)=\"saveColumnVisibility()\"\n    >\n      Save\n    </button>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { VisibleColumnComponent } from './visible-column.component';\nimport { SvgModule } from 'verben-ng-ui/src/lib/components/svg';\n@NgModule({\n  declarations: [VisibleColumnComponent],\n  imports: [CommonModule, FormsModule, SvgModule],\n  exports: [VisibleColumnComponent],\n})\nexport class VisibleColumnModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"verben-ng-ui-src-lib-components-visible-column.mjs","sources":["../../../projects/verben-ng-ui/src/lib/components/visible-column/visible-column.component.ts","../../../projects/verben-ng-ui/src/lib/components/visible-column/visible-column.component.html","../../../projects/verben-ng-ui/src/lib/components/visible-column/visible-column.module.ts","../../../projects/verben-ng-ui/src/lib/components/visible-column/verben-ng-ui-src-lib-components-visible-column.ts"],"sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  ChangeDetectionStrategy,\n} from '@angular/core';\nimport { IDataFilter } from 'verben-ng-ui/src/lib/models';\n\ninterface Item {\n  [key: string]: any;\n}\n\n@Component({\n  selector: 'verben-visible-column',\n  templateUrl: './visible-column.component.html',\n  styleUrls: ['./visible-column.component.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class VisibleColumnComponent {\n  private _columns: IDataFilter[] = [];\n\n  @Input()\n  set columns(value: IDataFilter[] | null | undefined) {\n    this._columns = value ?? [];\n    this.visibleColumns = this._columns.map((column) => !!column.checked);\n    this.updateSelectAllStatus();\n  }\n\n  get columns(): IDataFilter[] {\n    return this._columns;\n  }\n  @Input() items: Item[] = [];\n  @Input() enableDragAndDrop: boolean = true;\n  @Input() displayedColumns: number = 5;\n  @Input() showMore: boolean = false;\n  @Input() pd?: string;\n  @Input() mg?: string;\n  @Input() height?: string;\n  @Input() width?: string;\n  @Input() bgColor?: string;\n  @Input() boxShadow?: string;\n  @Input() textColor?: string;\n  @Input() primaryColor?: string;\n  @Input() secondaryColor?: string;\n  @Input() tertiaryColor?: string;\n  @Input() border?: string;\n  @Input() borderRadius?: string;\n  @Input() selectWidth?: string;\n  @Input() closeColumn?: boolean;\n  @Input() saveCallback?: (items: IDataFilter[]) => Promise<void>;\n  @Output() columnsUpdated = new EventEmitter<IDataFilter[]>();\n  @Output() resetFilter = new EventEmitter();\n\n  originalColumnOrder: IDataFilter[] = [];\n  visibleColumns: boolean[] = [];\n  draggedIndex: number | null = null;\n  selectAll: boolean = false;\n\n  ngOnInit() {\n    this.originalColumnOrder = [...this.columns];\n    this.initializeColumnVisibility();\n  }\n\n  private initializeColumnVisibility() {\n    this.visibleColumns = this.columns.map((column) => column.checked);\n    this.updateSelectAllStatus();\n  }\n\n  resetColumns() {\n    this.columns = JSON.parse(JSON.stringify(this.originalColumnOrder)); // Ensure it's a deep copy\n    this.initializeColumnVisibility();\n    this.selectAll = false; // Reset select all\n    this.updateSelectAllStatus();\n    this.resetFilter.emit();\n  }\n\n  getSelectedColumnCount(): number {\n    return this.visibleColumns.filter((isVisible) => isVisible).length;\n  }\n\n  saveColumnVisibility() {\n    this.columns.forEach((column, index) => {\n      column.checked = this.visibleColumns[index];\n    });\n\n    const selectedColumns = this.columns.filter((column) => column.checked);\n    if (this.saveCallback) {\n      this.saveCallback(selectedColumns);\n    }\n    this.columnsUpdated.emit(selectedColumns);\n  }\n\n  toggleShowMore() {\n    this.showMore = !this.showMore;\n    this.displayedColumns = this.showMore ? this.columns.length : 5;\n  }\n\n  toggleSelectAll() {\n    this.selectAll = !this.selectAll;\n    this.visibleColumns = this.visibleColumns.map(() => this.selectAll);\n  }\n\n  updateSelectAllStatus() {\n    this.selectAll = this.visibleColumns.every((isVisible) => isVisible);\n  }\n\n  onDragStart(index: number, event: DragEvent) {\n    this.draggedIndex = index;\n    event.dataTransfer?.setData('text/plain', String(index));\n  }\n\n  onDragOver(event: DragEvent) {\n    event.preventDefault();\n  }\n\n  onDrop(index: number, event: DragEvent) {\n    event.preventDefault();\n    if (this.draggedIndex !== null && this.draggedIndex !== index) {\n      this.swapColumns(this.draggedIndex, index);\n    }\n    this.draggedIndex = null;\n  }\n\n  private swapColumns(fromIndex: number, toIndex: number) {\n    [this.columns[fromIndex], this.columns[toIndex]] = [\n      this.columns[toIndex],\n      this.columns[fromIndex],\n    ];\n    [this.visibleColumns[fromIndex], this.visibleColumns[toIndex]] = [\n      this.visibleColumns[toIndex],\n      this.visibleColumns[fromIndex],\n    ];\n  }\n}\n","<div\n  [style.background-color]=\"bgColor\"\n  [style.box-shadow]=\"boxShadow\"\n  [style.border]=\"border\"\n  [style.border-radius]=\"borderRadius\"\n  [style.color]=\"textColor\"\n  [style.width]=\"width\"\n  [style.height]=\"height\"\n  [style.padding]=\"pd\"\n  class=\"column-control\"\n>\n  <div class=\"visible-column-header flex justify-between text-sm\">\n    <span class=\"column-title\">\n      Column <sup>[{{ getSelectedColumnCount() }}]</sup>\n    </span>\n    <span class=\"column-reset\" (click)=\"resetColumns()\">Reset</span>\n  </div>\n  <hr />\n\n  <!-- Select All Checkbox -->\n  <div class=\"flex items-center gap\" [style.padding]=\"'4px 10px'\">\n    <label [style.font-size]=\"'13px'\" [style.font-weight]=\"'500'\">\n      <input type=\"checkbox\" [checked]=\"selectAll\" (change)=\"toggleSelectAll()\" />\n      Select All\n    </label>\n  </div>\n\n <div class=\"center\">\n  <ul *ngFor=\"let column of columns; let i = index\" class=\"column-options-container\">\n    <li\n      [attr.draggable]=\"enableDragAndDrop\"\n      (dragstart)=\"onDragStart(i, $event)\"\n      (dragover)=\"onDragOver($event)\"\n      (drop)=\"onDrop(i, $event)\"\n      *ngIf=\"i < displayedColumns\"\n      [style.font-size]=\"'14px'\"\n      [style.margin-top]=\"'14px'\"\n      class=\"flex gap-sm items-center\"\n    >\n      <verben-svg *ngIf=\"enableDragAndDrop\" fill=\"var(--vbn-color-text)\" class=\"svg\" icon=\"square-dot\"></verben-svg>\n      <label class=\"flex gap-md items-center\">\n        <input type=\"checkbox\" [(ngModel)]=\"visibleColumns[i]\" (ngModelChange)=\"updateSelectAllStatus()\" />\n        {{ column.name }}\n      </label>\n    </li>\n  </ul>\n\n  <!-- Show More / Show Less -->\n  <div *ngIf=\"displayedColumns <= columns.length\" class=\"cursor-pointer\" [style.padding]=\"'20px 10px 0px 10px'\">\n    <span (click)=\"toggleShowMore()\">\n      {{ displayedColumns === columns.length ? \"Show Less\" : \"Show More\" }}\n    </span>\n  </div>\n </div>\n\n  <hr />\n\n  <!-- Save Button -->\n  <div class=\"btn-wrapper\">\n    <button\n      [style.margin-top]=\"'0.5rem'\"\n      [style.outline]=\"'none'\"\n      [style.border]=\"'none'\"\n      [style.padding]=\"'0.2rem 1.6rem'\"\n      [style.background-color]=\"primaryColor\"\n      [style.color]=\"tertiaryColor\"\n      [style.font-size]=\"'12px'\"\n      [style.font-weight]=\"'600'\" \n      [disabled]=\"getSelectedColumnCount() === 0\"\n      [ngClass]=\"{\n        disabledBtn: getSelectedColumnCount() === 0,\n        enableBtn: getSelectedColumnCount() !== 0\n      }\"\n      (click)=\"saveColumnVisibility()\"\n    >\n      Save\n    </button>\n  </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { VisibleColumnComponent } from './visible-column.component';\nimport { SvgModule } from 'verben-ng-ui/src/lib/components/svg';\n@NgModule({\n  declarations: [VisibleColumnComponent],\n  imports: [CommonModule, FormsModule, SvgModule],\n  exports: [VisibleColumnComponent],\n})\nexport class VisibleColumnModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}