@elite.framework/ng.core 1.0.65 → 2.0.2

package/fesm2022/elite.framework-ng.core-src-lib-components-generic-card.mjs

@@ -1,214 +0,0 @@
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import * as i1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-import * as i3 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import * as i4 from 'primeng/menu';
-import { MenuModule } from 'primeng/menu';
-
-class GenericCard {
-    translateService;
-    data = [];
-    columns = [];
-    loading = false;
-    actions = [];
-    actionsMode = 'buttons';
-    showOperations = true;
-    // Added inputs for selection mirroring the table component
-    rowSelectable = false;
-    showRowSelectionCheckbox = false;
-    paginator = false; // Indicates if pagination is externally managed
-    // Row class function, mirroring the table component
-    rowClassFn = () => '';
-    action = new EventEmitter();
-    _selection = null;
-    get selection() {
-        return this._selection;
-    }
-    set selection(val) {
-        this._selection = val;
-        // No emit here, emit only from actual user interaction methods
-    }
-    selectionChange = new EventEmitter();
-    rowSelect = new EventEmitter();
-    // Note: onLazyLoad is not directly applicable as the card component doesn't have internal pagination UI.
-    // The parent component should manage data slicing and pass the correct 'data' array.
-    constructor(translateService) {
-        this.translateService = translateService;
-    }
-    ngOnInit() {
-        // Initialize selection if needed, e.g., if a default selection should be present
-    }
-    /**
-     * Generates menu items for the action menu.
-     * @param row The data row for which to generate actions.
-     * @returns An array of PrimeNG MenuItem objects.
-     */
-    getMenuItems(row) {
-        return this.actions.map(act => ({
-            label: act.label,
-            icon: act.icon,
-            command: () => this.action.emit({ name: act.name, row }),
-            styleClass: act.styleClass
-        }));
-    }
-    /**
-     * Handles click events on a clickable cell.
-     * @param col The ColumnDef of the clicked column.
-     * @param rowData The data row of the clicked cell.
-     * @param event The mouse event.
-     */
-    handleCellClick(col, rowData, event) {
-        event.stopPropagation(); // Prevent card selection if applicable
-        if (col.clickAction) {
-            col.clickAction(rowData, event);
-        }
-    }
-    /**
-     * Handles mouse enter events on a hoverable cell.
-     * @param col The ColumnDef of the hovered column.
-     * @param rowData The data row of the hovered cell.
-     * @param event The mouse event.
-     */
-    onCellHover(col, row, event) {
-        event.stopPropagation();
-        col.onCellMouseEnter?.(row, event);
-    }
-    /**
-     * Handles mouse leave events on a hoverable cell.
-     * @param col The ColumnDef of the hovered column.
-     * @param rowData The data row of the hovered cell.
-     * @param event The mouse event.
-     */
-    onCellLeave(col, row, event) {
-        event.stopPropagation();
-        col.onCellMouseLeave?.(row, event);
-    }
-    /**
-     * Handles click on the entire card for row selection (if not using checkboxes).
-     * @param item The data item associated with the clicked card.
-     */
-    handleCardClick(item) {
-        if (this.rowSelectable && !this.showRowSelectionCheckbox) {
-            // Single selection mode logic
-            if (this._selection === item) {
-                this._selection = null; // Deselect if already selected
-            }
-            else {
-                this._selection = item; // Select the current item
-            }
-            this.selectionChange.emit(this._selection);
-            this.rowSelect.emit(item); // Emit the selected item
-        }
-    }
-    /**
-     * Checks if an item is currently selected.
-     * Used for checkbox binding.
-     * @param item The item to check.
-     * @returns True if the item is selected, false otherwise.
-     */
-    isItemSelected(item) {
-        if (!this._selection) {
-            return false;
-        }
-        if (Array.isArray(this._selection)) {
-            // Check if item exists in the array (for multi-select)
-            return this._selection.includes(item);
-        }
-        // Single selection mode
-        return this._selection === item;
-    }
-    /**
-     * Toggles the selection state of an item.
-     * Used when a checkbox is clicked.
-     * @param item The item to toggle.
-     * @param event The change event from the checkbox.
-     */
-    toggleItemSelection(item, event) {
-        event.stopPropagation(); // Prevent card click event from firing
-        const isChecked = event.target.checked;
-        if (this.showRowSelectionCheckbox) {
-            // Multi-selection logic
-            let currentSelectionArray = Array.isArray(this._selection) ? [...this._selection] : [];
-            if (isChecked) {
-                if (!currentSelectionArray.includes(item)) {
-                    currentSelectionArray.push(item);
-                }
-            }
-            else {
-                currentSelectionArray = currentSelectionArray.filter(selectedItem => selectedItem !== item);
-            }
-            this._selection = currentSelectionArray;
-        }
-        else if (this.rowSelectable) {
-            // Single selection logic (if no checkboxes, this block would be redundant with handleCardClick, but kept for clarity)
-            this._selection = isChecked ? item : null;
-        }
-        this.selectionChange.emit(this._selection);
-        if (isChecked) {
-            this.rowSelect.emit(item);
-        }
-    }
-    /**
-     * Used by *ngFor to optimize rendering.
-     * Assumes each item has a unique 'id' property.
-     * @param index The index of the item.
-     * @param item The data item.
-     * @returns The unique identifier of the item.
-     */
-    trackById(index, item) {
-        // You might need to adjust 'id' if your data uses a different unique identifier
-        return item.id || index;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericCard, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: GenericCard, isStandalone: true, selector: "lib-generic-card", inputs: { data: "data", columns: "columns", loading: "loading", actions: "actions", actionsMode: "actionsMode", showOperations: "showOperations", rowSelectable: "rowSelectable", showRowSelectionCheckbox: "showRowSelectionCheckbox", paginator: "paginator", rowClassFn: "rowClassFn", selection: "selection" }, outputs: { action: "action", selectionChange: "selectionChange", rowSelect: "rowSelect" }, ngImport: i0, template: "\n<div class=\"p-4 p-4 flex flex-col gap-6 font-inter\">\n  <div *ngIf=\"loading\" class=\"col-span-full text-center py-8\">\n    <div class=\"animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 inline-block\"></div>\n    <p class=\"mt-4 text-gray-600\">Loading data...</p>\n  </div>\n\n  <div *ngIf=\"!loading && data.length === 0\" class=\"col-span-full text-center py-8 text-gray-500\">\n    No records found.\n  </div>\n\n  <div *ngFor=\"let item of data; trackBy: trackById\"\n       [ngClass]=\"rowClassFn(item)\"\n       class=\"bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden flex flex-row items-center\"\n       (click)=\"handleCardClick(item)\"\n       [class.cursor-pointer]=\"rowSelectable && !showRowSelectionCheckbox\">\n\n    <div *ngIf=\"showRowSelectionCheckbox\" class=\"p-4\">\n      <input type=\"checkbox\"\n             [checked]=\"isItemSelected(item)\"\n             (change)=\"toggleItemSelection(item, $event)\"\n             class=\"form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500\">\n    </div>\n\n    <div class=\"p-6 flex-grow\">\n      <div class=\"flex flex-wrap -mx-2\">\n        <ng-container *ngFor=\"let col of columns\">\n        <div *ngIf=\"col.isCardVisible\" class=\"px-2 mb-2 w-full sm:w-1/5\">\n          <div class=\"flex flex-col sm:flex-row sm:items-center text-sm\">\n            <span class=\"font-semibold text-gray-700 sm:w-1/3 sm:min-w-[80px] sm:pr-2\">{{ col.header | translate }}:</span>\n            <div class=\"flex-grow text-gray-800 text-left mt-1 sm:mt-0\">\n              <ng-container *ngIf=\"col.clickable; else readonlyCardCell\">\n                <span class=\"cursor-pointer hover:underline text-blue-600\"\n                      (click)=\"handleCellClick(col, item, $event)\"\n                      (mouseenter)=\"col.hoverable && onCellHover(col, item, $event)\"\n                      (mouseleave)=\"col.hoverable && onCellLeave(col, item, $event)\">\n                  <ng-container *ngIf=\"col.formatter; else defaultCardText\">\n                    <span [innerHTML]=\"col.formatter(item)\"></span>\n                  </ng-container>\n                  <ng-template #defaultCardText>\n                    {{ col.pipe ? col.pipe(item[col.field]) : item[col.field] }}\n                  </ng-template>\n                </span>\n              </ng-container>\n\n              <ng-template #readonlyCardCell>\n                <span>\n                  <ng-container *ngIf=\"col.formatter; else defaultCardText2\">\n                    <span [innerHTML]=\"col.formatter(item)\"></span>\n                  </ng-container>\n                  <ng-template #defaultCardText2>\n                    {{ col.pipe ? col.pipe(item[col.field]) : item[col.field] }}\n                  </ng-template>\n                </span>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n        </ng-container>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"showOperations && actions.length > 0\" class=\"border-l border-gray-200 p-4 flex justify-end items-center\">\n        <ng-container *ngIf=\"actionsMode === 'buttons'; else cardMenuTpl\">\n            <ng-container *ngFor=\"let act of actions\">\n                <button\n                    pButton\n                    type=\"button\"\n                    [icon]=\"act.icon || ''\"\n                    [title]=\"act.label?? '' | translate\"\n                    class=\"p-button-rounded p-button-text text-gray-600 hover:text-blue-600 custom-button-medium mr-1\"\n                    [ngClass]=\"act.styleClass\"\n                    (click)=\"action.emit({ name: act.name, row: item })\"\n                ></button>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #cardMenuTpl>\n            <p-menu\n                #cardMenu\n                [model]=\"getMenuItems(item)\"\n                popup=\"true\"\n                appendTo=\"body\">\n            </p-menu>\n            <button\n                pButton\n                type=\"button\"\n                icon=\"pi pi-ellipsis-v\"\n                class=\"p-button-rounded p-button-text text-gray-600 hover:text-blue-600\"\n                (click)=\"cardMenu.toggle($event)\">\n            </button>\n        </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".custom-button-medium{width:2.5rem;height:2.5rem}.icon-delete{color:#ef4444}.icon-edit{color:#2563eb}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i4.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: GenericCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-generic-card', imports: [
-                        CommonModule,
-                        ButtonModule,
-                        MenuModule,
-                        TranslateModule,
-                        FormsModule,
-                    ], template: "\n<div class=\"p-4 p-4 flex flex-col gap-6 font-inter\">\n  <div *ngIf=\"loading\" class=\"col-span-full text-center py-8\">\n    <div class=\"animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 inline-block\"></div>\n    <p class=\"mt-4 text-gray-600\">Loading data...</p>\n  </div>\n\n  <div *ngIf=\"!loading && data.length === 0\" class=\"col-span-full text-center py-8 text-gray-500\">\n    No records found.\n  </div>\n\n  <div *ngFor=\"let item of data; trackBy: trackById\"\n       [ngClass]=\"rowClassFn(item)\"\n       class=\"bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden flex flex-row items-center\"\n       (click)=\"handleCardClick(item)\"\n       [class.cursor-pointer]=\"rowSelectable && !showRowSelectionCheckbox\">\n\n    <div *ngIf=\"showRowSelectionCheckbox\" class=\"p-4\">\n      <input type=\"checkbox\"\n             [checked]=\"isItemSelected(item)\"\n             (change)=\"toggleItemSelection(item, $event)\"\n             class=\"form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500\">\n    </div>\n\n    <div class=\"p-6 flex-grow\">\n      <div class=\"flex flex-wrap -mx-2\">\n        <ng-container *ngFor=\"let col of columns\">\n        <div *ngIf=\"col.isCardVisible\" class=\"px-2 mb-2 w-full sm:w-1/5\">\n          <div class=\"flex flex-col sm:flex-row sm:items-center text-sm\">\n            <span class=\"font-semibold text-gray-700 sm:w-1/3 sm:min-w-[80px] sm:pr-2\">{{ col.header | translate }}:</span>\n            <div class=\"flex-grow text-gray-800 text-left mt-1 sm:mt-0\">\n              <ng-container *ngIf=\"col.clickable; else readonlyCardCell\">\n                <span class=\"cursor-pointer hover:underline text-blue-600\"\n                      (click)=\"handleCellClick(col, item, $event)\"\n                      (mouseenter)=\"col.hoverable && onCellHover(col, item, $event)\"\n                      (mouseleave)=\"col.hoverable && onCellLeave(col, item, $event)\">\n                  <ng-container *ngIf=\"col.formatter; else defaultCardText\">\n                    <span [innerHTML]=\"col.formatter(item)\"></span>\n                  </ng-container>\n                  <ng-template #defaultCardText>\n                    {{ col.pipe ? col.pipe(item[col.field]) : item[col.field] }}\n                  </ng-template>\n                </span>\n              </ng-container>\n\n              <ng-template #readonlyCardCell>\n                <span>\n                  <ng-container *ngIf=\"col.formatter; else defaultCardText2\">\n                    <span [innerHTML]=\"col.formatter(item)\"></span>\n                  </ng-container>\n                  <ng-template #defaultCardText2>\n                    {{ col.pipe ? col.pipe(item[col.field]) : item[col.field] }}\n                  </ng-template>\n                </span>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n        </ng-container>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"showOperations && actions.length > 0\" class=\"border-l border-gray-200 p-4 flex justify-end items-center\">\n        <ng-container *ngIf=\"actionsMode === 'buttons'; else cardMenuTpl\">\n            <ng-container *ngFor=\"let act of actions\">\n                <button\n                    pButton\n                    type=\"button\"\n                    [icon]=\"act.icon || ''\"\n                    [title]=\"act.label?? '' | translate\"\n                    class=\"p-button-rounded p-button-text text-gray-600 hover:text-blue-600 custom-button-medium mr-1\"\n                    [ngClass]=\"act.styleClass\"\n                    (click)=\"action.emit({ name: act.name, row: item })\"\n                ></button>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #cardMenuTpl>\n            <p-menu\n                #cardMenu\n                [model]=\"getMenuItems(item)\"\n                popup=\"true\"\n                appendTo=\"body\">\n            </p-menu>\n            <button\n                pButton\n                type=\"button\"\n                icon=\"pi pi-ellipsis-v\"\n                class=\"p-button-rounded p-button-text text-gray-600 hover:text-blue-600\"\n                (click)=\"cardMenu.toggle($event)\">\n            </button>\n        </ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".custom-button-medium{width:2.5rem;height:2.5rem}.icon-delete{color:#ef4444}.icon-edit{color:#2563eb}\n"] }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { data: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], actionsMode: [{
-                type: Input
-            }], showOperations: [{
-                type: Input
-            }], rowSelectable: [{
-                type: Input
-            }], showRowSelectionCheckbox: [{
-                type: Input
-            }], paginator: [{
-                type: Input
-            }], rowClassFn: [{
-                type: Input
-            }], action: [{
-                type: Output
-            }], selection: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }], rowSelect: [{
-                type: Output
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { GenericCard };
-//# sourceMappingURL=elite.framework-ng.core-src-lib-components-generic-card.mjs.map

package/fesm2022/elite.framework-ng.core-src-lib-components-generic-card.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"elite.framework-ng.core-src-lib-components-generic-card.mjs","sources":["../../../projects/core/src/lib/components/generic-card/generic-card.ts","../../../projects/core/src/lib/components/generic-card/generic-card.html","../../../projects/core/src/lib/components/generic-card/elite.framework-ng.core-src-lib-components-generic-card.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { ActionDef } from '@elite.framework/ng.core';\nimport { ColumnDef } from '@elite.framework/ng.core';\nimport { TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { MenuItem } from 'primeng/api';\nimport { ButtonModule } from 'primeng/button';\nimport { MenuModule } from 'primeng/menu';\n\n@Component({\n  selector: 'lib-generic-card',\n  imports: [\n     CommonModule,\n    ButtonModule,\n    MenuModule,\n    TranslateModule,\n    FormsModule,\n  ],\n  templateUrl: './generic-card.html',\n  styleUrl: './generic-card.css'\n})\nexport class GenericCard <T extends { [key: string]: any }> implements OnInit{\n\n    @Input() data: T[] = [];\n  @Input() columns: ColumnDef<T>[] = [];\n  @Input() loading = false;\n  @Input() actions: ActionDef<T>[] = [];\n  @Input() actionsMode: 'buttons' | 'menu' = 'buttons';\n  @Input() showOperations: boolean = true;\n\n  // Added inputs for selection mirroring the table component\n  @Input() rowSelectable: boolean = false;\n  @Input() showRowSelectionCheckbox: boolean = false;\n  @Input() paginator: boolean = false; // Indicates if pagination is externally managed\n\n  // Row class function, mirroring the table component\n  @Input() rowClassFn: (rowData: any) => string = () => '';\n\n   @Output() action = new EventEmitter<{ name: string; row: T }>();\n\n\n  _selection: T | T[] | null = null;\n  @Input()\n  get selection(): T | T[] | null {\n      return this._selection;\n  }\n  set selection(val: T | T[] | null) {\n      this._selection = val;\n      // No emit here, emit only from actual user interaction methods\n  }\n\n  @Output() selectionChange = new EventEmitter<T | T[] | null>();\n  @Output() rowSelect = new EventEmitter<T>();\n  // Note: onLazyLoad is not directly applicable as the card component doesn't have internal pagination UI.\n  // The parent component should manage data slicing and pass the correct 'data' array.\n\n  constructor(private translateService: TranslateService) {}\n\n  ngOnInit(): void {\n    // Initialize selection if needed, e.g., if a default selection should be present\n  }\n\n  /**\n   * Generates menu items for the action menu.\n   * @param row The data row for which to generate actions.\n   * @returns An array of PrimeNG MenuItem objects.\n   */\n getMenuItems(row: T): MenuItem[] {\n    return this.actions.map(act => ({\n      label: act.label,\n      icon: act.icon,\n      command: () => this.action.emit({ name: act.name, row }),\n      styleClass: act.styleClass\n    }));\n  }\n\n  /**\n   * Handles click events on a clickable cell.\n   * @param col The ColumnDef of the clicked column.\n   * @param rowData The data row of the clicked cell.\n   * @param event The mouse event.\n   */\n  handleCellClick(col: ColumnDef<any>, rowData: any, event: MouseEvent): void {\n    event.stopPropagation(); // Prevent card selection if applicable\n    if (col.clickAction) {\n      col.clickAction(rowData, event);\n    }\n  }\n\n  /**\n   * Handles mouse enter events on a hoverable cell.\n   * @param col The ColumnDef of the hovered column.\n   * @param rowData The data row of the hovered cell.\n   * @param event The mouse event.\n   */\n  onCellHover(col: ColumnDef<T>, row: T, event: MouseEvent): void {\n    event.stopPropagation();\n    col.onCellMouseEnter?.(row, event);\n  }\n\n  /**\n   * Handles mouse leave events on a hoverable cell.\n   * @param col The ColumnDef of the hovered column.\n   * @param rowData The data row of the hovered cell.\n   * @param event The mouse event.\n   */\n  onCellLeave(col: ColumnDef<T>, row: T, event: MouseEvent): void {\n    event.stopPropagation();\n    col.onCellMouseLeave?.(row, event);\n  }\n\n  /**\n   * Handles click on the entire card for row selection (if not using checkboxes).\n   * @param item The data item associated with the clicked card.\n   */\n  handleCardClick(item: T): void {\n    if (this.rowSelectable && !this.showRowSelectionCheckbox) {\n      // Single selection mode logic\n      if (this._selection === item) {\n        this._selection = null; // Deselect if already selected\n      } else {\n        this._selection = item; // Select the current item\n      }\n      this.selectionChange.emit(this._selection);\n      this.rowSelect.emit(item); // Emit the selected item\n    }\n  }\n\n  /**\n   * Checks if an item is currently selected.\n   * Used for checkbox binding.\n   * @param item The item to check.\n   * @returns True if the item is selected, false otherwise.\n   */\n  isItemSelected(item: T): boolean {\n    if (!this._selection) {\n      return false;\n    }\n    if (Array.isArray(this._selection)) {\n      // Check if item exists in the array (for multi-select)\n      return (this._selection as T[]).includes(item);\n    }\n    // Single selection mode\n    return this._selection === item;\n  }\n\n  /**\n   * Toggles the selection state of an item.\n   * Used when a checkbox is clicked.\n   * @param item The item to toggle.\n   * @param event The change event from the checkbox.\n   */\n  toggleItemSelection(item: T, event: Event): void {\n    event.stopPropagation(); // Prevent card click event from firing\n    const isChecked = (event.target as HTMLInputElement).checked;\n\n    if (this.showRowSelectionCheckbox) {\n      // Multi-selection logic\n      let currentSelectionArray = Array.isArray(this._selection) ? [...this._selection] : [];\n\n      if (isChecked) {\n        if (!currentSelectionArray.includes(item)) {\n          currentSelectionArray.push(item);\n        }\n      } else {\n        currentSelectionArray = currentSelectionArray.filter(selectedItem => selectedItem !== item);\n      }\n      this._selection = currentSelectionArray;\n    } else if (this.rowSelectable) {\n      // Single selection logic (if no checkboxes, this block would be redundant with handleCardClick, but kept for clarity)\n      this._selection = isChecked ? item : null;\n    }\n    this.selectionChange.emit(this._selection);\n    if (isChecked) {\n      this.rowSelect.emit(item);\n    }\n  }\n\n  /**\n   * Used by *ngFor to optimize rendering.\n   * Assumes each item has a unique 'id' property.\n   * @param index The index of the item.\n   * @param item The data item.\n   * @returns The unique identifier of the item.\n   */\n  trackById(index: number, item: T): any {\n    // You might need to adjust 'id' if your data uses a different unique identifier\n    return (item as any).id || index;\n  }\n\n}\n","\n<div class=\"p-4 p-4 flex flex-col gap-6 font-inter\">\n  <div *ngIf=\"loading\" class=\"col-span-full text-center py-8\">\n    <div class=\"animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 inline-block\"></div>\n    <p class=\"mt-4 text-gray-600\">Loading data...</p>\n  </div>\n\n  <div *ngIf=\"!loading && data.length === 0\" class=\"col-span-full text-center py-8 text-gray-500\">\n    No records found.\n  </div>\n\n  <div *ngFor=\"let item of data; trackBy: trackById\"\n       [ngClass]=\"rowClassFn(item)\"\n       class=\"bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden flex flex-row items-center\"\n       (click)=\"handleCardClick(item)\"\n       [class.cursor-pointer]=\"rowSelectable && !showRowSelectionCheckbox\">\n\n    <div *ngIf=\"showRowSelectionCheckbox\" class=\"p-4\">\n      <input type=\"checkbox\"\n             [checked]=\"isItemSelected(item)\"\n             (change)=\"toggleItemSelection(item, $event)\"\n             class=\"form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500\">\n    </div>\n\n    <div class=\"p-6 flex-grow\">\n      <div class=\"flex flex-wrap -mx-2\">\n        <ng-container *ngFor=\"let col of columns\">\n        <div *ngIf=\"col.isCardVisible\" class=\"px-2 mb-2 w-full sm:w-1/5\">\n          <div class=\"flex flex-col sm:flex-row sm:items-center text-sm\">\n            <span class=\"font-semibold text-gray-700 sm:w-1/3 sm:min-w-[80px] sm:pr-2\">{{ col.header | translate }}:</span>\n            <div class=\"flex-grow text-gray-800 text-left mt-1 sm:mt-0\">\n              <ng-container *ngIf=\"col.clickable; else readonlyCardCell\">\n                <span class=\"cursor-pointer hover:underline text-blue-600\"\n                      (click)=\"handleCellClick(col, item, $event)\"\n                      (mouseenter)=\"col.hoverable && onCellHover(col, item, $event)\"\n                      (mouseleave)=\"col.hoverable && onCellLeave(col, item, $event)\">\n                  <ng-container *ngIf=\"col.formatter; else defaultCardText\">\n                    <span [innerHTML]=\"col.formatter(item)\"></span>\n                  </ng-container>\n                  <ng-template #defaultCardText>\n                    {{ col.pipe ? col.pipe(item[col.field]) : item[col.field] }}\n                  </ng-template>\n                </span>\n              </ng-container>\n\n              <ng-template #readonlyCardCell>\n                <span>\n                  <ng-container *ngIf=\"col.formatter; else defaultCardText2\">\n                    <span [innerHTML]=\"col.formatter(item)\"></span>\n                  </ng-container>\n                  <ng-template #defaultCardText2>\n                    {{ col.pipe ? col.pipe(item[col.field]) : item[col.field] }}\n                  </ng-template>\n                </span>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n        </ng-container>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"showOperations && actions.length > 0\" class=\"border-l border-gray-200 p-4 flex justify-end items-center\">\n        <ng-container *ngIf=\"actionsMode === 'buttons'; else cardMenuTpl\">\n            <ng-container *ngFor=\"let act of actions\">\n                <button\n                    pButton\n                    type=\"button\"\n                    [icon]=\"act.icon || ''\"\n                    [title]=\"act.label?? '' | translate\"\n                    class=\"p-button-rounded p-button-text text-gray-600 hover:text-blue-600 custom-button-medium mr-1\"\n                    [ngClass]=\"act.styleClass\"\n                    (click)=\"action.emit({ name: act.name, row: item })\"\n                ></button>\n            </ng-container>\n        </ng-container>\n\n        <ng-template #cardMenuTpl>\n            <p-menu\n                #cardMenu\n                [model]=\"getMenuItems(item)\"\n                popup=\"true\"\n                appendTo=\"body\">\n            </p-menu>\n            <button\n                pButton\n                type=\"button\"\n                icon=\"pi pi-ellipsis-v\"\n                class=\"p-button-rounded p-button-text text-gray-600 hover:text-blue-600\"\n                (click)=\"cardMenu.toggle($event)\">\n            </button>\n        </ng-template>\n    </div>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}