@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-tooltip.mjs","sources":["../../../../libs/core/tooltip/src/lib/tooltip/tooltip-panel.ts","../../../../libs/core/tooltip/src/lib/tooltip/tooltip.ts","../../../../libs/core/tooltip/src/malva-ui-core-tooltip.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport type { MlvTooltipTone, MlvTooltipPlacement } from './tooltip.types';\n\n/**\n * Internal tooltip panel component.\n *\n * This component is not intended for direct consumer use — it is created\n * programmatically by `MlvTooltip` and attached to a CDK overlay.\n *\n * Renders the floating tooltip panel with optional directional arrow.\n * Placement and tone variant are controlled via inputs set by the directive.\n */\n@Component({\n  selector: 'mlv-tooltip-panel',\n  template: `\n    <div\n      class=\"mlv-tooltip\"\n      [class]=\"'mlv-tooltip--tone-' + tone()\"\n      [class.mlv-tooltip--no-arrow]=\"!showArrow()\"\n      [class.mlv-tooltip--placement-top]=\"placement() === 'top'\"\n      [class.mlv-tooltip--placement-bottom]=\"placement() === 'bottom'\"\n      [class.mlv-tooltip--placement-left]=\"placement() === 'left'\"\n      [class.mlv-tooltip--placement-right]=\"placement() === 'right'\"\n      role=\"tooltip\"\n      [attr.id]=\"tooltipId()\"\n    >\n      <span class=\"mlv-tooltip__content\">{{ content() }}</span>\n      @if (showArrow()) {\n        <span class=\"mlv-tooltip__arrow\" aria-hidden=\"true\"></span>\n      }\n    </div>\n  `,\n  styleUrl: './tooltip-panel.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MlvTooltipPanel {\n  /** The text content to display inside the tooltip panel. */\n  readonly content = input.required<string>();\n\n  /** The tone variant of the tooltip panel. */\n  readonly tone = input<MlvTooltipTone>('neutral');\n\n  /** Whether the directional arrow is visible. */\n  readonly showArrow = input<boolean, BooleanInput>(true, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** The preferred placement of the tooltip relative to the trigger. */\n  readonly placement = input<MlvTooltipPlacement>('top');\n\n  /** Unique ID for the tooltip panel, used by `aria-describedby` on the trigger. */\n  readonly tooltipId = input.required<string>();\n}\n","import type { ComponentRef } from '@angular/core';\nimport {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  EnvironmentInjector,\n  inject,\n  input,\n  NgZone,\n  Renderer2,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport type {\n  ConnectedPosition,\n  FlexibleConnectedPositionStrategy,\n  OverlayRef,\n} from '@angular/cdk/overlay';\nimport { Overlay } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MlvRtlService, mlvNextId } from '@malva-ui/cdk/utils';\nimport { MlvTooltipPanel } from './tooltip-panel';\nimport type { MlvTooltipTone, MlvTooltipPlacement } from './tooltip.types';\n\n/**\n * Map of placement → CDK connected positions (preferred + opposite fallback).\n * Offset of 6px provides clearance for the arrow.\n */\nconst TOOLTIP_POSITIONS: Record<MlvTooltipPlacement, ConnectedPosition[]> = {\n  top: [\n    {\n      originX: 'center',\n      originY: 'top',\n      overlayX: 'center',\n      overlayY: 'bottom',\n      offsetY: -6,\n    },\n    {\n      originX: 'center',\n      originY: 'bottom',\n      overlayX: 'center',\n      overlayY: 'top',\n      offsetY: 6,\n    },\n  ],\n  bottom: [\n    {\n      originX: 'center',\n      originY: 'bottom',\n      overlayX: 'center',\n      overlayY: 'top',\n      offsetY: 6,\n    },\n    {\n      originX: 'center',\n      originY: 'top',\n      overlayX: 'center',\n      overlayY: 'bottom',\n      offsetY: -6,\n    },\n  ],\n  left: [\n    {\n      originX: 'start',\n      originY: 'center',\n      overlayX: 'end',\n      overlayY: 'center',\n      offsetX: -6,\n    },\n    {\n      originX: 'end',\n      originY: 'center',\n      overlayX: 'start',\n      overlayY: 'center',\n      offsetX: 6,\n    },\n  ],\n  right: [\n    {\n      originX: 'end',\n      originY: 'center',\n      overlayX: 'start',\n      overlayY: 'center',\n      offsetX: 6,\n    },\n    {\n      originX: 'start',\n      originY: 'center',\n      overlayX: 'end',\n      overlayY: 'center',\n      offsetX: -6,\n    },\n  ],\n};\n\n/**\n * Derives effective tooltip placement from the CDK resolved position pair.\n * Used to update the arrow direction when CDK flips to the fallback placement.\n */\nfunction resolvePlacementFromPosition(\n  pos: ConnectedPosition,\n): MlvTooltipPlacement {\n  if (pos.overlayY === 'bottom') return 'top';\n  if (pos.overlayY === 'top') return 'bottom';\n  if (pos.overlayX === 'end') return 'left';\n  return 'right';\n}\n\n/**\n * Tooltip directive — attach to any element to show a tooltip on hover and focus.\n *\n * The tooltip content is passed as the directive binding value (`mlvTooltip`).\n * The tooltip appears after `tooltipDelay` ms and disappears immediately on\n * mouseleave, focusout, or Escape key.\n *\n * @example Basic usage\n * ```html\n * <button [mlvTooltip]=\"'Save changes'\">Save</button>\n * ```\n *\n * @example With options\n * ```html\n * <button\n *   [mlvTooltip]=\"'Delete item'\"\n *   tooltipPlacement=\"bottom\"\n *   tooltipTone=\"danger\"\n *   [tooltipDelay]=\"500\"\n * >Delete</button>\n * ```\n *\n * @example Disabled tooltip\n * ```html\n * <button [mlvTooltip]=\"'Info'\" tooltipDisabled>Button</button>\n * ```\n *\n * @example No arrow\n * ```html\n * <button [mlvTooltip]=\"'Info'\" [tooltipArrow]=\"false\">Button</button>\n * ```\n */\n@Directive({\n  selector: '[mlvTooltip]',\n  host: {\n    '(mouseenter)': '_onMouseEnter()',\n    '(mouseleave)': '_onMouseLeave()',\n    '(focusin)': '_onFocusIn()',\n    '(focusout)': '_onFocusOut()',\n    '(keydown.escape)': '_onEscape()',\n  },\n})\nexport class MlvTooltip {\n  // ─── Injected services ────────────────────────────────────────────────────\n\n  /** @private Host element reference. */\n  private readonly _elementRef = inject(ElementRef<HTMLElement>);\n\n  /** @private CDK Overlay for creating floating panels. */\n  private readonly _overlay = inject(Overlay);\n\n  /**\n   * @private Resolves the direction scoped to the tooltip's host. The panel is\n   * portaled to the overlay container on `<body>`, outside any `[dir]` scope\n   * the host sits in, so the direction must travel on the overlay config — it\n   * also drives `start`/`end` mirroring in the position strategy.\n   */\n  private readonly _rtl = inject(MlvRtlService);\n\n  /** @private Environment injector, required for ComponentPortal creation. */\n  private readonly _injector = inject(EnvironmentInjector);\n\n  /** @private Renderer for DOM attribute manipulation. */\n  private readonly _renderer = inject(Renderer2);\n\n  /** @private Zone for running timer callbacks inside change detection. */\n  private readonly _ngZone = inject(NgZone);\n\n  /** @private DestroyRef for cleanup on directive destruction. */\n  private readonly _destroyRef = inject(DestroyRef);\n\n  // ─── Inputs ───────────────────────────────────────────────────────────────\n\n  /**\n   * The tooltip text content.\n   * This is also the directive selector binding: `[mlvTooltip]=\"'my text'\"`.\n   */\n  readonly mlvTooltip = input.required<string>();\n\n  /** Preferred placement of the tooltip relative to the trigger. Defaults to `'top'`. */\n  readonly tooltipPlacement = input<MlvTooltipPlacement>('top');\n\n  /** Tone variant of the tooltip panel. Defaults to `'neutral'` (fixed dark neutral background). */\n  readonly tooltipTone = input<MlvTooltipTone>('neutral');\n\n  /**\n   * Delay in milliseconds before the tooltip appears after hover or focus.\n   * Defaults to `300`.\n   */\n  readonly tooltipDelay = input<number>(300);\n\n  /**\n   * When `true`, suppresses the tooltip entirely.\n   * Supports attribute syntax: `<element tooltipDisabled>`.\n   */\n  readonly tooltipDisabled = input<BooleanInput, boolean | string>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * When `true` (default), renders a directional arrow pointing toward the trigger.\n   * Set to `false` to hide the arrow.\n   * Supports attribute syntax: `<element [tooltipArrow]=\"false\">`.\n   */\n  readonly tooltipArrow = input<BooleanInput, boolean | string>(true, {\n    transform: coerceBooleanProperty,\n  });\n\n  // ─── Private state ────────────────────────────────────────────────────────\n\n  /**\n   * @private Reference to the dynamically created `MlvTooltipPanel` instance.\n   */\n  private _componentRef: ComponentRef<MlvTooltipPanel> | null = null;\n\n  /**\n   * @private CDK overlay reference managing the floating panel.\n   */\n  private _overlayRef: OverlayRef | null = null;\n\n  /**\n   * @private Timer handle for the `tooltipDelay` show timer.\n   */\n  private _showTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /**\n   * @private Timer handle for the grace-period hide timer. Gives the pointer\n   * time to travel from the trigger onto the tooltip panel (WCAG 1.4.13).\n   */\n  private _hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /**\n   * @private Grace period (ms) before hiding on mouseleave, allowing the pointer\n   * to reach the hoverable tooltip panel without it disappearing.\n   */\n  private readonly _hideDelay = 150;\n\n  /**\n   * @private Cleanup functions for the panel hover listeners, invoked on hide.\n   */\n  private _panelListeners: (() => void)[] = [];\n\n  /**\n   * @private Stable unique ID for this tooltip instance, used by `aria-describedby`.\n   */\n  private readonly _tooltipId = mlvNextId('mlv-tooltip');\n\n  constructor() {\n    this._destroyRef.onDestroy(() => {\n      this._clearShowTimer();\n      this._clearHideTimer();\n      this._hide();\n    });\n  }\n\n  // ─── Protected host event handlers ────────────────────────────────────────\n\n  /** @protected Schedules tooltip display on mouseenter. */\n  protected _onMouseEnter(): void {\n    if (this.tooltipDisabled()) return;\n    this._clearHideTimer();\n    this._scheduleShow();\n  }\n\n  /**\n   * @protected Cancels pending show and schedules a delayed hide on mouseleave.\n   * The grace period lets the pointer move onto the tooltip panel without it\n   * disappearing (WCAG 1.4.13 — content on hover must be hoverable).\n   */\n  protected _onMouseLeave(): void {\n    this._clearShowTimer();\n    this._scheduleHide();\n  }\n\n  /** @protected Schedules tooltip display on focusin (keyboard users). */\n  protected _onFocusIn(): void {\n    if (this.tooltipDisabled()) return;\n    this._scheduleShow();\n  }\n\n  /** @protected Cancels pending show and hides tooltip on focusout. */\n  protected _onFocusOut(): void {\n    this._clearShowTimer();\n    this._hide();\n  }\n\n  /** @protected Cancels pending show and hides tooltip on Escape key. */\n  protected _onEscape(): void {\n    this._clearShowTimer();\n    this._hide();\n  }\n\n  // ─── Private implementation ───────────────────────────────────────────────\n\n  /**\n   * @private Schedules tooltip display after `tooltipDelay` ms inside NgZone.\n   */\n  private _scheduleShow(): void {\n    this._clearShowTimer();\n    const delay = this.tooltipDelay();\n    this._showTimer = setTimeout(() => {\n      this._ngZone.run(() => this._show());\n    }, delay);\n  }\n\n  /**\n   * @private Clears the pending show timer if one is active.\n   */\n  private _clearShowTimer(): void {\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n  }\n\n  /**\n   * @private Schedules the tooltip to hide after the `_hideDelay` grace period.\n   */\n  private _scheduleHide(): void {\n    this._clearHideTimer();\n    this._hideTimer = setTimeout(() => {\n      this._ngZone.run(() => this._hide());\n    }, this._hideDelay);\n  }\n\n  /**\n   * @private Clears the pending hide timer if one is active.\n   */\n  private _clearHideTimer(): void {\n    if (this._hideTimer !== null) {\n      clearTimeout(this._hideTimer);\n      this._hideTimer = null;\n    }\n  }\n\n  /**\n   * @private Creates the CDK overlay, attaches `MlvTooltipPanel`, and wires\n   * `aria-describedby` on the host element. If the tooltip is already visible\n   * this method is a no-op.\n   */\n  private _show(): void {\n    if (this._overlayRef) return;\n\n    const placement = this.tooltipPlacement();\n    const positions = TOOLTIP_POSITIONS[placement];\n\n    const positionStrategy = this._overlay\n      .position()\n      .flexibleConnectedTo(this._elementRef)\n      .withPositions(positions)\n      .withPush(false) as FlexibleConnectedPositionStrategy;\n\n    this._overlayRef = this._overlay.create({\n      positionStrategy,\n      direction: this._rtl.resolveDirection(this._elementRef),\n      scrollStrategy: this._overlay.scrollStrategies.reposition(),\n      panelClass: 'mlv-tooltip-overlay',\n    });\n\n    // Attach the component via a ComponentPortal with the environment injector\n    const portal = new ComponentPortal(MlvTooltipPanel, null, this._injector);\n    const componentRef = this._overlayRef.attach(portal);\n\n    componentRef.setInput('content', this.mlvTooltip());\n    componentRef.setInput('tone', this.tooltipTone());\n    componentRef.setInput('showArrow', this.tooltipArrow());\n    componentRef.setInput('placement', placement);\n    componentRef.setInput('tooltipId', this._tooltipId);\n\n    this._componentRef = componentRef;\n\n    // Update the arrow direction when CDK resolves the actual position\n    positionStrategy.positionChanges\n      .pipe(takeUntilDestroyed(this._destroyRef))\n      .subscribe((change) => {\n        const resolvedPlacement = resolvePlacementFromPosition(\n          change.connectionPair,\n        );\n        this._componentRef?.setInput('placement', resolvedPlacement);\n      });\n\n    // Keep the tooltip open while the pointer is over the panel, and hide it\n    // (after the grace period) once the pointer leaves the panel. This makes the\n    // hover content hoverable per WCAG 1.4.13.\n    const overlayEl = this._overlayRef.overlayElement;\n    this._panelListeners.push(\n      this._renderer.listen(overlayEl, 'mouseenter', () =>\n        this._clearHideTimer(),\n      ),\n      this._renderer.listen(overlayEl, 'mouseleave', () =>\n        this._scheduleHide(),\n      ),\n    );\n\n    // Wire aria-describedby for accessibility\n    this._renderer.setAttribute(\n      this._elementRef.nativeElement,\n      'aria-describedby',\n      this._tooltipId,\n    );\n  }\n\n  /**\n   * @private Disposes the CDK overlay, destroys the component reference, and\n   * removes `aria-describedby` from the host element.\n   */\n  private _hide(): void {\n    this._clearHideTimer();\n    this._panelListeners.forEach((unlisten) => unlisten());\n    this._panelListeners = [];\n    if (this._overlayRef) {\n      this._overlayRef.dispose();\n      this._overlayRef = null;\n    }\n    this._componentRef = null;\n    this._renderer.removeAttribute(\n      this._elementRef.nativeElement,\n      'aria-describedby',\n    );\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/malva-ui-core-tree.mjs

@@ -0,0 +1,505 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, InjectionToken, input, ChangeDetectionStrategy, ViewEncapsulation, Component, output, signal, computed, contentChild, forwardRef } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { TreeItem, TreeItemGroup, Tree } from '@angular/aria/tree';
+import { NgTemplateOutlet } from '@angular/common';
+import { MlvLoader } from '@malva-ui/core/loader';
+import { MlvExpand } from '@malva-ui/core/expand';
+import { MlvCheckbox } from '@malva-ui/core/checkbox';
+import { LucideChevronRight, LucideChevronDown, LucideDynamicIcon } from '@lucide/angular';
+
+/**
+ * Structural directive that marks a `<ng-template>` as a custom node template.
+ *
+ * Usage:
+ * ```html
+ * <mlv-tree [nodes]="nodes">
+ *   <ng-template mlvTreeNodeDef let-flatNode>
+ *     <span>{{ flatNode.node.label }}</span>
+ *   </ng-template>
+ * </mlv-tree>
+ * ```
+ */
+class MlvTreeNodeDef {
+    /** The template reference for this custom node slot. */
+    templateRef = inject((TemplateRef));
+    /**
+     * Type guard for correct template variable inference.
+     * @internal
+     */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTreeNodeDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvTreeNodeDef, isStandalone: true, selector: "[mlvTreeNodeDef]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTreeNodeDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvTreeNodeDef]',
+                }]
+        }] });
+
+/**
+ * Injection token that provides the parent `MlvTree` as a
+ * `MlvTreeAccessor` to nested `MlvTreeSubtree` instances.
+ */
+const MLV_TREE = new InjectionToken('MLV_TREE');
+
+/**
+ * Internal recursive subtree component used by `MlvTree`.
+ *
+ * Renders one level of `<div ngTreeItem>` rows using the `@angular/aria`
+ * `Tree`/`TreeItem`/`TreeItemGroup` headless directives (applied here so aria
+ * owns roles, `aria-level`/`setsize`/`posinset`, roving `tabindex`, keyboard
+ * navigation, typeahead and selection). Children are wrapped in
+ * `<ng-template ngTreeItemGroup>` + `mlv-expand` for the animated height
+ * transition; `[preserveContent]="true"` keeps aria's `DeferredContent` from
+ * unmounting the group so `mlv-expand` can own the enter/leave animation.
+ *
+ * The recursion is expressed as **nested components** (not a self-referential
+ * `ngTemplateOutlet`, which throws `createEmbeddedViewImpl is not a function`
+ * when rendered through aria's `DeferredContent`).
+ *
+ * @internal Not part of the public API — use `MlvTree` instead.
+ */
+class MlvTreeSubtree {
+    /** The nodes to render at this level. */
+    nodes = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /**
+     * The aria parent for this level's items — the `Tree` root for the top level,
+     * or the owning `TreeItemGroup` for a nested level. Required: aria's
+     * `TreeItem` needs a defined `parent` from creation (its `level`/`selected`
+     * patterns dereference it) — an undefined parent crashes rendering.
+     */
+    parent = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parent" }] : /* istanbul ignore next */ []));
+    /** The depth of this level (0 = root). Drives indentation and connectors. */
+    depth = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+    /** @protected The parent tree context injected via `MLV_TREE`. */
+    tree = inject(MLV_TREE);
+    /**
+     * @private Per-node cache of the `[mlvTreeNodeDef]` template context and its
+     * `ngTemplateOutlet` wrapper, keyed by node identity. The entry is rebuilt for
+     * a node only when one of its derived fields actually changes, so the context
+     * object identity stays stable across change detection — the custom template
+     * (and any OnPush children inside it) is not re-stamped against a freshly
+     * allocated context object on every pass.
+     */
+    _contextCache = new WeakMap();
+    /**
+     * @protected Returns the identity-stable `ngTemplateOutlet` context wrapper for
+     * a node's `[mlvTreeNodeDef]` template. Preserves the public context shape
+     * (`let-flatNode` → `MlvFlatTreeNode`). Derived from the node + component state
+     * rather than aria's `TreeItem` patterns (which are only available after the
+     * item's `ngOnInit`). A new wrapper (and `MlvFlatTreeNode`) is produced only when
+     * a field changes, so unchanged rows keep a stable context reference across
+     * change detection.
+     */
+    _nodeContext(node) {
+        const depth = this.depth();
+        const isExpanded = this.tree._isExpanded(node.id);
+        const hasChildren = this.tree._hasChildren(node);
+        const isLoading = this.tree._isLoading(node.id);
+        const cached = this._contextCache.get(node);
+        if (cached &&
+            cached.ctx.depth === depth &&
+            cached.ctx.isExpanded === isExpanded &&
+            cached.ctx.hasChildren === hasChildren &&
+            cached.ctx.isLoading === isLoading) {
+            return cached.wrapper;
+        }
+        const ctx = {
+            node,
+            depth,
+            isExpanded,
+            hasChildren,
+            isLoading,
+            key: node.id,
+        };
+        const wrapper = { $implicit: ctx };
+        this._contextCache.set(node, { ctx, wrapper });
+        return wrapper;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTreeSubtree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvTreeSubtree, isStandalone: true, selector: "mlv-tree-subtree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mlv-tree__subtree" }, ngImport: i0, template: "@for (node of nodes(); track node.id) {\n<div\n  ngTreeItem\n  #item=\"ngTreeItem\"\n  class=\"mlv-tree__item\"\n  [parent]=\"parent()\"\n  [value]=\"node.id\"\n  [label]=\"node.label\"\n  [disabled]=\"!!node.disabled\"\n  [selectable]=\"tree.selectMode() !== 'none'\"\n  [preserveContent]=\"true\"\n  [expanded]=\"tree._isExpanded(node.id)\"\n  (expandedChange)=\"tree._onExpandedChange(node, $event)\"\n  [class.mlv-tree__item--expanded]=\"item.expanded()\"\n  [class.mlv-tree__item--selected]=\"tree._isSelected(node.id)\"\n  [class.mlv-tree__item--disabled]=\"node.disabled\"\n  [class.mlv-tree__item--leaf]=\"!tree._hasChildren(node)\"\n  [class.mlv-tree__item--loading]=\"tree._isLoading(node.id)\"\n  [style.padding-inline-start]=\"depth() * tree.indentSize() + 'rem'\"\n  (click)=\"tree._onRowClick(node, $event)\"\n  (keydown.enter)=\"tree._onActivateKey(node)\"\n  (keydown.space)=\"tree._onActivateKey(node)\"\n>\n  <div class=\"mlv-tree__item__content\">\n    @if (tree._hasChildren(node); as hasChildren) {\n    <!-- Expand/collapse toggle \u2014 swap chevron icon based on state -->\n    <button\n      class=\"mlv-tree__toggle\"\n      [class.mlv-tree__toggle--expanded]=\"item.expanded()\"\n      type=\"button\"\n      tabindex=\"-1\"\n      [attr.aria-label]=\"\n          item.expanded() ? 'Collapse ' + node.label : 'Expand ' + node.label\n        \"\n      (click)=\"tree._onToggle(node, item, $event)\"\n    >\n      @if (!tree._isLoading(node.id)) { @if (item.expanded()) {\n      <svg lucideChevronDown [size]=\"16\" />\n      } @else {\n      <svg lucideChevronRight [size]=\"16\" />\n      } }\n    </button>\n    }\n\n    <!-- Loading spinner (lazy load in progress) -->\n    @if (tree._isLoading(node.id)) {\n    <span class=\"mlv-tree__spinner\" aria-hidden=\"true\">\n      <mlv-loader\n        variant=\"circle\"\n        [size]=\"16\"\n        [indeterminate]=\"true\"\n        ariaLabel=\"Loading children\"\n      />\n    </span>\n    }\n\n    <!-- Multi-select checkbox \u2014 presentational reflection of aria selection. -->\n    @if (tree.selectMode() === 'multi') {\n    <mlv-checkbox\n      class=\"mlv-tree__checkbox\"\n      [checked]=\"tree._isSelected(node.id)\"\n      [disabled]=\"!!node.disabled\"\n      [tabbable]=\"false\"\n      [ariaLabel]=\"'Select ' + node.label\"\n    />\n    }\n\n    <!-- Node content: custom template or default label -->\n    <span class=\"mlv-tree__content\">\n      @if (tree._nodeDefDirective(); as def) {\n      <ng-template\n        [ngTemplateOutlet]=\"def.templateRef\"\n        [ngTemplateOutletContext]=\"_nodeContext(node)\"\n      />\n      } @else { @if (node.icon) {\n      <svg\n        class=\"mlv-tree__icon\"\n        [lucideIcon]=\"node.icon\"\n        [size]=\"16\"\n        aria-hidden=\"true\"\n      ></svg>\n      }\n      <span class=\"mlv-tree__label\">{{ node.label }}</span>\n      }\n    </span>\n  </div>\n\n  <!-- Children: aria group + mlv-expand animated height transition -->\n  @if (tree._hasChildren(node)) {\n  <div\n    role=\"group\"\n    class=\"mlv-tree__group\"\n    [style.--mlv-tree-connector-offset]=\"\n          (depth() + 1) * tree.indentSize() + 0.75 + 'rem'\n        \"\n  >\n    <ng-template ngTreeItemGroup [ownedBy]=\"item\" #group=\"ngTreeItemGroup\">\n      <mlv-expand [opened]=\"item.expanded()\">\n        @if (!tree._isLoading(node.id)) {\n        <mlv-tree-subtree\n          [nodes]=\"tree._children(node)\"\n          [parent]=\"group\"\n          [depth]=\"depth() + 1\"\n        />\n        }\n      </mlv-expand>\n    </ng-template>\n  </div>\n  }\n</div>\n}\n", dependencies: [{ kind: "component", type: MlvTreeSubtree, selector: "mlv-tree-subtree", inputs: ["nodes", "parent", "depth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TreeItem, selector: "[ngTreeItem]", inputs: ["id", "value", "parent", "disabled", "selectable", "expanded", "label"], outputs: ["expandedChange"], exportAs: ["ngTreeItem"] }, { kind: "directive", type: TreeItemGroup, selector: "ng-template[ngTreeItemGroup]", inputs: ["ownedBy"], exportAs: ["ngTreeItemGroup"] }, { kind: "component", type: MlvLoader, selector: "mlv-loader", inputs: ["variant", "tone", "value", "max", "indeterminate", "size", "strokeWidth", "ariaLabel", "showHint", "color", "trackColor", "glow"] }, { kind: "component", type: MlvExpand, selector: "mlv-expand", inputs: ["opened", "disabled", "ariaLabel", "ariaLabelledBy"], outputs: ["openedChange"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: MlvCheckbox, selector: "mlv-checkbox", inputs: ["ariaLabelledBy", "checked", "indeterminate", "tabbable"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTreeSubtree, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-tree-subtree', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        TreeItem,
+                        TreeItemGroup,
+                        MlvLoader,
+                        MlvExpand,
+                        LucideChevronRight,
+                        LucideChevronDown,
+                        LucideDynamicIcon,
+                        MlvCheckbox,
+                        MlvTreeSubtree,
+                    ], host: {
+                        class: 'mlv-tree__subtree',
+                    }, template: "@for (node of nodes(); track node.id) {\n<div\n  ngTreeItem\n  #item=\"ngTreeItem\"\n  class=\"mlv-tree__item\"\n  [parent]=\"parent()\"\n  [value]=\"node.id\"\n  [label]=\"node.label\"\n  [disabled]=\"!!node.disabled\"\n  [selectable]=\"tree.selectMode() !== 'none'\"\n  [preserveContent]=\"true\"\n  [expanded]=\"tree._isExpanded(node.id)\"\n  (expandedChange)=\"tree._onExpandedChange(node, $event)\"\n  [class.mlv-tree__item--expanded]=\"item.expanded()\"\n  [class.mlv-tree__item--selected]=\"tree._isSelected(node.id)\"\n  [class.mlv-tree__item--disabled]=\"node.disabled\"\n  [class.mlv-tree__item--leaf]=\"!tree._hasChildren(node)\"\n  [class.mlv-tree__item--loading]=\"tree._isLoading(node.id)\"\n  [style.padding-inline-start]=\"depth() * tree.indentSize() + 'rem'\"\n  (click)=\"tree._onRowClick(node, $event)\"\n  (keydown.enter)=\"tree._onActivateKey(node)\"\n  (keydown.space)=\"tree._onActivateKey(node)\"\n>\n  <div class=\"mlv-tree__item__content\">\n    @if (tree._hasChildren(node); as hasChildren) {\n    <!-- Expand/collapse toggle \u2014 swap chevron icon based on state -->\n    <button\n      class=\"mlv-tree__toggle\"\n      [class.mlv-tree__toggle--expanded]=\"item.expanded()\"\n      type=\"button\"\n      tabindex=\"-1\"\n      [attr.aria-label]=\"\n          item.expanded() ? 'Collapse ' + node.label : 'Expand ' + node.label\n        \"\n      (click)=\"tree._onToggle(node, item, $event)\"\n    >\n      @if (!tree._isLoading(node.id)) { @if (item.expanded()) {\n      <svg lucideChevronDown [size]=\"16\" />\n      } @else {\n      <svg lucideChevronRight [size]=\"16\" />\n      } }\n    </button>\n    }\n\n    <!-- Loading spinner (lazy load in progress) -->\n    @if (tree._isLoading(node.id)) {\n    <span class=\"mlv-tree__spinner\" aria-hidden=\"true\">\n      <mlv-loader\n        variant=\"circle\"\n        [size]=\"16\"\n        [indeterminate]=\"true\"\n        ariaLabel=\"Loading children\"\n      />\n    </span>\n    }\n\n    <!-- Multi-select checkbox \u2014 presentational reflection of aria selection. -->\n    @if (tree.selectMode() === 'multi') {\n    <mlv-checkbox\n      class=\"mlv-tree__checkbox\"\n      [checked]=\"tree._isSelected(node.id)\"\n      [disabled]=\"!!node.disabled\"\n      [tabbable]=\"false\"\n      [ariaLabel]=\"'Select ' + node.label\"\n    />\n    }\n\n    <!-- Node content: custom template or default label -->\n    <span class=\"mlv-tree__content\">\n      @if (tree._nodeDefDirective(); as def) {\n      <ng-template\n        [ngTemplateOutlet]=\"def.templateRef\"\n        [ngTemplateOutletContext]=\"_nodeContext(node)\"\n      />\n      } @else { @if (node.icon) {\n      <svg\n        class=\"mlv-tree__icon\"\n        [lucideIcon]=\"node.icon\"\n        [size]=\"16\"\n        aria-hidden=\"true\"\n      ></svg>\n      }\n      <span class=\"mlv-tree__label\">{{ node.label }}</span>\n      }\n    </span>\n  </div>\n\n  <!-- Children: aria group + mlv-expand animated height transition -->\n  @if (tree._hasChildren(node)) {\n  <div\n    role=\"group\"\n    class=\"mlv-tree__group\"\n    [style.--mlv-tree-connector-offset]=\"\n          (depth() + 1) * tree.indentSize() + 0.75 + 'rem'\n        \"\n  >\n    <ng-template ngTreeItemGroup [ownedBy]=\"item\" #group=\"ngTreeItemGroup\">\n      <mlv-expand [opened]=\"item.expanded()\">\n        @if (!tree._isLoading(node.id)) {\n        <mlv-tree-subtree\n          [nodes]=\"tree._children(node)\"\n          [parent]=\"group\"\n          [depth]=\"depth() + 1\"\n        />\n        }\n      </mlv-expand>\n    </ng-template>\n  </div>\n  }\n</div>\n}\n" }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], parent: [{ type: i0.Input, args: [{ isSignal: true, alias: "parent", required: true }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }] } });
+
+/**
+ * Hierarchical data tree component for displaying nested data.
+ *
+ * Built on the `@angular/aria` headless `Tree`/`TreeItem`/`TreeItemGroup`
+ * directives (applied inside the component — consumers never see `ng*`
+ * selectors). aria owns roles, `aria-level`/`setsize`/`posinset`, roving
+ * `tabindex`, keyboard navigation (arrows, Home/End), text typeahead, and
+ * selection; the component keeps the Malva UI data-driven `nodes` API, the
+ * `mlv-expand` animated expand/collapse, lazy loading, custom node templates,
+ * and multi-select checkboxes.
+ *
+ * Features:
+ * - Expand/collapse nodes with smooth animated height transition via `mlv-expand`
+ * - Single-select and multi-select checkbox mode
+ * - Lazy loading via `loadChildren` callbacks with spinner
+ * - Full keyboard navigation and text typeahead (owned by `@angular/aria`)
+ * - Custom node templates via `[mlvTreeNodeDef]`
+ * - Optional navigation-tree mode (`nav` + `currentType`) for sidebar-style trees
+ * - Generic typed `MlvTreeNode<T>` interface
+ * - Recursive rendering via internal `MlvTreeSubtree`
+ *
+ * @example
+ * ```html
+ * <mlv-tree [nodes]="treeData" selectMode="multi" (selectionChange)="onSelect($event)" />
+ * ```
+ */
+class MlvTree {
+    /** The tree nodes to render. Supports nested children. */
+    nodes = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    /**
+     * Selection mode:
+     * - `'none'` — no selection (default); rows are activated (`nodeActivate`)
+     * - `'single'` — click/Space/Enter selects one node at a time
+     * - `'multi'` — checkbox-based multi-select
+     */
+    selectMode = input('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
+    /** Indentation per depth level in `rem`. Defaults to `1.5`. */
+    indentSize = input(1.5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indentSize" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, renders vertical and horizontal connector lines between parent and child nodes
+     * (file-explorer pattern). Defaults to `false`.
+     */
+    showConnectors = input(false, { ...(ngDevMode ? { debugName: "showConnectors" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When true, the tree renders as a navigation tree: selected rows expose
+     * `aria-current` (of `currentType`) instead of `aria-selected`. Suited to
+     * sidebar-style navigation trees. Defaults to `false`.
+     */
+    nav = input(false, { ...(ngDevMode ? { debugName: "nav" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** The `aria-current` type used when `nav` is enabled. Defaults to `'page'`. */
+    currentType = input('page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentType" }] : /* istanbul ignore next */ []));
+    /** Emits the set of selected node IDs whenever the selection changes. */
+    selectionChange = output();
+    /** Emits when a node is activated (clicked or Enter in single-select/none mode). */
+    nodeActivate = output();
+    /** Emits when a node's expanded state changes. */
+    nodeToggle = output();
+    /**
+     * @public Selected node ids, mirrored to the aria `Tree.value` model (aria
+     * selection is always an array — a single-select tree holds at most one id).
+     */
+    _value = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Selection membership set derived from `_value`. Rebuilt only when
+     * the selection changes, giving `_isSelected` an O(1) lookup instead of an
+     * O(selected) array scan on every node (twice per row) per change-detection
+     * pass. Mirrors the `_expandedIds`/`_loadingIds` Set pattern.
+     */
+    _selectedIdSet = computed(() => new Set(this._value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectedIdSet" }] : /* istanbul ignore next */ []));
+    /** @public Internal expansion state set (node id → expanded). */
+    _expandedIds = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_expandedIds" }] : /* istanbul ignore next */ []));
+    /** @public Map of node id → loaded children (for lazy nodes). */
+    _loadedChildren = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_loadedChildren" }] : /* istanbul ignore next */ []));
+    /** @private Set of node ids currently loading lazy children. */
+    _loadingIds = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_loadingIds" }] : /* istanbul ignore next */ []));
+    /** @public The custom node template if provided. */
+    _nodeDefDirective = contentChild((MlvTreeNodeDef), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_nodeDefDirective" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        // Seed expansion state from nodes flagged `expanded: true`.
+        const initialExpanded = new Set();
+        this._collectInitialExpanded(this.nodes(), initialExpanded);
+        this._expandedIds.set(initialExpanded);
+    }
+    /** @private Collect nodes that have `expanded: true` initially. */
+    _collectInitialExpanded(nodes, result) {
+        for (const node of nodes) {
+            if (node.expanded) {
+                result.add(node.id);
+            }
+            if (node.children?.length) {
+                this._collectInitialExpanded(node.children, result);
+            }
+        }
+    }
+    // --- MlvTreeAccessor: state queries -------------------------------------
+    /** @public Whether the given node id is currently expanded. */
+    _isExpanded(id) {
+        return this._expandedIds().has(id);
+    }
+    /** @public Whether the given node id is currently loading lazy children. */
+    _isLoading(id) {
+        return this._loadingIds().has(id);
+    }
+    /** @public Whether the given node id is currently selected. */
+    _isSelected(id) {
+        return this._selectedIdSet().has(id);
+    }
+    /**
+     * @public Effective children of a node — lazily-loaded children when present,
+     * otherwise the static `children` array.
+     */
+    _children(node) {
+        return this._loadedChildren().get(node.id) ?? node.children ?? [];
+    }
+    /** @public Whether a node renders an expandable group (static/loaded/lazy children). */
+    _hasChildren(node) {
+        return this._children(node).length > 0 || !!node.loadChildren;
+    }
+    // --- MlvTreeAccessor: interaction ---------------------------------------
+    /**
+     * @public Reacts to the aria `TreeItem.expanded` model changing (keyboard,
+     * pointer, chevron, or programmatic). Syncs the expansion set, triggers lazy
+     * loading, and emits `nodeToggle`.
+     */
+    _onExpandedChange(node, expanded) {
+        if (expanded) {
+            this._expandedIds.update((s) => {
+                const next = new Set(s);
+                next.add(node.id);
+                return next;
+            });
+            if (node.loadChildren &&
+                !this._loadedChildren().has(node.id) &&
+                !this._loadingIds().has(node.id)) {
+                this._loadLazy(node);
+            }
+            this.nodeToggle.emit({ node, expanded: true });
+        }
+        else {
+            this._expandedIds.update((s) => {
+                const next = new Set(s);
+                next.delete(node.id);
+                return next;
+            });
+            this.nodeToggle.emit({ node, expanded: false });
+        }
+    }
+    /**
+     * @public Chevron toggle handler. Guards disabled nodes, stops propagation so
+     * the aria tree does not also select the row, and flips the aria item's
+     * `expanded` model (which routes through `_onExpandedChange`).
+     */
+    _onToggle(node, item, event) {
+        event.stopPropagation();
+        if (node.disabled)
+            return;
+        item.expanded.set(!item.expanded());
+    }
+    /**
+     * @public Row pointer handler. Emits `nodeActivate` in `none` mode and
+     * implements the single-select deselect-on-re-click affordance (aria's
+     * `selectOne` never deselects on its own).
+     */
+    _onRowClick(node, event) {
+        if (node.disabled)
+            return;
+        const mode = this.selectMode();
+        if (mode === 'none') {
+            this.nodeActivate.emit(node);
+            return;
+        }
+        if (mode === 'single') {
+            const current = this._value();
+            if (current.length === 1 && current[0] === node.id) {
+                // Re-clicking the sole selected node clears it. aria's selectOne would
+                // re-select it, so clear the model and stop the aria tree click.
+                this._value.set([]);
+                this.selectionChange.emit(new Set());
+                event.stopPropagation();
+            }
+            // First selection: aria selectOne handles it; `nodeActivate` is emitted
+            // from `_onAriaValueChange` (covers pointer and keyboard selection).
+        }
+        // multi mode: aria toggles selection on row click; no `nodeActivate`.
+    }
+    /** @public Row Enter/Space handler used to emit `nodeActivate` in `none` mode. */
+    _onActivateKey(node) {
+        if (node.disabled)
+            return;
+        if (this.selectMode() === 'none') {
+            this.nodeActivate.emit(node);
+        }
+    }
+    /**
+     * @public Bridges the aria `Tree.value` model to `selectionChange`. Also
+     * emits `nodeActivate` for user-driven single-select (pointer or keyboard);
+     * programmatic selection goes through `setSelection` instead.
+     */
+    _onAriaValueChange(value) {
+        this._value.set(value);
+        this.selectionChange.emit(new Set(value));
+        if (this.selectMode() === 'single' && value.length === 1) {
+            const node = this._findNode(value[0]);
+            if (node) {
+                this.nodeActivate.emit(node);
+            }
+        }
+    }
+    /** @private Load lazy children then keep the node expanded to reveal them. */
+    _loadLazy(node) {
+        if (!node.loadChildren)
+            return;
+        this._loadingIds.update((s) => {
+            const next = new Set(s);
+            next.add(node.id);
+            return next;
+        });
+        node.loadChildren().then((children) => {
+            this._loadedChildren.update((m) => {
+                const next = new Map(m);
+                next.set(node.id, children);
+                return next;
+            });
+            this._loadingIds.update((s) => {
+                const next = new Set(s);
+                next.delete(node.id);
+                return next;
+            });
+        });
+    }
+    /** @private Recursively find a node by id across static and loaded children. */
+    _findNode(id) {
+        const search = (list) => {
+            for (const node of list) {
+                if (node.id === id)
+                    return node;
+                const children = this._loadedChildren().get(node.id) ?? node.children ?? [];
+                const found = search(children);
+                if (found)
+                    return found;
+            }
+            return undefined;
+        };
+        return search(this.nodes());
+    }
+    // --- Programmatic API -----------------------------------------------------
+    /** @public Exposes the currently selected node ids. */
+    get selectedIds() {
+        return new Set(this._value());
+    }
+    /** Programmatically set the selected node IDs. */
+    setSelection(ids) {
+        this._value.set([...ids]);
+        this.selectionChange.emit(new Set(ids));
+    }
+    /** Programmatically expand a node by ID. */
+    expandNode(nodeId) {
+        this._expandedIds.update((s) => {
+            const next = new Set(s);
+            next.add(nodeId);
+            return next;
+        });
+    }
+    /** Programmatically collapse a node by ID. */
+    collapseNode(nodeId) {
+        this._expandedIds.update((s) => {
+            const next = new Set(s);
+            next.delete(nodeId);
+            return next;
+        });
+    }
+    /** Expand all nodes. */
+    expandAll() {
+        const allIds = new Set();
+        this._collectAllIds(this.nodes(), allIds);
+        this._expandedIds.set(allIds);
+    }
+    /** Collapse all nodes. */
+    collapseAll() {
+        this._expandedIds.set(new Set());
+    }
+    /** @private Collect all node IDs recursively. */
+    _collectAllIds(nodes, result) {
+        for (const node of nodes) {
+            result.add(node.id);
+            if (node.children?.length) {
+                this._collectAllIds(node.children, result);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MlvTree, isStandalone: true, selector: "mlv-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, showConnectors: { classPropertyName: "showConnectors", publicName: "showConnectors", isSignal: true, isRequired: false, transformFunction: null }, nav: { classPropertyName: "nav", publicName: "nav", isSignal: true, isRequired: false, transformFunction: null }, currentType: { classPropertyName: "currentType", publicName: "currentType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeActivate: "nodeActivate", nodeToggle: "nodeToggle" }, host: { properties: { "class.mlv-tree--connectors": "showConnectors()" }, classAttribute: "mlv-tree" }, providers: [
+            {
+                provide: MLV_TREE,
+                useExisting: forwardRef(() => MlvTree),
+            },
+        ], queries: [{ propertyName: "_nodeDefDirective", first: true, predicate: (MlvTreeNodeDef), descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      class="mlv-tree__root"
+      ngTree
+      #root="ngTree"
+      [multi]="selectMode() === 'multi'"
+      [selectionMode]="'explicit'"
+      [softDisabled]="true"
+      [wrap]="false"
+      [nav]="nav()"
+      [currentType]="currentType()"
+      [value]="_value()"
+      (valueChange)="_onAriaValueChange($event)"
+    >
+      <mlv-tree-subtree [nodes]="nodes()" [parent]="root" [depth]="0" />
+    </div>
+  `, isInline: true, styles: ["@layer mlv.components{.mlv-tree{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-tree *{box-sizing:border-box}.mlv-tree{display:block;width:100%;outline:none}.mlv-tree__list{display:flex;flex-direction:column;gap:0}.mlv-tree__root,.mlv-tree__subtree{display:contents}.mlv-tree__group{display:block}.mlv-tree__item__content{display:flex;align-items:center;gap:.5rem;min-height:var(--mlv-height-m);padding-block:.375rem;padding-inline-start:.5rem;padding-inline-end:.75rem;border-radius:var(--mlv-radius-m);cursor:pointer;color:var(--mlv-text-primary);transition:background-color var(--mlv-duration-normal) var(--mlv-ease-out),color var(--mlv-duration-normal) var(--mlv-ease-out);-webkit-user-select:none;user-select:none;position:relative}.mlv-tree__item__content:hover:not(.mlv-tree__item__content--disabled){background-color:var(--mlv-background-neutral-1-hover)}.mlv-tree__item__content:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-tree__item__content--selected:not(.mlv-tree__item__content--disabled){background-color:var(--mlv-background-accent-2);color:var(--mlv-text-action)}.mlv-tree__item__content--selected:not(.mlv-tree__item__content--disabled):hover{background-color:var(--mlv-background-accent-2-hover)}.mlv-tree__item__content--disabled{opacity:var(--mlv-disabled-opacity);cursor:not-allowed;pointer-events:none}.mlv-tree__item__content__content{display:flex;align-items:center;gap:.5rem}.mlv-tree__toggle{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-tree__toggle *{box-sizing:border-box}.mlv-tree__toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border:none;background:none;border-radius:var(--mlv-radius-s);cursor:pointer;color:var(--mlv-text-action);transition:color var(--mlv-duration-normal) var(--mlv-ease-out),background-color var(--mlv-duration-normal) var(--mlv-ease-out)}.mlv-tree__toggle:hover{background-color:var(--mlv-background-neutral-1-hover);color:var(--mlv-text-primary)}.mlv-tree__toggle--expanded{color:var(--mlv-text-action)}.mlv-tree__toggle--invisible{visibility:hidden;pointer-events:none}.mlv-tree__spinner{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.mlv-tree__checkbox{flex-shrink:0;pointer-events:none}.mlv-tree__checkbox.mlv-checkbox{margin:0}.mlv-tree__content{display:flex;align-items:center;flex:1;min-width:0;gap:.5rem;line-height:1.4}.mlv-tree__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mlv-tree__icon{flex-shrink:0;color:var(--mlv-text-secondary)}.mlv-tree__item--selected .mlv-tree__icon{color:var(--mlv-text-action)}.mlv-tree .mlv-expand{--mlv-duration-slow: var(--mlv-duration-normal)}.mlv-tree .mlv-expand .mlv-expand__body--enter{animation-name:mlv-tree--enter}.mlv-tree .mlv-expand .mlv-expand__body--leave{animation-name:mlv-tree--leave}@media(prefers-reduced-motion:reduce){.mlv-tree .mlv-expand .mlv-expand__body--enter,.mlv-tree .mlv-expand .mlv-expand__body--leave{animation:none}}.mlv-tree--connectors .mlv-tree__group{position:relative}.mlv-tree--connectors .mlv-tree__group:before{content:\"\";position:absolute;top:0;inset-inline-start:var(--mlv-tree-connector-offset, .75rem);bottom:0;width:var(--mlv-stroke-width);background-color:var(--mlv-border-subtle)}.mlv-tree--connectors .mlv-tree__group .mlv-tree__item{position:relative}.mlv-tree--connectors .mlv-tree__group .mlv-tree__item:before{content:\"\";position:absolute;top:50%;inset-inline-start:calc(var(--mlv-tree-connector-offset, .75rem) - .5rem);width:.75rem;height:var(--mlv-stroke-width);background-color:var(--mlv-border-subtle)}@keyframes mlv-tree--enter{0%{grid-template-rows:0fr;opacity:0}60%{grid-template-rows:1fr}to{grid-template-rows:1fr;opacity:1}}@keyframes mlv-tree--leave{0%{grid-template-rows:1fr;opacity:1}40%{opacity:0}to{grid-template-rows:0fr;opacity:0}}}\n"], dependencies: [{ kind: "directive", type: Tree, selector: "[ngTree]", inputs: ["id", "orientation", "multi", "disabled", "selectionMode", "focusMode", "wrap", "softDisabled", "typeaheadDelay", "tabindex", "value", "nav", "currentType"], outputs: ["valueChange"], exportAs: ["ngTree"] }, { kind: "component", type: MlvTreeSubtree, selector: "mlv-tree-subtree", inputs: ["nodes", "parent", "depth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTree, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-tree', template: `
+    <div
+      class="mlv-tree__root"
+      ngTree
+      #root="ngTree"
+      [multi]="selectMode() === 'multi'"
+      [selectionMode]="'explicit'"
+      [softDisabled]="true"
+      [wrap]="false"
+      [nav]="nav()"
+      [currentType]="currentType()"
+      [value]="_value()"
+      (valueChange)="_onAriaValueChange($event)"
+    >
+      <mlv-tree-subtree [nodes]="nodes()" [parent]="root" [depth]="0" />
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [Tree, MlvTreeSubtree], providers: [
+                        {
+                            provide: MLV_TREE,
+                            useExisting: forwardRef(() => MlvTree),
+                        },
+                    ], host: {
+                        class: 'mlv-tree',
+                        '[class.mlv-tree--connectors]': 'showConnectors()',
+                    }, styles: ["@layer mlv.components{.mlv-tree{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-tree *{box-sizing:border-box}.mlv-tree{display:block;width:100%;outline:none}.mlv-tree__list{display:flex;flex-direction:column;gap:0}.mlv-tree__root,.mlv-tree__subtree{display:contents}.mlv-tree__group{display:block}.mlv-tree__item__content{display:flex;align-items:center;gap:.5rem;min-height:var(--mlv-height-m);padding-block:.375rem;padding-inline-start:.5rem;padding-inline-end:.75rem;border-radius:var(--mlv-radius-m);cursor:pointer;color:var(--mlv-text-primary);transition:background-color var(--mlv-duration-normal) var(--mlv-ease-out),color var(--mlv-duration-normal) var(--mlv-ease-out);-webkit-user-select:none;user-select:none;position:relative}.mlv-tree__item__content:hover:not(.mlv-tree__item__content--disabled){background-color:var(--mlv-background-neutral-1-hover)}.mlv-tree__item__content:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1)}.mlv-tree__item__content--selected:not(.mlv-tree__item__content--disabled){background-color:var(--mlv-background-accent-2);color:var(--mlv-text-action)}.mlv-tree__item__content--selected:not(.mlv-tree__item__content--disabled):hover{background-color:var(--mlv-background-accent-2-hover)}.mlv-tree__item__content--disabled{opacity:var(--mlv-disabled-opacity);cursor:not-allowed;pointer-events:none}.mlv-tree__item__content__content{display:flex;align-items:center;gap:.5rem}.mlv-tree__toggle{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-tree__toggle *{box-sizing:border-box}.mlv-tree__toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border:none;background:none;border-radius:var(--mlv-radius-s);cursor:pointer;color:var(--mlv-text-action);transition:color var(--mlv-duration-normal) var(--mlv-ease-out),background-color var(--mlv-duration-normal) var(--mlv-ease-out)}.mlv-tree__toggle:hover{background-color:var(--mlv-background-neutral-1-hover);color:var(--mlv-text-primary)}.mlv-tree__toggle--expanded{color:var(--mlv-text-action)}.mlv-tree__toggle--invisible{visibility:hidden;pointer-events:none}.mlv-tree__spinner{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.mlv-tree__checkbox{flex-shrink:0;pointer-events:none}.mlv-tree__checkbox.mlv-checkbox{margin:0}.mlv-tree__content{display:flex;align-items:center;flex:1;min-width:0;gap:.5rem;line-height:1.4}.mlv-tree__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mlv-tree__icon{flex-shrink:0;color:var(--mlv-text-secondary)}.mlv-tree__item--selected .mlv-tree__icon{color:var(--mlv-text-action)}.mlv-tree .mlv-expand{--mlv-duration-slow: var(--mlv-duration-normal)}.mlv-tree .mlv-expand .mlv-expand__body--enter{animation-name:mlv-tree--enter}.mlv-tree .mlv-expand .mlv-expand__body--leave{animation-name:mlv-tree--leave}@media(prefers-reduced-motion:reduce){.mlv-tree .mlv-expand .mlv-expand__body--enter,.mlv-tree .mlv-expand .mlv-expand__body--leave{animation:none}}.mlv-tree--connectors .mlv-tree__group{position:relative}.mlv-tree--connectors .mlv-tree__group:before{content:\"\";position:absolute;top:0;inset-inline-start:var(--mlv-tree-connector-offset, .75rem);bottom:0;width:var(--mlv-stroke-width);background-color:var(--mlv-border-subtle)}.mlv-tree--connectors .mlv-tree__group .mlv-tree__item{position:relative}.mlv-tree--connectors .mlv-tree__group .mlv-tree__item:before{content:\"\";position:absolute;top:50%;inset-inline-start:calc(var(--mlv-tree-connector-offset, .75rem) - .5rem);width:.75rem;height:var(--mlv-stroke-width);background-color:var(--mlv-border-subtle)}@keyframes mlv-tree--enter{0%{grid-template-rows:0fr;opacity:0}60%{grid-template-rows:1fr}to{grid-template-rows:1fr;opacity:1}}@keyframes mlv-tree--leave{0%{grid-template-rows:1fr;opacity:1}40%{opacity:0}to{grid-template-rows:0fr;opacity:0}}}\n"] }]
+        }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], showConnectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConnectors", required: false }] }], nav: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav", required: false }] }], currentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentType", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeActivate: [{ type: i0.Output, args: ["nodeActivate"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }], _nodeDefDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvTreeNodeDef), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MLV_TREE, MlvTree, MlvTreeNodeDef };
+//# sourceMappingURL=malva-ui-core-tree.mjs.map