ng-hub-ui-board 19.2.0 → 19.2.1

package/README.md

@@ -20,14 +20,16 @@ A flexible and powerful board component for Angular applications, perfect for im
 
 ## Features
 
-- 🎯 Standalone component
-- 🔄 Drag and drop support for both cards and columns
-- 📱 Responsive design
-- 🎨 Highly customizable with templates
-- 🔧 Bootstrap compatible
-- ⚡ Virtual scrolling support with end-detection
-- 🎭 Custom styling support for boards, columns, and cards
-- 🔒 Disable/enable functionality for cards and columns
+- 🎯 **Standalone component** - Modern Angular approach with minimal setup
+- 🔄 **Drag and drop support** - Full drag-and-drop for both cards and columns using Angular CDK
+- 📱 **Responsive design** - Works seamlessly across desktop, tablet, and mobile devices
+- 🎨 **Highly customizable** - Custom templates for cards, headers, and footers
+- 🔧 **Bootstrap compatible** - Integrates perfectly with Bootstrap 5 design system
+- ⚡ **Virtual scrolling** - Supports infinite scroll with end-detection for performance
+- 🎭 **Custom styling** - CSS custom properties for easy theming and customization
+- 🔒 **Granular control** - Enable/disable functionality at board, column, or card level
+- 🏷️ **TypeScript support** - Full type safety with generic interfaces
+- ♿ **Accessibility ready** - Follows WAI-ARIA best practices for drag-and-drop
 
 ## Installation
 
