@mk-kit/ui 0.42.0 → 0.43.0

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, booleanAttribute, inject, ElementRef, Renderer2, DOCUMENT, PLATFORM_ID, numberAttribute, computed, effect, Directive, signal, contentChildren, output, DestroyRef, afterNextRender, afterRenderEffect, untracked, Injector, viewChild, model, forwardRef, contentChild, TemplateRef, ViewEncapsulation } from '@angular/core';
-import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
-import { mkUniqueId, MK_I18N, MkFieldContext, mkHighlight } from '@mk-kit/ui/core';
+import { input, ChangeDetectionStrategy, Component, booleanAttribute, inject, ElementRef, Renderer2, DOCUMENT, PLATFORM_ID, numberAttribute, computed, effect, Directive, signal, contentChildren, output, TemplateRef, model, contentChild, linkedSignal, DestroyRef, afterNextRender, afterRenderEffect, untracked, Injector, viewChild, forwardRef, ViewEncapsulation } from '@angular/core';
+import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { mkUniqueId, MK_I18N, MkFieldContext, mkInjectFieldTouched, mkHighlight } from '@mk-kit/ui/core';
 import { MkIcon } from '@mk-kit/ui/icon';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MkCopyToClipboard } from '@mk-kit/ui/directives';
@@ -680,6 +680,434 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     }, template: "<div class=\"mk-timeline-item__marker\">\n  <span class=\"mk-timeline-item__dot\">\n    @if (icon()) {\n      <mk-icon [name]=\"icon()\" [size]=\"14\" />\n    }\n  </span>\n  <span class=\"mk-timeline-item__connector\" aria-hidden=\"true\"></span>\n</div>\n\n<div class=\"mk-timeline-item__content\">\n  @if (time()) {\n    <span class=\"mk-timeline-item__time\">{{ time() }}</span>\n  }\n  @if (heading()) {\n    <p class=\"mk-timeline-item__heading\">{{ heading() }}</p>\n  }\n  <div class=\"mk-timeline-item__body\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{--_dot: var(--mk-primary);--_marker: 1.75rem;display:flex;gap:var(--mk-space-3);font-family:var(--mk-font-sans);color:var(--mk-text)}:host([data-tone=primary]){--_dot: var(--mk-primary)}:host([data-tone=success]){--_dot: var(--mk-success)}:host([data-tone=warning]){--_dot: var(--mk-warning)}:host([data-tone=danger]){--_dot: var(--mk-danger)}:host([data-tone=info]){--_dot: var(--mk-info)}:host([data-tone=neutral]){--_dot: var(--mk-text-muted)}.mk-timeline-item__marker{position:relative;flex:none;display:flex;justify-content:center;width:var(--_marker)}.mk-timeline-item__dot{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:.75rem;height:.75rem;margin-top:.5rem;border-radius:var(--mk-radius-circle);background-color:var(--_dot);color:var(--mk-primary-contrast);box-shadow:0 0 0 3px var(--mk-surface)}:host(.mk-timeline-item--icon) .mk-timeline-item__dot{width:var(--_marker);height:var(--_marker);margin-top:0;color:var(--_dot);background-color:color-mix(in srgb,var(--_dot) 16%,var(--mk-surface));box-shadow:0 0 0 3px var(--mk-surface),inset 0 0 0 1.5px color-mix(in srgb,var(--_dot) 40%,transparent)}.mk-timeline-item__connector{position:absolute;top:var(--_marker);bottom:0;left:50%;width:2px;transform:translate(-50%);background-color:var(--mk-border)}:host(:last-child) .mk-timeline-item__connector{display:none}.mk-timeline-item__content{flex:1 1 auto;min-width:0;padding-bottom:var(--mk-space-5)}:host(:last-child) .mk-timeline-item__content{padding-bottom:0}.mk-timeline-item__time{display:block;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium);color:var(--mk-text-subtle)}.mk-timeline-item__heading{margin:0;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-semibold);line-height:var(--mk-line-height-snug);color:var(--mk-text)}.mk-timeline-item__body{margin-top:var(--mk-space-1);font-size:var(--mk-font-size-md);line-height:var(--mk-line-height-normal);color:var(--mk-text-muted)}.mk-timeline-item__body:empty{display:none}\n"] }]
         }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }] } });
 
