ng-hub-ui-board 19.2.0 → 19.3.1

package/.npmignore

@@ -0,0 +1,2 @@
+# Nested package.json's are only needed for development.
+**/package.json

package/README.md

@@ -6,7 +6,7 @@
 
 This component is part of the ng-hub-ui ecosystem, which includes:
 
-- [ng-hub-ui-table](https://www.npmjs.com/package/ng-hub-ui-table)
+- [ng-hub-ui-paginable](https://www.npmjs.com/package/ng-hub-ui-paginable)
 - [ng-hub-ui-modal](https://www.npmjs.com/package/ng-hub-ui-modal)
 - [ng-hub-ui-stepper](https://www.npmjs.com/package/ng-hub-ui-stepper)
 - [ng-hub-ui-breadcrumbs](https://www.npmjs.com/package/ng-hub-ui-breadcrumbs)
@@ -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

@@ -1,17 +1,45 @@
 import * as i0 from '@angular/core';
-import { Directive, input, computed, contentChild, TemplateRef, EventEmitter, Component, Output, NgModule, Pipe } from '@angular/core';
+import { Directive, input, computed, contentChild, TemplateRef, output, Component, NgModule, Pipe } from '@angular/core';
 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.
+ *
+ * @publicApi
+ *
+ * @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 {
+    templateRef;
+    /**
+     * Creates a new BoardColumnFooterDirective instance.
+     *
+     * @param templateRef - The template reference that contains the custom column footer layout
+     */
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BoardColumnFooterDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BoardColumnFooterDirective, isStandalone: true, selector: "[columnFooterTpt]", ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BoardColumnFooterDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: BoardColumnFooterDirective, isStandalone: true, selector: "[columnFooterTpt]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BoardColumnFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BoardColumnFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[columnFooterTpt]',
@@ -19,14 +47,40 @@ 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.
+ *
+ * @publicApi
+ *
+ * @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 {
+    templateRef;
+    /**
+     * Creates a new BoardColumnHeaderDirective instance.
+     *
+     * @param templateRef - The template reference that contains the custom column header layout
+     */
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BoardColumnHeaderDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BoardColumnHeaderDirective, isStandalone: true, selector: "[columnHeaderTpt]", ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BoardColumnHeaderDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: BoardColumnHeaderDirective, isStandalone: true, selector: "[columnHeaderTpt]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BoardColumnHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BoardColumnHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[columnHeaderTpt]',
@@ -34,14 +88,39 @@ 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.
+ *
+ * @publicApi
+ *
+ * @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 {
+    templateRef;
+    /**
+     * Creates a new CardTemplateDirective instance.
+     *
+     * @param templateRef - The template reference that contains the custom card layout
+     */
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CardTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: CardTemplateDirective, isStandalone: true, selector: "[cardTpt]", ngImport: i0 }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: CardTemplateDirective, isStandalone: true, selector: "[cardTpt]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: CardTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: CardTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cardTpt]',
@@ -49,115 +128,179 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+/**
+ * Standalone Kanban-style board component that provides column-based drag-and-drop,
+ * custom templates and infinite-scroll detection.
+ *
+ * @publicApi
+ */
 class HubBoardComponent {
-    constructor() {
-        this.board = input();
-        this.columns = computed(() => {
-            return this.board()?.columns ?? [];
-        });
-        // Used to disable the sorting of columns in the board
-        this.columnSortingDisabled = input(false);
-        // A template reference for the card template
-        this.cardTpt = contentChild(CardTemplateDirective, {
+    /**
+     * Reactive input containing the full board definition (columns and cards).
+     */
+    board = input(...(ngDevMode ? [undefined, { debugName: "board" }] : []));
+    /**
+     * Pixel threshold used when determining whether a column has reached scroll end.
+     * Allows for fractional scroll values across different browsers.
+     */
+    scrollDetectionPadding = 1;
+    /**
+     * Derived list of board columns exposed as a signal to the template.
+     */
+    columns = computed(() => {
+        return this.board()?.columns ?? [];
+    }, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    /**
+     * When true, column reordering via drag-and-drop is disabled.
+     */
+    columnSortingDisabled = input(false, ...(ngDevMode ? [{ debugName: "columnSortingDisabled" }] : []));
+    /**
+     * Custom card template supplied via the `cardTpt` structural directive.
+     */
+    cardTpt = contentChild(CardTemplateDirective, ...(ngDevMode ? [{ debugName: "cardTpt", read: (TemplateRef) }] : [{
             read: (TemplateRef)
-        });
-        // A template reference for the column header template
-        this.columnHeaderTpt = contentChild(BoardColumnHeaderDirective, {
+        }]));
+    /**
+     * Custom column header template supplied via the `columnHeaderTpt` structural directive.
+     */
+    columnHeaderTpt = contentChild(BoardColumnHeaderDirective, ...(ngDevMode ? [{ debugName: "columnHeaderTpt", read: (TemplateRef) }] : [{
             read: (TemplateRef)
-        });
-        // A template reference for the column footer template
-        this.columnFooterTpt = contentChild(BoardColumnFooterDirective, {
+        }]));
+    /**
+     * Custom column footer template supplied via the `columnFooterTpt` structural directive.
+     */
+    columnFooterTpt = contentChild(BoardColumnFooterDirective, ...(ngDevMode ? [{ debugName: "columnFooterTpt", read: (TemplateRef) }] : [{
             read: (TemplateRef)
-        });
-        // triggered when a card is clicked
-        this.onCardClick = new EventEmitter();
-        // triggered when a card is moved
-        this.onCardMoved = new EventEmitter();
-        // triggered when a column is moved
-        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. */
-        this.defaultEnterPredicateFn = () => true;
-    }
+        }]));
+    /**
+     * Emits each time a card is clicked within the board.
+     */
+    onCardClick = output();
+    /**
+     * Emits when a card has been repositioned, either within the same column or into another column.
+     */
+    onCardMoved = output();
+    /**
+     * Emits when columns are reordered through drag-and-drop.
+     */
+    onColumnMoved = output();
+    /**
+     * Emits when a column body is scrolled to its end, enabling infinite-scroll behaviour.
+     */
+    reachedEnd = output();
     /**
-     * Emits an event with the clicked item as a parameter.
+     * Default predicate that allows any card to be dropped into any column.
      *
-     * @param {any} item - Represents the item that was clicked on the card.
+     * @returns Always `true`, indicating that drop operations are permitted.
+     */
+    defaultEnterPredicateFn = () => true;
+    /**
+     * Emits the clicked card through {@link onCardClick}.
+     *
+     * @param item - The card that triggered the click event.
      */
     cardClick(item) {
-        this.onCardClick.next(item);
+        this.onCardClick.emit(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.
+     * Updates column order when a drag-and-drop operation completes and emits the resulting event.
      *
-     * @param event - represents the drag and drop event that occurred.
+     * @param event - Drag-and-drop metadata describing the column movement.
      */
     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.
+     * Applies card reordering or transfer logic depending on the drag-drop target,
+     * then emits the corresponding drag event metadata.
      *
-     * @param event - a generic type that takes three arguments:
+     * @param event - Drag-and-drop metadata describing the card movement.
      */
     dropCard(event) {
         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.
+     * Emits {@link reachedEnd} once a column body is scrolled to its bottom.
      *
-     * @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 - Index of the scrolled column within the board.
+     * @param event - Browser scroll event originating from the column body element.
      */
     onScroll(index, event) {
         const el = event.target;
-        if (el && el.scrollTop + el.clientHeight >= el.scrollHeight) {
-            this.reachedEnd.emit({
-                index,
-                data: this.board()?.columns?.[index] ?? []
-            });
+        if (!el) {
+            return;
+        }
+        const scrolledToBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - this.scrollDetectionPadding;
+        if (!scrolledToBottom) {
+            return;
         }
+        const column = this.board()?.columns?.[index];
+        if (!column) {
+            return;
+        }
+        this.reachedEnd.emit({
+            index,
+            data: column
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: HubBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: HubBoardComponent, isStandalone: true, selector: "hub-board, hub-ui-board", inputs: { board: { classPropertyName: "board", publicName: "board", isSignal: true, isRequired: false, transformFunction: null }, columnSortingDisabled: { classPropertyName: "columnSortingDisabled", publicName: "columnSortingDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCardClick: "onCardClick", onCardMoved: "onCardMoved", onColumnMoved: "onColumnMoved", reachedEnd: "reachedEnd" }, queries: [{ propertyName: "cardTpt", first: true, predicate: CardTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnHeaderTpt", first: true, predicate: BoardColumnHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnFooterTpt", first: true, predicate: BoardColumnFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@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", styles: [":host{display:block;overflow:auto;width:100%;height:100%}.hub-board__column-body{min-height:128px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cards.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HubBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: HubBoardComponent, isStandalone: true, selector: "hub-board, hub-ui-board", inputs: { board: { classPropertyName: "board", publicName: "board", isSignal: true, isRequired: false, transformFunction: null }, columnSortingDisabled: { classPropertyName: "columnSortingDisabled", publicName: "columnSortingDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCardClick: "onCardClick", onCardMoved: "onCardMoved", onColumnMoved: "onColumnMoved", reachedEnd: "reachedEnd" }, queries: [{ propertyName: "cardTpt", first: true, predicate: CardTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnHeaderTpt", first: true, predicate: BoardColumnHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "columnFooterTpt", first: true, predicate: BoardColumnFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@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", styles: [":host{display:block;overflow:auto;width:100%;height:100%}.hub-board__column-body{min-height:128px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cards.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: HubBoardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HubBoardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-board, hub-ui-board', standalone: true, imports: [NgClass, NgStyle, NgTemplateOutlet, DragDropModule], template: "@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", styles: [":host{display:block;overflow:auto;width:100%;height:100%}.hub-board__column-body{min-height:128px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cards.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
-        }], propDecorators: { onCardClick: [{
-                type: Output
-            }], onCardMoved: [{
-                type: Output
-            }], onColumnMoved: [{
-                type: Output
-            }], reachedEnd: [{
-                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.
+ * @publicApi
+ *
+ * @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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BoardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: BoardModule, imports: [HubBoardComponent,
             CardTemplateDirective,
             BoardColumnHeaderDirective,
             BoardColumnFooterDirective], exports: [HubBoardComponent,
             CardTemplateDirective,
             BoardColumnHeaderDirective,
-            BoardColumnFooterDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BoardModule, imports: [HubBoardComponent] }); }
+            BoardColumnFooterDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BoardModule, imports: [HubBoardComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BoardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BoardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -176,39 +319,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }] });
 
+/**
+ * Converts a hexadecimal color string into its inverted counterpart, offering both
+ * high-contrast black/white and full-spectrum inversion modes.
+ *
+ * @publicApi
+ */
 class InvertColorPipe {
+    /**
+     * Inverts a HEX color value.
+     *
+     * @param hex - Color expressed as a 3- or 6-digit HEX string with or without a hash prefix.
+     * @param bw - When `true`, returns either black or white based on perceived brightness to maximise contrast.
+     * @returns The inverted color represented as a 6-digit HEX string (always prefixed with `#`).
+     * @throws Error if the provided value cannot be parsed as a valid HEX color.
+     */
     transform(hex, bw) {
         if (!hex) {
             return '#000000';
         }
-        if (hex.indexOf('#') === 0) {
-            hex = hex.slice(1);
+        let normalizedHex = hex;
+        if (normalizedHex.indexOf('#') === 0) {
+            normalizedHex = normalizedHex.slice(1);
         }
-        // convert 3-digit hex to 6-digits.
-        if (hex.length === 3) {
-            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        if (normalizedHex.length === 3) {
+            // Convert shorthand notation (e.g., #abc) to full length (#aabbcc)
+            normalizedHex =
+                normalizedHex[0] +
+                    normalizedHex[0] +
+                    normalizedHex[1] +
+                    normalizedHex[1] +
+                    normalizedHex[2] +
+                    normalizedHex[2];
         }
-        if (hex.length !== 6) {
+        if (normalizedHex.length !== 6) {
             throw new Error('Invalid HEX color.');
         }
-        let r = parseInt(hex.slice(0, 2), 16);
-        let g = parseInt(hex.slice(2, 4), 16);
-        let b = parseInt(hex.slice(4, 6), 16);
+        const r = parseInt(normalizedHex.slice(0, 2), 16);
+        const g = parseInt(normalizedHex.slice(2, 4), 16);
+        const b = parseInt(normalizedHex.slice(4, 6), 16);
         if (bw) {
             // http://stackoverflow.com/a/3943023/112731
             return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF';
         }
-        // invert color components
-        r = (255 - r).toString(16);
-        g = (255 - g).toString(16);
-        b = (255 - b).toString(16);
-        // pad each with zeros and return
-        return '#' + r.padStart(2, 0) + g.padStart(2, 0) + b.padStart(2, 0);
+        const invertedR = (255 - r).toString(16).padStart(2, '0');
+        const invertedG = (255 - g).toString(16).padStart(2, '0');
+        const invertedB = (255 - b).toString(16).padStart(2, '0');
+        return `#${invertedR}${invertedG}${invertedB}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InvertColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: InvertColorPipe, isStandalone: true, name: "invertColor" }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InvertColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: InvertColorPipe, isStandalone: true, name: "invertColor" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: InvertColorPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InvertColorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'invertColor',