@@ -114,7 +116,7 @@ export class BoardDemoComponent {
 </hub-board>
 ```
 
-Este bloque de código ofrece un ejemplo mínimo y funcional tanto para principiantes como para usuarios intermedios.
+This code block provides a minimal and functional example for both beginners and intermediate users.
 
 ## Usage
 
@@ -261,7 +263,7 @@ handleCardMoved(event: CdkDragDrop<BoardColumn, BoardColumn, BoardCard>) {
 Emitted when a column is reordered via drag and drop.
 
 ```html
-<hub-board [board]="board" (reachedEnd)="handleReachedEnd($event)"> </hub-board>
+<hub-board [board]="board" (onColumnMoved)="handleColumnMoved($event)"> </hub-board>
 ```
 
 **Type:** `EventEmitter<CdkDragDrop<BoardColumn[]>>`
@@ -471,23 +473,42 @@ Each case benefits from customizable columns, card templates, and event outputs
 Here are some common issues and how to resolve them:
 
 ### 🔄 Drag and drop not working
-Make sure you have imported `@angular/cdk` and the necessary `DragDropModule`. Also check that your board and column data is reactive (e.g. using `signal()` or `RxJS`).
+- **Check dependencies**: Ensure `@angular/cdk` is installed and imported
+- **Reactive data**: Verify your board data is reactive (using `signal()`, `Observable`, or proper change detection)
+- **Browser compatibility**: Ensure your target browsers support the HTML5 Drag and Drop API
 
 ### 📏 Scroll detection not triggering `reachedEnd`
-Ensure the `<hub-board>` element or one of its parents has a `max-height` or fixed height defined and `overflow: auto` to enable scrolling.
+- **Height constraints**: The `<hub-board>` element or its parent must have a `max-height` or fixed height
+- **Overflow setting**: Ensure `overflow: auto` or `overflow-y: scroll` is applied to enable scrolling
+- **Content length**: Make sure there's enough content to actually trigger scrolling
 
 ### 🎨 Styles not applying
-Confirm you've imported the SCSS base styles in your global `styles.scss`:
-
-```scss
-@use '../dist/board/src/lib/styles/base.scss' as boardBase;
-```
+- **Import path**: Confirm you've imported the SCSS base styles in your global `styles.scss`:
+  ```scss
+  @use '../dist/board/src/lib/styles/base.scss' as boardBase;
+  ```
+- **CSS custom properties**: Check that your custom CSS variables follow the `--hub-*` naming convention
+- **Style specificity**: Ensure your custom styles have sufficient specificity to override defaults
 
 ### 🧩 Templates not rendering
-If you’re using `cardTpt`, `columnHeaderTpt`, or `columnFooterTpt`, ensure you've also imported the corresponding directives into your component.
-
-### 🛠️ Error: "Cannot read property 'cards' of undefined"
-Make sure your `board` signal is initialized and its `columns` array is not `undefined`.
+- **Import directives**: When using standalone components, import the template directives:
+  ```typescript
+  imports: [HubBoardComponent, CardTemplateDirective, BoardColumnHeaderDirective]
+  ```
+- **Template syntax**: Verify you're using the correct template selectors (`cardTpt`, `columnHeaderTpt`, `columnFooterTpt`)
+
+### 🛠️ Runtime errors
+- **"Cannot read property 'cards' of undefined"**: Initialize your board signal properly:
+  ```typescript
+  board = signal<Board>({ title: 'My Board', columns: [] });
+  ```
+- **Type errors**: Ensure your data matches the `Board`, `BoardColumn`, and `BoardCard` interfaces
+- **Signal updates**: Use `.set()` or `.update()` methods to modify signal values
+
+### 🎯 Performance issues
+- **Large datasets**: Consider implementing virtual scrolling for columns with many cards
+- **Memory leaks**: Ensure proper cleanup of event listeners and subscriptions
+- **Change detection**: Use `OnPush` change detection strategy when possible
 
 If problems persist, open an issue at: https://github.com/carlos-morcillo/ng-hub-ui-board/issues
 

package/fesm2022/ng-hub-ui-board.mjs

@@ -4,7 +4,32 @@ import * as i1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 
+/**
+ * Directive that allows customization of column footer templates within board columns.
+ *
+ * This directive enables developers to define custom templates for column footers,
+ * perfect for displaying summary information, quick actions, statistics,
+ * or any column-specific controls at the bottom of each column.
+ *
+ * @example
+ * ```html
+ * <ng-template columnFooterTpt let-column="column">
+ *   <div class="custom-footer">
+ *     <div class="column-summary">
+ *       <span>Total: {{ column.cards.length }}</span>
+ *       <span>Priority Items: {{ getPriorityItems(column) }}</span>
+ *     </div>
+ *     <button (click)="quickAddCard(column)">Quick Add</button>
+ *   </div>
+ * </ng-template>
+ * ```
+ */
 class BoardColumnFooterDirective {
+    /**
+     * Creates a new BoardColumnFooterDirective instance.
+     *
+     * @param templateRef - The template reference that contains the custom column footer layout
+     */
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
@@ -19,7 +44,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+/**
+ * Directive that allows customization of column header templates within board columns.
+ *
+ * This directive provides the ability to define custom templates for rendering column headers,
+ * giving developers full control over the appearance and functionality of column headers
+ * including titles, descriptions, actions, and metadata display.
+ *
+ * @example
+ * ```html
+ * <ng-template columnHeaderTpt let-column="column">
+ *   <div class="custom-header">
+ *     <h2>{{ column.title }}</h2>
+ *     <span class="card-count">{{ column.cards.length }} items</span>
+ *     <button (click)="addCard(column)">Add Card</button>
+ *   </div>
+ * </ng-template>
+ * ```
+ */
 class BoardColumnHeaderDirective {
+    /**
+     * Creates a new BoardColumnHeaderDirective instance.
+     *
+     * @param templateRef - The template reference that contains the custom column header layout
+     */
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
@@ -34,7 +82,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+/**
+ * Directive that allows customization of card templates within board columns.
+ *
+ * This directive is used to define custom templates for rendering board cards.
+ * It provides access to the template reference that can be used by the board component
+ * to render cards with custom layouts and styling.
+ *
+ * @example
+ * ```html
+ * <ng-template cardTpt let-card="item" let-column="column">
+ *   <div class="custom-card">
+ *     <h3>{{ card.title }}</h3>
+ *     <p>{{ card.description }}</p>
+ *   </div>
+ * </ng-template>
+ * ```
+ */
 class CardTemplateDirective {
+    /**
+     * Creates a new CardTemplateDirective instance.
+     *
+     * @param templateRef - The template reference that contains the custom card layout
+     */
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
@@ -77,53 +147,63 @@ class HubBoardComponent {
         this.onColumnMoved = new EventEmitter();
         // emit an event when the user has scrolled to the end of a specific column in the board.
         this.reachedEnd = new EventEmitter();
-        /* Defines a default enter predicate function for the drag and drop operation. */
+        /**
+         * Default predicate function that allows all drag and drop operations.
+         * This function is used when no custom predicate is provided for a column.
+         *
+         * @returns Always returns true, allowing any card to be dropped in any column
+         */
         this.defaultEnterPredicateFn = () => true;
     }
     /**
-     * Emits an event with the clicked item as a parameter.
+     * Handles card click events and emits the clicked card data.
+     * This method is triggered when a user clicks on a card within the board.
      *
-     * @param {any} item - Represents the item that was clicked on the card.
+     * @param item - The card data object that was clicked
      */
     cardClick(item) {
         this.onCardClick.next(item);
     }
     /**
-     * Used to handle the event when a column is dropped in a drag and drop operation, and it moves the column in the array and
-     * emits an event.
+     * Handles column reordering when a column is dropped after being dragged.
+     * This method updates the column positions in the array and emits a column moved event.
      *
-     * @param event - represents the drag and drop event that occurred.
+     * @param event - The drag and drop event containing information about the moved column
      */
     dropColumn(event) {
         moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
         this.onColumnMoved.emit(event);
     }
     /**
-     * Used to handle the dropping of a card in a drag and drop operation, either moving the card within the same container or
-     * transferring it to a different container.
+     * Handles card drag and drop operations, supporting both reordering within the same column
+     * and transferring cards between different columns.
      *
-     * @param event - a generic type that takes three arguments:
+     * @param event - The drag and drop event containing source/target containers and card data
      */
     dropCard(event) {
+        // Check if the card was moved within the same column
         if (event.previousContainer === event.container) {
+            // Reorder the card within the same column
             moveItemInArray(event.container.data.cards, event.previousIndex, event.currentIndex);
         }
         else {
+            // Transfer the card from one column to another
             transferArrayItem(event.previousContainer.data.cards, event.container.data.cards, event.previousIndex, event.currentIndex);
         }
         this.onCardMoved.emit(event);
     }
     /**
-     * Checks if the user has scrolled to the end of a specific element and emits an event if so.
+     * Detects when a column has been scrolled to the bottom and emits a reachedEnd event.
+     * This is useful for implementing lazy loading or infinite scroll functionality.
      *
-     * @param {number} index - The index parameter is a number that represents the index of the column being scrolled.
-     * @param {Event} event - The event parameter is an object that represents the scroll event. It contains information about the
-     * scroll event, such as the source element that triggered the event, the amount of scrolling that has occurred, and the dimensions
-     * of the scrollable area.
+     * @param index - The index of the column that was scrolled
+     * @param event - The scroll event containing target element and scroll position information
      */
     onScroll(index, event) {
         const el = event.target;
+        // Check if the element exists and if we've scrolled to the bottom
         if (el && el.scrollTop + el.clientHeight >= el.scrollHeight) {
+            // Emit event with column index and data for lazy loading purposes
             this.reachedEnd.emit({
                 index,
                 data: this.board()?.columns?.[index] ?? []
@@ -146,6 +226,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Angular module that provides board functionality with drag-and-drop support.
+ *
+ * This module includes all the necessary components and directives for creating
+ * Kanban-style boards with customizable columns, cards, and templates.
+ *
+ * @deprecated Use standalone components instead. Import individual components and directives directly.
+ *
+ * @example
+ * ```typescript
+ * // Legacy module approach (not recommended)
+ * import { BoardModule } from 'ng-hub-ui-board';
+ *
+ * @NgModule({
+ *   imports: [BoardModule]
+ * })
+ * export class AppModule {}
+ *
+ * // Recommended standalone approach
+ * import { HubBoardComponent, CardTemplateDirective } from 'ng-hub-ui-board';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [HubBoardComponent, CardTemplateDirective]
+ * })
+ * export class MyComponent {}
+ * ```
+ */
 class BoardModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BoardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: BoardModule, imports: [HubBoardComponent,

package/fesm2022/ng-hub-ui-board.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-hub-ui-board.mjs","sources":["../../../projects/board/src/lib/directives/board-column-footer.directive.ts","../../../projects/board/src/lib/directives/board-column-header.directive.ts","../../../projects/board/src/lib/directives/card-template.directive.ts","../../../projects/board/src/lib/components/board/board.component.ts","../../../projects/board/src/lib/components/board/board.component.html","../../../projects/board/src/lib/board.module.ts","../../../projects/board/src/lib/pipes/invert-color.pipe.ts","../../../projects/board/src/public-api.ts","../../../projects/board/src/ng-hub-ui-board.ts"],"sourcesContent":["import { Directive, TemplateRef } from '@angular/core';\n\n@Directive({\n\tselector: '[columnFooterTpt]',\n\tstandalone: true\n})\nexport class BoardColumnFooterDirective {\n\tconstructor(public templateRef: TemplateRef<unknown>) {}\n}\n","import { Directive, TemplateRef } from '@angular/core';\n\n@Directive({\n\tselector: '[columnHeaderTpt]',\n\tstandalone: true\n})\nexport class BoardColumnHeaderDirective {\n\tconstructor(public templateRef: TemplateRef<unknown>) {}\n}\n","import { Directive, ElementRef, TemplateRef } from '@angular/core';\n\n@Directive({\n\tselector: '[cardTpt]',\n\tstandalone: true\n})\nexport class CardTemplateDirective {\n\tconstructor(public templateRef: TemplateRef<unknown>) {}\n}\n","import {\n\tCdkDragDrop,\n\tDragDropModule,\n\tmoveItemInArray,\n\ttransferArrayItem\n} from '@angular/cdk/drag-drop';\nimport { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';\nimport {\n\tComponent,\n\tEventEmitter,\n\tOutput,\n\tSignal,\n\tTemplateRef,\n\tcomputed,\n\tcontentChild,\n\tinput\n} from '@angular/core';\nimport { BoardColumnFooterDirective } from '../../directives/board-column-footer.directive';\nimport { BoardColumnHeaderDirective } from '../../directives/board-column-header.directive';\nimport { CardTemplateDirective } from '../../directives/card-template.directive';\nimport { Board } from '../../models/board';\nimport { BoardCard } from '../../models/board-card';\nimport { BoardColumn } from '../../models/board-column';\nimport { ReachedEndEvent } from '../../models/reached-end-event';\n\n@Component({\n\tselector: 'hub-board, hub-ui-board',\n\ttemplateUrl: './board.component.html',\n\tstyleUrls: ['./board.component.scss'],\n\tstandalone: true,\n\timports: [NgClass, NgStyle, NgTemplateOutlet, DragDropModule]\n})\nexport class HubBoardComponent {\n\treadonly board = input<Board>();\n\n\tcolumns: Signal<Array<BoardColumn>> = computed(() => {\n\t\treturn this.board()?.columns ?? [];\n\t});\n\n\t// Used to disable the sorting of columns in the board\n\treadonly columnSortingDisabled = input<boolean>(false);\n\n\t// A template reference for the card template\n\treadonly cardTpt = contentChild(CardTemplateDirective, {\n\t\tread: TemplateRef<unknown>\n\t});\n\n\t// A template reference for the column header template\n\treadonly columnHeaderTpt = contentChild(BoardColumnHeaderDirective, {\n\t\tread: TemplateRef<unknown>\n\t});\n\n\t// A template reference for the column footer template\n\treadonly columnFooterTpt = contentChild(BoardColumnFooterDirective, {\n\t\tread: TemplateRef<unknown>\n\t});\n\n\t// triggered when a card is clicked\n\t@Output() onCardClick = new EventEmitter<BoardCard>();\n\n\t// triggered when a card is moved\n\t@Output() onCardMoved = new EventEmitter<\n\t\tCdkDragDrop<BoardColumn, BoardColumn, BoardCard<any>>\n\t>();\n\n\t// triggered when a column is moved\n\t@Output() onColumnMoved = new EventEmitter<CdkDragDrop<BoardColumn[]>>();\n\n\t// emit an event when the user has scrolled to the end of a specific column in the board.\n\t@Output() reachedEnd = new EventEmitter<ReachedEndEvent>();\n\n\t/* Defines a default enter predicate function for the drag and drop operation. */\n\tdefaultEnterPredicateFn = () => true;\n\n\t/**\n\t * Emits an event with the clicked item as a parameter.\n\t *\n\t * @param {any} item - Represents the item that was clicked on the card.\n\t */\n\tcardClick(item: any) {\n\t\tthis.onCardClick.next(item);\n\t}\n\n\t/**\n\t * Used to handle the event when a column is dropped in a drag and drop operation, and it moves the column in the array and\n\t * emits an event.\n\t *\n\t * @param event - represents the drag and drop event that occurred.\n\t */\n\tdropColumn(event: CdkDragDrop<any>) {\n\t\tmoveItemInArray(\n\t\t\tevent.container.data,\n\t\t\tevent.previousIndex,\n\t\t\tevent.currentIndex\n\t\t);\n\t\tthis.onColumnMoved.emit(event);\n\t}\n\n\t/**\n\t * Used to handle the dropping of a card in a drag and drop operation, either moving the card within the same container or\n\t * transferring it to a different container.\n\t *\n\t * @param event - a generic type that takes three arguments:\n\t */\n\tdropCard(event: CdkDragDrop<BoardColumn, BoardColumn, BoardCard<any>>) {\n\t\tif (event.previousContainer === event.container) {\n\t\t\tmoveItemInArray(\n\t\t\t\tevent.container.data.cards,\n\t\t\t\tevent.previousIndex,\n\t\t\t\tevent.currentIndex\n\t\t\t);\n\t\t} else {\n\t\t\ttransferArrayItem(\n\t\t\t\tevent.previousContainer.data.cards,\n\t\t\t\tevent.container.data.cards,\n\t\t\t\tevent.previousIndex,\n\t\t\t\tevent.currentIndex\n\t\t\t);\n\t\t}\n\t\tthis.onCardMoved.emit(event);\n\t}\n\n\t/**\n\t * Checks if the user has scrolled to the end of a specific element and emits an event if so.\n\t *\n\t * @param {number} index - The index parameter is a number that represents the index of the column being scrolled.\n\t * @param {Event} event - The event parameter is an object that represents the scroll event. It contains information about the\n\t * scroll event, such as the source element that triggered the event, the amount of scrolling that has occurred, and the dimensions\n\t * of the scrollable area.\n\t */\n\tonScroll(index: number, event: Event) {\n\t\tconst el = event.target as HTMLElement;\n\t\tif (el && el.scrollTop + el.clientHeight >= el.scrollHeight) {\n\t\t\tthis.reachedEnd.emit({\n\t\t\t\tindex,\n\t\t\t\tdata: this.board()?.columns?.[index] ?? []\n\t\t\t});\n\t\t}\n\t}\n}\n","@if (columns().length) {\n\t<div\n\t\tclass=\"hub-board\"\n\t\tcdkDropList\n\t\tcdkDropListOrientation=\"horizontal\"\n\t\t[cdkDropListData]=\"columns()\"\n\t\t(cdkDropListDropped)=\"dropColumn($event)\"\n\t\t[cdkDropListSortingDisabled]=\"columnSortingDisabled()\"\n\t>\n\t\t<div cdkDropListGroup class=\"hub-board__columns\">\n\t\t\t@for (column of columns(); let index = $index; track column) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-board__column-container\"\n\t\t\t\t\tcdkDrag\n\t\t\t\t\t[cdkDragData]=\"column\"\n\t\t\t\t\t[cdkDragDisabled]=\"column.disabled\"\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-board__column\"\n\t\t\t\t\t\t[ngClass]=\"column.classlist\"\n\t\t\t\t\t\t[ngStyle]=\"column.style\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div class=\"hub-board__column-header\">\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\t\t\tcolumnHeaderTpt() || defaultColumnHeaderTpt\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ column: column }\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"hub-board__column-body\"\n\t\t\t\t\t\t\tcdkDropList\n\t\t\t\t\t\t\t[cdkDropListData]=\"column\"\n\t\t\t\t\t\t\t(cdkDropListDropped)=\"dropCard($event)\"\n\t\t\t\t\t\t\t(scroll)=\"onScroll(index, $event)\"\n\t\t\t\t\t\t\t[cdkDropListEnterPredicate]=\"\n\t\t\t\t\t\t\t\tcolumn.predicate ?? defaultEnterPredicateFn\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[cdkDropListSortingDisabled]=\"\n\t\t\t\t\t\t\t\tcolumn.cardSortingDisabled\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (\n\t\t\t\t\t\t\t\tcard of column.cards;\n\t\t\t\t\t\t\t\tlet index = $index;\n\t\t\t\t\t\t\t\ttrack card\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclass=\"hub-board__card\"\n\t\t\t\t\t\t\t\t\t[class.hub-board__card--disabled]=\"\n\t\t\t\t\t\t\t\t\t\tcard.disabled\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tcdkDrag\n\t\t\t\t\t\t\t\t\t[cdkDragData]=\"card\"\n\t\t\t\t\t\t\t\t\t[cdkDragDisabled]=\"card.disabled\"\n\t\t\t\t\t\t\t\t\t(click)=\"cardClick(card)\"\n\t\t\t\t\t\t\t\t\t(mousedown)=\"\n\t\t\t\t\t\t\t\t\t\tcard.disabled &&\n\t\t\t\t\t\t\t\t\t\t\t$event.stopPropagation()\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t[ngClass]=\"card.classlist\"\n\t\t\t\t\t\t\t\t\t[ngStyle]=\"card.style\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div class=\"hub-board__card-body\">\n\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\t\t\t\t\t\tcardTpt() || defaultCardTpt\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\t\t\t\titem: card,\n\t\t\t\t\t\t\t\t\t\t\t\tcolumn\n\t\t\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t@if (columnFooterTpt()) {\n\t\t\t\t\t\t\t<div class=\"hub-board__column-footer\">\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\t\t\t\tcolumnFooterTpt() ?? null\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\t\tcolumn: column\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n}\n\n<ng-template #defaultCardTpt let-item=\"item\">\n\t<h6>{{ item.title }}</h6>\n\t<p class=\"card-text\">{{ item.description }}</p>\n</ng-template>\n\n<ng-template #defaultColumnHeaderTpt let-column=\"column\">\n\t<div class=\"d-flex flex-column\">\n\t\t<h5 class=\"hub-board__column-header-title\">\n\t\t\t{{ column.title }}\n\t\t</h5>\n\t\t<h6 class=\"hub-board__column-header-subtitle\">\n\t\t\t{{ column.description }}\n\t\t</h6>\n\t</div>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { HubBoardComponent } from './components/board/board.component';\nimport { BoardColumnFooterDirective } from './directives/board-column-footer.directive';\nimport { BoardColumnHeaderDirective } from './directives/board-column-header.directive';\nimport { CardTemplateDirective } from './directives/card-template.directive';\n\n@NgModule({\n\tdeclarations: [],\n\timports: [\n\t\tHubBoardComponent,\n\t\tCardTemplateDirective,\n\t\tBoardColumnHeaderDirective,\n\t\tBoardColumnFooterDirective\n\t],\n\texports: [\n\t\tHubBoardComponent,\n\t\tCardTemplateDirective,\n\t\tBoardColumnHeaderDirective,\n\t\tBoardColumnFooterDirective\n\t]\n})\nexport class BoardModule {}\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n\tname: 'invertColor',\n\tstandalone: true\n})\nexport class InvertColorPipe implements PipeTransform {\n\ttransform(hex: string, bw: boolean): unknown {\n\t\tif (!hex) {\n\t\t\treturn '#000000';\n\t\t}\n\n\t\tif (hex.indexOf('#') === 0) {\n\t\t\thex = hex.slice(1);\n\t\t}\n\n\t\t// convert 3-digit hex to 6-digits.\n\t\tif (hex.length === 3) {\n\t\t\thex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];\n\t\t}\n\t\tif (hex.length !== 6) {\n\t\t\tthrow new Error('Invalid HEX color.');\n\t\t}\n\t\tlet r: any = parseInt(hex.slice(0, 2), 16);\n\t\tlet g: any = parseInt(hex.slice(2, 4), 16);\n\t\tlet b: any = parseInt(hex.slice(4, 6), 16);\n\t\tif (bw) {\n\t\t\t// http://stackoverflow.com/a/3943023/112731\n\t\t\treturn r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF';\n\t\t}\n\t\t// invert color components\n\t\tr = (255 - r).toString(16);\n\t\tg = (255 - g).toString(16);\n\t\tb = (255 - b).toString(16);\n\t\t// pad each with zeros and return\n\t\treturn '#' + r.padStart(2, 0) + g.padStart(2, 0) + b.padStart(2, 0);\n\t}\n}\n","/*\n * Public API Surface of board\n */\n\n// module\nexport * from './lib/board.module';\n\n// directives\nexport * from './lib/directives/board-column-footer.directive';\nexport * from './lib/directives/board-column-header.directive';\nexport * from './lib/directives/card-template.directive';\n\n// components\nexport * from './lib/components/board/board.component';\n\n// pipes\nexport * from './lib/pipes/invert-color.pipe';\n\n// models\nexport * from './lib/models/board';\nexport * from './lib/models/board-card';\nexport * from './lib/models/board-column';\nexport * from './lib/models/reached-end-event';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-hub-ui-board.mjs","sources":["../../../projects/board/src/lib/directives/board-column-footer.directive.ts","../../../projects/board/src/lib/directives/board-column-header.directive.ts","../../../projects/board/src/lib/directives/card-template.directive.ts","../../../projects/board/src/lib/components/board/board.component.ts","../../../projects/board/src/lib/components/board/board.component.html","../../../projects/board/src/lib/board.module.ts","../../../projects/board/src/lib/pipes/invert-color.pipe.ts","../../../projects/board/src/public-api.ts","../../../projects/board/src/ng-hub-ui-board.ts"],"sourcesContent":["import { Directive, TemplateRef } from '@angular/core';\n\n/**\n * Directive that allows customization of column footer templates within board columns.\n * \n * This directive enables developers to define custom templates for column footers,\n * perfect for displaying summary information, quick actions, statistics,\n * or any column-specific controls at the bottom of each column.\n * \n * @example\n * ```html\n * <ng-template columnFooterTpt let-column=\"column\">\n *   <div class=\"custom-footer\">\n *     <div class=\"column-summary\">\n *       <span>Total: {{ column.cards.length }}</span>\n *       <span>Priority Items: {{ getPriorityItems(column) }}</span>\n *     </div>\n *     <button (click)=\"quickAddCard(column)\">Quick Add</button>\n *   </div>\n * </ng-template>\n * ```\n */\n@Directive({\n\tselector: '[columnFooterTpt]',\n\tstandalone: true\n})\nexport class BoardColumnFooterDirective {\n\t/**\n\t * Creates a new BoardColumnFooterDirective instance.\n\t * \n\t * @param templateRef - The template reference that contains the custom column footer layout\n\t */\n\tconstructor(public templateRef: TemplateRef<unknown>) {}\n}\n","import { Directive, TemplateRef } from '@angular/core';\n\n/**\n * Directive that allows customization of column header templates within board columns.\n * \n * This directive provides the ability to define custom templates for rendering column headers,\n * giving developers full control over the appearance and functionality of column headers\n * including titles, descriptions, actions, and metadata display.\n * \n * @example\n * ```html\n * <ng-template columnHeaderTpt let-column=\"column\">\n *   <div class=\"custom-header\">\n *     <h2>{{ column.title }}</h2>\n *     <span class=\"card-count\">{{ column.cards.length }} items</span>\n *     <button (click)=\"addCard(column)\">Add Card</button>\n *   </div>\n * </ng-template>\n * ```\n */\n@Directive({\n\tselector: '[columnHeaderTpt]',\n\tstandalone: true\n})\nexport class BoardColumnHeaderDirective {\n\t/**\n\t * Creates a new BoardColumnHeaderDirective instance.\n\t * \n\t * @param templateRef - The template reference that contains the custom column header layout\n\t */\n\tconstructor(public templateRef: TemplateRef<unknown>) {}\n}\n","import { Directive, TemplateRef } from '@angular/core';\n\n/**\n * Directive that allows customization of card templates within board columns.\n * \n * This directive is used to define custom templates for rendering board cards.\n * It provides access to the template reference that can be used by the board component\n * to render cards with custom layouts and styling.\n * \n * @example\n * ```html\n * <ng-template cardTpt let-card=\"item\" let-column=\"column\">\n *   <div class=\"custom-card\">\n *     <h3>{{ card.title }}</h3>\n *     <p>{{ card.description }}</p>\n *   </div>\n * </ng-template>\n * ```\n */\n@Directive({\n\tselector: '[cardTpt]',\n\tstandalone: true\n})\nexport class CardTemplateDirective {\n\t/**\n\t * Creates a new CardTemplateDirective instance.\n\t * \n\t * @param templateRef - The template reference that contains the custom card layout\n\t */\n\tconstructor(public templateRef: TemplateRef<unknown>) {}\n}\n","import {\n\tCdkDragDrop,\n\tDragDropModule,\n\tmoveItemInArray,\n\ttransferArrayItem\n} from '@angular/cdk/drag-drop';\nimport { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';\nimport {\n\tComponent,\n\tEventEmitter,\n\tOutput,\n\tSignal,\n\tTemplateRef,\n\tcomputed,\n\tcontentChild,\n\tinput\n} from '@angular/core';\nimport { BoardColumnFooterDirective } from '../../directives/board-column-footer.directive';\nimport { BoardColumnHeaderDirective } from '../../directives/board-column-header.directive';\nimport { CardTemplateDirective } from '../../directives/card-template.directive';\nimport { Board } from '../../models/board';\nimport { BoardCard } from '../../models/board-card';\nimport { BoardColumn } from '../../models/board-column';\nimport { ReachedEndEvent } from '../../models/reached-end-event';\n\n@Component({\n\tselector: 'hub-board, hub-ui-board',\n\ttemplateUrl: './board.component.html',\n\tstyleUrls: ['./board.component.scss'],\n\tstandalone: true,\n\timports: [NgClass, NgStyle, NgTemplateOutlet, DragDropModule]\n})\nexport class HubBoardComponent {\n\treadonly board = input<Board>();\n\n\tcolumns: Signal<Array<BoardColumn>> = computed(() => {\n\t\treturn this.board()?.columns ?? [];\n\t});\n\n\t// Used to disable the sorting of columns in the board\n\treadonly columnSortingDisabled = input<boolean>(false);\n\n\t// A template reference for the card template\n\treadonly cardTpt = contentChild(CardTemplateDirective, {\n\t\tread: TemplateRef<unknown>\n\t});\n\n\t// A template reference for the column header template\n\treadonly columnHeaderTpt = contentChild(BoardColumnHeaderDirective, {\n\t\tread: TemplateRef<unknown>\n\t});\n\n\t// A template reference for the column footer template\n\treadonly columnFooterTpt = contentChild(BoardColumnFooterDirective, {\n\t\tread: TemplateRef<unknown>\n\t});\n\n\t// triggered when a card is clicked\n\t@Output() onCardClick = new EventEmitter<BoardCard>();\n\n\t// triggered when a card is moved\n\t@Output() onCardMoved = new EventEmitter<\n\t\tCdkDragDrop<BoardColumn, BoardColumn, BoardCard<any>>\n\t>();\n\n\t// triggered when a column is moved\n\t@Output() onColumnMoved = new EventEmitter<CdkDragDrop<BoardColumn[]>>();\n\n\t// emit an event when the user has scrolled to the end of a specific column in the board.\n\t@Output() reachedEnd = new EventEmitter<ReachedEndEvent>();\n\n\t/**\n\t * Default predicate function that allows all drag and drop operations.\n\t * This function is used when no custom predicate is provided for a column.\n\t * \n\t * @returns Always returns true, allowing any card to be dropped in any column\n\t */\n\tdefaultEnterPredicateFn = () => true;\n\n\t/**\n\t * Handles card click events and emits the clicked card data.\n\t * This method is triggered when a user clicks on a card within the board.\n\t *\n\t * @param item - The card data object that was clicked\n\t */\n\tcardClick(item: BoardCard) {\n\t\tthis.onCardClick.next(item);\n\t}\n\n\t/**\n\t * Handles column reordering when a column is dropped after being dragged.\n\t * This method updates the column positions in the array and emits a column moved event.\n\t *\n\t * @param event - The drag and drop event containing information about the moved column\n\t */\n\tdropColumn(event: CdkDragDrop<BoardColumn[]>) {\n\t\tmoveItemInArray(\n\t\t\tevent.container.data,\n\t\t\tevent.previousIndex,\n\t\t\tevent.currentIndex\n\t\t);\n\t\tthis.onColumnMoved.emit(event);\n\t}\n\n\t/**\n\t * Handles card drag and drop operations, supporting both reordering within the same column\n\t * and transferring cards between different columns.\n\t *\n\t * @param event - The drag and drop event containing source/target containers and card data\n\t */\n\tdropCard(event: CdkDragDrop<BoardColumn, BoardColumn, BoardCard<any>>) {\n\t\t// Check if the card was moved within the same column\n\t\tif (event.previousContainer === event.container) {\n\t\t\t// Reorder the card within the same column\n\t\t\tmoveItemInArray(\n\t\t\t\tevent.container.data.cards,\n\t\t\t\tevent.previousIndex,\n\t\t\t\tevent.currentIndex\n\t\t\t);\n\t\t} else {\n\t\t\t// Transfer the card from one column to another\n\t\t\ttransferArrayItem(\n\t\t\t\tevent.previousContainer.data.cards,\n\t\t\t\tevent.container.data.cards,\n\t\t\t\tevent.previousIndex,\n\t\t\t\tevent.currentIndex\n\t\t\t);\n\t\t}\n\t\tthis.onCardMoved.emit(event);\n\t}\n\n\t/**\n\t * Detects when a column has been scrolled to the bottom and emits a reachedEnd event.\n\t * This is useful for implementing lazy loading or infinite scroll functionality.\n\t *\n\t * @param index - The index of the column that was scrolled\n\t * @param event - The scroll event containing target element and scroll position information\n\t */\n\tonScroll(index: number, event: Event) {\n\t\tconst el = event.target as HTMLElement;\n\t\t\n\t\t// Check if the element exists and if we've scrolled to the bottom\n\t\tif (el && el.scrollTop + el.clientHeight >= el.scrollHeight) {\n\t\t\t// Emit event with column index and data for lazy loading purposes\n\t\t\tthis.reachedEnd.emit({\n\t\t\t\tindex,\n\t\t\t\tdata: this.board()?.columns?.[index] ?? []\n\t\t\t});\n\t\t}\n\t}\n}\n","@if (columns().length) {\n\t<div\n\t\tclass=\"hub-board\"\n\t\tcdkDropList\n\t\tcdkDropListOrientation=\"horizontal\"\n\t\t[cdkDropListData]=\"columns()\"\n\t\t(cdkDropListDropped)=\"dropColumn($event)\"\n\t\t[cdkDropListSortingDisabled]=\"columnSortingDisabled()\"\n\t>\n\t\t<div cdkDropListGroup class=\"hub-board__columns\">\n\t\t\t@for (column of columns(); let index = $index; track column) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-board__column-container\"\n\t\t\t\t\tcdkDrag\n\t\t\t\t\t[cdkDragData]=\"column\"\n\t\t\t\t\t[cdkDragDisabled]=\"column.disabled\"\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-board__column\"\n\t\t\t\t\t\t[ngClass]=\"column.classlist\"\n\t\t\t\t\t\t[ngStyle]=\"column.style\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div class=\"hub-board__column-header\">\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\t\t\tcolumnHeaderTpt() || defaultColumnHeaderTpt\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ column: column }\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"hub-board__column-body\"\n\t\t\t\t\t\t\tcdkDropList\n\t\t\t\t\t\t\t[cdkDropListData]=\"column\"\n\t\t\t\t\t\t\t(cdkDropListDropped)=\"dropCard($event)\"\n\t\t\t\t\t\t\t(scroll)=\"onScroll(index, $event)\"\n\t\t\t\t\t\t\t[cdkDropListEnterPredicate]=\"\n\t\t\t\t\t\t\t\tcolumn.predicate ?? defaultEnterPredicateFn\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[cdkDropListSortingDisabled]=\"\n\t\t\t\t\t\t\t\tcolumn.cardSortingDisabled\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (\n\t\t\t\t\t\t\t\tcard of column.cards;\n\t\t\t\t\t\t\t\tlet index = $index;\n\t\t\t\t\t\t\t\ttrack card\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclass=\"hub-board__card\"\n\t\t\t\t\t\t\t\t\t[class.hub-board__card--disabled]=\"\n\t\t\t\t\t\t\t\t\t\tcard.disabled\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\tcdkDrag\n\t\t\t\t\t\t\t\t\t[cdkDragData]=\"card\"\n\t\t\t\t\t\t\t\t\t[cdkDragDisabled]=\"card.disabled\"\n\t\t\t\t\t\t\t\t\t(click)=\"cardClick(card)\"\n\t\t\t\t\t\t\t\t\t(mousedown)=\"\n\t\t\t\t\t\t\t\t\t\tcard.disabled &&\n\t\t\t\t\t\t\t\t\t\t\t$event.stopPropagation()\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t[ngClass]=\"card.classlist\"\n\t\t\t\t\t\t\t\t\t[ngStyle]=\"card.style\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div class=\"hub-board__card-body\">\n\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\t\t\t\t\t\tcardTpt() || defaultCardTpt\n\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\t\t\t\titem: card,\n\t\t\t\t\t\t\t\t\t\t\t\tcolumn\n\t\t\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t@if (columnFooterTpt()) {\n\t\t\t\t\t\t\t<div class=\"hub-board__column-footer\">\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"\n\t\t\t\t\t\t\t\t\t\tcolumnFooterTpt() ?? null\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\t\tcolumn: column\n\t\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t</div>\n}\n\n<ng-template #defaultCardTpt let-item=\"item\">\n\t<h6>{{ item.title }}</h6>\n\t<p class=\"card-text\">{{ item.description }}</p>\n</ng-template>\n\n<ng-template #defaultColumnHeaderTpt let-column=\"column\">\n\t<div class=\"d-flex flex-column\">\n\t\t<h5 class=\"hub-board__column-header-title\">\n\t\t\t{{ column.title }}\n\t\t</h5>\n\t\t<h6 class=\"hub-board__column-header-subtitle\">\n\t\t\t{{ column.description }}\n\t\t</h6>\n\t</div>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { HubBoardComponent } from './components/board/board.component';\nimport { BoardColumnFooterDirective } from './directives/board-column-footer.directive';\nimport { BoardColumnHeaderDirective } from './directives/board-column-header.directive';\nimport { CardTemplateDirective } from './directives/card-template.directive';\n\n/**\n * Angular module that provides board functionality with drag-and-drop support.\n * \n * This module includes all the necessary components and directives for creating\n * Kanban-style boards with customizable columns, cards, and templates.\n * \n * @deprecated Use standalone components instead. Import individual components and directives directly.\n * \n * @example\n * ```typescript\n * // Legacy module approach (not recommended)\n * import { BoardModule } from 'ng-hub-ui-board';\n * \n * @NgModule({\n *   imports: [BoardModule]\n * })\n * export class AppModule {}\n * \n * // Recommended standalone approach\n * import { HubBoardComponent, CardTemplateDirective } from 'ng-hub-ui-board';\n * \n * @Component({\n *   standalone: true,\n *   imports: [HubBoardComponent, CardTemplateDirective]\n * })\n * export class MyComponent {}\n * ```\n */\n@NgModule({\n\tdeclarations: [],\n\timports: [\n\t\tHubBoardComponent,\n\t\tCardTemplateDirective,\n\t\tBoardColumnHeaderDirective,\n\t\tBoardColumnFooterDirective\n\t],\n\texports: [\n\t\tHubBoardComponent,\n\t\tCardTemplateDirective,\n\t\tBoardColumnHeaderDirective,\n\t\tBoardColumnFooterDirective\n\t]\n})\nexport class BoardModule {}\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n\tname: 'invertColor',\n\tstandalone: true\n})\nexport class InvertColorPipe implements PipeTransform {\n\ttransform(hex: string, bw: boolean): unknown {\n\t\tif (!hex) {\n\t\t\treturn '#000000';\n\t\t}\n\n\t\tif (hex.indexOf('#') === 0) {\n\t\t\thex = hex.slice(1);\n\t\t}\n\n\t\t// convert 3-digit hex to 6-digits.\n\t\tif (hex.length === 3) {\n\t\t\thex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];\n\t\t}\n\t\tif (hex.length !== 6) {\n\t\t\tthrow new Error('Invalid HEX color.');\n\t\t}\n\t\tlet r: any = parseInt(hex.slice(0, 2), 16);\n\t\tlet g: any = parseInt(hex.slice(2, 4), 16);\n\t\tlet b: any = parseInt(hex.slice(4, 6), 16);\n\t\tif (bw) {\n\t\t\t// http://stackoverflow.com/a/3943023/112731\n\t\t\treturn r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF';\n\t\t}\n\t\t// invert color components\n\t\tr = (255 - r).toString(16);\n\t\tg = (255 - g).toString(16);\n\t\tb = (255 - b).toString(16);\n\t\t// pad each with zeros and return\n\t\treturn '#' + r.padStart(2, 0) + g.padStart(2, 0) + b.padStart(2, 0);\n\t}\n}\n","/*\n * Public API Surface of board\n */\n\n// module\nexport * from './lib/board.module';\n\n// directives\nexport * from './lib/directives/board-column-footer.directive';\nexport * from './lib/directives/board-column-header.directive';\nexport * from './lib/directives/card-template.directive';\n\n// components\nexport * from './lib/components/board/board.component';\n\n// pipes\nexport * from './lib/pipes/invert-color.pipe';\n\n// models\nexport * from './lib/models/board';\nexport * from './lib/models/board-card';\nexport * from './lib/models/board-column';\nexport * from './lib/models/reached-end-event';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/lib/board.module.d.ts

