ng-hub-ui-board 19.3.2 → 19.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
|
|
7
7
|
This component is part of the ng-hub-ui ecosystem, which includes:
|
|
8
8
|
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
9
|
+
- [ng-hub-ui-paginable](https://www.npmjs.com/package/ng-hub-ui-paginable)
|
|
10
|
+
- [ng-hub-ui-modal](https://www.npmjs.com/package/ng-hub-ui-modal)
|
|
11
|
+
- [ng-hub-ui-stepper](https://www.npmjs.com/package/ng-hub-ui-stepper)
|
|
12
|
+
- [ng-hub-ui-breadcrumbs](https://www.npmjs.com/package/ng-hub-ui-breadcrumbs)
|
|
13
|
+
- [ng-hub-ui-portal](https://www.npmjs.com/package/ng-hub-ui-portal)
|
|
14
|
+
- [ng-hub-ui-avatar](https://www.npmjs.com/package/ng-hub-ui-avatar)
|
|
15
|
+
- [ng-hub-ui-accordion](https://www.npmjs.com/package/ng-hub-ui-accordion)
|
|
16
16
|
|
|
17
17
|
## Description
|
|
18
18
|
|
|
@@ -20,16 +20,16 @@ A flexible and powerful board component for Angular applications, perfect for im
|
|
|
20
20
|
|
|
21
21
|
## Features
|
|
22
22
|
|
|
23
|
-
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
31
|
-
-
|
|
32
|
-
-
|
|
23
|
+
- 🎯 **Standalone component** - Modern Angular approach with minimal setup
|
|
24
|
+
- 🔄 **Drag and drop support** - Full drag-and-drop for both cards and columns using Angular CDK
|
|
25
|
+
- 📱 **Responsive design** - Works seamlessly across desktop, tablet, and mobile devices
|
|
26
|
+
- 🎨 **Highly customizable** - Custom templates for cards, headers, and footers
|
|
27
|
+
- 🔧 **Bootstrap compatible** - Integrates perfectly with Bootstrap 5 design system
|
|
28
|
+
- ⚡ **Virtual scrolling** - Supports infinite scroll with end-detection for performance
|
|
29
|
+
- 🎭 **Custom styling** - CSS custom properties for easy theming and customization
|
|
30
|
+
- 🔒 **Granular control** - Enable/disable functionality at board, column, or card level
|
|
31
|
+
- 🏷️ **TypeScript support** - Full type safety with generic interfaces
|
|
32
|
+
- ♿ **Accessibility ready** - Follows WAI-ARIA best practices for drag-and-drop
|
|
33
33
|
|
|
34
34
|
## Installation
|
|
35
35
|
|
|
@@ -84,7 +84,13 @@ export const board = signal<Board>({
|
|
|
84
84
|
|
|
85
85
|
```ts
|
|
86
86
|
import { Component } from '@angular/core';
|
|
87
|
-
import {
|
|
87
|
+
import {
|
|
88
|
+
HubBoardComponent,
|
|
89
|
+
CardTemplateDirective,
|
|
90
|
+
BoardColumnHeaderDirective,
|
|
91
|
+
BoardColumnFooterDirective,
|
|
92
|
+
BoardCard
|
|
93
|
+
} from 'ng-hub-ui-board';
|
|
88
94
|
|
|
89
95
|
@Component({
|
|
90
96
|
selector: 'board-demo',
|
|
@@ -126,7 +132,12 @@ The component can be used in two ways:
|
|
|
126
132
|
|
|
127
133
|
```typescript
|
|
128
134
|
import { Component } from '@angular/core';
|
|
129
|
-
import {
|
|
135
|
+
import {
|
|
136
|
+
HubBoardComponent,
|
|
137
|
+
CardTemplateDirective,
|
|
138
|
+
BoardColumnHeaderDirective,
|
|
139
|
+
BoardColumnFooterDirective
|
|
140
|
+
} from 'ng-hub-ui-board';
|
|
130
141
|
|
|
131
142
|
@Component({
|
|
132
143
|
selector: 'app-my-component',
|
|
@@ -284,17 +295,18 @@ Emitted when a user scrolls to the end of a column. Useful for triggering lazy-l
|
|
|
284
295
|
|
|
285
296
|
```html
|
|
286
297
|
<div style="height: 512px;">
|
|
287
|
-
|
|
298
|
+
<hub-board [board]="board" (reachedEnd)="loadMoreCards($event)"></hub-board>
|
|
288
299
|
</div>
|
|
289
300
|
```
|
|
290
301
|
|
|
291
302
|
**Type:** `EventEmitter<ReachedEndEvent<BoardColumn>>`
|
|
292
303
|
|
|
293
304
|
**Event Structure:**
|
|
305
|
+
|
|
294
306
|
```typescript
|
|
295
307
|
interface ReachedEndEvent<T = any> {
|
|
296
|
-
|
|
297
|
-
|
|
308
|
+
index: number; // Index of the column that reached the end
|
|
309
|
+
data: T; // The BoardColumn object itself
|
|
298
310
|
}
|
|
299
311
|
```
|
|
300
312
|
|
|
@@ -334,21 +346,21 @@ loadMoreCards(event: ReachedEndEvent) {
|
|
|
334
346
|
|
|
335
347
|
The following inputs are available on the `HubBoardComponent`:
|
|
336
348
|
|
|
337
|
-
| Input
|
|
338
|
-
|
|
339
|
-
| `board`
|
|
340
|
-
| `columnSortingDisabled
|
|
349
|
+
| Input | Type | Description | Default |
|
|
350
|
+
| ----------------------- | --------------- | --------------------------------------------- | ----------- |
|
|
351
|
+
| `board` | `Signal<Board>` | The board object containing columns and cards | `undefined` |
|
|
352
|
+
| `columnSortingDisabled` | `boolean` | Disables drag-and-drop sorting of columns | `false` |
|
|
341
353
|
|
|
342
354
|
## Outputs
|
|
343
355
|
|
|
344
356
|
These outputs are emitted by the component during user interaction:
|
|
345
357
|
|
|
346
|
-
| Output | Type
|
|
347
|
-
|
|
348
|
-
| `onCardClick` | `EventEmitter<BoardCard>`
|
|
358
|
+
| Output | Type | Description |
|
|
359
|
+
| --------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------- |
|
|
360
|
+
| `onCardClick` | `EventEmitter<BoardCard>` | Triggered when a card is clicked |
|
|
349
361
|
| `onCardMoved` | `EventEmitter<CdkDragDrop<BoardColumn, BoardColumn, BoardCard>>` | Emitted when a card is moved (within or across columns) |
|
|
350
|
-
| `onColumnMoved` | `EventEmitter<CdkDragDrop<BoardColumn[]>>`
|
|
351
|
-
| `reachedEnd` | `EventEmitter<ReachedEndEvent>`
|
|
362
|
+
| `onColumnMoved` | `EventEmitter<CdkDragDrop<BoardColumn[]>>` | Emitted when a column is reordered via drag and drop |
|
|
363
|
+
| `reachedEnd` | `EventEmitter<ReachedEndEvent>` | Triggered when the user scrolls to the bottom of a column (for lazy load) |
|
|
352
364
|
|
|
353
365
|
## Interfaces
|
|
354
366
|
|
|
@@ -407,24 +419,63 @@ interface BoardCard<T = any> {
|
|
|
407
419
|
|
|
408
420
|
The `ng-hub-ui-board` library is fully style-configurable through **CSS custom properties (CSS variables)**, defined with a consistent naming convention and designed to be easily overridden in consuming applications. It is built with flexibility in mind and integrates seamlessly with **Bootstrap** or any design system that supports custom properties.
|
|
409
421
|
|
|
410
|
-
###
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
422
|
+
### 🎨 CSS Custom Properties (Variables)
|
|
423
|
+
|
|
424
|
+
You can customize the board's appearance by overriding these CSS variables. Examples of overrides are shown in the [Styling](#%F0%9F%8-customizing-styles-via-css-variables) section.
|
|
425
|
+
|
|
426
|
+
#### Core Colors & Borders
|
|
427
|
+
|
|
428
|
+
| Variable | Default Value | Description |
|
|
429
|
+
| --------------------- | ------------- | -------------------------------- |
|
|
430
|
+
| `--hub-body-color` | `#212529` | Default text color for the board |
|
|
431
|
+
| `--hub-body-bg` | `#fff` | Main background color |
|
|
432
|
+
| `--hub-border-width` | `1px` | Base border width |
|
|
433
|
+
| `--hub-border-color` | `#dee2e6` | Base border color |
|
|
434
|
+
| `--hub-border-radius` | `0.375rem` | Base border radius |
|
|
435
|
+
|
|
436
|
+
#### Column specific
|
|
437
|
+
|
|
438
|
+
| Variable | Default Value | Description |
|
|
439
|
+
| ------------------------------------ | -------------------------- | ----------------------------------------- |
|
|
440
|
+
| `--hub-column-bg` | `#fff` | Background color of columns |
|
|
441
|
+
| `--hub-column-color` | `null` | Text color within columns |
|
|
442
|
+
| `--hub-column-height` | `100%` | Height of the column container |
|
|
443
|
+
| `--hub-column-border-width` | `1px` | Width of column borders |
|
|
444
|
+
| `--hub-column-border-color` | `rgba(0, 0, 0, 0.175)` | Color of column borders |
|
|
445
|
+
| `--hub-column-border-radius` | `0.375rem` | Border radius of columns |
|
|
446
|
+
| `--hub-column-inner-border-radius` | `var(--hub-border-radius)` | Inner border radius (for headers/footers) |
|
|
447
|
+
| `--hub-column-box-shadow` | `null` | Box shadow for columns |
|
|
448
|
+
| `--hub-column-spacer-x` | `1rem` | Horizontal padding inside columns |
|
|
449
|
+
| `--hub-column-spacer-y` | `0.75rem` | Vertical padding inside columns |
|
|
450
|
+
| `--hub-column-cap-bg` | `rgba(0, 0, 0, 0.03)` | Background of column header/footer |
|
|
451
|
+
| `--hub-column-cap-color` | `null` | Text color of column header/footer |
|
|
452
|
+
| `--hub-column-cap-padding-x` | `1rem` | Horizontal padding of header/footer |
|
|
453
|
+
| `--hub-column-cap-padding-y` | `0.5rem` | Vertical padding of header/footer |
|
|
454
|
+
| `--hub-column-header-title-color` | `inherit` | Color of column header titles |
|
|
455
|
+
| `--hub-column-header-title-spacer-y` | `0.5rem` | Bottom margin of column header titles |
|
|
456
|
+
| `--hub-column-header-subtitle-color` | `#6c757d` | Color of column header subtitles |
|
|
457
|
+
|
|
458
|
+
#### Card specific
|
|
459
|
+
|
|
460
|
+
| Variable | Default Value | Description |
|
|
461
|
+
| -------------------------------- | -------------------------- | ---------------------------------------- |
|
|
462
|
+
| `--hub-card-bg` | `#fff` | Background color of cards |
|
|
463
|
+
| `--hub-card-color` | `null` | Text color within cards |
|
|
464
|
+
| `--hub-card-height` | `null` | Height of cards |
|
|
465
|
+
| `--hub-card-border-width` | `1px` | Width of card borders |
|
|
466
|
+
| `--hub-card-border-color` | `rgba(0, 0, 0, 0.175)` | Color of card borders |
|
|
467
|
+
| `--hub-card-border-radius` | `var(--hub-border-radius)` | Border radius of cards |
|
|
468
|
+
| `--hub-card-inner-border-radius` | `calc(0.375rem - 1px)` | Inner border radius |
|
|
469
|
+
| `--hub-card-box-shadow` | `null` | Box shadow for cards |
|
|
470
|
+
| `--hub-card-spacer-x` | `1rem` | Horizontal padding inside cards |
|
|
471
|
+
| `--hub-card-spacer-y` | `0.75rem` | Vertical padding inside cards |
|
|
472
|
+
| `--hub-card-title-color` | `inherit` | Color of card titles |
|
|
473
|
+
| `--hub-card-title-spacer-y` | `0.5rem` | Bottom margin of card titles |
|
|
474
|
+
| `--hub-card-subtitle-color` | `#6c757d` | Color of card subtitles |
|
|
475
|
+
| `--hub-card-cap-bg` | `rgba(0, 0, 0, 0.03)` | Background of card header/footer |
|
|
476
|
+
| `--hub-card-cap-color` | `null` | Text color of card header/footer |
|
|
477
|
+
| `--hub-card-cap-padding-x` | `1rem` | Horizontal padding of card header/footer |
|
|
478
|
+
| `--hub-card-cap-padding-y` | `0.5rem` | Vertical padding of card header/footer |
|
|
428
479
|
|
|
429
480
|
### 🔗 How to include the styles in your application
|
|
430
481
|
|
|
@@ -458,9 +509,9 @@ This approach allows for theme-level overrides without needing to fork or modify
|
|
|
458
509
|
|
|
459
510
|
Because the board components are designed to align visually and structurally with **Bootstrap 5**, you can:
|
|
460
511
|
|
|
461
|
-
-
|
|
462
|
-
-
|
|
463
|
-
-
|
|
512
|
+
- Use spacing (`gap`, `padding`) and color schemes consistent with Bootstrap.
|
|
513
|
+
- Integrate the board layout into Bootstrap grids or utilities.
|
|
514
|
+
- Customize the variables with Bootstrap's own SCSS variables if needed.
|
|
464
515
|
|
|
465
516
|
Example override using Bootstrap color variables:
|
|
466
517
|
|
|
@@ -491,11 +542,11 @@ This makes `ng-hub-ui-board` a great fit for design systems that need scalable a
|
|
|
491
542
|
|
|
492
543
|
The `ng-hub-ui-board` component is versatile and has been used in a variety of real-world applications, such as:
|
|
493
544
|
|
|
494
|
-
-
|
|
495
|
-
-
|
|
496
|
-
-
|
|
497
|
-
-
|
|
498
|
-
-
|
|
545
|
+
- **Project Management Tools** – Visualize task progress across stages (To Do, In Progress, Done).
|
|
546
|
+
- **Support Ticket Boards** – Organize support tickets by urgency, team, or status.
|
|
547
|
+
- **Recruitment Pipelines** – Track candidates through different phases of hiring.
|
|
548
|
+
- **CRM Systems** – Manage leads and customers in pipeline-style workflows.
|
|
549
|
+
- **Editorial Calendars** – Schedule and organize content by publication status.
|
|
499
550
|
|
|
500
551
|
Each case benefits from customizable columns, card templates, and event outputs to integrate with your app logic.
|
|
501
552
|
|
|
@@ -504,42 +555,48 @@ Each case benefits from customizable columns, card templates, and event outputs
|
|
|
504
555
|
Here are some common issues and how to resolve them:
|
|
505
556
|
|
|
506
557
|
### 🔄 Drag and drop not working
|
|
507
|
-
|
|
508
|
-
-
|
|
509
|
-
-
|
|
558
|
+
|
|
559
|
+
- **Check dependencies**: Ensure `@angular/cdk` is installed and imported
|
|
560
|
+
- **Reactive data**: Verify your board data is reactive (using `signal()`, `Observable`, or proper change detection)
|
|
561
|
+
- **Browser compatibility**: Ensure your target browsers support the HTML5 Drag and Drop API
|
|
510
562
|
|
|
511
563
|
### 📏 Scroll detection not triggering `reachedEnd`
|
|
512
|
-
|
|
513
|
-
-
|
|
514
|
-
-
|
|
564
|
+
|
|
565
|
+
- **Height constraints**: The `<hub-board>` element or its parent must have a `max-height` or fixed height
|
|
566
|
+
- **Overflow setting**: Ensure `overflow: auto` or `overflow-y: scroll` is applied to enable scrolling
|
|
567
|
+
- **Content length**: Make sure there's enough content to actually trigger scrolling
|
|
515
568
|
|
|
516
569
|
### 🎨 Styles not applying
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
-
|
|
570
|
+
|
|
571
|
+
- **Import path**: Confirm you've imported the SCSS base styles in your global `styles.scss`:
|
|
572
|
+
```scss
|
|
573
|
+
@use '../dist/board/src/lib/styles/base.scss' as boardBase;
|
|
574
|
+
```
|
|
575
|
+
- **CSS custom properties**: Check that your custom CSS variables follow the `--hub-*` naming convention
|
|
576
|
+
- **Style specificity**: Ensure your custom styles have sufficient specificity to override defaults
|
|
523
577
|
|
|
524
578
|
### 🧩 Templates not rendering
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
579
|
+
|
|
580
|
+
- **Import directives**: When using standalone components, import the template directives:
|
|
581
|
+
```typescript
|
|
582
|
+
imports: [HubBoardComponent, CardTemplateDirective, BoardColumnHeaderDirective];
|
|
583
|
+
```
|
|
584
|
+
- **Template syntax**: Verify you're using the correct template selectors (`cardTpt`, `columnHeaderTpt`, `columnFooterTpt`)
|
|
530
585
|
|
|
531
586
|
### 🛠️ Runtime errors
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
-
|
|
587
|
+
|
|
588
|
+
- **"Cannot read property 'cards' of undefined"**: Initialize your board signal properly:
|
|
589
|
+
```typescript
|
|
590
|
+
board = signal<Board>({ title: 'My Board', columns: [] });
|
|
591
|
+
```
|
|
592
|
+
- **Type errors**: Ensure your data matches the `Board`, `BoardColumn`, and `BoardCard` interfaces
|
|
593
|
+
- **Signal updates**: Use `.set()` or `.update()` methods to modify signal values
|
|
538
594
|
|
|
539
595
|
### 🎯 Performance issues
|
|
540
|
-
|
|
541
|
-
-
|
|
542
|
-
-
|
|
596
|
+
|
|
597
|
+
- **Large datasets**: Consider implementing virtual scrolling for columns with many cards
|
|
598
|
+
- **Memory leaks**: Ensure proper cleanup of event listeners and subscriptions
|
|
599
|
+
- **Change detection**: Use `OnPush` change detection strategy when possible
|
|
543
600
|
|
|
544
601
|
If problems persist, open an issue at: https://github.com/carlos-morcillo/ng-hub-ui-board/issues
|
|
545
602
|
|
|
@@ -557,7 +614,7 @@ Contributions are welcome! Here's how you can help:
|
|
|
557
614
|
|
|
558
615
|
If you find this project helpful and would like to support its development, you can buy me a coffee:
|
|
559
616
|
|
|
560
|
-
[](https://
|
|
617
|
+
[](https://buymeacoffee.com/carlosmorcillo)
|
|
561
618
|
|
|
562
619
|
Your support is greatly appreciated and helps maintain and improve this project!
|
|
563
620
|
|
|
@@ -568,15 +625,17 @@ This project is licensed under the **Creative Commons Attribution 4.0 Internatio
|
|
|
568
625
|
### What this means:
|
|
569
626
|
|
|
570
627
|
✅ **You can:**
|
|
571
|
-
|
|
572
|
-
-
|
|
573
|
-
-
|
|
574
|
-
-
|
|
628
|
+
|
|
629
|
+
- Use commercially and non-commercially
|
|
630
|
+
- Modify, adapt, and create derivatives
|
|
631
|
+
- Distribute and redistribute in any format
|
|
632
|
+
- Use in private and public projects
|
|
575
633
|
|
|
576
634
|
📋 **You must:**
|
|
577
|
-
|
|
578
|
-
-
|
|
579
|
-
-
|
|
635
|
+
|
|
636
|
+
- Give appropriate credit to the original authors
|
|
637
|
+
- Provide a link to the license
|
|
638
|
+
- Indicate if changes were made
|
|
580
639
|
|
|
581
640
|
### Example attribution:
|
|
582
641
|
|
|
@@ -253,11 +253,13 @@ class HubBoardComponent {
|
|
|
253
253
|
});
|
|
254
254
|
}
|
|
255
255
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HubBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
256
|
-
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
|
|
256
|
+
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" }, host: { classAttribute: "hub-board" }, 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<div\n\tclass=\"hub-board__drop-list\"\n\tcdkDropList\n\tcdkDropListOrientation=\"horizontal\"\n\t[cdkDropListData]=\"columns()\"\n\t(cdkDropListDropped)=\"dropColumn($event)\"\n\t[cdkDropListSortingDisabled]=\"columnSortingDisabled()\"\n>\n\t<div cdkDropListGroup class=\"hub-board__columns\">\n\t\t@for (column of columns(); let index = $index; track column) {\n\t\t<div class=\"hub-board__column-container\" cdkDrag [cdkDragData]=\"column\" [cdkDragDisabled]=\"column.disabled\">\n\t\t\t<div class=\"hub-board__column\" [ngClass]=\"column.classlist\" [ngStyle]=\"column.style\">\n\t\t\t\t<div class=\"hub-board__column-header\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"columnHeaderTpt() || defaultColumnHeaderTpt\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ column: column }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-board__column-body\"\n\t\t\t\t\tcdkDropList\n\t\t\t\t\t[cdkDropListData]=\"column\"\n\t\t\t\t\t(cdkDropListDropped)=\"dropCard($event)\"\n\t\t\t\t\t(scroll)=\"onScroll(index, $event)\"\n\t\t\t\t\t[cdkDropListEnterPredicate]=\"column.predicate ?? defaultEnterPredicateFn\"\n\t\t\t\t\t[cdkDropListSortingDisabled]=\"column.cardSortingDisabled\"\n\t\t\t\t>\n\t\t\t\t\t@for ( card of column.cards; let index = $index; track card ) {\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-board__card\"\n\t\t\t\t\t\t[class.hub-board__card--disabled]=\"card.disabled\"\n\t\t\t\t\t\tcdkDrag\n\t\t\t\t\t\t[cdkDragData]=\"card\"\n\t\t\t\t\t\t[cdkDragDisabled]=\"card.disabled\"\n\t\t\t\t\t\t(click)=\"cardClick(card)\"\n\t\t\t\t\t\t(mousedown)=\"card.disabled && $event.stopPropagation()\"\n\t\t\t\t\t\t[ngClass]=\"card.classlist\"\n\t\t\t\t\t\t[ngStyle]=\"card.style\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div class=\"hub-board__card-body\">\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"cardTpt() || defaultCardTpt\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\titem: card,\n\t\t\t\t\t\t\t\t\tcolumn\n\t\t\t\t\t\t\t\t}\"\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</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\n\t\t\t\t@if (columnFooterTpt()) {\n\t\t\t\t<div class=\"hub-board__column-footer\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"columnFooterTpt() ?? null\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\tcolumn: column\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t}\n\t</div>\n</div>\n}\n\n<ng-template #defaultCardTpt let-item=\"item\">\n\t<h6 class=\"hub-board__card-title\">{{ item.title }}</h6>\n\t<p class=\"hub-board__card-subtitle\">{{ 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", 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"] }] });
|
|
257
257
|
}
|
|
258
258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HubBoardComponent, decorators: [{
|
|
259
259
|
type: Component,
|
|
260
|
-
args: [{ selector: 'hub-board, hub-ui-board',
|
|
260
|
+
args: [{ selector: 'hub-board, hub-ui-board', imports: [NgClass, NgStyle, NgTemplateOutlet, DragDropModule], host: {
|
|
261
|
+
class: 'hub-board'
|
|
262
|
+
}, template: "@if (columns().length) {\n<div\n\tclass=\"hub-board__drop-list\"\n\tcdkDropList\n\tcdkDropListOrientation=\"horizontal\"\n\t[cdkDropListData]=\"columns()\"\n\t(cdkDropListDropped)=\"dropColumn($event)\"\n\t[cdkDropListSortingDisabled]=\"columnSortingDisabled()\"\n>\n\t<div cdkDropListGroup class=\"hub-board__columns\">\n\t\t@for (column of columns(); let index = $index; track column) {\n\t\t<div class=\"hub-board__column-container\" cdkDrag [cdkDragData]=\"column\" [cdkDragDisabled]=\"column.disabled\">\n\t\t\t<div class=\"hub-board__column\" [ngClass]=\"column.classlist\" [ngStyle]=\"column.style\">\n\t\t\t\t<div class=\"hub-board__column-header\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"columnHeaderTpt() || defaultColumnHeaderTpt\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ column: column }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-board__column-body\"\n\t\t\t\t\tcdkDropList\n\t\t\t\t\t[cdkDropListData]=\"column\"\n\t\t\t\t\t(cdkDropListDropped)=\"dropCard($event)\"\n\t\t\t\t\t(scroll)=\"onScroll(index, $event)\"\n\t\t\t\t\t[cdkDropListEnterPredicate]=\"column.predicate ?? defaultEnterPredicateFn\"\n\t\t\t\t\t[cdkDropListSortingDisabled]=\"column.cardSortingDisabled\"\n\t\t\t\t>\n\t\t\t\t\t@for ( card of column.cards; let index = $index; track card ) {\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-board__card\"\n\t\t\t\t\t\t[class.hub-board__card--disabled]=\"card.disabled\"\n\t\t\t\t\t\tcdkDrag\n\t\t\t\t\t\t[cdkDragData]=\"card\"\n\t\t\t\t\t\t[cdkDragDisabled]=\"card.disabled\"\n\t\t\t\t\t\t(click)=\"cardClick(card)\"\n\t\t\t\t\t\t(mousedown)=\"card.disabled && $event.stopPropagation()\"\n\t\t\t\t\t\t[ngClass]=\"card.classlist\"\n\t\t\t\t\t\t[ngStyle]=\"card.style\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div class=\"hub-board__card-body\">\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"cardTpt() || defaultCardTpt\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\titem: card,\n\t\t\t\t\t\t\t\t\tcolumn\n\t\t\t\t\t\t\t\t}\"\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</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\n\t\t\t\t@if (columnFooterTpt()) {\n\t\t\t\t<div class=\"hub-board__column-footer\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"columnFooterTpt() ?? null\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\tcolumn: column\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t}\n\t</div>\n</div>\n}\n\n<ng-template #defaultCardTpt let-item=\"item\">\n\t<h6 class=\"hub-board__card-title\">{{ item.title }}</h6>\n\t<p class=\"hub-board__card-subtitle\">{{ 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" }]
|
|
261
263
|
}] });
|
|
262
264
|
|
|
263
265
|
/**
|
|
@@ -1 +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/**\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 * @publicApi\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 * @publicApi\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 * @publicApi\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\tSignal,\n\tTemplateRef,\n\tcomputed,\n\tcontentChild,\n\tinput,\n\toutput\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/**\n * Standalone Kanban-style board component that provides column-based drag-and-drop,\n * custom templates and infinite-scroll detection.\n *\n * @publicApi\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\t/**\n\t * Reactive input containing the full board definition (columns and cards).\n\t */\n\treadonly board = input<Board>();\n\n\t/**\n\t * Pixel threshold used when determining whether a column has reached scroll end.\n\t * Allows for fractional scroll values across different browsers.\n\t */\n\tprivate readonly scrollDetectionPadding = 1;\n\n\t/**\n\t * Derived list of board columns exposed as a signal to the template.\n\t */\n\tcolumns: Signal<Array<BoardColumn>> = computed(() => {\n\t\treturn this.board()?.columns ?? [];\n\t});\n\n\t/**\n\t * When true, column reordering via drag-and-drop is disabled.\n\t */\n\treadonly columnSortingDisabled = input<boolean>(false);\n\n\t/**\n\t * Custom card template supplied via the `cardTpt` structural directive.\n\t */\n\treadonly cardTpt = contentChild(CardTemplateDirective, {\n\t\tread: TemplateRef<unknown>\n\t});\n\n\t/**\n\t * Custom column header template supplied via the `columnHeaderTpt` structural directive.\n\t */\n\treadonly columnHeaderTpt = contentChild(BoardColumnHeaderDirective, {\n\t\tread: TemplateRef<unknown>\n\t});\n\n\t/**\n\t * Custom column footer template supplied via the `columnFooterTpt` structural directive.\n\t */\n\treadonly columnFooterTpt = contentChild(BoardColumnFooterDirective, {\n\t\tread: TemplateRef<unknown>\n\t});\n\n\t/**\n\t * Emits each time a card is clicked within the board.\n\t */\n\treadonly onCardClick = output<BoardCard>();\n\n\t/**\n\t * Emits when a card has been repositioned, either within the same column or into another column.\n\t */\n\treadonly onCardMoved = output<CdkDragDrop<BoardColumn, BoardColumn, BoardCard<any>>>();\n\n\t/**\n\t * Emits when columns are reordered through drag-and-drop.\n\t */\n\treadonly onColumnMoved = output<CdkDragDrop<BoardColumn[]>>();\n\n\t/**\n\t * Emits when a column body is scrolled to its end, enabling infinite-scroll behaviour.\n\t */\n\treadonly reachedEnd = output<ReachedEndEvent>();\n\n\t/**\n\t * Default predicate that allows any card to be dropped into any column.\n\t *\n\t * @returns Always `true`, indicating that drop operations are permitted.\n\t */\n\tdefaultEnterPredicateFn = () => true;\n\n\t/**\n\t * Emits the clicked card through {@link onCardClick}.\n\t *\n\t * @param item - The card that triggered the click event.\n\t */\n\tcardClick(item: BoardCard) {\n\t\tthis.onCardClick.emit(item);\n\t}\n\n\t/**\n\t * Updates column order when a drag-and-drop operation completes and emits the resulting event.\n\t *\n\t * @param event - Drag-and-drop metadata describing the column movement.\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 * Applies card reordering or transfer logic depending on the drag-drop target,\n\t * then emits the corresponding drag event metadata.\n\t *\n\t * @param event - Drag-and-drop metadata describing the card movement.\n\t */\n\tdropCard(event: CdkDragDrop<BoardColumn, BoardColumn, BoardCard<any>>) {\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 * Emits {@link reachedEnd} once a column body is scrolled to its bottom.\n\t *\n\t * @param index - Index of the scrolled column within the board.\n\t * @param event - Browser scroll event originating from the column body element.\n\t */\n\tonScroll(index: number, event: Event) {\n\t\tconst el = event.target as HTMLElement | null;\n\t\tif (!el) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrolledToBottom =\n\t\t\tel.scrollTop + el.clientHeight >= el.scrollHeight - this.scrollDetectionPadding;\n\n\t\tif (!scrolledToBottom) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst column = this.board()?.columns?.[index];\n\t\tif (!column) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.reachedEnd.emit({\n\t\t\tindex,\n\t\t\tdata: column\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 * @publicApi\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/**\n * Converts a hexadecimal color string into its inverted counterpart, offering both\n * high-contrast black/white and full-spectrum inversion modes.\n *\n * @publicApi\n */\n@Pipe({\n\tname: 'invertColor',\n\tstandalone: true\n})\nexport class InvertColorPipe implements PipeTransform {\n\t/**\n\t * Inverts a HEX color value.\n\t *\n\t * @param hex - Color expressed as a 3- or 6-digit HEX string with or without a hash prefix.\n\t * @param bw - When `true`, returns either black or white based on perceived brightness to maximise contrast.\n\t * @returns The inverted color represented as a 6-digit HEX string (always prefixed with `#`).\n\t * @throws Error if the provided value cannot be parsed as a valid HEX color.\n\t */\n\ttransform(hex: string, bw: boolean): string {\n\t\tif (!hex) {\n\t\t\treturn '#000000';\n\t\t}\n\n\t\tlet normalizedHex = hex;\n\t\tif (normalizedHex.indexOf('#') === 0) {\n\t\t\tnormalizedHex = normalizedHex.slice(1);\n\t\t}\n\n\t\tif (normalizedHex.length === 3) {\n\t\t\t// Convert shorthand notation (e.g., #abc) to full length (#aabbcc)\n\t\t\tnormalizedHex =\n\t\t\t\tnormalizedHex[0] +\n\t\t\t\tnormalizedHex[0] +\n\t\t\t\tnormalizedHex[1] +\n\t\t\t\tnormalizedHex[1] +\n\t\t\t\tnormalizedHex[2] +\n\t\t\t\tnormalizedHex[2];\n\t\t}\n\n\t\tif (normalizedHex.length !== 6) {\n\t\t\tthrow new Error('Invalid HEX color.');\n\t\t}\n\n\t\tconst r = parseInt(normalizedHex.slice(0, 2), 16);\n\t\tconst g = parseInt(normalizedHex.slice(2, 4), 16);\n\t\tconst b = parseInt(normalizedHex.slice(4, 6), 16);\n\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\n\t\tconst invertedR = (255 - r).toString(16).padStart(2, '0');\n\t\tconst invertedG = (255 - g).toString(16).padStart(2, '0');\n\t\tconst invertedB = (255 - b).toString(16).padStart(2, '0');\n\n\t\treturn `#${invertedR}${invertedG}${invertedB}`;\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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"}
|
|
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/**\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 * @publicApi\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 * @publicApi\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 * @publicApi\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 { CdkDragDrop, DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';\nimport { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';\nimport { Component, Signal, TemplateRef, computed, contentChild, input, output } 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/**\n * Standalone Kanban-style board component that provides column-based drag-and-drop,\n * custom templates and infinite-scroll detection.\n *\n * @publicApi\n */\n@Component({\n\tselector: 'hub-board, hub-ui-board',\n\ttemplateUrl: './board.component.html',\n\timports: [NgClass, NgStyle, NgTemplateOutlet, DragDropModule],\n\thost: {\n\t\tclass: 'hub-board'\n\t}\n})\nexport class HubBoardComponent {\n\t/**\n\t * Reactive input containing the full board definition (columns and cards).\n\t */\n\treadonly board = input<Board>();\n\n\t/**\n\t * Pixel threshold used when determining whether a column has reached scroll end.\n\t * Allows for fractional scroll values across different browsers.\n\t */\n\tprivate readonly scrollDetectionPadding = 1;\n\n\t/**\n\t * Derived list of board columns exposed as a signal to the template.\n\t */\n\tcolumns: Signal<Array<BoardColumn>> = computed(() => {\n\t\treturn this.board()?.columns ?? [];\n\t});\n\n\t/**\n\t * When true, column reordering via drag-and-drop is disabled.\n\t */\n\treadonly columnSortingDisabled = input<boolean>(false);\n\n\t/**\n\t * Custom card template supplied via the `cardTpt` structural directive.\n\t */\n\treadonly cardTpt = contentChild(CardTemplateDirective, {\n\t\tread: TemplateRef<unknown>\n\t});\n\n\t/**\n\t * Custom column header template supplied via the `columnHeaderTpt` structural directive.\n\t */\n\treadonly columnHeaderTpt = contentChild(BoardColumnHeaderDirective, {\n\t\tread: TemplateRef<unknown>\n\t});\n\n\t/**\n\t * Custom column footer template supplied via the `columnFooterTpt` structural directive.\n\t */\n\treadonly columnFooterTpt = contentChild(BoardColumnFooterDirective, {\n\t\tread: TemplateRef<unknown>\n\t});\n\n\t/**\n\t * Emits each time a card is clicked within the board.\n\t */\n\treadonly onCardClick = output<BoardCard>();\n\n\t/**\n\t * Emits when a card has been repositioned, either within the same column or into another column.\n\t */\n\treadonly onCardMoved = output<CdkDragDrop<BoardColumn, BoardColumn, BoardCard<any>>>();\n\n\t/**\n\t * Emits when columns are reordered through drag-and-drop.\n\t */\n\treadonly onColumnMoved = output<CdkDragDrop<BoardColumn[]>>();\n\n\t/**\n\t * Emits when a column body is scrolled to its end, enabling infinite-scroll behaviour.\n\t */\n\treadonly reachedEnd = output<ReachedEndEvent>();\n\n\t/**\n\t * Default predicate that allows any card to be dropped into any column.\n\t *\n\t * @returns Always `true`, indicating that drop operations are permitted.\n\t */\n\tdefaultEnterPredicateFn = () => true;\n\n\t/**\n\t * Emits the clicked card through {@link onCardClick}.\n\t *\n\t * @param item - The card that triggered the click event.\n\t */\n\tcardClick(item: BoardCard) {\n\t\tthis.onCardClick.emit(item);\n\t}\n\n\t/**\n\t * Updates column order when a drag-and-drop operation completes and emits the resulting event.\n\t *\n\t * @param event - Drag-and-drop metadata describing the column movement.\n\t */\n\tdropColumn(event: CdkDragDrop<BoardColumn[]>) {\n\t\tmoveItemInArray(event.container.data, event.previousIndex, event.currentIndex);\n\t\tthis.onColumnMoved.emit(event);\n\t}\n\n\t/**\n\t * Applies card reordering or transfer logic depending on the drag-drop target,\n\t * then emits the corresponding drag event metadata.\n\t *\n\t * @param event - Drag-and-drop metadata describing the card movement.\n\t */\n\tdropCard(event: CdkDragDrop<BoardColumn, BoardColumn, BoardCard<any>>) {\n\t\tif (event.previousContainer === event.container) {\n\t\t\t// Reorder the card within the same column\n\t\t\tmoveItemInArray(event.container.data.cards, event.previousIndex, event.currentIndex);\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 * Emits {@link reachedEnd} once a column body is scrolled to its bottom.\n\t *\n\t * @param index - Index of the scrolled column within the board.\n\t * @param event - Browser scroll event originating from the column body element.\n\t */\n\tonScroll(index: number, event: Event) {\n\t\tconst el = event.target as HTMLElement | null;\n\t\tif (!el) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrolledToBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - this.scrollDetectionPadding;\n\n\t\tif (!scrolledToBottom) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst column = this.board()?.columns?.[index];\n\t\tif (!column) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.reachedEnd.emit({\n\t\t\tindex,\n\t\t\tdata: column\n\t\t});\n\t}\n}\n","@if (columns().length) {\n<div\n\tclass=\"hub-board__drop-list\"\n\tcdkDropList\n\tcdkDropListOrientation=\"horizontal\"\n\t[cdkDropListData]=\"columns()\"\n\t(cdkDropListDropped)=\"dropColumn($event)\"\n\t[cdkDropListSortingDisabled]=\"columnSortingDisabled()\"\n>\n\t<div cdkDropListGroup class=\"hub-board__columns\">\n\t\t@for (column of columns(); let index = $index; track column) {\n\t\t<div class=\"hub-board__column-container\" cdkDrag [cdkDragData]=\"column\" [cdkDragDisabled]=\"column.disabled\">\n\t\t\t<div class=\"hub-board__column\" [ngClass]=\"column.classlist\" [ngStyle]=\"column.style\">\n\t\t\t\t<div class=\"hub-board__column-header\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"columnHeaderTpt() || defaultColumnHeaderTpt\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ column: column }\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-board__column-body\"\n\t\t\t\t\tcdkDropList\n\t\t\t\t\t[cdkDropListData]=\"column\"\n\t\t\t\t\t(cdkDropListDropped)=\"dropCard($event)\"\n\t\t\t\t\t(scroll)=\"onScroll(index, $event)\"\n\t\t\t\t\t[cdkDropListEnterPredicate]=\"column.predicate ?? defaultEnterPredicateFn\"\n\t\t\t\t\t[cdkDropListSortingDisabled]=\"column.cardSortingDisabled\"\n\t\t\t\t>\n\t\t\t\t\t@for ( card of column.cards; let index = $index; track card ) {\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"hub-board__card\"\n\t\t\t\t\t\t[class.hub-board__card--disabled]=\"card.disabled\"\n\t\t\t\t\t\tcdkDrag\n\t\t\t\t\t\t[cdkDragData]=\"card\"\n\t\t\t\t\t\t[cdkDragDisabled]=\"card.disabled\"\n\t\t\t\t\t\t(click)=\"cardClick(card)\"\n\t\t\t\t\t\t(mousedown)=\"card.disabled && $event.stopPropagation()\"\n\t\t\t\t\t\t[ngClass]=\"card.classlist\"\n\t\t\t\t\t\t[ngStyle]=\"card.style\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div class=\"hub-board__card-body\">\n\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"cardTpt() || defaultCardTpt\"\n\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\t\t\titem: card,\n\t\t\t\t\t\t\t\t\tcolumn\n\t\t\t\t\t\t\t\t}\"\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</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\n\t\t\t\t@if (columnFooterTpt()) {\n\t\t\t\t<div class=\"hub-board__column-footer\">\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"columnFooterTpt() ?? null\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{\n\t\t\t\t\t\t\tcolumn: column\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t\t}\n\t</div>\n</div>\n}\n\n<ng-template #defaultCardTpt let-item=\"item\">\n\t<h6 class=\"hub-board__card-title\">{{ item.title }}</h6>\n\t<p class=\"hub-board__card-subtitle\">{{ 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 * @publicApi\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/**\n * Converts a hexadecimal color string into its inverted counterpart, offering both\n * high-contrast black/white and full-spectrum inversion modes.\n *\n * @publicApi\n */\n@Pipe({\n\tname: 'invertColor',\n\tstandalone: true\n})\nexport class InvertColorPipe implements PipeTransform {\n\t/**\n\t * Inverts a HEX color value.\n\t *\n\t * @param hex - Color expressed as a 3- or 6-digit HEX string with or without a hash prefix.\n\t * @param bw - When `true`, returns either black or white based on perceived brightness to maximise contrast.\n\t * @returns The inverted color represented as a 6-digit HEX string (always prefixed with `#`).\n\t * @throws Error if the provided value cannot be parsed as a valid HEX color.\n\t */\n\ttransform(hex: string, bw: boolean): string {\n\t\tif (!hex) {\n\t\t\treturn '#000000';\n\t\t}\n\n\t\tlet normalizedHex = hex;\n\t\tif (normalizedHex.indexOf('#') === 0) {\n\t\t\tnormalizedHex = normalizedHex.slice(1);\n\t\t}\n\n\t\tif (normalizedHex.length === 3) {\n\t\t\t// Convert shorthand notation (e.g., #abc) to full length (#aabbcc)\n\t\t\tnormalizedHex =\n\t\t\t\tnormalizedHex[0] +\n\t\t\t\tnormalizedHex[0] +\n\t\t\t\tnormalizedHex[1] +\n\t\t\t\tnormalizedHex[1] +\n\t\t\t\tnormalizedHex[2] +\n\t\t\t\tnormalizedHex[2];\n\t\t}\n\n\t\tif (normalizedHex.length !== 6) {\n\t\t\tthrow new Error('Invalid HEX color.');\n\t\t}\n\n\t\tconst r = parseInt(normalizedHex.slice(0, 2), 16);\n\t\tconst g = parseInt(normalizedHex.slice(2, 4), 16);\n\t\tconst b = parseInt(normalizedHex.slice(4, 6), 16);\n\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\n\t\tconst invertedR = (255 - r).toString(16).padStart(2, '0');\n\t\tconst invertedG = (255 - g).toString(16).padStart(2, '0');\n\t\tconst invertedB = (255 - b).toString(16).padStart(2, '0');\n\n\t\treturn `#${invertedR}${invertedG}${invertedB}`;\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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"}
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ng-hub-ui-board",
|
|
3
|
-
"version": "19.3.
|
|
3
|
+
"version": "19.3.4",
|
|
4
4
|
"description": "An Angular-based Kanban board component with Trello-like drag-and-drop, customizable columns, and straightforward event handling.",
|
|
5
5
|
"main": "bundles/ng-hub-ui-board.umd.js",
|
|
6
6
|
"module": "fesm2022/ng-hub-ui-board.mjs",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
},
|
|
82
82
|
"funding": {
|
|
83
83
|
"type": "buymeacoffee",
|
|
84
|
-
"url": "https://
|
|
84
|
+
"url": "https://buymeacoffee.com/carlosmorcillo"
|
|
85
85
|
},
|
|
86
86
|
"license": "CC-BY-4.0",
|
|
87
87
|
"engines": {
|
|
Binary file
|