+/**
+ * Build the nested `nodes` input from a flat `parentId` list (the shape most
+ * HR / directory APIs return). Row order is preserved among siblings; rows
+ * whose `parentId` does not match any row become roots.
+ *
+ * ```ts
+ * const nodes = mkOrgChartFromFlat([
+ *   { id: 'ceo', label: 'Ada' },
+ *   { id: 'cto', label: 'Grace', parentId: 'ceo' },
+ * ]);
+ * ```
+ */
+function mkOrgChartFromFlat(list) {
+    const byId = new Map();
+    for (const row of list) {
+        const node = { id: row.id };
+        if (row.label !== undefined)
+            node.label = row.label;
+        if (row.data !== undefined)
+            node.data = row.data;
+        if (row.expanded !== undefined)
+            node.expanded = row.expanded;
+        byId.set(row.id, node);
+    }
+    const roots = [];
+    for (const row of list) {
+        const node = byId.get(row.id);
+        const parent = row.parentId != null ? byId.get(row.parentId) : undefined;
+        if (parent && parent !== node)
+            (parent.children ??= []).push(node);
+        else
+            roots.push(node);
+    }
+    return roots;
+}
+/**
+ * Custom node card for `mk-org-chart`:
+ *
+ * ```html
+ * <mk-org-chart [nodes]="nodes">
+ *   <ng-template mkOrgChartNodeDef let-node let-selected="selected">
+ *     <strong>{{ node.label }}</strong> — {{ node.data?.title }}
+ *   </ng-template>
+ * </mk-org-chart>
+ * ```
+ *
+ * Bind the same array you pass to `nodes` to get a typed `node.data` in the
+ * template: `<ng-template [mkOrgChartNodeDef]="nodes" let-node>`.
+ */
+class MkOrgChartNodeDef {
+    /**
+     * Type-inference hook only (the value is not used at runtime): bind the
+     * `nodes` array so `let-node` is typed as `MkOrgChartNode<T>`.
+     */
+    mkOrgChartNodeDef = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkOrgChartNodeDef" }] : /* istanbul ignore next */ []));
+    template = inject((TemplateRef));
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkOrgChartNodeDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkOrgChartNodeDef, isStandalone: true, selector: "ng-template[mkOrgChartNodeDef]", inputs: { mkOrgChartNodeDef: { classPropertyName: "mkOrgChartNodeDef", publicName: "mkOrgChartNodeDef", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkOrgChartNodeDef, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[mkOrgChartNodeDef]' }]
+        }], propDecorators: { mkOrgChartNodeDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkOrgChartNodeDef", required: false }] }] } });
+/**
+ * Organisation chart — a reporting-line hierarchy drawn with plain nested
+ * lists and CSS connectors (no canvas, prints and themes like everything
+ * else). Feed it a tree (`nodes`) or convert a flat `parentId` list with
+ * {@link mkOrgChartFromFlat}. Nodes render as a default card (avatar /
+ * initials, label, `data.title`) or through an `mkOrgChartNodeDef` template.
+ *
+ * Follows the ARIA tree pattern (`role="tree"` / `treeitem` / `group`, one
+ * roving tab stop). Keyboard (top-down; the axes swap for `orientation="left"`
+ * and in RTL): Down = first child (expands a collapsed node first), Up =
+ * parent, Left/Right = previous/next sibling, Home/End = first/last visible
+ * node, Enter/Space = select (or toggle when not selectable), `*` = expand
+ * all siblings, `+`/`-` = expand/collapse.
+ *
+ * ```html
+ * <mk-org-chart
+ *   [nodes]="company"
+ *   selectable
+ *   [(selected)]="personId"
+ *   collapsible
+ *   (nodeClick)="open($event)"
+ * />
+ * ```
+ */
+class MkOrgChart {
+    host = inject(ElementRef);
+    document = inject(DOCUMENT);
+    /** Localised strings (override globally via `provideMkI18n`). */
+    i18n = inject(MK_I18N);
+    /** The hierarchy to render (roots first). */
+    nodes = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /** Root at the top (children below) or at the inline start (children to the side). */
+    orientation = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Allow choosing a node (adds selection styling + `aria-selected`). */
+    selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show a toggle on every parent so branches can be hidden. */
+    collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Scale factor applied to the whole chart (clamped to 0.5–2). */
+    zoom = input(1, { ...(ngDevMode ? { debugName: "zoom" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Accessible name for the tree. */
+    ariaLabel = input(this.i18n.orgChartLabel, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** Two-way selected node id (`null` = nothing selected). */
+    selected = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way ids of the expanded parents. Leave unbound to let the chart
+     * manage expansion itself (seeded from each node's `expanded` flag).
+     */
+    expanded = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** Emits the node whose card was clicked or activated with Enter/Space. */
+    nodeClick = output();
+    /** Emits whenever a node is expanded or collapsed. */
+    nodeToggle = output();
+    nodeDef = contentChild((MkOrgChartNodeDef), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodeDef" }] : /* istanbul ignore next */ []));
+    zoomLevel = computed(() => {
+        const z = this.zoom();
+        return Number.isFinite(z) ? Math.min(2, Math.max(0.5, z)) : 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomLevel" }] : /* istanbul ignore next */ []));
+    /**
+     * Expanded parent ids. Controlled by `expanded` when bound; otherwise kept
+     * locally — a node's `expanded` flag only seeds ids not present in the
+     * previous `nodes` value, so re-emitting the array never reverts branches
+     * the user has since toggled.
+     */
+    expandedIds = linkedSignal({ ...(ngDevMode ? { debugName: "expandedIds" } : /* istanbul ignore next */ {}), source: () => ({ nodes: this.nodes(), expanded: this.expanded() }),
+        computation: ({ nodes, expanded }, previous) => {
+            if (expanded)
+                return new Set(expanded);
+            const prev = previous?.value;
+            const known = previous ? collectIds(previous.source.nodes) : null;
+            const next = new Set();
+            walk(nodes, (node) => {
+                if (!node.children?.length)
+                    return;
+                const isKnown = known?.has(node.id) ?? false;
+                if (isKnown ? prev.has(node.id) : node.expanded !== false)
+                    next.add(node.id);
+            });
+            return next;
+        } });
+    /** Id of the node holding the roving tab stop. */
+    activeId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    /** Visible nodes in DOM (pre-order) order. */
+    rows = computed(() => {
+        const collapsible = this.collapsible();
+        const expandedIds = this.expandedIds();
+        const out = [];
+        const visit = (list, depth, parentId) => {
+            const siblings = list.map((n) => n.id);
+            for (const node of list) {
+                const hasChildren = !!node.children?.length;
+                const expanded = hasChildren && (!collapsible || expandedIds.has(node.id));
+                out.push({ node, depth, parentId, siblings, hasChildren, expanded });
+                if (expanded)
+                    visit(node.children, depth + 1, node.id);
+            }
+        };
+        visit(this.nodes(), 1, null);
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    rowById = computed(() => new Map(this.rows().map((r) => [r.node.id, r])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowById" }] : /* istanbul ignore next */ []));
+    /** The single id with `tabindex="0"` (falls back to the first visible node). */
+    tabStopId = computed(() => {
+        const active = this.activeId();
+        if (active !== null && this.rowById().has(active))
+            return active;
+        return this.rows()[0]?.node.id ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabStopId" }] : /* istanbul ignore next */ []));
+    // ---- template helpers --------------------------------------------------
+    isExpanded(node) {
+        if (!node.children?.length)
+            return false;
+        return !this.collapsible() || this.expandedIds().has(node.id);
+    }
+    isSelected(node) {
+        return this.selectable() && this.selected() === node.id;
+    }
+    tabIndexFor(node) {
+        return this.tabStopId() === node.id ? 0 : -1;
+    }
+    toggleLabel(node) {
+        const tpl = this.isExpanded(node) ? this.i18n.orgChartCollapse : this.i18n.orgChartExpand;
+        return tpl.replace('{label}', node.label ?? node.id);
+    }
+    context(node, depth) {
+        return {
+            $implicit: node,
+            node,
+            depth,
+            expanded: this.isExpanded(node),
+            selected: this.isSelected(node),
+        };
+    }
+    /** `data.title` / `data.avatar` of the default card, read defensively. */
+    field(node, key) {
+        const data = node.data;
+        const value = data?.[key];
+        return typeof value === 'string' && value ? value : undefined;
+    }
+    // ---- state changes -----------------------------------------------------
+    /** Expand or collapse a parent (no-op for leaves / non-collapsible charts). */
+    toggle(node) {
+        this.setExpanded(node, !this.isExpanded(node));
+    }
+    /** Expand or collapse a parent explicitly. */
+    setExpanded(node, expanded) {
+        if (!this.collapsible() || !node.children?.length)
+            return;
+        if (this.expandedIds().has(node.id) === expanded)
+            return;
+        const next = new Set(this.expandedIds());
+        if (expanded)
+            next.add(node.id);
+        else
+            next.delete(node.id);
+        this.expandedIds.set(next);
+        this.expanded.set([...next]);
+        this.nodeToggle.emit({ node, expanded });
+    }
+    /** Select a node by reference (no-op unless `selectable`). */
+    select(node) {
+        if (!this.selectable())
+            return;
+        this.selected.set(node.id);
+    }
+    activate(node) {
+        this.activeId.set(node.id);
+        if (this.selectable())
+            this.select(node);
+        this.nodeClick.emit(node);
+    }
+    onCardClick(event, node) {
+        event.stopPropagation();
+        this.activate(node);
+    }
+    onToggleClick(event, node) {
+        event.stopPropagation();
+        this.activeId.set(node.id);
+        this.toggle(node);
+        this.focusItem(node.id);
+    }
+    /** Keeps the roving tab stop on whichever item last received focus. */
+    onFocusIn(event) {
+        const id = this.itemIdOf(event.target);
+        if (id !== null)
+            this.activeId.set(id);
+    }
+    onKeydown(event) {
+        if (!(event instanceof KeyboardEvent))
+            return;
+        const id = this.itemIdOf(event.target);
+        if (id === null)
+            return;
+        const row = this.rowById().get(id);
+        if (!row)
+            return;
+        const node = row.node;
+        const intent = this.intentOf(event.key);
+        switch (intent) {
+            case 'into':
+                event.preventDefault();
+                if (row.hasChildren && !row.expanded) {
+                    this.setExpanded(node, true);
+                }
+                else if (row.expanded) {
+                    this.focusItem(node.children[0].id);
+                }
+                return;
+            case 'parent':
+                event.preventDefault();
+                if (row.parentId !== null)
+                    this.focusItem(row.parentId);
+                return;
+            case 'next':
+            case 'prev': {
+                event.preventDefault();
+                const i = row.siblings.indexOf(id);
+                const target = row.siblings[intent === 'next' ? i + 1 : i - 1];
+                if (target !== undefined)
+                    this.focusItem(target);
+                return;
+            }
+        }
+        switch (event.key) {
+            case 'Home':
+                event.preventDefault();
+                this.focusItem(this.rows()[0]?.node.id ?? null);
+                break;
+            case 'End': {
+                event.preventDefault();
+                const rows = this.rows();
+                this.focusItem(rows[rows.length - 1]?.node.id ?? null);
+                break;
+            }
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (!this.selectable() && row.hasChildren && this.collapsible()) {
+                    this.toggle(node);
+                }
+                this.activate(node);
+                break;
+            case '*': {
+                event.preventDefault();
+                const nodes = this.siblingsOf(row);
+                for (const sibling of nodes)
+                    this.setExpanded(sibling, true);
+                break;
+            }
+            case '+':
+            case '=':
+                event.preventDefault();
+                this.setExpanded(node, true);
+                break;
+            case '-':
+                event.preventDefault();
+                this.setExpanded(node, false);
+                break;
+        }
+    }
+    /**
+     * Map an arrow key to a tree direction. Top-down: Down = into, Up = parent,
+     * Left/Right = siblings (mirrored in RTL). Left-to-right: Right = into,
+     * Left = parent (mirrored in RTL), Up/Down = siblings.
+     */
+    intentOf(key) {
+        const rtl = this.isRtl();
+        if (this.orientation() === 'left') {
+            switch (key) {
+                case 'ArrowRight':
+                    return rtl ? 'parent' : 'into';
+                case 'ArrowLeft':
+                    return rtl ? 'into' : 'parent';
+                case 'ArrowDown':
+                    return 'next';
+                case 'ArrowUp':
+                    return 'prev';
+            }
+            return null;
+        }
+        switch (key) {
+            case 'ArrowDown':
+                return 'into';
+            case 'ArrowUp':
+                return 'parent';
+            case 'ArrowRight':
+                return rtl ? 'prev' : 'next';
+            case 'ArrowLeft':
+                return rtl ? 'next' : 'prev';
+        }
+        return null;
+    }
+    siblingsOf(row) {
+        const list = row.parentId === null
+            ? this.nodes()
+            : (this.rowById().get(row.parentId)?.node.children ?? []);
+        return list.filter((n) => !!n.children?.length);
+    }
+    isRtl() {
+        const el = this.host.nativeElement;
+        const dir = el.closest('[dir]')?.getAttribute('dir');
+        if (dir)
+            return dir.toLowerCase() === 'rtl';
+        const view = this.document.defaultView;
+        return (view?.getComputedStyle(el).direction ?? 'ltr') === 'rtl';
+    }
+    itemIdOf(target) {
+        if (!(target instanceof Element))
+            return null;
+        const item = target.closest('.mk-org-chart__item');
+        if (!item || !this.host.nativeElement.contains(item))
+            return null;
+        return item.dataset['mkId'] ?? null;
+    }
+    focusItem(id) {
+        if (id === null)
+            return;
+        this.activeId.set(id);
+        const items = this.host.nativeElement.querySelectorAll('.mk-org-chart__item');
+        for (const item of Array.from(items)) {
+            if (item.dataset['mkId'] === id) {
+                item.focus();
+                return;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkOrgChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkOrgChart, isStandalone: true, selector: "mk-org-chart", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", expanded: "expandedChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class.mk-org-chart--top": "orientation() === 'top'", "class.mk-org-chart--left": "orientation() === 'left'", "class.mk-org-chart--selectable": "selectable()", "class.mk-org-chart--collapsible": "collapsible()" }, classAttribute: "mk-org-chart" }, queries: [{ propertyName: "nodeDef", first: true, predicate: (MkOrgChartNodeDef), descendants: true, isSignal: true }], exportAs: ["mkOrgChart"], ngImport: i0, template: "<div class=\"mk-org-chart__scroller\">\n  <div class=\"mk-org-chart__canvas\" [style.zoom]=\"zoomLevel()\">\n    <ul\n      class=\"mk-org-chart__level mk-org-chart__level--root\"\n      role=\"tree\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      (keydown)=\"onKeydown($event)\"\n      (focusin)=\"onFocusIn($event)\"\n    >\n      @for (node of nodes(); track node.id) {\n        <ng-container\n          *ngTemplateOutlet=\"itemTpl; context: { node: node, depth: 1 }\"\n        />\n      }\n    </ul>\n  </div>\n</div>\n\n<ng-template #itemTpl let-node=\"node\" let-depth=\"depth\">\n  <li\n    class=\"mk-org-chart__item\"\n    role=\"treeitem\"\n    [attr.data-mk-id]=\"node.id\"\n    [class.mk-org-chart__item--expanded]=\"isExpanded(node)\"\n    [class.mk-org-chart__item--collapsed]=\"node.children?.length && !isExpanded(node)\"\n    [attr.aria-level]=\"depth\"\n    [attr.aria-expanded]=\"node.children?.length ? isExpanded(node) : null\"\n    [attr.aria-selected]=\"selectable() ? isSelected(node) : null\"\n    [attr.tabindex]=\"tabIndexFor(node)\"\n  >\n    <div\n      class=\"mk-org-chart__node\"\n      [class.mk-org-chart__node--selected]=\"isSelected(node)\"\n      [class.mk-org-chart__node--custom]=\"!!nodeDef()\"\n      (click)=\"onCardClick($event, node)\"\n    >\n      @if (nodeDef(); as def) {\n        <ng-container\n          *ngTemplateOutlet=\"def.template; context: context(node, depth)\"\n        />\n      } @else {\n        <mk-avatar\n          class=\"mk-org-chart__avatar\"\n          size=\"sm\"\n          [name]=\"node.label ?? node.id\"\n          [src]=\"field(node, 'avatar')\"\n          alt=\"\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"mk-org-chart__text\">\n          <span class=\"mk-org-chart__label\">{{ node.label ?? node.id }}</span>\n          @if (field(node, 'title'); as title) {\n            <span class=\"mk-org-chart__title\">{{ title }}</span>\n          }\n        </span>\n      }\n      @if (collapsible() && node.children?.length) {\n        <button\n          type=\"button\"\n          class=\"mk-org-chart__toggle\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"toggleLabel(node)\"\n          [attr.aria-expanded]=\"isExpanded(node)\"\n          (click)=\"onToggleClick($event, node)\"\n        >\n          <span class=\"mk-org-chart__caret\" aria-hidden=\"true\"></span>\n        </button>\n      }\n    </div>\n    @if (isExpanded(node)) {\n      <ul class=\"mk-org-chart__level mk-org-chart__level--nested\" role=\"group\">\n        @for (child of node.children; track child.id) {\n          <ng-container\n            *ngTemplateOutlet=\"itemTpl; context: { node: child, depth: depth + 1 }\"\n          />\n        }\n      </ul>\n    }\n  </li>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_line: var(--mk-border-strong);--_line-w: var(--mk-border-width);--_gap-main: var(--mk-space-8);--_gap-cross: var(--mk-space-4);--_card-w: 11rem;display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-org-chart__scroller{overflow:auto;max-width:100%}.mk-org-chart__canvas{display:inline-block;min-width:100%;padding:var(--mk-space-2);box-sizing:border-box}.mk-org-chart__level{display:flex;list-style:none;margin:0;padding:0;position:relative}.mk-org-chart__level--root{justify-content:center}.mk-org-chart__item{position:relative;display:flex;align-items:center;outline:none}:host(.mk-org-chart--top) .mk-org-chart__level{flex-direction:row}:host(.mk-org-chart--top) .mk-org-chart__level--nested{padding-block-start:var(--_gap-main)}:host(.mk-org-chart--top) .mk-org-chart__level--nested:before{content:\"\";position:absolute;top:0;inset-inline-start:50%;width:0;height:var(--_gap-main);border-inline-start:var(--_line-w) solid var(--_line)}:host(.mk-org-chart--top) .mk-org-chart__item{flex-direction:column;padding:var(--_gap-main) calc(var(--_gap-cross) / 2) 0}:host(.mk-org-chart--top) .mk-org-chart__item:before,:host(.mk-org-chart--top) .mk-org-chart__item:after{content:\"\";position:absolute;top:0;width:50%;height:var(--_gap-main);border-block-start:var(--_line-w) solid var(--_line);pointer-events:none}:host(.mk-org-chart--top) .mk-org-chart__item:before{inset-inline-end:50%}:host(.mk-org-chart--top) .mk-org-chart__item:after{inset-inline-start:50%;border-inline-start:var(--_line-w) solid var(--_line)}:host(.mk-org-chart--top) .mk-org-chart__item:first-child:before{display:none}:host(.mk-org-chart--top) .mk-org-chart__item:last-child:after{border-block-start-color:transparent}:host(.mk-org-chart--top) .mk-org-chart__level--root>.mk-org-chart__item{padding-block-start:0}:host(.mk-org-chart--top) .mk-org-chart__level--root>.mk-org-chart__item:before,:host(.mk-org-chart--top) .mk-org-chart__level--root>.mk-org-chart__item:after{display:none}:host(.mk-org-chart--left) .mk-org-chart__level{flex-direction:column}:host(.mk-org-chart--left) .mk-org-chart__level--root{align-items:flex-start}:host(.mk-org-chart--left) .mk-org-chart__level--nested{padding-inline-start:var(--_gap-main)}:host(.mk-org-chart--left) .mk-org-chart__level--nested:before{content:\"\";position:absolute;top:50%;inset-inline-start:0;width:var(--_gap-main);height:0;border-block-start:var(--_line-w) solid var(--_line)}:host(.mk-org-chart--left) .mk-org-chart__item{flex-direction:row;padding-block:calc(var(--_gap-cross) / 2);padding-inline:var(--_gap-main) 0}:host(.mk-org-chart--left) .mk-org-chart__item:before,:host(.mk-org-chart--left) .mk-org-chart__item:after{content:\"\";position:absolute;inset-inline-start:0;width:var(--_gap-main);height:50%;border-inline-start:var(--_line-w) solid var(--_line);pointer-events:none}:host(.mk-org-chart--left) .mk-org-chart__item:before{top:0}:host(.mk-org-chart--left) .mk-org-chart__item:after{top:50%;border-block-start:var(--_line-w) solid var(--_line)}:host(.mk-org-chart--left) .mk-org-chart__item:first-child:before{display:none}:host(.mk-org-chart--left) .mk-org-chart__item:last-child:after{border-inline-start-color:transparent}:host(.mk-org-chart--left) .mk-org-chart__level--root>.mk-org-chart__item{padding-inline-start:0}:host(.mk-org-chart--left) .mk-org-chart__level--root>.mk-org-chart__item:before,:host(.mk-org-chart--left) .mk-org-chart__level--root>.mk-org-chart__item:after{display:none}.mk-org-chart__node{position:relative;z-index:1;display:flex;align-items:center;gap:var(--mk-space-3);box-sizing:border-box;min-width:var(--_card-w);max-width:calc(var(--_card-w) * 2);min-height:2.75rem;padding:var(--mk-space-2) var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);box-shadow:var(--mk-shadow-xs);text-align:start;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-org-chart__node--custom{display:block;min-width:0;max-width:none;min-height:0;padding:0;border:0;background:transparent;box-shadow:none}:host(.mk-org-chart--selectable) .mk-org-chart__node{cursor:pointer;-webkit-user-select:none;user-select:none}:host(.mk-org-chart--selectable) .mk-org-chart__node:not(.mk-org-chart__node--custom):hover{border-color:var(--mk-border-strong);background-color:color-mix(in srgb,var(--mk-surface),var(--mk-hover-overlay))}.mk-org-chart__node--selected:not(.mk-org-chart__node--custom),:host(.mk-org-chart--selectable) .mk-org-chart__node--selected:not(.mk-org-chart__node--custom):hover{border-color:var(--mk-primary);background-color:var(--mk-primary-subtle);box-shadow:0 0 0 1px var(--mk-primary)}.mk-org-chart__item:focus-visible>.mk-org-chart__node{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-md)}.mk-org-chart__avatar{flex:none}.mk-org-chart__text{display:flex;flex-direction:column;min-width:0;line-height:var(--mk-line-height-snug)}.mk-org-chart__label{font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text);overflow-wrap:anywhere}.mk-org-chart__title{font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);overflow-wrap:anywhere}.mk-org-chart__node--selected .mk-org-chart__label{color:var(--mk-primary-subtle-text)}.mk-org-chart__toggle{position:absolute;z-index:2;display:grid;place-items:center;width:1.25rem;height:1.25rem;padding:0;margin:0;border:var(--mk-border-width) solid var(--mk-border-strong);border-radius:var(--mk-radius-circle);background:var(--mk-surface);color:var(--mk-text-muted);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}@media(pointer:coarse){.mk-org-chart__toggle:after{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-org-chart__toggle:hover{background:var(--mk-surface-2);color:var(--mk-text)}.mk-org-chart__toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}:host(.mk-org-chart--top) .mk-org-chart__toggle{bottom:0;left:50%;transform:translate(-50%,50%)}:host(.mk-org-chart--left) .mk-org-chart__toggle{top:50%;inset-inline-end:0;transform:translateY(-50%);margin-inline-end:-.625rem}.mk-org-chart__caret{width:.35rem;height:.35rem;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-org-chart--top) .mk-org-chart__caret{transform:translateY(-1px) rotate(45deg)}:host(.mk-org-chart--top) .mk-org-chart__item--expanded>.mk-org-chart__node>.mk-org-chart__toggle .mk-org-chart__caret{transform:translateY(1px) rotate(-135deg)}:host(.mk-org-chart--left) .mk-org-chart__caret{transform:translate(-1px) rotate(-45deg)}:host(.mk-org-chart--left) .mk-org-chart__item--expanded>.mk-org-chart__node>.mk-org-chart__toggle .mk-org-chart__caret{transform:translate(1px) rotate(135deg)}:host(.mk-org-chart--left:dir(rtl)) .mk-org-chart__caret{transform:translate(1px) rotate(135deg)}:host(.mk-org-chart--left:dir(rtl)) .mk-org-chart__item--expanded>.mk-org-chart__node>.mk-org-chart__toggle .mk-org-chart__caret{transform:translate(-1px) rotate(-45deg)}@media(prefers-reduced-motion:reduce){.mk-org-chart__node,.mk-org-chart__toggle,.mk-org-chart__caret{transition:none}}@media print{.mk-org-chart__scroller{overflow:visible}.mk-org-chart__canvas{display:block;zoom:1!important}.mk-org-chart__node{box-shadow:none;break-inside:avoid}.mk-org-chart__toggle{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MkAvatar, selector: "mk-avatar", inputs: ["src", "name", "alt", "size", "shape", "status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkOrgChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-org-chart', exportAs: 'mkOrgChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, MkAvatar], host: {
+                        class: 'mk-org-chart',
+                        '[class.mk-org-chart--top]': "orientation() === 'top'",
+                        '[class.mk-org-chart--left]': "orientation() === 'left'",
+                        '[class.mk-org-chart--selectable]': 'selectable()',
+                        '[class.mk-org-chart--collapsible]': 'collapsible()',
+                    }, template: "<div class=\"mk-org-chart__scroller\">\n  <div class=\"mk-org-chart__canvas\" [style.zoom]=\"zoomLevel()\">\n    <ul\n      class=\"mk-org-chart__level mk-org-chart__level--root\"\n      role=\"tree\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      (keydown)=\"onKeydown($event)\"\n      (focusin)=\"onFocusIn($event)\"\n    >\n      @for (node of nodes(); track node.id) {\n        <ng-container\n          *ngTemplateOutlet=\"itemTpl; context: { node: node, depth: 1 }\"\n        />\n      }\n    </ul>\n  </div>\n</div>\n\n<ng-template #itemTpl let-node=\"node\" let-depth=\"depth\">\n  <li\n    class=\"mk-org-chart__item\"\n    role=\"treeitem\"\n    [attr.data-mk-id]=\"node.id\"\n    [class.mk-org-chart__item--expanded]=\"isExpanded(node)\"\n    [class.mk-org-chart__item--collapsed]=\"node.children?.length && !isExpanded(node)\"\n    [attr.aria-level]=\"depth\"\n    [attr.aria-expanded]=\"node.children?.length ? isExpanded(node) : null\"\n    [attr.aria-selected]=\"selectable() ? isSelected(node) : null\"\n    [attr.tabindex]=\"tabIndexFor(node)\"\n  >\n    <div\n      class=\"mk-org-chart__node\"\n      [class.mk-org-chart__node--selected]=\"isSelected(node)\"\n      [class.mk-org-chart__node--custom]=\"!!nodeDef()\"\n      (click)=\"onCardClick($event, node)\"\n    >\n      @if (nodeDef(); as def) {\n        <ng-container\n          *ngTemplateOutlet=\"def.template; context: context(node, depth)\"\n        />\n      } @else {\n        <mk-avatar\n          class=\"mk-org-chart__avatar\"\n          size=\"sm\"\n          [name]=\"node.label ?? node.id\"\n          [src]=\"field(node, 'avatar')\"\n          alt=\"\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"mk-org-chart__text\">\n          <span class=\"mk-org-chart__label\">{{ node.label ?? node.id }}</span>\n          @if (field(node, 'title'); as title) {\n            <span class=\"mk-org-chart__title\">{{ title }}</span>\n          }\n        </span>\n      }\n      @if (collapsible() && node.children?.length) {\n        <button\n          type=\"button\"\n          class=\"mk-org-chart__toggle\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"toggleLabel(node)\"\n          [attr.aria-expanded]=\"isExpanded(node)\"\n          (click)=\"onToggleClick($event, node)\"\n        >\n          <span class=\"mk-org-chart__caret\" aria-hidden=\"true\"></span>\n        </button>\n      }\n    </div>\n    @if (isExpanded(node)) {\n      <ul class=\"mk-org-chart__level mk-org-chart__level--nested\" role=\"group\">\n        @for (child of node.children; track child.id) {\n          <ng-container\n            *ngTemplateOutlet=\"itemTpl; context: { node: child, depth: depth + 1 }\"\n          />\n        }\n      </ul>\n    }\n  </li>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_line: var(--mk-border-strong);--_line-w: var(--mk-border-width);--_gap-main: var(--mk-space-8);--_gap-cross: var(--mk-space-4);--_card-w: 11rem;display:block;font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-org-chart__scroller{overflow:auto;max-width:100%}.mk-org-chart__canvas{display:inline-block;min-width:100%;padding:var(--mk-space-2);box-sizing:border-box}.mk-org-chart__level{display:flex;list-style:none;margin:0;padding:0;position:relative}.mk-org-chart__level--root{justify-content:center}.mk-org-chart__item{position:relative;display:flex;align-items:center;outline:none}:host(.mk-org-chart--top) .mk-org-chart__level{flex-direction:row}:host(.mk-org-chart--top) .mk-org-chart__level--nested{padding-block-start:var(--_gap-main)}:host(.mk-org-chart--top) .mk-org-chart__level--nested:before{content:\"\";position:absolute;top:0;inset-inline-start:50%;width:0;height:var(--_gap-main);border-inline-start:var(--_line-w) solid var(--_line)}:host(.mk-org-chart--top) .mk-org-chart__item{flex-direction:column;padding:var(--_gap-main) calc(var(--_gap-cross) / 2) 0}:host(.mk-org-chart--top) .mk-org-chart__item:before,:host(.mk-org-chart--top) .mk-org-chart__item:after{content:\"\";position:absolute;top:0;width:50%;height:var(--_gap-main);border-block-start:var(--_line-w) solid var(--_line);pointer-events:none}:host(.mk-org-chart--top) .mk-org-chart__item:before{inset-inline-end:50%}:host(.mk-org-chart--top) .mk-org-chart__item:after{inset-inline-start:50%;border-inline-start:var(--_line-w) solid var(--_line)}:host(.mk-org-chart--top) .mk-org-chart__item:first-child:before{display:none}:host(.mk-org-chart--top) .mk-org-chart__item:last-child:after{border-block-start-color:transparent}:host(.mk-org-chart--top) .mk-org-chart__level--root>.mk-org-chart__item{padding-block-start:0}:host(.mk-org-chart--top) .mk-org-chart__level--root>.mk-org-chart__item:before,:host(.mk-org-chart--top) .mk-org-chart__level--root>.mk-org-chart__item:after{display:none}:host(.mk-org-chart--left) .mk-org-chart__level{flex-direction:column}:host(.mk-org-chart--left) .mk-org-chart__level--root{align-items:flex-start}:host(.mk-org-chart--left) .mk-org-chart__level--nested{padding-inline-start:var(--_gap-main)}:host(.mk-org-chart--left) .mk-org-chart__level--nested:before{content:\"\";position:absolute;top:50%;inset-inline-start:0;width:var(--_gap-main);height:0;border-block-start:var(--_line-w) solid var(--_line)}:host(.mk-org-chart--left) .mk-org-chart__item{flex-direction:row;padding-block:calc(var(--_gap-cross) / 2);padding-inline:var(--_gap-main) 0}:host(.mk-org-chart--left) .mk-org-chart__item:before,:host(.mk-org-chart--left) .mk-org-chart__item:after{content:\"\";position:absolute;inset-inline-start:0;width:var(--_gap-main);height:50%;border-inline-start:var(--_line-w) solid var(--_line);pointer-events:none}:host(.mk-org-chart--left) .mk-org-chart__item:before{top:0}:host(.mk-org-chart--left) .mk-org-chart__item:after{top:50%;border-block-start:var(--_line-w) solid var(--_line)}:host(.mk-org-chart--left) .mk-org-chart__item:first-child:before{display:none}:host(.mk-org-chart--left) .mk-org-chart__item:last-child:after{border-inline-start-color:transparent}:host(.mk-org-chart--left) .mk-org-chart__level--root>.mk-org-chart__item{padding-inline-start:0}:host(.mk-org-chart--left) .mk-org-chart__level--root>.mk-org-chart__item:before,:host(.mk-org-chart--left) .mk-org-chart__level--root>.mk-org-chart__item:after{display:none}.mk-org-chart__node{position:relative;z-index:1;display:flex;align-items:center;gap:var(--mk-space-3);box-sizing:border-box;min-width:var(--_card-w);max-width:calc(var(--_card-w) * 2);min-height:2.75rem;padding:var(--mk-space-2) var(--mk-space-3);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);box-shadow:var(--mk-shadow-xs);text-align:start;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-org-chart__node--custom{display:block;min-width:0;max-width:none;min-height:0;padding:0;border:0;background:transparent;box-shadow:none}:host(.mk-org-chart--selectable) .mk-org-chart__node{cursor:pointer;-webkit-user-select:none;user-select:none}:host(.mk-org-chart--selectable) .mk-org-chart__node:not(.mk-org-chart__node--custom):hover{border-color:var(--mk-border-strong);background-color:color-mix(in srgb,var(--mk-surface),var(--mk-hover-overlay))}.mk-org-chart__node--selected:not(.mk-org-chart__node--custom),:host(.mk-org-chart--selectable) .mk-org-chart__node--selected:not(.mk-org-chart__node--custom):hover{border-color:var(--mk-primary);background-color:var(--mk-primary-subtle);box-shadow:0 0 0 1px var(--mk-primary)}.mk-org-chart__item:focus-visible>.mk-org-chart__node{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-md)}.mk-org-chart__avatar{flex:none}.mk-org-chart__text{display:flex;flex-direction:column;min-width:0;line-height:var(--mk-line-height-snug)}.mk-org-chart__label{font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-semibold);color:var(--mk-text);overflow-wrap:anywhere}.mk-org-chart__title{font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);overflow-wrap:anywhere}.mk-org-chart__node--selected .mk-org-chart__label{color:var(--mk-primary-subtle-text)}.mk-org-chart__toggle{position:absolute;z-index:2;display:grid;place-items:center;width:1.25rem;height:1.25rem;padding:0;margin:0;border:var(--mk-border-width) solid var(--mk-border-strong);border-radius:var(--mk-radius-circle);background:var(--mk-surface);color:var(--mk-text-muted);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}@media(pointer:coarse){.mk-org-chart__toggle:after{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-org-chart__toggle:hover{background:var(--mk-surface-2);color:var(--mk-text)}.mk-org-chart__toggle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}:host(.mk-org-chart--top) .mk-org-chart__toggle{bottom:0;left:50%;transform:translate(-50%,50%)}:host(.mk-org-chart--left) .mk-org-chart__toggle{top:50%;inset-inline-end:0;transform:translateY(-50%);margin-inline-end:-.625rem}.mk-org-chart__caret{width:.35rem;height:.35rem;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-org-chart--top) .mk-org-chart__caret{transform:translateY(-1px) rotate(45deg)}:host(.mk-org-chart--top) .mk-org-chart__item--expanded>.mk-org-chart__node>.mk-org-chart__toggle .mk-org-chart__caret{transform:translateY(1px) rotate(-135deg)}:host(.mk-org-chart--left) .mk-org-chart__caret{transform:translate(-1px) rotate(-45deg)}:host(.mk-org-chart--left) .mk-org-chart__item--expanded>.mk-org-chart__node>.mk-org-chart__toggle .mk-org-chart__caret{transform:translate(1px) rotate(135deg)}:host(.mk-org-chart--left:dir(rtl)) .mk-org-chart__caret{transform:translate(1px) rotate(135deg)}:host(.mk-org-chart--left:dir(rtl)) .mk-org-chart__item--expanded>.mk-org-chart__node>.mk-org-chart__toggle .mk-org-chart__caret{transform:translate(-1px) rotate(-45deg)}@media(prefers-reduced-motion:reduce){.mk-org-chart__node,.mk-org-chart__toggle,.mk-org-chart__caret{transition:none}}@media print{.mk-org-chart__scroller{overflow:visible}.mk-org-chart__canvas{display:block;zoom:1!important}.mk-org-chart__node{box-shadow:none;break-inside:avoid}.mk-org-chart__toggle{display:none}}\n"] }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }], nodeDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MkOrgChartNodeDef), { isSignal: true }] }] } });
+function walk(list, fn) {
+    for (const node of list) {
+        fn(node);
+        if (node.children?.length)
+            walk(node.children, fn);
+    }
+}
+function collectIds(list) {
+    const ids = new Set();
+    walk(list, (n) => ids.add(n.id));
+    return ids;
+}
+
 /**
  * Stat card — a compact KPI tile for dashboards. Shows a label, a primary
  * value and an optional trend delta. The trend is conveyed by an arrow glyph
@@ -3490,6 +3918,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class MkInlineEdit {
     injector = inject(Injector);
     field = inject(MkFieldContext, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     displayRef = viewChild('display', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayRef" }] : /* istanbul ignore next */ []));
@@ -3532,7 +3962,7 @@ class MkInlineEdit {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
@@ -4344,11 +4774,11 @@ class MkCarousel {
         this.io = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkCarousel, isStandalone: true, selector: "mk-carousel", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, userPaused: { classPropertyName: "userPaused", publicName: "userPaused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange", userPaused: "userPausedChange" }, host: { classAttribute: "mk-carousel" }, queries: [{ propertyName: "slides", predicate: MkCarouselSlide, isSignal: true }], ngImport: i0, template: "<div\n  class=\"mk-carousel__viewport\"\n  role=\"region\"\n  aria-roledescription=\"carousel\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  (keydown)=\"onKeydown($event)\"\n  (mouseenter)=\"pause()\"\n  (mouseleave)=\"resume()\"\n  (focusin)=\"pause()\"\n  (focusout)=\"resume()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n>\n  @if (autoplay()) {\n    <button\n      type=\"button\"\n      class=\"mk-carousel__playpause\"\n      [attr.aria-label]=\"userPaused() ? i18n.playSlideshow : i18n.pauseSlideshow\"\n      [attr.aria-pressed]=\"userPaused()\"\n      (click)=\"toggleUserPause()\"\n    >\n      <span aria-hidden=\"true\">{{ userPaused() ? '\u25B6' : '\u23F8' }}</span>\n    </button>\n  }\n  <div\n    class=\"mk-carousel__track\"\n    [class.mk-carousel__track--dragging]=\"dragging()\"\n    [style.transform]=\"trackTransform()\"\n  >\n    <ng-content />\n  </div>\n\n  @if (showArrows() && count() > 1) {\n    <button\n      type=\"button\"\n      class=\"mk-carousel__arrow mk-carousel__arrow--prev\"\n      [attr.aria-label]=\"i18n.previousSlide\"\n      (click)=\"prev()\"\n    >\n      <span aria-hidden=\"true\">\u2039</span>\n    </button>\n    <button\n      type=\"button\"\n      class=\"mk-carousel__arrow mk-carousel__arrow--next\"\n      [attr.aria-label]=\"i18n.nextSlide\"\n      (click)=\"next()\"\n    >\n      <span aria-hidden=\"true\">\u203A</span>\n    </button>\n  }\n</div>\n\n@if (showDots() && count() > 1) {\n  <div class=\"mk-carousel__dots\">\n    @for (dot of dots(); track dot) {\n      <button\n        type=\"button\"\n        class=\"mk-carousel__dot\"\n        [class.mk-carousel__dot--active]=\"dot === index()\"\n        [attr.aria-current]=\"dot === index() || null\"\n        [attr.aria-label]=\"i18n.goToSlide(dot + 1)\"\n        (click)=\"goTo(dot)\"\n      ></button>\n    }\n  </div>\n}\n\n<div class=\"mk-visually-hidden\" [attr.aria-live]=\"liveMode()\">{{ liveText() }}</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans)}.mk-carousel__viewport{position:relative;overflow:hidden;border-radius:var(--mk-radius-md);touch-action:pan-y}.mk-carousel__viewport:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__track{display:flex;transition:transform var(--mk-duration-normal, .24s) var(--mk-ease-standard)}.mk-carousel__track--dragging{transition:none}.mk-carousel__slide{flex:0 0 100%;min-width:0}.mk-carousel__playpause{position:absolute;top:var(--mk-space-2);inset-inline-start:var(--mk-space-2);z-index:1;display:grid;place-items:center;width:2rem;height:2rem;padding:0;font-size:var(--mk-font-size-sm);line-height:1;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-carousel__playpause:hover{background-color:var(--mk-surface-2)}.mk-carousel__playpause:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:2rem;height:2rem;font-size:var(--mk-font-size-lg);line-height:1;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-carousel__arrow:hover{background-color:var(--mk-surface-2)}.mk-carousel__arrow:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__arrow--prev{inset-inline-start:var(--mk-space-2)}.mk-carousel__arrow--next{inset-inline-end:var(--mk-space-2)}.mk-carousel__arrow:dir(rtl) span{display:inline-block;transform:scaleX(-1)}.mk-carousel__dots{display:flex;justify-content:center;gap:var(--mk-space-2);margin-top:var(--mk-space-2)}.mk-carousel__dot{width:.5rem;height:.5rem;padding:0;background-color:var(--mk-border-strong);border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),transform var(--mk-duration-fast) var(--mk-ease-standard)}.mk-carousel__dot:hover{background-color:var(--mk-text-muted)}.mk-carousel__dot:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__dot--active{background-color:var(--mk-primary);transform:scale(1.25)}@media(prefers-reduced-motion:reduce){.mk-carousel__track,.mk-carousel__arrow,.mk-carousel__dot{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkCarousel, isStandalone: true, selector: "mk-carousel", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, showArrows: { classPropertyName: "showArrows", publicName: "showArrows", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, userPaused: { classPropertyName: "userPaused", publicName: "userPaused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { index: "indexChange", userPaused: "userPausedChange" }, host: { classAttribute: "mk-carousel" }, queries: [{ propertyName: "slides", predicate: MkCarouselSlide, isSignal: true }], ngImport: i0, template: "<div\n  class=\"mk-carousel__viewport\"\n  role=\"region\"\n  aria-roledescription=\"carousel\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  (keydown)=\"onKeydown($event)\"\n  (mouseenter)=\"pause()\"\n  (mouseleave)=\"resume()\"\n  (focusin)=\"pause()\"\n  (focusout)=\"resume()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n>\n  @if (autoplay()) {\n    <button\n      type=\"button\"\n      class=\"mk-carousel__playpause\"\n      [attr.aria-label]=\"userPaused() ? i18n.playSlideshow : i18n.pauseSlideshow\"\n      [attr.aria-pressed]=\"userPaused()\"\n      (click)=\"toggleUserPause()\"\n    >\n      <span aria-hidden=\"true\">{{ userPaused() ? '\u25B6' : '\u23F8' }}</span>\n    </button>\n  }\n  <div\n    class=\"mk-carousel__track\"\n    [class.mk-carousel__track--dragging]=\"dragging()\"\n    [style.transform]=\"trackTransform()\"\n  >\n    <ng-content />\n  </div>\n\n  @if (showArrows() && count() > 1) {\n    <button\n      type=\"button\"\n      class=\"mk-carousel__arrow mk-carousel__arrow--prev\"\n      [attr.aria-label]=\"i18n.previousSlide\"\n      (click)=\"prev()\"\n    >\n      <span aria-hidden=\"true\">\u2039</span>\n    </button>\n    <button\n      type=\"button\"\n      class=\"mk-carousel__arrow mk-carousel__arrow--next\"\n      [attr.aria-label]=\"i18n.nextSlide\"\n      (click)=\"next()\"\n    >\n      <span aria-hidden=\"true\">\u203A</span>\n    </button>\n  }\n</div>\n\n@if (showDots() && count() > 1) {\n  <div class=\"mk-carousel__dots\">\n    @for (dot of dots(); track dot) {\n      <button\n        type=\"button\"\n        class=\"mk-carousel__dot\"\n        [class.mk-carousel__dot--active]=\"dot === index()\"\n        [attr.aria-current]=\"dot === index() || null\"\n        [attr.aria-label]=\"i18n.goToSlide(dot + 1)\"\n        (click)=\"goTo(dot)\"\n      ></button>\n    }\n  </div>\n}\n\n<div class=\"mk-visually-hidden\" [attr.aria-live]=\"liveMode()\">{{ liveText() }}</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans)}.mk-carousel__viewport{position:relative;overflow:hidden;border-radius:var(--mk-radius-md);touch-action:pan-y}.mk-carousel__viewport:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__track{display:flex;transition:transform var(--mk-duration-normal, .24s) var(--mk-ease-standard)}.mk-carousel__track--dragging{transition:none}:host ::ng-deep .mk-carousel__slide{flex:0 0 100%;min-width:0;box-sizing:border-box}.mk-carousel__playpause{position:absolute;top:var(--mk-space-2);inset-inline-start:var(--mk-space-2);z-index:1;display:grid;place-items:center;width:2rem;height:2rem;padding:0;font-size:var(--mk-font-size-sm);line-height:1;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-carousel__playpause:hover{background-color:var(--mk-surface-2)}.mk-carousel__playpause:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:2rem;height:2rem;font-size:var(--mk-font-size-lg);line-height:1;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-carousel__arrow:hover{background-color:var(--mk-surface-2)}.mk-carousel__arrow:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__arrow--prev{inset-inline-start:var(--mk-space-2)}.mk-carousel__arrow--next{inset-inline-end:var(--mk-space-2)}.mk-carousel__arrow:dir(rtl) span{display:inline-block;transform:scaleX(-1)}.mk-carousel__dots{display:flex;justify-content:center;gap:var(--mk-space-2);margin-top:var(--mk-space-2)}.mk-carousel__dot{width:.5rem;height:.5rem;padding:0;background-color:var(--mk-border-strong);border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),transform var(--mk-duration-fast) var(--mk-ease-standard)}.mk-carousel__dot:hover{background-color:var(--mk-text-muted)}.mk-carousel__dot:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__dot--active{background-color:var(--mk-primary);transform:scale(1.25)}@media(prefers-reduced-motion:reduce){.mk-carousel__track,.mk-carousel__arrow,.mk-carousel__dot{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCarousel, decorators: [{
             type: Component,
-            args: [{ selector: 'mk-carousel', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'mk-carousel' }, template: "<div\n  class=\"mk-carousel__viewport\"\n  role=\"region\"\n  aria-roledescription=\"carousel\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  (keydown)=\"onKeydown($event)\"\n  (mouseenter)=\"pause()\"\n  (mouseleave)=\"resume()\"\n  (focusin)=\"pause()\"\n  (focusout)=\"resume()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n>\n  @if (autoplay()) {\n    <button\n      type=\"button\"\n      class=\"mk-carousel__playpause\"\n      [attr.aria-label]=\"userPaused() ? i18n.playSlideshow : i18n.pauseSlideshow\"\n      [attr.aria-pressed]=\"userPaused()\"\n      (click)=\"toggleUserPause()\"\n    >\n      <span aria-hidden=\"true\">{{ userPaused() ? '\u25B6' : '\u23F8' }}</span>\n    </button>\n  }\n  <div\n    class=\"mk-carousel__track\"\n    [class.mk-carousel__track--dragging]=\"dragging()\"\n    [style.transform]=\"trackTransform()\"\n  >\n    <ng-content />\n  </div>\n\n  @if (showArrows() && count() > 1) {\n    <button\n      type=\"button\"\n      class=\"mk-carousel__arrow mk-carousel__arrow--prev\"\n      [attr.aria-label]=\"i18n.previousSlide\"\n      (click)=\"prev()\"\n    >\n      <span aria-hidden=\"true\">\u2039</span>\n    </button>\n    <button\n      type=\"button\"\n      class=\"mk-carousel__arrow mk-carousel__arrow--next\"\n      [attr.aria-label]=\"i18n.nextSlide\"\n      (click)=\"next()\"\n    >\n      <span aria-hidden=\"true\">\u203A</span>\n    </button>\n  }\n</div>\n\n@if (showDots() && count() > 1) {\n  <div class=\"mk-carousel__dots\">\n    @for (dot of dots(); track dot) {\n      <button\n        type=\"button\"\n        class=\"mk-carousel__dot\"\n        [class.mk-carousel__dot--active]=\"dot === index()\"\n        [attr.aria-current]=\"dot === index() || null\"\n        [attr.aria-label]=\"i18n.goToSlide(dot + 1)\"\n        (click)=\"goTo(dot)\"\n      ></button>\n    }\n  </div>\n}\n\n<div class=\"mk-visually-hidden\" [attr.aria-live]=\"liveMode()\">{{ liveText() }}</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans)}.mk-carousel__viewport{position:relative;overflow:hidden;border-radius:var(--mk-radius-md);touch-action:pan-y}.mk-carousel__viewport:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__track{display:flex;transition:transform var(--mk-duration-normal, .24s) var(--mk-ease-standard)}.mk-carousel__track--dragging{transition:none}.mk-carousel__slide{flex:0 0 100%;min-width:0}.mk-carousel__playpause{position:absolute;top:var(--mk-space-2);inset-inline-start:var(--mk-space-2);z-index:1;display:grid;place-items:center;width:2rem;height:2rem;padding:0;font-size:var(--mk-font-size-sm);line-height:1;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-carousel__playpause:hover{background-color:var(--mk-surface-2)}.mk-carousel__playpause:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:2rem;height:2rem;font-size:var(--mk-font-size-lg);line-height:1;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-carousel__arrow:hover{background-color:var(--mk-surface-2)}.mk-carousel__arrow:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__arrow--prev{inset-inline-start:var(--mk-space-2)}.mk-carousel__arrow--next{inset-inline-end:var(--mk-space-2)}.mk-carousel__arrow:dir(rtl) span{display:inline-block;transform:scaleX(-1)}.mk-carousel__dots{display:flex;justify-content:center;gap:var(--mk-space-2);margin-top:var(--mk-space-2)}.mk-carousel__dot{width:.5rem;height:.5rem;padding:0;background-color:var(--mk-border-strong);border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),transform var(--mk-duration-fast) var(--mk-ease-standard)}.mk-carousel__dot:hover{background-color:var(--mk-text-muted)}.mk-carousel__dot:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__dot--active{background-color:var(--mk-primary);transform:scale(1.25)}@media(prefers-reduced-motion:reduce){.mk-carousel__track,.mk-carousel__arrow,.mk-carousel__dot{transition:none}}\n"] }]
+            args: [{ selector: 'mk-carousel', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'mk-carousel' }, template: "<div\n  class=\"mk-carousel__viewport\"\n  role=\"region\"\n  aria-roledescription=\"carousel\"\n  [attr.aria-label]=\"ariaLabel()\"\n  tabindex=\"0\"\n  (keydown)=\"onKeydown($event)\"\n  (mouseenter)=\"pause()\"\n  (mouseleave)=\"resume()\"\n  (focusin)=\"pause()\"\n  (focusout)=\"resume()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n>\n  @if (autoplay()) {\n    <button\n      type=\"button\"\n      class=\"mk-carousel__playpause\"\n      [attr.aria-label]=\"userPaused() ? i18n.playSlideshow : i18n.pauseSlideshow\"\n      [attr.aria-pressed]=\"userPaused()\"\n      (click)=\"toggleUserPause()\"\n    >\n      <span aria-hidden=\"true\">{{ userPaused() ? '\u25B6' : '\u23F8' }}</span>\n    </button>\n  }\n  <div\n    class=\"mk-carousel__track\"\n    [class.mk-carousel__track--dragging]=\"dragging()\"\n    [style.transform]=\"trackTransform()\"\n  >\n    <ng-content />\n  </div>\n\n  @if (showArrows() && count() > 1) {\n    <button\n      type=\"button\"\n      class=\"mk-carousel__arrow mk-carousel__arrow--prev\"\n      [attr.aria-label]=\"i18n.previousSlide\"\n      (click)=\"prev()\"\n    >\n      <span aria-hidden=\"true\">\u2039</span>\n    </button>\n    <button\n      type=\"button\"\n      class=\"mk-carousel__arrow mk-carousel__arrow--next\"\n      [attr.aria-label]=\"i18n.nextSlide\"\n      (click)=\"next()\"\n    >\n      <span aria-hidden=\"true\">\u203A</span>\n    </button>\n  }\n</div>\n\n@if (showDots() && count() > 1) {\n  <div class=\"mk-carousel__dots\">\n    @for (dot of dots(); track dot) {\n      <button\n        type=\"button\"\n        class=\"mk-carousel__dot\"\n        [class.mk-carousel__dot--active]=\"dot === index()\"\n        [attr.aria-current]=\"dot === index() || null\"\n        [attr.aria-label]=\"i18n.goToSlide(dot + 1)\"\n        (click)=\"goTo(dot)\"\n      ></button>\n    }\n  </div>\n}\n\n<div class=\"mk-visually-hidden\" [attr.aria-live]=\"liveMode()\">{{ liveText() }}</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--mk-font-sans)}.mk-carousel__viewport{position:relative;overflow:hidden;border-radius:var(--mk-radius-md);touch-action:pan-y}.mk-carousel__viewport:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__track{display:flex;transition:transform var(--mk-duration-normal, .24s) var(--mk-ease-standard)}.mk-carousel__track--dragging{transition:none}:host ::ng-deep .mk-carousel__slide{flex:0 0 100%;min-width:0;box-sizing:border-box}.mk-carousel__playpause{position:absolute;top:var(--mk-space-2);inset-inline-start:var(--mk-space-2);z-index:1;display:grid;place-items:center;width:2rem;height:2rem;padding:0;font-size:var(--mk-font-size-sm);line-height:1;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-carousel__playpause:hover{background-color:var(--mk-surface-2)}.mk-carousel__playpause:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:2rem;height:2rem;font-size:var(--mk-font-size-lg);line-height:1;color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-carousel__arrow:hover{background-color:var(--mk-surface-2)}.mk-carousel__arrow:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__arrow--prev{inset-inline-start:var(--mk-space-2)}.mk-carousel__arrow--next{inset-inline-end:var(--mk-space-2)}.mk-carousel__arrow:dir(rtl) span{display:inline-block;transform:scaleX(-1)}.mk-carousel__dots{display:flex;justify-content:center;gap:var(--mk-space-2);margin-top:var(--mk-space-2)}.mk-carousel__dot{width:.5rem;height:.5rem;padding:0;background-color:var(--mk-border-strong);border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),transform var(--mk-duration-fast) var(--mk-ease-standard)}.mk-carousel__dot:hover{background-color:var(--mk-text-muted)}.mk-carousel__dot:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-carousel__dot--active{background-color:var(--mk-primary);transform:scale(1.25)}@media(prefers-reduced-motion:reduce){.mk-carousel__track,.mk-carousel__arrow,.mk-carousel__dot{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { slides: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkCarouselSlide), { isSignal: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }, { type: i0.Output, args: ["indexChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], showArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrows", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], userPaused: [{ type: i0.Input, args: [{ isSignal: true, alias: "userPaused", required: false }] }, { type: i0.Output, args: ["userPausedChange"] }] } });
 
 /**
@@ -6492,5 +6922,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MK_CHART_PALETTE_SIZE, MK_HEATMAP_MIN_CONTRAST, MkAvatar, MkAvatarGroup, MkBadge, MkBadgeOverlay, MkBarChart, MkCalendarHeatmap, MkCard, MkCardFooter, MkCardHeader, MkCardTitle, MkCarousel, MkCarouselSlide, MkCode, MkCountdown, MkDescItem, MkDescriptionList, MkDiff, MkDivider, MkDonutChart, MkEmptyState, MkFunnelChart, MkGauge, MkHeatmap, MkInlineEdit, MkJsonViewer, MkKanban, MkLineChart, MkList, MkListItem, MkLogViewer, MkMarkdown, MkProfileActions, MkProfileCard, MkProfileMeta, MkProgressBar, MkProgressRing, MkQrCode, MkRadarChart, MkScatterChart, MkSkeleton, MkSkeletonPreset, MkSparkline, MkSpinner, MkStatCard, MkTag, MkTimeline, MkTimelineItem, MkTreemap, MkVirtualScroll, mkArcPath, mkAreaPath, mkBuildJsonTree, mkChartColor, mkComputeDiff, mkContrastRatio, mkDiffStats, mkEncodeQr, mkFormatCompact, mkHeatmapCellColors, mkLinePath, mkLinearScale, mkMixRgb, mkNiceTicks, mkParseAnsi, mkParseMarkdown, mkParseRgb, mkRelativeLuminance, mkRenderMarkdown, mkSplitDuration, mkSquarify, mkStripAnsi };
+export { MK_CHART_PALETTE_SIZE, MK_HEATMAP_MIN_CONTRAST, MkAvatar, MkAvatarGroup, MkBadge, MkBadgeOverlay, MkBarChart, MkCalendarHeatmap, MkCard, MkCardFooter, MkCardHeader, MkCardTitle, MkCarousel, MkCarouselSlide, MkCode, MkCountdown, MkDescItem, MkDescriptionList, MkDiff, MkDivider, MkDonutChart, MkEmptyState, MkFunnelChart, MkGauge, MkHeatmap, MkInlineEdit, MkJsonViewer, MkKanban, MkLineChart, MkList, MkListItem, MkLogViewer, MkMarkdown, MkOrgChart, MkOrgChartNodeDef, MkProfileActions, MkProfileCard, MkProfileMeta, MkProgressBar, MkProgressRing, MkQrCode, MkRadarChart, MkScatterChart, MkSkeleton, MkSkeletonPreset, MkSparkline, MkSpinner, MkStatCard, MkTag, MkTimeline, MkTimelineItem, MkTreemap, MkVirtualScroll, mkArcPath, mkAreaPath, mkBuildJsonTree, mkChartColor, mkComputeDiff, mkContrastRatio, mkDiffStats, mkEncodeQr, mkFormatCompact, mkHeatmapCellColors, mkLinePath, mkLinearScale, mkMixRgb, mkNiceTicks, mkOrgChartFromFlat, mkParseAnsi, mkParseMarkdown, mkParseRgb, mkRelativeLuminance, mkRenderMarkdown, mkSplitDuration, mkSquarify, mkStripAnsi };
 //# sourceMappingURL=mk-kit-ui-data.mjs.map