@@ -3,6 +3,34 @@ import * as i1 from "./components/board/board.component";
 import * as i2 from "./directives/card-template.directive";
 import * as i3 from "./directives/board-column-header.directive";
 import * as i4 from "./directives/board-column-footer.directive";
+/**
+ * Angular module that provides board functionality with drag-and-drop support.
+ *
+ * This module includes all the necessary components and directives for creating
+ * Kanban-style boards with customizable columns, cards, and templates.
+ *
+ * @deprecated Use standalone components instead. Import individual components and directives directly.
+ *
+ * @example
+ * ```typescript
+ * // Legacy module approach (not recommended)
+ * import { BoardModule } from 'ng-hub-ui-board';
+ *
+ * @NgModule({
+ *   imports: [BoardModule]
+ * })
+ * export class AppModule {}
+ *
+ * // Recommended standalone approach
+ * import { HubBoardComponent, CardTemplateDirective } from 'ng-hub-ui-board';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [HubBoardComponent, CardTemplateDirective]
+ * })
+ * export class MyComponent {}
+ * ```
+ */
 export declare class BoardModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BoardModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<BoardModule, never, [typeof i1.HubBoardComponent, typeof i2.CardTemplateDirective, typeof i3.BoardColumnHeaderDirective, typeof i4.BoardColumnFooterDirective], [typeof i1.HubBoardComponent, typeof i2.CardTemplateDirective, typeof i3.BoardColumnHeaderDirective, typeof i4.BoardColumnFooterDirective]>;

