@mk-kit/ui 0.52.1 → 0.54.0

package/fesm2022/mk-kit-ui-kanban.mjs

@@ -0,0 +1,205 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, model, input, booleanAttribute, output, contentChild, contentChildren, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { mkUniqueId } from '@mk-kit/ui/core';
+import { mkMoveItemInArray, MkDropList, MkDrag } from '@mk-kit/ui/dnd';
+
+/** Stable empty fallback so out-of-range lookups don't allocate per call. */
+const NO_CONNECTIONS = [];
+/**
+ * Marks the projected card renderer explicitly:
+ * `<ng-template mkKanbanCard let-card let-column="column">`. Without it the
+ * first plain `<ng-template>` inside `<mk-kanban>` is used, as before 0.54.
+ */
+class MkKanbanCardDef {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanbanCardDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkKanbanCardDef, isStandalone: true, selector: "ng-template[mkKanbanCard]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanbanCardDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[mkKanbanCard]' }]
+        }] });
+/**
+ * Replaces the default column header (title + count):
+ * `<ng-template mkKanbanColumnHeader let-column let-count="count">`.
+ */
+class MkKanbanColumnHeaderDef {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanbanColumnHeaderDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkKanbanColumnHeaderDef, isStandalone: true, selector: "ng-template[mkKanbanColumnHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanbanColumnHeaderDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[mkKanbanColumnHeader]' }]
+        }] });
+/**
+ * Rendered under each column's card list — a "quick add" input, say:
+ * `<ng-template mkKanbanColumnFooter let-column>`.
+ */
+class MkKanbanColumnFooterDef {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanbanColumnFooterDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkKanbanColumnFooterDef, isStandalone: true, selector: "ng-template[mkKanbanColumnFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanbanColumnFooterDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[mkKanbanColumnFooter]' }]
+        }] });
+/**
+ * Kanban board — a horizontal row of columns whose cards can be dragged and
+ * reordered within a column or transferred between columns. Built on the dnd
+ * group's connected `[mkDropList]` / `[mkDrag]` directives, so it inherits both
+ * pointer and keyboard dragging (WCAG 2.1.1) for free.
+ *
+ * Bind `columns` two-way; the model is updated immutably on each drop. Project
+ * an `<ng-template>` to render custom card content — it receives the card as
+ * `$implicit` and the owning column as `column`. Column headers and footers
+ * take their own templates (`mkKanbanColumnHeader` / `mkKanbanColumnFooter`,
+ * context `{ $implicit: column, index, count }`):
+ *
+ * ```html
+ * <mk-kanban [(columns)]="board" (cardMoved)="onMoved($event)">
+ *   <ng-template mkKanbanColumnHeader let-column let-count="count">
+ *     <strong>{{ column.title }}</strong> {{ count }}
+ *     <button (click)="rename(column)">Rename</button>
+ *   </ng-template>
+ *   <ng-template mkKanbanCard let-card let-column="column">
+ *     <strong>{{ card.title }}</strong>
+ *   </ng-template>
+ *   <ng-template mkKanbanColumnFooter let-column>
+ *     <button (click)="add(column)">+ Card</button>
+ *   </ng-template>
+ * </mk-kanban>
+ * ```
+ */
+class MkKanban {
+    /** The board's columns and their cards (two-way). Updated on every drop. */
+    columns = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Disable all dragging on the board. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted after the model is updated when a card is moved. */
+    cardMoved = output();
+    cardDef = contentChild(MkKanbanCardDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cardDef" }] : /* istanbul ignore next */ []));
+    headerDef = contentChild(MkKanbanColumnHeaderDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerDef" }] : /* istanbul ignore next */ []));
+    footerDef = contentChild(MkKanbanColumnFooterDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerDef" }] : /* istanbul ignore next */ []));
+    /** Every projected template, for the pre-0.54 "first plain template is the card" rule. */
+    templates = contentChildren(TemplateRef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    /** Consumer-projected card renderer: `[mkKanbanCard]`, else the first template that is not a header/footer. */
+    cardTemplate = computed(() => {
+        const explicit = this.cardDef()?.template;
+        if (explicit)
+            return explicit;
+        // A query and a directive's injected TemplateRef are different instances
+        // of the same template — compare their anchor nodes.
+        const taken = new Set([this.headerDef(), this.footerDef()].map((d) => d?.template.elementRef.nativeElement));
+        return this.templates().find((t) => !taken.has(t.elementRef.nativeElement));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cardTemplate" }] : /* istanbul ignore next */ []));
+    /** Optional column header renderer (replaces title + count). */
+    headerTemplate = computed(() => this.headerDef()?.template, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+    /** Optional column footer renderer (under the card list). */
+    footerTemplate = computed(() => this.footerDef()?.template, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+    /** Board-scoped prefix so this board's drop-list ids never collide. */
+    boardId = mkUniqueId('mk-kanban');
+    /** Column count as its own computed so id arrays survive card-only updates. */
+    columnCount = computed(() => this.columns().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnCount" }] : /* istanbul ignore next */ []));
+    /** Stable drop-list id per column, positionally matched to `columns()`. */
+    listIds = computed(() => Array.from({ length: this.columnCount() }, (_, i) => `${this.boardId}-col-${i}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listIds" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-column connected-target ids (every other column's list). One stable
+     * array per column, recomputed only when the column count changes — a fresh
+     * array per change-detection pass would dirty each `MkDropList`'s
+     * `connectedTo` input identity on every cycle.
+     */
+    connections = computed(() => {
+        const ids = this.listIds();
+        return ids.map((_, i) => ids.filter((_, j) => j !== i));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connections" }] : /* istanbul ignore next */ []));
+    /** Ids of every other column's list — the connected transfer targets for `i`. */
+    connectedTo(index) {
+        return this.connections()[index] ?? NO_CONNECTIONS;
+    }
+    /**
+     * Apply a drop from the dnd module. Reads the source/target columns from the
+     * event's containers (matched by their drop-list ids), updates the two-way
+     * `columns` model immutably, then emits {@link cardMoved}.
+     */
+    onDrop(event) {
+        const ids = this.listIds();
+        const fromCol = ids.indexOf(event.previousContainer.id());
+        const toCol = ids.indexOf(event.container.id());
+        if (fromCol === -1 || toCol === -1)
+            return;
+        this.moveCard(fromCol, toCol, event.previousIndex, event.currentIndex);
+    }
+    /**
+     * Immutably move the card at `fromIndex` of column `fromCol` to `toIndex` of
+     * column `toCol`, updating the model and emitting {@link cardMoved}. Column
+     * indices refer to positions in `columns()`.
+     */
+    moveCard(fromCol, toCol, fromIndex, toIndex) {
+        const cols = this.columns();
+        const source = cols[fromCol];
+        const target = cols[toCol];
+        if (!source || !target)
+            return;
+        const card = source.cards[fromIndex];
+        if (!card)
+            return;
+        const next = cols.map((col, i) => {
+            if (fromCol === toCol && i === fromCol) {
+                const cards = [...col.cards];
+                mkMoveItemInArray(cards, fromIndex, toIndex);
+                return { ...col, cards };
+            }
+            if (i === fromCol) {
+                return { ...col, cards: col.cards.filter((_, idx) => idx !== fromIndex) };
+            }
+            if (i === toCol) {
+                const cards = [...col.cards];
+                cards.splice(Math.max(0, Math.min(toIndex, cards.length)), 0, card);
+                return { ...col, cards };
+            }
+            return col;
+        });
+        this.columns.set(next);
+        this.cardMoved.emit({
+            card,
+            from: source.id,
+            to: target.id,
+            fromIndex,
+            toIndex,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanban, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkKanban, decorators: [{
+            type: Component,
+            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"] }]
+        }], 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 }] }] } });
+
+/**
+ * @mk-kit/ui/kanban — the board (columns + drag-and-drop cards). Its own
+ * entry since 0.53 because it is the only `data` component that needs
+ * `@mk-kit/ui/dnd`; keeping it in `data` shipped dnd to every page that
+ * rendered a badge.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkKanban, MkKanbanCardDef, MkKanbanColumnFooterDef, MkKanbanColumnHeaderDef };
+//# sourceMappingURL=mk-kit-ui-kanban.mjs.map

package/fesm2022/mk-kit-ui-kanban.mjs.map

@@ -0,0 +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/fesm2022/mk-kit-ui-status.mjs

@@ -0,0 +1,318 @@
+import * as i0 from '@angular/core';
+import { inject, input, ChangeDetectionStrategy, Component, booleanAttribute, ElementRef, Renderer2, DOCUMENT, PLATFORM_ID, numberAttribute, computed, effect, Directive } from '@angular/core';
+import { MK_I18N, mkUniqueId } from '@mk-kit/ui/core';
+import { isPlatformBrowser } from '@angular/common';
+import { MkIcon } from '@mk-kit/ui/icon';
+
+/**
+ * Spinner — a circular indeterminate loading indicator. Exposes `role="status"`
+ * with a visually-hidden label so assistive tech announces the loading state.
+ * The animation slows under `prefers-reduced-motion`.
+ *
+ * ```html
+ * <mk-spinner />
+ * <mk-spinner size="lg" tone="neutral" label="Fetching results" />
+ * ```
+ */
+class MkSpinner {
+    i18n = inject(MK_I18N);
+    /** Size scale. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Semantic color tone. */
+    tone = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Visually-hidden status label announced to screen readers. */
+    label = input(this.i18n.loading, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkSpinner, isStandalone: true, selector: "mk-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class.mk-spinner--sm": "size() === 'sm'", "class.mk-spinner--md": "size() === 'md'", "class.mk-spinner--lg": "size() === 'lg'", "attr.data-tone": "tone()" }, classAttribute: "mk-spinner" }, ngImport: i0, template: "<span class=\"mk-spinner__circle\" aria-hidden=\"true\"></span>\n<span class=\"mk-spinner__sr\">{{ label() }}</span>\n", styles: [":host{--_color: var(--mk-primary);--_size: var(--mk-spinner-size, 1.5rem);--_thickness: var(--mk-spinner-thickness, 2px);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;color:var(--_color)}:host([data-tone=primary]){--_color: var(--mk-primary)}:host([data-tone=neutral]){--_color: var(--mk-text-muted)}:host([data-tone=success]){--_color: var(--mk-success)}:host([data-tone=warning]){--_color: var(--mk-warning)}:host([data-tone=danger]){--_color: var(--mk-danger)}:host([data-tone=info]){--_color: var(--mk-info)}:host(.mk-spinner--sm){--_size: var(--mk-spinner-size, 1rem);--_thickness: var(--mk-spinner-thickness, 2px)}:host(.mk-spinner--md){--_size: var(--mk-spinner-size, 1.5rem);--_thickness: var(--mk-spinner-thickness, 2px)}:host(.mk-spinner--lg){--_size: var(--mk-spinner-size, 2.25rem);--_thickness: var(--mk-spinner-thickness, 3px)}.mk-spinner__circle{display:block;width:var(--_size);height:var(--_size);border:var(--_thickness) solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.9;animation:mk-spinner-spin .7s linear infinite}@keyframes mk-spinner-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-spinner__circle{animation-duration:1.6s}}.mk-spinner__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSpinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-spinner', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-spinner',
+                        role: 'status',
+                        '[class.mk-spinner--sm]': "size() === 'sm'",
+                        '[class.mk-spinner--md]': "size() === 'md'",
+                        '[class.mk-spinner--lg]': "size() === 'lg'",
+                        '[attr.data-tone]': 'tone()',
+                    }, template: "<span class=\"mk-spinner__circle\" aria-hidden=\"true\"></span>\n<span class=\"mk-spinner__sr\">{{ label() }}</span>\n", styles: [":host{--_color: var(--mk-primary);--_size: var(--mk-spinner-size, 1.5rem);--_thickness: var(--mk-spinner-thickness, 2px);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;color:var(--_color)}:host([data-tone=primary]){--_color: var(--mk-primary)}:host([data-tone=neutral]){--_color: var(--mk-text-muted)}:host([data-tone=success]){--_color: var(--mk-success)}:host([data-tone=warning]){--_color: var(--mk-warning)}:host([data-tone=danger]){--_color: var(--mk-danger)}:host([data-tone=info]){--_color: var(--mk-info)}:host(.mk-spinner--sm){--_size: var(--mk-spinner-size, 1rem);--_thickness: var(--mk-spinner-thickness, 2px)}:host(.mk-spinner--md){--_size: var(--mk-spinner-size, 1.5rem);--_thickness: var(--mk-spinner-thickness, 2px)}:host(.mk-spinner--lg){--_size: var(--mk-spinner-size, 2.25rem);--_thickness: var(--mk-spinner-thickness, 3px)}.mk-spinner__circle{display:block;width:var(--_size);height:var(--_size);border:var(--_thickness) solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.9;animation:mk-spinner-spin .7s linear infinite}@keyframes mk-spinner-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-spinner__circle{animation-duration:1.6s}}.mk-spinner__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Badge — a compact status pill, typically for counts or short state labels.
+ * Set `dot` for a minimal notification indicator with no text.
+ *
+ * ```html
+ * <mk-badge tone="success">Active</mk-badge>
+ * <mk-badge tone="danger" variant="solid">3</mk-badge>
+ * <mk-badge tone="danger" dot aria-label="Unread messages" />
+ * ```
+ */
+class MkBadge {
+    /** Semantic color tone. */
+    tone = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Visual treatment. */
+    variant = input('soft', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size scale. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Render as a tiny dot (no text) for notification indicators. */
+    dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkBadge, isStandalone: true, selector: "mk-badge", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mk-badge--sm": "size() === 'sm'", "class.mk-badge--md": "size() === 'md'", "class.mk-badge--lg": "size() === 'lg'", "class.mk-badge--solid": "variant() === 'solid'", "class.mk-badge--soft": "variant() === 'soft'", "class.mk-badge--outline": "variant() === 'outline'", "class.mk-badge--dot": "dot()", "attr.data-tone": "tone()" }, classAttribute: "mk-badge" }, ngImport: i0, template: "@if (!dot()) {\n  <ng-content />\n}\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-primary);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text);display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-1);height:1.375rem;min-width:1.375rem;padding:0 var(--mk-space-2);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-pill);font-family:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium);line-height:1;white-space:nowrap;vertical-align:middle}:host([data-tone=primary]){--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_active: var(--mk-primary-active);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text)}:host([data-tone=success]){--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_active: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}:host([data-tone=warning]){--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_active: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}:host([data-tone=danger]){--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_active: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}:host([data-tone=info]){--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_active: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_active: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}:host(.mk-badge--sm){height:1.125rem;min-width:1.125rem;padding:0 var(--mk-space-1);font-size:var(--mk-font-size-xs)}:host(.mk-badge--lg){height:1.625rem;min-width:1.625rem;padding:0 var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-badge--solid){background-color:var(--_main);color:var(--_contrast)}:host(.mk-badge--soft){background-color:var(--_subtle);color:var(--_subtle-text)}:host(.mk-badge--outline){background-color:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}:host(.mk-badge--dot){width:.625rem;height:.625rem;min-width:0;padding:0;border-radius:var(--mk-radius-circle)}:host(.mk-badge--dot.mk-badge--sm){width:.5rem;height:.5rem}:host(.mk-badge--dot.mk-badge--lg){width:.75rem;height:.75rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBadge, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-badge', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-badge',
+                        '[class.mk-badge--sm]': "size() === 'sm'",
+                        '[class.mk-badge--md]': "size() === 'md'",
+                        '[class.mk-badge--lg]': "size() === 'lg'",
+                        '[class.mk-badge--solid]': "variant() === 'solid'",
+                        '[class.mk-badge--soft]': "variant() === 'soft'",
+                        '[class.mk-badge--outline]': "variant() === 'outline'",
+                        '[class.mk-badge--dot]': 'dot()',
+                        '[attr.data-tone]': 'tone()',
+                    }, template: "@if (!dot()) {\n  <ng-content />\n}\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-primary);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text);display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-1);height:1.375rem;min-width:1.375rem;padding:0 var(--mk-space-2);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-pill);font-family:inherit;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium);line-height:1;white-space:nowrap;vertical-align:middle}:host([data-tone=primary]){--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_active: var(--mk-primary-active);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text)}:host([data-tone=success]){--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_active: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}:host([data-tone=warning]){--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_active: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}:host([data-tone=danger]){--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_active: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}:host([data-tone=info]){--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_active: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_active: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}:host(.mk-badge--sm){height:1.125rem;min-width:1.125rem;padding:0 var(--mk-space-1);font-size:var(--mk-font-size-xs)}:host(.mk-badge--lg){height:1.625rem;min-width:1.625rem;padding:0 var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-badge--solid){background-color:var(--_main);color:var(--_contrast)}:host(.mk-badge--soft){background-color:var(--_subtle);color:var(--_subtle-text)}:host(.mk-badge--outline){background-color:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}:host(.mk-badge--dot){width:.625rem;height:.625rem;min-width:0;padding:0;border-radius:var(--mk-radius-circle)}:host(.mk-badge--dot.mk-badge--sm){width:.5rem;height:.5rem}:host(.mk-badge--dot.mk-badge--lg){width:.75rem;height:.75rem}\n"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
+
+/**
+ * Badge overlay — anchors a small badge (count, dot or short text) to a corner
+ * of ANY element: an icon button, an avatar, a tab label. The host stays a
+ * single tab stop; the badge is a decorative, non-focusable child.
+ *
+ * - Numbers above `mkBadgeOverlayMax` (default 99) collapse to `99+`.
+ * - `mkBadgeOverlayDot` renders a textless dot ("something is new").
+ * - `mkBadgeOverlayAriaLabel` is the screen-reader text ("3 unread"). It is
+ *   rendered in a visually hidden span and wired to the host with
+ *   `aria-describedby`, so it is announced after the host's own name even
+ *   when the host has an `aria-label`. When it is given, the visible badge is
+ *   `aria-hidden` so the count is not read twice.
+ * - Positions use logical insets, so `top-end` sits at the top-right in LTR
+ *   and the top-left in RTL.
+ *
+ * The badge is painted with the global `.mk-badge-overlay` styles from
+ * `@mk-kit/ui/styles.css` and follows the `--mk-*` tone tokens.
+ *
+ * ```html
+ * <button mkButton iconOnly aria-label="Notifications"
+ *         [mkBadgeOverlay]="unread()" mkBadgeOverlayTone="danger"
+ *         [mkBadgeOverlayAriaLabel]="unread() + ' unread'">
+ *   <mk-icon name="bell" />
+ * </button>
+ *
+ * <mk-avatar name="Ada Lovelace" mkBadgeOverlay mkBadgeOverlayDot
+ *            mkBadgeOverlayTone="success" mkBadgeOverlayPosition="bottom-end" />
+ * ```
+ */
+class MkBadgeOverlay {
+    host = inject(ElementRef);
+    renderer = inject(Renderer2);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /**
+     * Badge content — a count or a short label. `null` / empty hides the badge
+     * unless `mkBadgeOverlayDot` is set. Numeric strings are treated as numbers
+     * so `mkBadgeOverlay="120"` also collapses to `99+`.
+     */
+    content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlay' });
+    /** Corner the badge is anchored to (logical: `end` flips in RTL). */
+    position = input('top-end', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayPosition' });
+    /** Semantic color tone (same scale as `mk-badge`). */
+    tone = input('primary', { ...(ngDevMode ? { debugName: "tone" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayTone' });
+    /** Render a textless dot instead of the content. */
+    dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayDot',
+        transform: booleanAttribute });
+    /** Numbers above this render as `<max>+`. `0` disables the cap. */
+    max = input(99, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayMax',
+        transform: numberAttribute });
+    /** Hide the badge while keeping the directive (and its aria wiring) in place. */
+    hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayHidden',
+        transform: booleanAttribute });
+    /**
+     * Screen-reader text for the badge, e.g. `"3 unread"`. Announced as the
+     * host's description; the visible badge becomes `aria-hidden`.
+     */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'mkBadgeOverlayAriaLabel' });
+    /** The text painted in the badge (`''` in dot mode). */
+    label = computed(() => {
+        if (this.dot())
+            return '';
+        const raw = this.content();
+        if (raw === null || raw === undefined || raw === '')
+            return '';
+        const max = this.max();
+        const n = typeof raw === 'number' ? raw : /^\d+$/.test(raw) ? Number(raw) : NaN;
+        if (Number.isFinite(n) && max > 0 && n > max)
+            return `${max}+`;
+        return String(raw);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Whether the badge is currently rendered. */
+    visible = computed(() => !this.hidden() && (this.dot() || this.label() !== ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    srId = mkUniqueId('mk-badge-overlay');
+    badge = null;
+    sr = null;
+    /** Set when WE made the host positioned, so we can undo it on removal. */
+    positionedHost = false;
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        effect(() => {
+            const visible = this.visible();
+            if (!visible) {
+                this.detach();
+                return;
+            }
+            const badge = this.attach();
+            const dot = this.dot();
+            const srText = this.ariaLabel().trim();
+            this.renderer.setAttribute(badge, 'data-tone', this.tone());
+            this.renderer.setAttribute(badge, 'data-position', this.position());
+            if (dot) {
+                this.renderer.addClass(badge, 'mk-badge-overlay--dot');
+            }
+            else {
+                this.renderer.removeClass(badge, 'mk-badge-overlay--dot');
+            }
+            this.renderer.setProperty(badge, 'textContent', this.label());
+            // A dot has nothing to read; a labelled badge is described via the
+            // hidden span instead — either way the visual is hidden from AT.
+            if (dot || srText) {
+                this.renderer.setAttribute(badge, 'aria-hidden', 'true');
+            }
+            else {
+                this.renderer.removeAttribute(badge, 'aria-hidden');
+            }
+            this.syncSr(srText);
+        });
+    }
+    attach() {
+        if (this.badge)
+            return this.badge;
+        const el = this.host.nativeElement;
+        const view = this.document.defaultView;
+        const position = view?.getComputedStyle(el).position;
+        if (!position || position === 'static') {
+            this.renderer.setStyle(el, 'position', 'relative');
+            this.positionedHost = true;
+        }
+        const badge = this.renderer.createElement('span');
+        this.renderer.addClass(badge, 'mk-badge-overlay');
+        this.renderer.appendChild(el, badge);
+        this.badge = badge;
+        return badge;
+    }
+    detach() {
+        if (this.badge) {
+            this.renderer.removeChild(this.host.nativeElement, this.badge);
+            this.badge = null;
+        }
+        this.syncSr('');
+        if (this.positionedHost) {
+            this.renderer.removeStyle(this.host.nativeElement, 'position');
+            this.positionedHost = false;
+        }
+    }
+    /** Create / update / remove the hidden description and its aria-describedby link. */
+    syncSr(text) {
+        const el = this.host.nativeElement;
+        if (text) {
+            if (!this.sr) {
+                const sr = this.renderer.createElement('span');
+                this.renderer.addClass(sr, 'mk-visually-hidden');
+                this.renderer.setAttribute(sr, 'id', this.srId);
+                this.renderer.appendChild(el, sr);
+                this.sr = sr;
+                const ids = (el.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean);
+                if (!ids.includes(this.srId))
+                    ids.push(this.srId);
+                this.renderer.setAttribute(el, 'aria-describedby', ids.join(' '));
+            }
+            this.renderer.setProperty(this.sr, 'textContent', text);
+        }
+        else if (this.sr) {
+            this.renderer.removeChild(el, this.sr);
+            this.sr = null;
+            const ids = (el.getAttribute('aria-describedby') ?? '')
+                .split(/\s+/)
+                .filter((id) => id && id !== this.srId);
+            if (ids.length) {
+                this.renderer.setAttribute(el, 'aria-describedby', ids.join(' '));
+            }
+            else {
+                this.renderer.removeAttribute(el, 'aria-describedby');
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBadgeOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkBadgeOverlay, isStandalone: true, selector: "[mkBadgeOverlay]", inputs: { content: { classPropertyName: "content", publicName: "mkBadgeOverlay", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "mkBadgeOverlayPosition", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "mkBadgeOverlayTone", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "mkBadgeOverlayDot", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "mkBadgeOverlayMax", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "mkBadgeOverlayHidden", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "mkBadgeOverlayAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkBadgeOverlay, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkBadgeOverlay]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlay", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayPosition", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayTone", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayDot", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayMax", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayHidden", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkBadgeOverlayAriaLabel", required: false }] }] } });
+
+/**
+ * EmptyState — a centered placeholder for "nothing here yet" situations: empty
+ * tables, no search results, a fresh dashboard, a cleared inbox. Provide a
+ * `title` (and usually a `description`), an `icon` or projected media, and
+ * call-to-action buttons via the actions slot.
+ *
+ * Slots: `[mkEmptyStateMedia]` (custom illustration, overrides `icon`), default
+ * content (extra body), `[mkEmptyStateActions]` (buttons).
+ *
+ * ```html
+ * <mk-empty-state icon="search" title="No results"
+ *   description="Try adjusting your filters.">
+ *   <button mkButton mkEmptyStateActions variant="outline">Clear filters</button>
+ * </mk-empty-state>
+ * ```
+ */
+class MkEmptyState {
+    /** Name of a registered icon shown above the title (ignored if media is projected). */
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Main heading, e.g. "No invoices yet". */
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Supporting sentence under the title. */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Overall scale of the block. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    iconSize = () => this.size() === 'sm' ? 28 : this.size() === 'lg' ? 48 : 36;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkEmptyState, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkEmptyState, isStandalone: true, selector: "mk-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mk-empty-state--sm": "size() === 'sm'", "class.mk-empty-state--lg": "size() === 'lg'" }, classAttribute: "mk-empty-state" }, ngImport: i0, template: "@if (icon()) {\n  <span class=\"mk-empty-state__icon\" aria-hidden=\"true\">\n    <mk-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n  </span>\n}\n<ng-content select=\"[mkEmptyStateMedia]\" />\n\n@if (title()) {\n  <p class=\"mk-empty-state__title\">{{ title() }}</p>\n}\n@if (description()) {\n  <p class=\"mk-empty-state__description\">{{ description() }}</p>\n}\n\n<ng-content />\n\n<div class=\"mk-empty-state__actions\">\n  <ng-content select=\"[mkEmptyStateActions]\" />\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mk-space-2);padding:var(--mk-space-8) var(--mk-space-5);text-align:center;font-family:var(--mk-font-sans);color:var(--mk-text)}:host(.mk-empty-state--sm){padding:var(--mk-space-5) var(--mk-space-4)}:host(.mk-empty-state--lg){padding:var(--mk-space-12) var(--mk-space-6)}.mk-empty-state__icon{display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--mk-space-1);color:var(--mk-text-subtle)}.mk-empty-state__title{margin:0;font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug);color:var(--mk-text)}:host(.mk-empty-state--sm) .mk-empty-state__title{font-size:var(--mk-font-size-md)}:host(.mk-empty-state--lg) .mk-empty-state__title{font-size:var(--mk-font-size-xl)}.mk-empty-state__description{margin:0;max-width:34ch;font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-empty-state__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mk-space-2);margin-top:var(--mk-space-3)}.mk-empty-state__actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: MkIcon, selector: "mk-icon", inputs: ["name", "size", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkEmptyState, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkIcon], host: {
+                        class: 'mk-empty-state',
+                        '[class.mk-empty-state--sm]': "size() === 'sm'",
+                        '[class.mk-empty-state--lg]': "size() === 'lg'",
+                    }, template: "@if (icon()) {\n  <span class=\"mk-empty-state__icon\" aria-hidden=\"true\">\n    <mk-icon [name]=\"icon()\" [size]=\"iconSize()\" />\n  </span>\n}\n<ng-content select=\"[mkEmptyStateMedia]\" />\n\n@if (title()) {\n  <p class=\"mk-empty-state__title\">{{ title() }}</p>\n}\n@if (description()) {\n  <p class=\"mk-empty-state__description\">{{ description() }}</p>\n}\n\n<ng-content />\n\n<div class=\"mk-empty-state__actions\">\n  <ng-content select=\"[mkEmptyStateActions]\" />\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mk-space-2);padding:var(--mk-space-8) var(--mk-space-5);text-align:center;font-family:var(--mk-font-sans);color:var(--mk-text)}:host(.mk-empty-state--sm){padding:var(--mk-space-5) var(--mk-space-4)}:host(.mk-empty-state--lg){padding:var(--mk-space-12) var(--mk-space-6)}.mk-empty-state__icon{display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--mk-space-1);color:var(--mk-text-subtle)}.mk-empty-state__title{margin:0;font-size:var(--mk-font-size-lg);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug);color:var(--mk-text)}:host(.mk-empty-state--sm) .mk-empty-state__title{font-size:var(--mk-font-size-md)}:host(.mk-empty-state--lg) .mk-empty-state__title{font-size:var(--mk-font-size-xl)}.mk-empty-state__description{margin:0;max-width:34ch;font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-empty-state__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--mk-space-2);margin-top:var(--mk-space-3)}.mk-empty-state__actions:empty{display:none}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * @mk-kit/ui/status — the small status indicators every other group leans on:
+ * spinner, badge (+ overlay) and empty state. They lived in `@mk-kit/ui/data`
+ * until 0.53; that entry still re-exports them, but `feedback` imports them
+ * from here so a dialog or toast service no longer drags the whole data group
+ * (charts, viewers, kanban → dnd) into an app's initial bundle.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkBadge, MkBadgeOverlay, MkEmptyState, MkSpinner };
+//# sourceMappingURL=mk-kit-ui-status.mjs.map