@mk-kit/ui 0.53.0 → 0.54.0
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.
|
@@ -1,11 +1,51 @@
|
|
|
1
1
|
import { NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { model, input, booleanAttribute, output, contentChild,
|
|
3
|
+
import { inject, TemplateRef, Directive, model, input, booleanAttribute, output, contentChild, contentChildren, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
import { mkUniqueId } from '@mk-kit/ui/core';
|
|
5
5
|
import { mkMoveItemInArray, MkDropList, MkDrag } from '@mk-kit/ui/dnd';
|
|
6
6
|
|
|
7
7
|
/** Stable empty fallback so out-of-range lookups don't allocate per call. */
|
|
8
8
|
const NO_CONNECTIONS = [];
|
|
9
|
+
/**
|
|
10
|
+
* Marks the projected card renderer explicitly:
|
|
11
|
+
* `<ng-template mkKanbanCard let-card let-column="column">`. Without it the
|
|
12
|
+
* first plain `<ng-template>` inside `<mk-kanban>` is used, as before 0.54.
|
|
13
|
+
*/
|
|
14
|
+
class MkKanbanCardDef {
|
|
15
|
+
template = inject(TemplateRef);
|
|
16
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanbanCardDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
17
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkKanbanCardDef, isStandalone: true, selector: "ng-template[mkKanbanCard]", ngImport: i0 });
|
|
18
|
+
}
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanbanCardDef, decorators: [{
|
|
20
|
+
type: Directive,
|
|
21
|
+
args: [{ selector: 'ng-template[mkKanbanCard]' }]
|
|
22
|
+
}] });
|
|
23
|
+
/**
|
|
24
|
+
* Replaces the default column header (title + count):
|
|
25
|
+
* `<ng-template mkKanbanColumnHeader let-column let-count="count">`.
|
|
26
|
+
*/
|
|
27
|
+
class MkKanbanColumnHeaderDef {
|
|
28
|
+
template = inject(TemplateRef);
|
|
29
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanbanColumnHeaderDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
30
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkKanbanColumnHeaderDef, isStandalone: true, selector: "ng-template[mkKanbanColumnHeader]", ngImport: i0 });
|
|
31
|
+
}
|
|
32
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanbanColumnHeaderDef, decorators: [{
|
|
33
|
+
type: Directive,
|
|
34
|
+
args: [{ selector: 'ng-template[mkKanbanColumnHeader]' }]
|
|
35
|
+
}] });
|
|
36
|
+
/**
|
|
37
|
+
* Rendered under each column's card list — a "quick add" input, say:
|
|
38
|
+
* `<ng-template mkKanbanColumnFooter let-column>`.
|
|
39
|
+
*/
|
|
40
|
+
class MkKanbanColumnFooterDef {
|
|
41
|
+
template = inject(TemplateRef);
|
|
42
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanbanColumnFooterDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
43
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkKanbanColumnFooterDef, isStandalone: true, selector: "ng-template[mkKanbanColumnFooter]", ngImport: i0 });
|
|
44
|
+
}
|
|
45
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanbanColumnFooterDef, decorators: [{
|
|
46
|
+
type: Directive,
|
|
47
|
+
args: [{ selector: 'ng-template[mkKanbanColumnFooter]' }]
|
|
48
|
+
}] });
|
|
9
49
|
/**
|
|
10
50
|
* Kanban board — a horizontal row of columns whose cards can be dragged and
|
|
11
51
|
* reordered within a column or transferred between columns. Built on the dnd
|
|
@@ -14,13 +54,22 @@ const NO_CONNECTIONS = [];
|
|
|
14
54
|
*
|
|
15
55
|
* Bind `columns` two-way; the model is updated immutably on each drop. Project
|
|
16
56
|
* an `<ng-template>` to render custom card content — it receives the card as
|
|
17
|
-
* `$implicit` and the owning column as `column
|
|
57
|
+
* `$implicit` and the owning column as `column`. Column headers and footers
|
|
58
|
+
* take their own templates (`mkKanbanColumnHeader` / `mkKanbanColumnFooter`,
|
|
59
|
+
* context `{ $implicit: column, index, count }`):
|
|
18
60
|
*
|
|
19
61
|
* ```html
|
|
20
62
|
* <mk-kanban [(columns)]="board" (cardMoved)="onMoved($event)">
|
|
21
|
-
* <ng-template
|
|
63
|
+
* <ng-template mkKanbanColumnHeader let-column let-count="count">
|
|
64
|
+
* <strong>{{ column.title }}</strong> {{ count }}
|
|
65
|
+
* <button (click)="rename(column)">Rename</button>
|
|
66
|
+
* </ng-template>
|
|
67
|
+
* <ng-template mkKanbanCard let-card let-column="column">
|
|
22
68
|
* <strong>{{ card.title }}</strong>
|
|
23
69
|
* </ng-template>
|
|
70
|
+
* <ng-template mkKanbanColumnFooter let-column>
|
|
71
|
+
* <button (click)="add(column)">+ Card</button>
|
|
72
|
+
* </ng-template>
|
|
24
73
|
* </mk-kanban>
|
|
25
74
|
* ```
|
|
26
75
|
*/
|
|
@@ -32,9 +81,32 @@ class MkKanban {
|
|
|
32
81
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
33
82
|
/** Emitted after the model is updated when a card is moved. */
|
|
34
83
|
cardMoved = output();
|
|
35
|
-
|
|
36
|
-
|
|
84
|
+
cardDef = contentChild(MkKanbanCardDef, /* @ts-ignore */
|
|
85
|
+
...(ngDevMode ? [{ debugName: "cardDef" }] : /* istanbul ignore next */ []));
|
|
86
|
+
headerDef = contentChild(MkKanbanColumnHeaderDef, /* @ts-ignore */
|
|
87
|
+
...(ngDevMode ? [{ debugName: "headerDef" }] : /* istanbul ignore next */ []));
|
|
88
|
+
footerDef = contentChild(MkKanbanColumnFooterDef, /* @ts-ignore */
|
|
89
|
+
...(ngDevMode ? [{ debugName: "footerDef" }] : /* istanbul ignore next */ []));
|
|
90
|
+
/** Every projected template, for the pre-0.54 "first plain template is the card" rule. */
|
|
91
|
+
templates = contentChildren(TemplateRef, /* @ts-ignore */
|
|
92
|
+
...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
|
|
93
|
+
/** Consumer-projected card renderer: `[mkKanbanCard]`, else the first template that is not a header/footer. */
|
|
94
|
+
cardTemplate = computed(() => {
|
|
95
|
+
const explicit = this.cardDef()?.template;
|
|
96
|
+
if (explicit)
|
|
97
|
+
return explicit;
|
|
98
|
+
// A query and a directive's injected TemplateRef are different instances
|
|
99
|
+
// of the same template — compare their anchor nodes.
|
|
100
|
+
const taken = new Set([this.headerDef(), this.footerDef()].map((d) => d?.template.elementRef.nativeElement));
|
|
101
|
+
return this.templates().find((t) => !taken.has(t.elementRef.nativeElement));
|
|
102
|
+
}, /* @ts-ignore */
|
|
37
103
|
...(ngDevMode ? [{ debugName: "cardTemplate" }] : /* istanbul ignore next */ []));
|
|
104
|
+
/** Optional column header renderer (replaces title + count). */
|
|
105
|
+
headerTemplate = computed(() => this.headerDef()?.template, /* @ts-ignore */
|
|
106
|
+
...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
|
|
107
|
+
/** Optional column footer renderer (under the card list). */
|
|
108
|
+
footerTemplate = computed(() => this.footerDef()?.template, /* @ts-ignore */
|
|
109
|
+
...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
|
|
38
110
|
/** Board-scoped prefix so this board's drop-list ids never collide. */
|
|
39
111
|
boardId = mkUniqueId('mk-kanban');
|
|
40
112
|
/** Column count as its own computed so id arrays survive card-only updates. */
|
|
@@ -111,12 +183,12 @@ class MkKanban {
|
|
|
111
183
|
});
|
|
112
184
|
}
|
|
113
185
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanban, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
114
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkKanban, isStandalone: true, selector: "mk-kanban", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange", cardMoved: "cardMoved" }, host: { classAttribute: "mk-kanban" }, queries: [{ propertyName: "
|
|
186
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkKanban, isStandalone: true, selector: "mk-kanban", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange", cardMoved: "cardMoved" }, host: { classAttribute: "mk-kanban" }, queries: [{ propertyName: "cardDef", first: true, predicate: MkKanbanCardDef, descendants: true, isSignal: true }, { propertyName: "headerDef", first: true, predicate: MkKanbanColumnHeaderDef, descendants: true, isSignal: true }, { propertyName: "footerDef", first: true, predicate: MkKanbanColumnFooterDef, descendants: true, isSignal: true }, { propertyName: "templates", predicate: TemplateRef, isSignal: true }], ngImport: i0, template: "<div class=\"mk-kanban__board\">\n @for (column of columns(); track column.id; let colIndex = $index) {\n <section\n class=\"mk-kanban__column\"\n role=\"region\"\n [attr.aria-label]=\"column.title\"\n >\n <header class=\"mk-kanban__column-header\">\n @if (headerTemplate(); as header) {\n <ng-container\n [ngTemplateOutlet]=\"header\"\n [ngTemplateOutletContext]=\"{ $implicit: column, index: colIndex, count: column.cards.length }\"\n />\n } @else {\n <span class=\"mk-kanban__column-title\">{{ column.title }}</span>\n <span class=\"mk-kanban__column-count\" aria-hidden=\"true\">\n {{ column.cards.length }}\n </span>\n }\n </header>\n\n <div\n mkDropList\n class=\"mk-kanban__cards\"\n [mkDropListData]=\"column.cards\"\n [mkDropListId]=\"listIds()[colIndex]\"\n [mkDropListLabel]=\"column.title\"\n [mkDropListConnectedTo]=\"connectedTo(colIndex)\"\n [mkDropListDisabled]=\"disabled()\"\n mkDropListOrientation=\"vertical\"\n (mkDropListDropped)=\"onDrop($event)\"\n >\n @for (card of column.cards; track card.id) {\n <div\n mkDrag\n class=\"mk-kanban__card\"\n [mkDragData]=\"card\"\n [mkDragDisabled]=\"disabled()\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardTemplate() ?? defaultCard\"\n [ngTemplateOutletContext]=\"{ $implicit: card, column: column }\"\n />\n </div>\n }\n </div>\n\n @if (footerTemplate(); as footer) {\n <div class=\"mk-kanban__column-footer\">\n <ng-container\n [ngTemplateOutlet]=\"footer\"\n [ngTemplateOutletContext]=\"{ $implicit: column, index: colIndex, count: column.cards.length }\"\n />\n </div>\n }\n </section>\n }\n</div>\n\n<ng-template #defaultCard let-card>\n <span class=\"mk-kanban__card-title\">{{ card.title }}</span>\n</ng-template>\n", styles: [":host{display:block;color:var(--mk-text)}.mk-kanban__board{display:flex;gap:var(--mk-space-4);align-items:flex-start;overflow-x:auto;padding-bottom:var(--mk-space-2)}.mk-kanban__column{display:flex;flex-direction:column;flex:0 0 auto;width:17rem;max-height:100%;background-color:var(--mk-surface-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg)}.mk-kanban__column-header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-2);padding:var(--mk-space-3) var(--mk-space-4);font-weight:600;border-bottom:var(--mk-border-width) solid var(--mk-border)}.mk-kanban__column-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-kanban__column-count{flex:0 0 auto;min-width:1.5rem;padding:0 var(--mk-space-2);font-size:.75rem;font-weight:600;line-height:1.5rem;text-align:center;color:var(--mk-text-muted);background-color:var(--mk-surface);border-radius:var(--mk-radius-md)}.mk-kanban__cards{display:flex;flex-direction:column;gap:var(--mk-space-2);flex:1 1 auto;min-height:var(--mk-space-8);padding:var(--mk-space-3);overflow-y:auto}.mk-kanban__column-footer{flex:0 0 auto;padding:var(--mk-space-2) var(--mk-space-3) var(--mk-space-3);border-top:var(--mk-border-width) solid var(--mk-border)}.mk-kanban__card{padding:var(--mk-space-3) var(--mk-space-4);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-sm)}.mk-kanban__card:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-kanban__card-title{display:block;min-width:0;overflow-wrap:anywhere}\n"], dependencies: [{ kind: "component", type: MkDropList, selector: "[mkDropList]", inputs: ["mkDropListData", "mkDropListId", "mkDropListConnectedTo", "mkDropListLabel", "mkDropListLabelledBy", "mkDropListOrientation", "mkDropListDisabled"], outputs: ["mkDropListDropped"], exportAs: ["mkDropList"] }, { kind: "component", type: MkDrag, selector: "[mkDrag]", inputs: ["mkDragData", "mkDragDisabled", "mkDragTouchDelay"], exportAs: ["mkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
115
187
|
}
|
|
116
188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanban, decorators: [{
|
|
117
189
|
type: Component,
|
|
118
|
-
args: [{ selector: 'mk-kanban', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkDropList, MkDrag, NgTemplateOutlet], host: { class: 'mk-kanban' }, template: "<div class=\"mk-kanban__board\">\n @for (column of columns(); track column.id; let colIndex = $index) {\n <section\n class=\"mk-kanban__column\"\n role=\"region\"\n [attr.aria-label]=\"column.title\"\n >\n <header class=\"mk-kanban__column-header\">\n <span class=\"mk-kanban__column-title\">{{ column.title }}</span>\n
|
|
119
|
-
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cardMoved: [{ type: i0.Output, args: ["cardMoved"] }],
|
|
190
|
+
args: [{ selector: 'mk-kanban', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkDropList, MkDrag, NgTemplateOutlet], host: { class: 'mk-kanban' }, template: "<div class=\"mk-kanban__board\">\n @for (column of columns(); track column.id; let colIndex = $index) {\n <section\n class=\"mk-kanban__column\"\n role=\"region\"\n [attr.aria-label]=\"column.title\"\n >\n <header class=\"mk-kanban__column-header\">\n @if (headerTemplate(); as header) {\n <ng-container\n [ngTemplateOutlet]=\"header\"\n [ngTemplateOutletContext]=\"{ $implicit: column, index: colIndex, count: column.cards.length }\"\n />\n } @else {\n <span class=\"mk-kanban__column-title\">{{ column.title }}</span>\n <span class=\"mk-kanban__column-count\" aria-hidden=\"true\">\n {{ column.cards.length }}\n </span>\n }\n </header>\n\n <div\n mkDropList\n class=\"mk-kanban__cards\"\n [mkDropListData]=\"column.cards\"\n [mkDropListId]=\"listIds()[colIndex]\"\n [mkDropListLabel]=\"column.title\"\n [mkDropListConnectedTo]=\"connectedTo(colIndex)\"\n [mkDropListDisabled]=\"disabled()\"\n mkDropListOrientation=\"vertical\"\n (mkDropListDropped)=\"onDrop($event)\"\n >\n @for (card of column.cards; track card.id) {\n <div\n mkDrag\n class=\"mk-kanban__card\"\n [mkDragData]=\"card\"\n [mkDragDisabled]=\"disabled()\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardTemplate() ?? defaultCard\"\n [ngTemplateOutletContext]=\"{ $implicit: card, column: column }\"\n />\n </div>\n }\n </div>\n\n @if (footerTemplate(); as footer) {\n <div class=\"mk-kanban__column-footer\">\n <ng-container\n [ngTemplateOutlet]=\"footer\"\n [ngTemplateOutletContext]=\"{ $implicit: column, index: colIndex, count: column.cards.length }\"\n />\n </div>\n }\n </section>\n }\n</div>\n\n<ng-template #defaultCard let-card>\n <span class=\"mk-kanban__card-title\">{{ card.title }}</span>\n</ng-template>\n", styles: [":host{display:block;color:var(--mk-text)}.mk-kanban__board{display:flex;gap:var(--mk-space-4);align-items:flex-start;overflow-x:auto;padding-bottom:var(--mk-space-2)}.mk-kanban__column{display:flex;flex-direction:column;flex:0 0 auto;width:17rem;max-height:100%;background-color:var(--mk-surface-2);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg)}.mk-kanban__column-header{display:flex;align-items:center;justify-content:space-between;gap:var(--mk-space-2);padding:var(--mk-space-3) var(--mk-space-4);font-weight:600;border-bottom:var(--mk-border-width) solid var(--mk-border)}.mk-kanban__column-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-kanban__column-count{flex:0 0 auto;min-width:1.5rem;padding:0 var(--mk-space-2);font-size:.75rem;font-weight:600;line-height:1.5rem;text-align:center;color:var(--mk-text-muted);background-color:var(--mk-surface);border-radius:var(--mk-radius-md)}.mk-kanban__cards{display:flex;flex-direction:column;gap:var(--mk-space-2);flex:1 1 auto;min-height:var(--mk-space-8);padding:var(--mk-space-3);overflow-y:auto}.mk-kanban__column-footer{flex:0 0 auto;padding:var(--mk-space-2) var(--mk-space-3) var(--mk-space-3);border-top:var(--mk-border-width) solid var(--mk-border)}.mk-kanban__card{padding:var(--mk-space-3) var(--mk-space-4);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-sm)}.mk-kanban__card:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-kanban__card-title{display:block;min-width:0;overflow-wrap:anywhere}\n"] }]
|
|
191
|
+
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cardMoved: [{ type: i0.Output, args: ["cardMoved"] }], cardDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MkKanbanCardDef), { isSignal: true }] }], headerDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MkKanbanColumnHeaderDef), { isSignal: true }] }], footerDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MkKanbanColumnFooterDef), { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
|
|
120
192
|
|
|
121
193
|
/**
|
|
122
194
|
* @mk-kit/ui/kanban — the board (columns + drag-and-drop cards). Its own
|
|
@@ -129,5 +201,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
129
201
|
* Generated bundle index. Do not edit.
|
|
130
202
|
*/
|
|
131
203
|
|
|
132
|
-
export { MkKanban };
|
|
204
|
+
export { MkKanban, MkKanbanCardDef, MkKanbanColumnFooterDef, MkKanbanColumnHeaderDef };
|
|
133
205
|
//# sourceMappingURL=mk-kit-ui-kanban.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mk-kit-ui-kanban.mjs","sources":["../../../projects/mk-kit/kanban/kanban.ts","../../../projects/mk-kit/kanban/kanban.html","../../../projects/mk-kit/kanban/index.ts","../../../projects/mk-kit/kanban/mk-kit-ui-kanban.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n TemplateRef,\n booleanAttribute,\n computed,\n contentChild,\n input,\n model,\n output,\n} from '@angular/core';\nimport { mkUniqueId } from '@mk-kit/ui/core';\nimport { MkDrag, MkDropList, mkMoveItemInArray } from '@mk-kit/ui/dnd';\nimport type { MkDropEvent } from '@mk-kit/ui/dnd';\n\n/** Stable empty fallback so out-of-range lookups don't allocate per call. */\nconst NO_CONNECTIONS: string[] = [];\n\n/** A single draggable card on a {@link MkKanban} board. */\nexport interface MkKanbanCard {\n /** Stable identity used for tracking and move events. */\n id: unknown;\n /** Text shown by the default card renderer. */\n title: string;\n /** Arbitrary extra fields for custom card templates. */\n [key: string]: unknown;\n}\n\n/** A column (bucket) of {@link MkKanbanCard}s on a {@link MkKanban} board. */\nexport interface MkKanbanColumn {\n /** Stable identity used for tracking and move events. */\n id: unknown;\n /** Heading shown in the column header and used as its aria-label. */\n title: string;\n /** The ordered cards contained in this column. */\n cards: MkKanbanCard[];\n}\n\n/**\n * Emitted by {@link MkKanban} after a card has been moved (between or within\n * columns) and the two-way `columns` model has been updated.\n */\nexport interface MkKanbanCardMovedEvent {\n /** The card that was moved. */\n card: MkKanbanCard;\n /** `id` of the column the card came from. */\n from: unknown;\n /** `id` of the column the card was dropped into. */\n to: unknown;\n /** The card's index within the source column before the move. */\n fromIndex: number;\n /** The card's index within the destination column after the move. */\n toIndex: number;\n}\n\n/**\n * Kanban board — a horizontal row of columns whose cards can be dragged and\n * reordered within a column or transferred between columns. Built on the dnd\n * group's connected `[mkDropList]` / `[mkDrag]` directives, so it inherits both\n * pointer and keyboard dragging (WCAG 2.1.1) for free.\n *\n * Bind `columns` two-way; the model is updated immutably on each drop. Project\n * an `<ng-template>` to render custom card content — it receives the card as\n * `$implicit` and the owning column as `column`:\n *\n * ```html\n * <mk-kanban [(columns)]=\"board\" (cardMoved)=\"onMoved($event)\">\n * <ng-template #cardTemplate let-card let-column=\"column\">\n * <strong>{{ card.title }}</strong>\n * </ng-template>\n * </mk-kanban>\n * ```\n */\n@Component({\n selector: 'mk-kanban',\n templateUrl: './kanban.html',\n styleUrl: './kanban.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [MkDropList, MkDrag, NgTemplateOutlet],\n host: { class: 'mk-kanban' },\n})\nexport class MkKanban {\n /** The board's columns and their cards (two-way). Updated on every drop. */\n readonly columns = model<MkKanbanColumn[]>([]);\n\n /** Disable all dragging on the board. */\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /** Emitted after the model is updated when a card is moved. */\n readonly cardMoved = output<MkKanbanCardMovedEvent>();\n\n /** Optional consumer-projected card renderer (`$implicit` = card). */\n protected readonly cardTemplate = contentChild<TemplateRef<unknown>>(TemplateRef);\n\n /** Board-scoped prefix so this board's drop-list ids never collide. */\n private readonly boardId = mkUniqueId('mk-kanban');\n\n /** Column count as its own computed so id arrays survive card-only updates. */\n private readonly columnCount = computed(() => this.columns().length);\n\n /** Stable drop-list id per column, positionally matched to `columns()`. */\n protected readonly listIds = computed(() =>\n Array.from({ length: this.columnCount() }, (_, i) => `${this.boardId}-col-${i}`),\n );\n\n /**\n * Per-column connected-target ids (every other column's list). One stable\n * array per column, recomputed only when the column count changes — a fresh\n * array per change-detection pass would dirty each `MkDropList`'s\n * `connectedTo` input identity on every cycle.\n */\n private readonly connections = computed(() => {\n const ids = this.listIds();\n return ids.map((_, i) => ids.filter((_, j) => j !== i));\n });\n\n /** Ids of every other column's list — the connected transfer targets for `i`. */\n protected connectedTo(index: number): string[] {\n return this.connections()[index] ?? NO_CONNECTIONS;\n }\n\n /**\n * Apply a drop from the dnd module. Reads the source/target columns from the\n * event's containers (matched by their drop-list ids), updates the two-way\n * `columns` model immutably, then emits {@link cardMoved}.\n */\n protected onDrop(event: MkDropEvent<MkKanbanCard>): void {\n const ids = this.listIds();\n const fromCol = ids.indexOf(event.previousContainer.id());\n const toCol = ids.indexOf(event.container.id());\n if (fromCol === -1 || toCol === -1) return;\n this.moveCard(fromCol, toCol, event.previousIndex, event.currentIndex);\n }\n\n /**\n * Immutably move the card at `fromIndex` of column `fromCol` to `toIndex` of\n * column `toCol`, updating the model and emitting {@link cardMoved}. Column\n * indices refer to positions in `columns()`.\n */\n private moveCard(\n fromCol: number,\n toCol: number,\n fromIndex: number,\n toIndex: number,\n ): void {\n const cols = this.columns();\n const source = cols[fromCol];\n const target = cols[toCol];\n if (!source || !target) return;\n const card = source.cards[fromIndex];\n if (!card) return;\n\n const next = cols.map((col, i) => {\n if (fromCol === toCol && i === fromCol) {\n const cards = [...col.cards];\n mkMoveItemInArray(cards, fromIndex, toIndex);\n return { ...col, cards };\n }\n if (i === fromCol) {\n return { ...col, cards: col.cards.filter((_, idx) => idx !== fromIndex) };\n }\n if (i === toCol) {\n const cards = [...col.cards];\n cards.splice(Math.max(0, Math.min(toIndex, cards.length)), 0, card);\n return { ...col, cards };\n }\n return col;\n });\n\n this.columns.set(next);\n this.cardMoved.emit({\n card,\n from: source.id,\n to: target.id,\n fromIndex,\n toIndex,\n });\n }\n}\n","<div class=\"mk-kanban__board\">\n @for (column of columns(); track column.id; let colIndex = $index) {\n <section\n class=\"mk-kanban__column\"\n role=\"region\"\n [attr.aria-label]=\"column.title\"\n >\n <header class=\"mk-kanban__column-header\">\n <span class=\"mk-kanban__column-title\">{{ column.title }}</span>\n <span class=\"mk-kanban__column-count\" aria-hidden=\"true\">\n {{ column.cards.length }}\n </span>\n </header>\n\n <div\n mkDropList\n class=\"mk-kanban__cards\"\n [mkDropListData]=\"column.cards\"\n [mkDropListId]=\"listIds()[colIndex]\"\n [mkDropListLabel]=\"column.title\"\n [mkDropListConnectedTo]=\"connectedTo(colIndex)\"\n [mkDropListDisabled]=\"disabled()\"\n mkDropListOrientation=\"vertical\"\n (mkDropListDropped)=\"onDrop($event)\"\n >\n @for (card of column.cards; track card.id) {\n <div\n mkDrag\n class=\"mk-kanban__card\"\n [mkDragData]=\"card\"\n [mkDragDisabled]=\"disabled()\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardTemplate() ?? defaultCard\"\n [ngTemplateOutletContext]=\"{ $implicit: card, column: column }\"\n />\n </div>\n }\n </div>\n </section>\n }\n</div>\n\n<ng-template #defaultCard let-card>\n <span class=\"mk-kanban__card-title\">{{ card.title }}</span>\n</ng-template>\n","/**\n * @mk-kit/ui/kanban — the board (columns + drag-and-drop cards). Its own\n * entry since 0.53 because it is the only `data` component that needs\n * `@mk-kit/ui/dnd`; keeping it in `data` shipped dnd to every page that\n * rendered a badge.\n */\nexport * from './kanban';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"mk-kit-ui-kanban.mjs","sources":["../../../projects/mk-kit/kanban/kanban.ts","../../../projects/mk-kit/kanban/kanban.html","../../../projects/mk-kit/kanban/index.ts","../../../projects/mk-kit/kanban/mk-kit-ui-kanban.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n Directive,\n TemplateRef,\n booleanAttribute,\n computed,\n contentChild,\n contentChildren,\n inject,\n input,\n model,\n output,\n} from '@angular/core';\nimport { mkUniqueId } from '@mk-kit/ui/core';\nimport { MkDrag, MkDropList, mkMoveItemInArray } from '@mk-kit/ui/dnd';\nimport type { MkDropEvent } from '@mk-kit/ui/dnd';\n\n/** Stable empty fallback so out-of-range lookups don't allocate per call. */\nconst NO_CONNECTIONS: string[] = [];\n\n/** A single draggable card on a {@link MkKanban} board. */\nexport interface MkKanbanCard {\n /** Stable identity used for tracking and move events. */\n id: unknown;\n /** Text shown by the default card renderer. */\n title: string;\n /** Arbitrary extra fields for custom card templates. */\n [key: string]: unknown;\n}\n\n/** A column (bucket) of {@link MkKanbanCard}s on a {@link MkKanban} board. */\nexport interface MkKanbanColumn {\n /** Stable identity used for tracking and move events. */\n id: unknown;\n /** Heading shown in the column header and used as its aria-label. */\n title: string;\n /** The ordered cards contained in this column. */\n cards: MkKanbanCard[];\n}\n\n/**\n * Emitted by {@link MkKanban} after a card has been moved (between or within\n * columns) and the two-way `columns` model has been updated.\n */\nexport interface MkKanbanCardMovedEvent {\n /** The card that was moved. */\n card: MkKanbanCard;\n /** `id` of the column the card came from. */\n from: unknown;\n /** `id` of the column the card was dropped into. */\n to: unknown;\n /** The card's index within the source column before the move. */\n fromIndex: number;\n /** The card's index within the destination column after the move. */\n toIndex: number;\n}\n\n/** Context handed to the column header / footer templates. */\nexport interface MkKanbanColumnContext {\n /** The column being rendered. */\n $implicit: MkKanbanColumn;\n /** Its position in `columns`. */\n index: number;\n /** `column.cards.length`, for a count badge. */\n count: number;\n}\n\n/**\n * Marks the projected card renderer explicitly:\n * `<ng-template mkKanbanCard let-card let-column=\"column\">`. Without it the\n * first plain `<ng-template>` inside `<mk-kanban>` is used, as before 0.54.\n */\n@Directive({ selector: 'ng-template[mkKanbanCard]' })\nexport class MkKanbanCardDef {\n readonly template = inject<TemplateRef<unknown>>(TemplateRef);\n}\n\n/**\n * Replaces the default column header (title + count):\n * `<ng-template mkKanbanColumnHeader let-column let-count=\"count\">`.\n */\n@Directive({ selector: 'ng-template[mkKanbanColumnHeader]' })\nexport class MkKanbanColumnHeaderDef {\n readonly template = inject<TemplateRef<MkKanbanColumnContext>>(TemplateRef);\n}\n\n/**\n * Rendered under each column's card list — a \"quick add\" input, say:\n * `<ng-template mkKanbanColumnFooter let-column>`.\n */\n@Directive({ selector: 'ng-template[mkKanbanColumnFooter]' })\nexport class MkKanbanColumnFooterDef {\n readonly template = inject<TemplateRef<MkKanbanColumnContext>>(TemplateRef);\n}\n\n/**\n * Kanban board — a horizontal row of columns whose cards can be dragged and\n * reordered within a column or transferred between columns. Built on the dnd\n * group's connected `[mkDropList]` / `[mkDrag]` directives, so it inherits both\n * pointer and keyboard dragging (WCAG 2.1.1) for free.\n *\n * Bind `columns` two-way; the model is updated immutably on each drop. Project\n * an `<ng-template>` to render custom card content — it receives the card as\n * `$implicit` and the owning column as `column`. Column headers and footers\n * take their own templates (`mkKanbanColumnHeader` / `mkKanbanColumnFooter`,\n * context `{ $implicit: column, index, count }`):\n *\n * ```html\n * <mk-kanban [(columns)]=\"board\" (cardMoved)=\"onMoved($event)\">\n * <ng-template mkKanbanColumnHeader let-column let-count=\"count\">\n * <strong>{{ column.title }}</strong> {{ count }}\n * <button (click)=\"rename(column)\">Rename</button>\n * </ng-template>\n * <ng-template mkKanbanCard let-card let-column=\"column\">\n * <strong>{{ card.title }}</strong>\n * </ng-template>\n * <ng-template mkKanbanColumnFooter let-column>\n * <button (click)=\"add(column)\">+ Card</button>\n * </ng-template>\n * </mk-kanban>\n * ```\n */\n@Component({\n selector: 'mk-kanban',\n templateUrl: './kanban.html',\n styleUrl: './kanban.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [MkDropList, MkDrag, NgTemplateOutlet],\n host: { class: 'mk-kanban' },\n})\nexport class MkKanban {\n /** The board's columns and their cards (two-way). Updated on every drop. */\n readonly columns = model<MkKanbanColumn[]>([]);\n\n /** Disable all dragging on the board. */\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /** Emitted after the model is updated when a card is moved. */\n readonly cardMoved = output<MkKanbanCardMovedEvent>();\n\n private readonly cardDef = contentChild(MkKanbanCardDef);\n private readonly headerDef = contentChild(MkKanbanColumnHeaderDef);\n private readonly footerDef = contentChild(MkKanbanColumnFooterDef);\n /** Every projected template, for the pre-0.54 \"first plain template is the card\" rule. */\n private readonly templates = contentChildren(TemplateRef);\n\n /** Consumer-projected card renderer: `[mkKanbanCard]`, else the first template that is not a header/footer. */\n protected readonly cardTemplate = computed<TemplateRef<unknown> | undefined>(() => {\n const explicit = this.cardDef()?.template;\n if (explicit) return explicit;\n // A query and a directive's injected TemplateRef are different instances\n // of the same template — compare their anchor nodes.\n const taken = new Set(\n [this.headerDef(), this.footerDef()].map((d) => d?.template.elementRef.nativeElement as Node | undefined),\n );\n return this.templates().find((t) => !taken.has(t.elementRef.nativeElement as Node));\n });\n /** Optional column header renderer (replaces title + count). */\n protected readonly headerTemplate = computed(() => this.headerDef()?.template);\n /** Optional column footer renderer (under the card list). */\n protected readonly footerTemplate = computed(() => this.footerDef()?.template);\n\n /** Board-scoped prefix so this board's drop-list ids never collide. */\n private readonly boardId = mkUniqueId('mk-kanban');\n\n /** Column count as its own computed so id arrays survive card-only updates. */\n private readonly columnCount = computed(() => this.columns().length);\n\n /** Stable drop-list id per column, positionally matched to `columns()`. */\n protected readonly listIds = computed(() =>\n Array.from({ length: this.columnCount() }, (_, i) => `${this.boardId}-col-${i}`),\n );\n\n /**\n * Per-column connected-target ids (every other column's list). One stable\n * array per column, recomputed only when the column count changes — a fresh\n * array per change-detection pass would dirty each `MkDropList`'s\n * `connectedTo` input identity on every cycle.\n */\n private readonly connections = computed(() => {\n const ids = this.listIds();\n return ids.map((_, i) => ids.filter((_, j) => j !== i));\n });\n\n /** Ids of every other column's list — the connected transfer targets for `i`. */\n protected connectedTo(index: number): string[] {\n return this.connections()[index] ?? NO_CONNECTIONS;\n }\n\n /**\n * Apply a drop from the dnd module. Reads the source/target columns from the\n * event's containers (matched by their drop-list ids), updates the two-way\n * `columns` model immutably, then emits {@link cardMoved}.\n */\n protected onDrop(event: MkDropEvent<MkKanbanCard>): void {\n const ids = this.listIds();\n const fromCol = ids.indexOf(event.previousContainer.id());\n const toCol = ids.indexOf(event.container.id());\n if (fromCol === -1 || toCol === -1) return;\n this.moveCard(fromCol, toCol, event.previousIndex, event.currentIndex);\n }\n\n /**\n * Immutably move the card at `fromIndex` of column `fromCol` to `toIndex` of\n * column `toCol`, updating the model and emitting {@link cardMoved}. Column\n * indices refer to positions in `columns()`.\n */\n private moveCard(\n fromCol: number,\n toCol: number,\n fromIndex: number,\n toIndex: number,\n ): void {\n const cols = this.columns();\n const source = cols[fromCol];\n const target = cols[toCol];\n if (!source || !target) return;\n const card = source.cards[fromIndex];\n if (!card) return;\n\n const next = cols.map((col, i) => {\n if (fromCol === toCol && i === fromCol) {\n const cards = [...col.cards];\n mkMoveItemInArray(cards, fromIndex, toIndex);\n return { ...col, cards };\n }\n if (i === fromCol) {\n return { ...col, cards: col.cards.filter((_, idx) => idx !== fromIndex) };\n }\n if (i === toCol) {\n const cards = [...col.cards];\n cards.splice(Math.max(0, Math.min(toIndex, cards.length)), 0, card);\n return { ...col, cards };\n }\n return col;\n });\n\n this.columns.set(next);\n this.cardMoved.emit({\n card,\n from: source.id,\n to: target.id,\n fromIndex,\n toIndex,\n });\n }\n}\n","<div class=\"mk-kanban__board\">\n @for (column of columns(); track column.id; let colIndex = $index) {\n <section\n class=\"mk-kanban__column\"\n role=\"region\"\n [attr.aria-label]=\"column.title\"\n >\n <header class=\"mk-kanban__column-header\">\n @if (headerTemplate(); as header) {\n <ng-container\n [ngTemplateOutlet]=\"header\"\n [ngTemplateOutletContext]=\"{ $implicit: column, index: colIndex, count: column.cards.length }\"\n />\n } @else {\n <span class=\"mk-kanban__column-title\">{{ column.title }}</span>\n <span class=\"mk-kanban__column-count\" aria-hidden=\"true\">\n {{ column.cards.length }}\n </span>\n }\n </header>\n\n <div\n mkDropList\n class=\"mk-kanban__cards\"\n [mkDropListData]=\"column.cards\"\n [mkDropListId]=\"listIds()[colIndex]\"\n [mkDropListLabel]=\"column.title\"\n [mkDropListConnectedTo]=\"connectedTo(colIndex)\"\n [mkDropListDisabled]=\"disabled()\"\n mkDropListOrientation=\"vertical\"\n (mkDropListDropped)=\"onDrop($event)\"\n >\n @for (card of column.cards; track card.id) {\n <div\n mkDrag\n class=\"mk-kanban__card\"\n [mkDragData]=\"card\"\n [mkDragDisabled]=\"disabled()\"\n >\n <ng-container\n [ngTemplateOutlet]=\"cardTemplate() ?? defaultCard\"\n [ngTemplateOutletContext]=\"{ $implicit: card, column: column }\"\n />\n </div>\n }\n </div>\n\n @if (footerTemplate(); as footer) {\n <div class=\"mk-kanban__column-footer\">\n <ng-container\n [ngTemplateOutlet]=\"footer\"\n [ngTemplateOutletContext]=\"{ $implicit: column, index: colIndex, count: column.cards.length }\"\n />\n </div>\n }\n </section>\n }\n</div>\n\n<ng-template #defaultCard let-card>\n <span class=\"mk-kanban__card-title\">{{ card.title }}</span>\n</ng-template>\n","/**\n * @mk-kit/ui/kanban — the board (columns + drag-and-drop cards). Its own\n * entry since 0.53 because it is the only `data` component that needs\n * `@mk-kit/ui/dnd`; keeping it in `data` shipped dnd to every page that\n * rendered a badge.\n */\nexport * from './kanban';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
2
|
import { TemplateRef } from '@angular/core';
|
|
3
3
|
import { MkDropEvent } from '@mk-kit/ui/dnd';
|
|
4
4
|
|
|
@@ -36,6 +36,43 @@ interface MkKanbanCardMovedEvent {
|
|
|
36
36
|
/** The card's index within the destination column after the move. */
|
|
37
37
|
toIndex: number;
|
|
38
38
|
}
|
|
39
|
+
/** Context handed to the column header / footer templates. */
|
|
40
|
+
interface MkKanbanColumnContext {
|
|
41
|
+
/** The column being rendered. */
|
|
42
|
+
$implicit: MkKanbanColumn;
|
|
43
|
+
/** Its position in `columns`. */
|
|
44
|
+
index: number;
|
|
45
|
+
/** `column.cards.length`, for a count badge. */
|
|
46
|
+
count: number;
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Marks the projected card renderer explicitly:
|
|
50
|
+
* `<ng-template mkKanbanCard let-card let-column="column">`. Without it the
|
|
51
|
+
* first plain `<ng-template>` inside `<mk-kanban>` is used, as before 0.54.
|
|
52
|
+
*/
|
|
53
|
+
declare class MkKanbanCardDef {
|
|
54
|
+
readonly template: TemplateRef<unknown>;
|
|
55
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MkKanbanCardDef, never>;
|
|
56
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MkKanbanCardDef, "ng-template[mkKanbanCard]", never, {}, {}, never, never, true, never>;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Replaces the default column header (title + count):
|
|
60
|
+
* `<ng-template mkKanbanColumnHeader let-column let-count="count">`.
|
|
61
|
+
*/
|
|
62
|
+
declare class MkKanbanColumnHeaderDef {
|
|
63
|
+
readonly template: TemplateRef<MkKanbanColumnContext>;
|
|
64
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MkKanbanColumnHeaderDef, never>;
|
|
65
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MkKanbanColumnHeaderDef, "ng-template[mkKanbanColumnHeader]", never, {}, {}, never, never, true, never>;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* Rendered under each column's card list — a "quick add" input, say:
|
|
69
|
+
* `<ng-template mkKanbanColumnFooter let-column>`.
|
|
70
|
+
*/
|
|
71
|
+
declare class MkKanbanColumnFooterDef {
|
|
72
|
+
readonly template: TemplateRef<MkKanbanColumnContext>;
|
|
73
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MkKanbanColumnFooterDef, never>;
|
|
74
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<MkKanbanColumnFooterDef, "ng-template[mkKanbanColumnFooter]", never, {}, {}, never, never, true, never>;
|
|
75
|
+
}
|
|
39
76
|
/**
|
|
40
77
|
* Kanban board — a horizontal row of columns whose cards can be dragged and
|
|
41
78
|
* reordered within a column or transferred between columns. Built on the dnd
|
|
@@ -44,31 +81,49 @@ interface MkKanbanCardMovedEvent {
|
|
|
44
81
|
*
|
|
45
82
|
* Bind `columns` two-way; the model is updated immutably on each drop. Project
|
|
46
83
|
* an `<ng-template>` to render custom card content — it receives the card as
|
|
47
|
-
* `$implicit` and the owning column as `column
|
|
84
|
+
* `$implicit` and the owning column as `column`. Column headers and footers
|
|
85
|
+
* take their own templates (`mkKanbanColumnHeader` / `mkKanbanColumnFooter`,
|
|
86
|
+
* context `{ $implicit: column, index, count }`):
|
|
48
87
|
*
|
|
49
88
|
* ```html
|
|
50
89
|
* <mk-kanban [(columns)]="board" (cardMoved)="onMoved($event)">
|
|
51
|
-
* <ng-template
|
|
90
|
+
* <ng-template mkKanbanColumnHeader let-column let-count="count">
|
|
91
|
+
* <strong>{{ column.title }}</strong> {{ count }}
|
|
92
|
+
* <button (click)="rename(column)">Rename</button>
|
|
93
|
+
* </ng-template>
|
|
94
|
+
* <ng-template mkKanbanCard let-card let-column="column">
|
|
52
95
|
* <strong>{{ card.title }}</strong>
|
|
53
96
|
* </ng-template>
|
|
97
|
+
* <ng-template mkKanbanColumnFooter let-column>
|
|
98
|
+
* <button (click)="add(column)">+ Card</button>
|
|
99
|
+
* </ng-template>
|
|
54
100
|
* </mk-kanban>
|
|
55
101
|
* ```
|
|
56
102
|
*/
|
|
57
103
|
declare class MkKanban {
|
|
58
104
|
/** The board's columns and their cards (two-way). Updated on every drop. */
|
|
59
|
-
readonly columns:
|
|
105
|
+
readonly columns: i0.ModelSignal<MkKanbanColumn[]>;
|
|
60
106
|
/** Disable all dragging on the board. */
|
|
61
|
-
readonly disabled:
|
|
107
|
+
readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
|
|
62
108
|
/** Emitted after the model is updated when a card is moved. */
|
|
63
|
-
readonly cardMoved:
|
|
64
|
-
|
|
65
|
-
|
|
109
|
+
readonly cardMoved: i0.OutputEmitterRef<MkKanbanCardMovedEvent>;
|
|
110
|
+
private readonly cardDef;
|
|
111
|
+
private readonly headerDef;
|
|
112
|
+
private readonly footerDef;
|
|
113
|
+
/** Every projected template, for the pre-0.54 "first plain template is the card" rule. */
|
|
114
|
+
private readonly templates;
|
|
115
|
+
/** Consumer-projected card renderer: `[mkKanbanCard]`, else the first template that is not a header/footer. */
|
|
116
|
+
protected readonly cardTemplate: i0.Signal<TemplateRef<unknown> | undefined>;
|
|
117
|
+
/** Optional column header renderer (replaces title + count). */
|
|
118
|
+
protected readonly headerTemplate: i0.Signal<TemplateRef<MkKanbanColumnContext> | undefined>;
|
|
119
|
+
/** Optional column footer renderer (under the card list). */
|
|
120
|
+
protected readonly footerTemplate: i0.Signal<TemplateRef<MkKanbanColumnContext> | undefined>;
|
|
66
121
|
/** Board-scoped prefix so this board's drop-list ids never collide. */
|
|
67
122
|
private readonly boardId;
|
|
68
123
|
/** Column count as its own computed so id arrays survive card-only updates. */
|
|
69
124
|
private readonly columnCount;
|
|
70
125
|
/** Stable drop-list id per column, positionally matched to `columns()`. */
|
|
71
|
-
protected readonly listIds:
|
|
126
|
+
protected readonly listIds: i0.Signal<string[]>;
|
|
72
127
|
/**
|
|
73
128
|
* Per-column connected-target ids (every other column's list). One stable
|
|
74
129
|
* array per column, recomputed only when the column count changes — a fresh
|
|
@@ -90,9 +145,9 @@ declare class MkKanban {
|
|
|
90
145
|
* indices refer to positions in `columns()`.
|
|
91
146
|
*/
|
|
92
147
|
private moveCard;
|
|
93
|
-
static ɵfac:
|
|
94
|
-
static ɵcmp:
|
|
148
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MkKanban, never>;
|
|
149
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MkKanban, "mk-kanban", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "columns": "columnsChange"; "cardMoved": "cardMoved"; }, ["cardDef", "headerDef", "footerDef", "templates"], never, true, never>;
|
|
95
150
|
}
|
|
96
151
|
|
|
97
|
-
export { MkKanban };
|
|
98
|
-
export type { MkKanbanCard, MkKanbanCardMovedEvent, MkKanbanColumn };
|
|
152
|
+
export { MkKanban, MkKanbanCardDef, MkKanbanColumnFooterDef, MkKanbanColumnHeaderDef };
|
|
153
|
+
export type { MkKanbanCard, MkKanbanCardMovedEvent, MkKanbanColumn, MkKanbanColumnContext };
|