package/lib/components/board/board.component.d.ts

@@ -16,34 +16,40 @@ export declare class HubBoardComponent {
     onCardMoved: EventEmitter<CdkDragDrop<BoardColumn<any>, BoardColumn<any>, BoardCard<any>>>;
     onColumnMoved: EventEmitter<CdkDragDrop<BoardColumn<any>[], BoardColumn<any>[], any>>;
     reachedEnd: EventEmitter<ReachedEndEvent<any>>;
+    /**
+     * Default predicate function that allows all drag and drop operations.
+     * This function is used when no custom predicate is provided for a column.
+     *
+     * @returns Always returns true, allowing any card to be dropped in any column
+     */
     defaultEnterPredicateFn: () => boolean;
     /**
-     * Emits an event with the clicked item as a parameter.
+     * Handles card click events and emits the clicked card data.
+     * This method is triggered when a user clicks on a card within the board.
      *
-     * @param {any} item - Represents the item that was clicked on the card.
+     * @param item - The card data object that was clicked
      */
-    cardClick(item: any): void;
+    cardClick(item: BoardCard): void;
     /**
-     * Used to handle the event when a column is dropped in a drag and drop operation, and it moves the column in the array and
-     * emits an event.
+     * Handles column reordering when a column is dropped after being dragged.
+     * This method updates the column positions in the array and emits a column moved event.
      *
-     * @param event - represents the drag and drop event that occurred.
+     * @param event - The drag and drop event containing information about the moved column
      */
-    dropColumn(event: CdkDragDrop<any>): void;
+    dropColumn(event: CdkDragDrop<BoardColumn[]>): void;
     /**
-     * Used to handle the dropping of a card in a drag and drop operation, either moving the card within the same container or
-     * transferring it to a different container.
+     * Handles card drag and drop operations, supporting both reordering within the same column
+     * and transferring cards between different columns.
      *
-     * @param event - a generic type that takes three arguments:
+     * @param event - The drag and drop event containing source/target containers and card data
      */
     dropCard(event: CdkDragDrop<BoardColumn, BoardColumn, BoardCard<any>>): void;
     /**
-     * Checks if the user has scrolled to the end of a specific element and emits an event if so.
+     * Detects when a column has been scrolled to the bottom and emits a reachedEnd event.
+     * This is useful for implementing lazy loading or infinite scroll functionality.
      *
-     * @param {number} index - The index parameter is a number that represents the index of the column being scrolled.
-     * @param {Event} event - The event parameter is an object that represents the scroll event. It contains information about the
-     * scroll event, such as the source element that triggered the event, the amount of scrolling that has occurred, and the dimensions
-     * of the scrollable area.
+     * @param index - The index of the column that was scrolled
+     * @param event - The scroll event containing target element and scroll position information
      */
     onScroll(index: number, event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HubBoardComponent, never>;

package/lib/directives/board-column-footer.directive.d.ts

@@ -1,7 +1,32 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * Directive that allows customization of column footer templates within board columns.
+ *
+ * This directive enables developers to define custom templates for column footers,
+ * perfect for displaying summary information, quick actions, statistics,
+ * or any column-specific controls at the bottom of each column.
+ *
+ * @example
+ * ```html
+ * <ng-template columnFooterTpt let-column="column">
+ *   <div class="custom-footer">
+ *     <div class="column-summary">
+ *       <span>Total: {{ column.cards.length }}</span>
+ *       <span>Priority Items: {{ getPriorityItems(column) }}</span>
+ *     </div>
+ *     <button (click)="quickAddCard(column)">Quick Add</button>
+ *   </div>
+ * </ng-template>
+ * ```
+ */
 export declare class BoardColumnFooterDirective {
     templateRef: TemplateRef<unknown>;
+    /**
+     * Creates a new BoardColumnFooterDirective instance.
+     *
+     * @param templateRef - The template reference that contains the custom column footer layout
+     */
     constructor(templateRef: TemplateRef<unknown>);
     static ɵfac: i0.ɵɵFactoryDeclaration<BoardColumnFooterDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<BoardColumnFooterDirective, "[columnFooterTpt]", never, {}, {}, never, never, true, never>;

package/lib/directives/board-column-header.directive.d.ts

@@ -1,7 +1,30 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * Directive that allows customization of column header templates within board columns.
+ *
+ * This directive provides the ability to define custom templates for rendering column headers,
+ * giving developers full control over the appearance and functionality of column headers
+ * including titles, descriptions, actions, and metadata display.
+ *
+ * @example
+ * ```html
+ * <ng-template columnHeaderTpt let-column="column">
+ *   <div class="custom-header">
+ *     <h2>{{ column.title }}</h2>
+ *     <span class="card-count">{{ column.cards.length }} items</span>
+ *     <button (click)="addCard(column)">Add Card</button>
+ *   </div>
+ * </ng-template>
+ * ```
+ */
 export declare class BoardColumnHeaderDirective {
     templateRef: TemplateRef<unknown>;
+    /**
+     * Creates a new BoardColumnHeaderDirective instance.
+     *
+     * @param templateRef - The template reference that contains the custom column header layout
+     */
     constructor(templateRef: TemplateRef<unknown>);
     static ɵfac: i0.ɵɵFactoryDeclaration<BoardColumnHeaderDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<BoardColumnHeaderDirective, "[columnHeaderTpt]", never, {}, {}, never, never, true, never>;

package/lib/directives/card-template.directive.d.ts

@@ -1,7 +1,29 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * Directive that allows customization of card templates within board columns.
+ *
+ * This directive is used to define custom templates for rendering board cards.
+ * It provides access to the template reference that can be used by the board component
+ * to render cards with custom layouts and styling.
+ *
+ * @example
+ * ```html
+ * <ng-template cardTpt let-card="item" let-column="column">
+ *   <div class="custom-card">
+ *     <h3>{{ card.title }}</h3>
+ *     <p>{{ card.description }}</p>
+ *   </div>
+ * </ng-template>
+ * ```
+ */
 export declare class CardTemplateDirective {
     templateRef: TemplateRef<unknown>;
+    /**
+     * Creates a new CardTemplateDirective instance.
+     *
+     * @param templateRef - The template reference that contains the custom card layout
+     */
     constructor(templateRef: TemplateRef<unknown>);
     static ɵfac: i0.ɵɵFactoryDeclaration<CardTemplateDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<CardTemplateDirective, "[cardTpt]", never, {}, {}, never, never, true, never>;

package/lib/models/board-card.d.ts

@@ -1,12 +1,42 @@
+/**
+ * Represents a card within a board column, containing the core data and behavior.
+ *
+ * @template T The type of custom data attached to the card (defaults to `any`).
+ */
 export interface BoardCard<T = any> {
+    /**
+     * Unique identifier for the card.
+     */
     id?: number;
+    /**
+     * The identifier of the column this card belongs to.
+     */
     columnId?: number;
+    /**
+     * The main title displayed on the card.
+     */
     title: string;
+    /**
+     * Optional description providing additional details about the card.
+     */
     description?: string;
+    /**
+     * Custom data that can be attached to this card, such as metadata,
+     * priority levels, due dates, or any application-specific information.
+     */
     data?: T;
+    /**
+     * Optional list of CSS classes to apply to the card for custom styling.
+     */
     classlist?: string[];
+    /**
+     * Custom inline styles for the card, represented as a key-value mapping.
+     */
     style?: {
         [key: string]: any;
     };
+    /**
+     * If true, the card is disabled and cannot be interacted with (e.g., dragged or clicked).
+     */
     disabled?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-hub-ui-board",
-  "version": "19.2.0",
+  "version": "19.2.1",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",