ngwr 8.0.0 → 9.0.1

package/fesm2022/ngwr-tree.mjs

@@ -1,14 +1,12 @@
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { NgTemplateOutlet } from '@angular/common';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, inject, ElementRef, ViewContainerRef, DestroyRef, signal, computed, viewChild, TemplateRef, effect, forwardRef, ViewEncapsulation, Component } from '@angular/core';
+import { input, model, output, inject, ElementRef, ViewContainerRef, DestroyRef, PLATFORM_ID, signal, computed, viewChild, TemplateRef, effect, untracked, ViewEncapsulation, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { readI18nText, useI18nFormatter } from 'ngwr/i18n';
 import { WR_OVERLAY } from 'ngwr/overlay';
-import { noop } from 'ngwr/utils';
 
 /**
  * @license
@@ -27,9 +25,11 @@ let panelUid = 0;
  * - `'inline'` (default) — renders the tree list in-place. Use as a display
  *   widget or form-less hierarchical picker.
  * - `'overlay'` — renders a `<wr-select>`-style trigger button (with chips
- *   in multi mode) that opens a popover containing the tree. Acts as a
- *   `ControlValueAccessor` — bind via `[(ngModel)]`, `[formControl]`, or
- *   `formControlName`. Replaces the standalone `<wr-tree-select>`.
+ *   in multi mode) that opens a popover containing the tree. A signal-forms
+ *   native control: it implements `FormValueControl<unknown>`, so `[formField]`
+ *   binds straight to its `value` model — no `ControlValueAccessor` in between.
+ *   `[(value)]` and classic `[(ngModel)]` / reactive forms all keep working via
+ *   Angular's bridge. Replaces the standalone `<wr-tree-select>`.
  *
  * Value type in `overlay` mode: `TId | null` in single mode,
  * `readonly TId[]` in multi mode.
@@ -39,17 +39,20 @@ let panelUid = 0;
  * <!-- Inline tree (display widget) -->
  * <wr-tree [nodes]="folders" [(selected)]="picked" [(expanded)]="open" />
  *
- * <!-- Form-bound combobox -->
+ * <!-- Form-bound combobox (signal forms) -->
  * <wr-tree
  *   openOn="overlay"
  *   [nodes]="folders"
  *   selectionMode="single"
- *   [(ngModel)]="picked"
+ *   [formField]="form.folder"
  *   placeholder="Pick a folder"
  * />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-tree openOn="overlay" [nodes]="folders" [(value)]="picked" placeholder="Pick a folder" />
  * ```
  *
- * @see https://ngwr.dev/components/tree
+ * @see https://ngwr.dev/reference/components/tree
  */
 class WrTree {
     /** Tree data. */
@@ -64,7 +67,12 @@ class WrTree {
     /** Selection behavior. @default 'single' */
     selectionMode = input('single', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
-    /** Disable the whole tree. @default false */
+    /**
+     * Disable the whole tree. Bound automatically from the field's disabled
+     * state when used with `[formField]`.
+     *
+     * @default false
+     */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     // Overlay-mode inputs (ignored when openOn='inline')
     /** Render shape. @default 'inline' */
@@ -83,12 +91,48 @@ class WrTree {
     maxTagCount = input(0, { ...(ngDevMode ? { debugName: "maxTagCount" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, Number(v) || 0) });
     /** Auto-expand every node that has children on first open of the overlay. @default false */
     defaultExpandAll = input(false, { ...(ngDevMode ? { debugName: "defaultExpandAll" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Window the visible-node list so a large tree keeps only ~one viewport of
+     * rows in the DOM. Opt-in and OFF by default — a tree without it renders
+     * byte-identically to today. Works in both `inline` and `overlay` shapes;
+     * while on, keyboard navigation switches to the `aria-activedescendant`
+     * pattern so Arrow / Home / End / Enter keep working across un-rendered rows.
+     * @default false
+     */
+    virtualScroll = input(false, { ...(ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Uniform row height in px used to map scroll offset to node index. `0`
+     * (default) measures the first rendered row once and reuses it, so it adapts
+     * to the active density / touch target automatically. Read only when
+     * `virtualScroll` is on. @default 0
+     */
+    rowHeight = input(0, { ...(ngDevMode ? { debugName: "rowHeight" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
+    /**
+     * Height of the scroll viewport when `virtualScroll` is on — a number (px) or
+     * any CSS length (`'60vh'`). A numeric px value lets the server prerender the
+     * exact first window. @default 288
+     */
+    viewportHeight = input(288, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+    /** Extra rows kept rendered above and below the viewport as scroll headroom. @default 6 */
+    overscan = input(6, { ...(ngDevMode ? { debugName: "overscan" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 6)) });
+    /**
+     * Form value — the current selection as seen by a bound field. Bound by
+     * `[formField]`, or two-way via `[(value)]`. Shape follows `selectionMode`:
+     * `TId | null` in single mode, `readonly TId[]` in multi mode. Meaningful in
+     * `overlay` mode; inline mode drives selection via `[(selected)]` instead.
+     */
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emitted on blur so a bound field can mark itself touched. */
+    touch = output();
     // Internals
     host = inject(ElementRef);
     overlay = inject(WR_OVERLAY);
     vcr = inject(ViewContainerRef);
     scrollStrategies = inject(ScrollStrategyOptions);
     destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
     /** Currently focused row's index in the flattened visible list. */
     focusedIndex = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
@@ -102,12 +146,12 @@ class WrTree {
         const expanded = new Set(this.expanded());
         const out = [];
         const walk = (list, depth) => {
-            for (const node of list) {
+            list.forEach((node, i) => {
                 const hasChildren = (node.children?.length ?? 0) > 0;
-                out.push({ node, depth, hasChildren });
+                out.push({ node, depth, hasChildren, index: out.length, posinset: i + 1, setsize: list.length });
                 if (hasChildren && expanded.has(node.id))
                     walk(node.children, depth + 1);
-            }
+            });
         };
         walk(this.nodes(), 0);
         return out;
@@ -168,13 +212,9 @@ class WrTree {
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     /** Trigger / panel id for `aria-controls`. */
     panelId = `wr-tree-panel-${++panelUid}`;
-    disabledFromCva = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const parts = ['wr-tree'];
-        if (this.isDisabled())
+        if (this.disabled())
             parts.push('wr-tree--disabled');
         if (this.isOverlay()) {
             parts.push('wr-tree--combobox');
@@ -188,10 +228,103 @@ class WrTree {
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     panelTpl = viewChild('panelTpl', { ...(ngDevMode ? { debugName: "panelTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
     overlayRef = null;
-    // ControlValueAccessor
-    onChange = noop;
-    /** @internal exposed so the trigger can fire on blur. */
-    onTouched = noop;
+    // --- Virtual scroll -------------------------------------------------------
+    static FALLBACK_ROW_PX = 32;
+    static FALLBACK_VIEWPORT_PX = 288;
+    /** Live vertical scroll offset (px); 0 on the server / before first scroll. */
+    scrollTop = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []));
+    /** Measured viewport clientHeight (px); 0 until the browser observer fires. */
+    viewportPx = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportPx" }] : /* istanbul ignore next */ []));
+    /** Measured first-row height (px) when `rowHeight` is auto; 0 until measured. */
+    measuredRowPx = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuredRowPx" }] : /* istanbul ignore next */ []));
+    /** Virtualization active (opt-in and there is anything to window). */
+    virtualized = computed(() => this.virtualScroll() && this.flat().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualized" }] : /* istanbul ignore next */ []));
+    /** Effective uniform row height (px). */
+    effRowH = computed(() => this.rowHeight() > 0 ? this.rowHeight() : this.measuredRowPx() || WrTree.FALLBACK_ROW_PX, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effRowH" }] : /* istanbul ignore next */ []));
+    /** Deterministic viewport px for SSR + first paint (numeric height, else fallback). */
+    fallbackViewportPx = computed(() => {
+        const h = this.viewportHeight();
+        if (typeof h === 'number')
+            return h;
+        return /^\d+$/.test(h) ? Number(h) : WrTree.FALLBACK_VIEWPORT_PX;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fallbackViewportPx" }] : /* istanbul ignore next */ []));
+    /** `viewportHeight` as a CSS length for the inline max-height (bare number → px). */
+    resolvedViewportHeight = computed(() => {
+        const h = this.viewportHeight();
+        return typeof h === 'number' || /^\d+$/.test(h) ? `${h}px` : h;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedViewportHeight" }] : /* istanbul ignore next */ []));
+    /** Rendered window [start,end) + spacer pads (px). Pure math from `scrollTop`. */
+    virtualWindow = computed(() => {
+        const total = this.flat().length;
+        if (!this.virtualized() || total === 0)
+            return { start: 0, end: total, padTop: 0, padBottom: 0 };
+        const h = this.effRowH();
+        const vp = this.viewportPx() || this.fallbackViewportPx();
+        const over = this.overscan();
+        // Clamp `first` so a transient effRowH shrink (auto-measure landing below the
+        // fallback within one frame) can't push it past the list and slice to empty.
+        const first = Math.min(Math.floor(this.scrollTop() / h), total - 1);
+        // `+ 1` covers the partial row at the viewport's bottom edge even at overscan 0.
+        const count = Math.ceil(vp / h) + 1;
+        const start = Math.max(0, first - over);
+        const end = Math.min(total, first + count + over);
+        return { start, end, padTop: start * h, padBottom: (total - end) * h };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualWindow" }] : /* istanbul ignore next */ []));
+    /** Nodes placed in the list. SAME array instance as `flat()` when off → byte-identical DOM. */
+    windowRows = computed(() => {
+        if (!this.virtualized())
+            return this.flat();
+        const { start, end } = this.virtualWindow();
+        return this.flat().slice(start, end);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "windowRows" }] : /* istanbul ignore next */ []));
+    /** Stable id for a row at flat index `i` — the `aria-activedescendant` target. */
+    rowId(i) {
+        return `${this.panelId}-row-${i}`;
+    }
+    /**
+     * Active-descendant id when virtualized (focus stays on the list container),
+     * else `null`. Returns `null` while the focused row is outside the rendered
+     * window (e.g. mouse-wheeled away) so `aria-activedescendant` never dangles at
+     * a removed element — the next arrow key scrolls it back and re-establishes it.
+     */
+    activeRowId = computed(() => {
+        if (!this.virtualized())
+            return null;
+        const i = this.focusedIndex();
+        const { start, end } = this.virtualWindow();
+        return i >= start && i < end ? this.rowId(i) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeRowId" }] : /* istanbul ignore next */ []));
+    /** The scrollable `<ul>` — inside the overlay panel in overlay mode, else in the host. */
+    get listElement() {
+        const root = this.overlayRef?.overlayElement ?? this.host.nativeElement;
+        return root.querySelector('.wr-tree__list');
+    }
+    /** Scroll flat index `i` just into view (sets the `scrollTop` signal synchronously). */
+    ensureVisible(i) {
+        const h = this.effRowH();
+        const vp = this.viewportPx() || this.fallbackViewportPx();
+        const top = i * h;
+        const cur = this.scrollTop();
+        let next = cur;
+        if (top < cur)
+            next = top;
+        else if (top + h > cur + vp)
+            next = top + h - vp;
+        if (next !== cur) {
+            this.scrollTop.set(next);
+            this.listElement?.scrollTo({ top: next });
+        }
+    }
     constructor() {
         // Drive the overlay open/close in response to the `open` signal.
         effect(() => {
@@ -207,49 +340,114 @@ class WrTree {
                 this.closeOverlay();
             }
         });
+        // Disabling the control closes any open overlay (mirrors the side effect
+        // of the old CVA setDisabledState).
+        effect(() => {
+            if (this.disabled())
+                this.open.set(false);
+        });
+        // Bridge an external `value` write back into the internal `selected`
+        // state (this is the old writeValue body). `undefined` is the untouched
+        // sentinel — no field / ngModel has written yet, so leave any preset
+        // `[(selected)]` alone; a real `null` still clears, exactly as
+        // `writeValue(null)` did. Guarded against the echo of our own `emit()`
+        // (equality check under `untracked`) so a live pick is never clobbered.
+        effect(() => {
+            const value = this.value();
+            if (value === undefined)
+                return;
+            untracked(() => {
+                const next = this.isMulti()
+                    ? Array.isArray(value)
+                        ? value
+                        : []
+                    : value == null
+                        ? []
+                        : [value];
+                const current = this.selected();
+                if (next.length === current.length && next.every((id, i) => id === current[i]))
+                    return;
+                this.selected.set(next);
+            });
+        });
+        // Wire the scroll listener + viewport/row measurement — only while virtual
+        // and in the browser. Re-runs when the list (re)appears (overlay open, data
+        // change), deferring the DOM read to a microtask so the portal / inline list
+        // is attached. No-op on the server (SSR renders the deterministic first
+        // window from inputs alone).
+        effect(onCleanup => {
+            if (!isPlatformBrowser(this.platformId) || !this.virtualScroll())
+                return;
+            const open = this.isOverlay() ? this.open() : true;
+            this.flat();
+            if (!open)
+                return;
+            let raf = 0;
+            let ro = null;
+            let el = null;
+            const onScroll = () => {
+                if (raf)
+                    return;
+                raf = requestAnimationFrame(() => {
+                    raf = 0;
+                    if (el)
+                        this.scrollTop.set(el.scrollTop);
+                });
+            };
+            queueMicrotask(() => {
+                el = this.listElement;
+                if (!el)
+                    return;
+                // The overlay `<ul>` is destroyed + recreated on each open, but the
+                // `scrollTop` signal persists — restore the fresh element to it so a
+                // reopened panel isn't blank (window computed from a non-zero signal
+                // while the new DOM sits at scrollTop 0). No-op on first open / inline.
+                if (el.scrollTop !== this.scrollTop())
+                    el.scrollTop = this.scrollTop();
+                this.viewportPx.set(el.clientHeight);
+                if (this.rowHeight() === 0) {
+                    const h = el.querySelector('.wr-tree__row')?.offsetHeight ?? 0;
+                    if (h > 0)
+                        this.measuredRowPx.set(h);
+                }
+                el.addEventListener('scroll', onScroll, { passive: true });
+                if (typeof ResizeObserver !== 'undefined') {
+                    ro = new ResizeObserver(() => {
+                        if (el)
+                            this.viewportPx.set(el.clientHeight);
+                    });
+                    ro.observe(el);
+                }
+            });
+            onCleanup(() => {
+                if (raf)
+                    cancelAnimationFrame(raf);
+                if (el)
+                    el.removeEventListener('scroll', onScroll);
+                ro?.disconnect();
+            });
+        });
         this.destroyRef.onDestroy(() => this.closeOverlay());
     }
-    writeValue(value) {
-        if (this.isMulti()) {
-            this.selected.set(Array.isArray(value) ? value : []);
-        }
-        else if (value == null) {
-            this.selected.set([]);
-        }
-        else {
-            this.selected.set([value]);
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
-        if (isDisabled)
-            this.open.set(false);
-    }
     // Template handlers
     onRowClick(flat, event) {
-        if (this.isDisabled() || flat.node.disabled)
+        if (this.disabled() || flat.node.disabled)
             return;
         if (flat.hasChildren && event.target.closest('.wr-tree__toggle')) {
             this.toggleExpanded(flat.node.id);
             return;
         }
-        this.focusIndex(this.flat().indexOf(flat));
+        this.focusIndex(flat.index);
         this.select(flat.node.id, event.ctrlKey || event.metaKey);
     }
     onToggleClick(node, event) {
         event.stopPropagation();
-        if (this.isDisabled() || node.disabled)
+        if (this.disabled() || node.disabled)
             return;
         this.toggleExpanded(node.id);
     }
     onKeydown(event) {
-        if (this.isDisabled())
+        if (this.disabled())
             return;
         const flat = this.flat();
         const i = this.focusedIndex();
@@ -308,13 +506,17 @@ class WrTree {
     }
     // Overlay-mode trigger handlers
     onTriggerClick() {
-        if (this.isDisabled())
+        if (this.disabled())
             return;
         this.open.update(v => !v);
     }
+    /** Trigger blur — mark the bound field touched. */
+    onBlur() {
+        this.touch.emit();
+    }
     removeChip(id, event) {
         event.stopPropagation();
-        if (this.isDisabled())
+        if (this.disabled())
             return;
         const next = this.selected().filter(x => x !== id);
         this.selected.set(next);
@@ -322,16 +524,10 @@ class WrTree {
     }
     clearSelection(event) {
         event.stopPropagation();
-        if (this.isDisabled())
+        if (this.disabled())
             return;
         this.selected.set([]);
-        if (this.isMulti()) {
-            this.onChange([]);
-        }
-        else {
-            this.onChange(null);
-        }
-        this.onTouched();
+        this.emit();
     }
     // Selection / expansion plumbing
     toggleExpanded(id) {
@@ -368,7 +564,7 @@ class WrTree {
             }
             this.selected.set([...set]);
         }
-        // Overlay mode: propagate to CVA, close on single-mode pick.
+        // Overlay mode: propagate to the bound value, close on single-mode pick.
         if (this.isOverlay()) {
             this.emit();
             if (mode === 'single' && this.selected().length > 0) {
@@ -377,17 +573,27 @@ class WrTree {
         }
     }
     emit() {
-        this.onTouched();
+        this.touch.emit();
         if (this.isMulti()) {
-            this.onChange(this.selected());
+            this.value.set(this.selected());
         }
         else {
-            this.onChange(this.selected()[0] ?? null);
+            this.value.set(this.selected()[0] ?? null);
         }
     }
     focusIndex(i) {
         this.focusedIndex.set(i);
-        // Defer to next frame so the DOM has updated row classes/tabindex.
+        if (this.virtualized()) {
+            // Managed-focus (aria-activedescendant): focus stays on the list container.
+            // Setting `scrollTop` synchronously materializes row `i` in the SAME change
+            // detection pass, so the id referenced by `aria-activedescendant` is present
+            // — no rAF/microtask race, no "points at an absent id" gap.
+            this.ensureVisible(i);
+            this.listElement?.focus();
+            return;
+        }
+        // Non-virtual roving tabindex: defer so the DOM has updated tabindex, then
+        // move focus to the row element.
         queueMicrotask(() => {
             const root = this.overlayRef?.overlayElement ?? this.host.nativeElement;
             const row = root.querySelector(`[data-tree-index="${i}"]`);
@@ -429,6 +635,10 @@ class WrTree {
             panelClass: 'wr-tree-overlay',
         });
         this.overlayRef.attach(new TemplatePortal(tpl, this.vcr));
+        // Virtual mode drives keyboard nav via aria-activedescendant on the list
+        // container, so it must hold focus once the panel is attached.
+        if (this.virtualized())
+            queueMicrotask(() => this.listElement?.focus());
         this.overlayRef
             .outsidePointerEvents()
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -453,27 +663,13 @@ class WrTree {
         this.overlayRef.dispose();
         this.overlayRef = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrTree, isStandalone: true, selector: "wr-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", 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 }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxTagCount: { classPropertyName: "maxTagCount", publicName: "maxTagCount", isSignal: true, isRequired: false, transformFunction: null }, defaultExpandAll: { classPropertyName: "defaultExpandAll", publicName: "defaultExpandAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", expanded: "expandedChange" }, host: { properties: { "class": "classes()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                // eslint-disable-next-line @angular-eslint/no-forward-ref
-                useExisting: forwardRef(() => WrTree),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (isOverlay()) {\n  <button\n    type=\"button\"\n    class=\"wr-tree__trigger\"\n    role=\"combobox\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'tree'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    (click)=\"onTriggerClick()\"\n    (blur)=\"onTouched()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-tree__chips\">\n          @for (chip of visibleChips(); track chip.id) {\n            <span class=\"wr-tree__chip\">\n              <span class=\"wr-tree__chip-label\">{{ chip.label }}</span>\n              <span\n                class=\"wr-tree__chip-remove\"\n                role=\"button\"\n                [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                tabindex=\"-1\"\n                (click)=\"removeChip(chip.id, $event)\"\n                (keydown.enter)=\"removeChip(chip.id, $event)\"\n                (keydown.space)=\"removeChip(chip.id, $event)\"\n              >\n                <svg\n                  class=\"wr-icon__svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  aria-hidden=\"true\"\n                >\n                  <path d=\"M18 6 6 18\" />\n                  <path d=\"m6 6 12 12\" />\n                </svg>\n              </span>\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-tree__chip wr-tree__chip--more\">+{{ extra }} more</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ placeholder() }}</span>\n      }\n    } @else {\n      @if (singleLabel(); as label) {\n        <span class=\"wr-tree__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ placeholder() }}</span>\n      }\n    }\n\n    @if (clearable() && hasSelection() && !isDisabled()) {\n      <span\n        class=\"wr-tree__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"clearLabel\"\n        tabindex=\"-1\"\n        (click)=\"clearSelection($event)\"\n        (keydown.enter)=\"clearSelection($event)\"\n        (keydown.space)=\"clearSelection($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-tree__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n\n  <!-- Tree list lives inside the overlay panel. -->\n  <ng-template #panelTpl>\n    <div class=\"wr-tree-panel\" [attr.id]=\"panelId\">\n      <ng-container [ngTemplateOutlet]=\"listTpl\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"listTpl\" />\n}\n\n<!-- Shared row list \u2014 rendered inline (default) or projected into the\n     overlay panel (when openOn=\"overlay\"). -->\n<ng-template #listTpl>\n  <!-- Roving tabindex: the tree owns keyboard focus and routes arrow keys\n       to its currently-focused row. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n  <ul class=\"wr-tree__list\" role=\"tree\" (keydown)=\"onKeydown($event)\">\n    @for (entry of flat(); track entry.node.id) {\n      <!-- Click handler lives on focusable rows; keyboard handling is owned\n           by the parent <ul> via the roving-tabindex pattern. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <li\n        class=\"wr-tree__row\"\n        role=\"treeitem\"\n        [class.wr-tree__row--selected]=\"selectedSet().has(entry.node.id)\"\n        [class.wr-tree__row--disabled]=\"entry.node.disabled\"\n        [attr.aria-level]=\"entry.depth + 1\"\n        [attr.aria-expanded]=\"entry.hasChildren ? expandedSet().has(entry.node.id) : null\"\n        [attr.aria-selected]=\"selectionMode() === 'none' ? null : selectedSet().has(entry.node.id)\"\n        [attr.aria-disabled]=\"entry.node.disabled || isDisabled() || null\"\n        [attr.data-tree-index]=\"$index\"\n        [attr.tabindex]=\"$index === focusedIndex() ? 0 : -1\"\n        [style.--wr-tree-depth]=\"entry.depth\"\n        (click)=\"onRowClick(entry, $event)\"\n      >\n        @if (entry.hasChildren) {\n          <button\n            type=\"button\"\n            class=\"wr-tree__toggle\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"expandedSet().has(entry.node.id) ? collapseLabel : expandLabel\"\n            (click)=\"onToggleClick(entry.node, $event)\"\n          >\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <path d=\"M3 1 L7 5 L3 9 Z\" fill=\"currentColor\" />\n            </svg>\n          </button>\n        } @else {\n          <span class=\"wr-tree__toggle wr-tree__toggle--leaf\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"wr-tree__label\">{{ entry.node.label }}</span>\n      </li>\n    }\n  </ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrTree, isStandalone: true, selector: "wr-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", 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 }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxTagCount: { classPropertyName: "maxTagCount", publicName: "maxTagCount", isSignal: true, isRequired: false, transformFunction: null }, defaultExpandAll: { classPropertyName: "defaultExpandAll", publicName: "defaultExpandAll", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", expanded: "expandedChange", value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (isOverlay()) {\n  <button\n    type=\"button\"\n    class=\"wr-tree__trigger\"\n    role=\"combobox\"\n    [disabled]=\"disabled()\"\n    [attr.aria-haspopup]=\"'tree'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    (click)=\"onTriggerClick()\"\n    (blur)=\"onBlur()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-tree__chips\">\n          @for (chip of visibleChips(); track chip.id) {\n            <span class=\"wr-tree__chip\">\n              <span class=\"wr-tree__chip-label\">{{ chip.label }}</span>\n              <span\n                class=\"wr-tree__chip-remove\"\n                role=\"button\"\n                [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                tabindex=\"-1\"\n                (click)=\"removeChip(chip.id, $event)\"\n                (keydown.enter)=\"removeChip(chip.id, $event)\"\n                (keydown.space)=\"removeChip(chip.id, $event)\"\n              >\n                <svg\n                  class=\"wr-icon__svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  aria-hidden=\"true\"\n                >\n                  <path d=\"M18 6 6 18\" />\n                  <path d=\"m6 6 12 12\" />\n                </svg>\n              </span>\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-tree__chip wr-tree__chip--more\">+{{ extra }} more</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ placeholder() }}</span>\n      }\n    } @else {\n      @if (singleLabel(); as label) {\n        <span class=\"wr-tree__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ placeholder() }}</span>\n      }\n    }\n\n    @if (clearable() && hasSelection() && !disabled()) {\n      <span\n        class=\"wr-tree__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"clearLabel\"\n        tabindex=\"-1\"\n        (click)=\"clearSelection($event)\"\n        (keydown.enter)=\"clearSelection($event)\"\n        (keydown.space)=\"clearSelection($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-tree__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n\n  <!-- Tree list lives inside the overlay panel. -->\n  <ng-template #panelTpl>\n    <div class=\"wr-tree-panel\" [class.wr-tree-panel--virtual]=\"virtualized()\" [attr.id]=\"panelId\">\n      <ng-container [ngTemplateOutlet]=\"listTpl\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"listTpl\" />\n}\n\n<!-- Shared row list \u2014 rendered inline (default) or projected into the\n     overlay panel (when openOn=\"overlay\"). -->\n<ng-template #listTpl>\n  <!-- Roving tabindex (non-virtual) / aria-activedescendant (virtual): the tree\n       owns keyboard focus and routes arrow keys to its currently-focused row. -->\n  <ul\n    class=\"wr-tree__list\"\n    role=\"tree\"\n    [class.wr-tree__list--virtual]=\"virtualized()\"\n    [attr.tabindex]=\"virtualized() ? 0 : null\"\n    [attr.aria-activedescendant]=\"activeRowId()\"\n    [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n    [style.overflow-y]=\"virtualized() ? 'auto' : null\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @if (virtualized() && virtualWindow().padTop > 0) {\n      <li\n        class=\"wr-tree__spacer\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        [style.height.px]=\"virtualWindow().padTop\"\n      ></li>\n    }\n    @for (entry of windowRows(); track entry.node.id) {\n      <!-- Click handler lives on focusable rows; keyboard handling is owned\n           by the parent <ul> via the roving-tabindex pattern. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <li\n        class=\"wr-tree__row\"\n        role=\"treeitem\"\n        [attr.id]=\"virtualized() ? rowId(entry.index) : null\"\n        [class.wr-tree__row--selected]=\"selectedSet().has(entry.node.id)\"\n        [class.wr-tree__row--active]=\"virtualized() && entry.index === focusedIndex()\"\n        [class.wr-tree__row--disabled]=\"entry.node.disabled\"\n        [attr.aria-level]=\"entry.depth + 1\"\n        [attr.aria-setsize]=\"virtualized() ? entry.setsize : null\"\n        [attr.aria-posinset]=\"virtualized() ? entry.posinset : null\"\n        [attr.aria-expanded]=\"entry.hasChildren ? expandedSet().has(entry.node.id) : null\"\n        [attr.aria-selected]=\"selectionMode() === 'none' ? null : selectedSet().has(entry.node.id)\"\n        [attr.aria-disabled]=\"entry.node.disabled || disabled() || null\"\n        [attr.data-tree-index]=\"entry.index\"\n        [attr.tabindex]=\"virtualized() ? null : entry.index === focusedIndex() ? 0 : -1\"\n        [style.--wr-tree-depth]=\"entry.depth\"\n        (click)=\"onRowClick(entry, $event)\"\n      >\n        @if (entry.hasChildren) {\n          <button\n            type=\"button\"\n            class=\"wr-tree__toggle\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"expandedSet().has(entry.node.id) ? collapseLabel : expandLabel\"\n            (click)=\"onToggleClick(entry.node, $event)\"\n          >\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <path d=\"M3 1 L7 5 L3 9 Z\" fill=\"currentColor\" />\n            </svg>\n          </button>\n        } @else {\n          <span class=\"wr-tree__toggle wr-tree__toggle--leaf\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"wr-tree__label\">{{ entry.node.label }}</span>\n      </li>\n    }\n    @if (virtualized() && virtualWindow().padBottom > 0) {\n      <li\n        class=\"wr-tree__spacer\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        [style.height.px]=\"virtualWindow().padBottom\"\n      ></li>\n    }\n  </ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrTree, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrTree, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-tree', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [NgTemplateOutlet], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            // eslint-disable-next-line @angular-eslint/no-forward-ref
-                            useExisting: forwardRef(() => WrTree),
-                            multi: true,
-                        },
-                    ], template: "@if (isOverlay()) {\n  <button\n    type=\"button\"\n    class=\"wr-tree__trigger\"\n    role=\"combobox\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'tree'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    (click)=\"onTriggerClick()\"\n    (blur)=\"onTouched()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-tree__chips\">\n          @for (chip of visibleChips(); track chip.id) {\n            <span class=\"wr-tree__chip\">\n              <span class=\"wr-tree__chip-label\">{{ chip.label }}</span>\n              <span\n                class=\"wr-tree__chip-remove\"\n                role=\"button\"\n                [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                tabindex=\"-1\"\n                (click)=\"removeChip(chip.id, $event)\"\n                (keydown.enter)=\"removeChip(chip.id, $event)\"\n                (keydown.space)=\"removeChip(chip.id, $event)\"\n              >\n                <svg\n                  class=\"wr-icon__svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  aria-hidden=\"true\"\n                >\n                  <path d=\"M18 6 6 18\" />\n                  <path d=\"m6 6 12 12\" />\n                </svg>\n              </span>\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-tree__chip wr-tree__chip--more\">+{{ extra }} more</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ placeholder() }}</span>\n      }\n    } @else {\n      @if (singleLabel(); as label) {\n        <span class=\"wr-tree__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ placeholder() }}</span>\n      }\n    }\n\n    @if (clearable() && hasSelection() && !isDisabled()) {\n      <span\n        class=\"wr-tree__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"clearLabel\"\n        tabindex=\"-1\"\n        (click)=\"clearSelection($event)\"\n        (keydown.enter)=\"clearSelection($event)\"\n        (keydown.space)=\"clearSelection($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-tree__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n\n  <!-- Tree list lives inside the overlay panel. -->\n  <ng-template #panelTpl>\n    <div class=\"wr-tree-panel\" [attr.id]=\"panelId\">\n      <ng-container [ngTemplateOutlet]=\"listTpl\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"listTpl\" />\n}\n\n<!-- Shared row list \u2014 rendered inline (default) or projected into the\n     overlay panel (when openOn=\"overlay\"). -->\n<ng-template #listTpl>\n  <!-- Roving tabindex: the tree owns keyboard focus and routes arrow keys\n       to its currently-focused row. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n  <ul class=\"wr-tree__list\" role=\"tree\" (keydown)=\"onKeydown($event)\">\n    @for (entry of flat(); track entry.node.id) {\n      <!-- Click handler lives on focusable rows; keyboard handling is owned\n           by the parent <ul> via the roving-tabindex pattern. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <li\n        class=\"wr-tree__row\"\n        role=\"treeitem\"\n        [class.wr-tree__row--selected]=\"selectedSet().has(entry.node.id)\"\n        [class.wr-tree__row--disabled]=\"entry.node.disabled\"\n        [attr.aria-level]=\"entry.depth + 1\"\n        [attr.aria-expanded]=\"entry.hasChildren ? expandedSet().has(entry.node.id) : null\"\n        [attr.aria-selected]=\"selectionMode() === 'none' ? null : selectedSet().has(entry.node.id)\"\n        [attr.aria-disabled]=\"entry.node.disabled || isDisabled() || null\"\n        [attr.data-tree-index]=\"$index\"\n        [attr.tabindex]=\"$index === focusedIndex() ? 0 : -1\"\n        [style.--wr-tree-depth]=\"entry.depth\"\n        (click)=\"onRowClick(entry, $event)\"\n      >\n        @if (entry.hasChildren) {\n          <button\n            type=\"button\"\n            class=\"wr-tree__toggle\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"expandedSet().has(entry.node.id) ? collapseLabel : expandLabel\"\n            (click)=\"onToggleClick(entry.node, $event)\"\n          >\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <path d=\"M3 1 L7 5 L3 9 Z\" fill=\"currentColor\" />\n            </svg>\n          </button>\n        } @else {\n          <span class=\"wr-tree__toggle wr-tree__toggle--leaf\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"wr-tree__label\">{{ entry.node.label }}</span>\n      </li>\n    }\n  </ul>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", 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"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOn", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], maxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTagCount", required: false }] }], defaultExpandAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpandAll", required: false }] }], panelTpl: [{ type: i0.ViewChild, args: ['panelTpl', { ...{ read: TemplateRef }, isSignal: true }] }] } });
+            args: [{ selector: 'wr-tree', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [NgTemplateOutlet], template: "@if (isOverlay()) {\n  <button\n    type=\"button\"\n    class=\"wr-tree__trigger\"\n    role=\"combobox\"\n    [disabled]=\"disabled()\"\n    [attr.aria-haspopup]=\"'tree'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    (click)=\"onTriggerClick()\"\n    (blur)=\"onBlur()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-tree__chips\">\n          @for (chip of visibleChips(); track chip.id) {\n            <span class=\"wr-tree__chip\">\n              <span class=\"wr-tree__chip-label\">{{ chip.label }}</span>\n              <span\n                class=\"wr-tree__chip-remove\"\n                role=\"button\"\n                [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                tabindex=\"-1\"\n                (click)=\"removeChip(chip.id, $event)\"\n                (keydown.enter)=\"removeChip(chip.id, $event)\"\n                (keydown.space)=\"removeChip(chip.id, $event)\"\n              >\n                <svg\n                  class=\"wr-icon__svg\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  aria-hidden=\"true\"\n                >\n                  <path d=\"M18 6 6 18\" />\n                  <path d=\"m6 6 12 12\" />\n                </svg>\n              </span>\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-tree__chip wr-tree__chip--more\">+{{ extra }} more</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ placeholder() }}</span>\n      }\n    } @else {\n      @if (singleLabel(); as label) {\n        <span class=\"wr-tree__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-tree__placeholder\">{{ placeholder() }}</span>\n      }\n    }\n\n    @if (clearable() && hasSelection() && !disabled()) {\n      <span\n        class=\"wr-tree__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"clearLabel\"\n        tabindex=\"-1\"\n        (click)=\"clearSelection($event)\"\n        (keydown.enter)=\"clearSelection($event)\"\n        (keydown.space)=\"clearSelection($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-tree__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n\n  <!-- Tree list lives inside the overlay panel. -->\n  <ng-template #panelTpl>\n    <div class=\"wr-tree-panel\" [class.wr-tree-panel--virtual]=\"virtualized()\" [attr.id]=\"panelId\">\n      <ng-container [ngTemplateOutlet]=\"listTpl\" />\n    </div>\n  </ng-template>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"listTpl\" />\n}\n\n<!-- Shared row list \u2014 rendered inline (default) or projected into the\n     overlay panel (when openOn=\"overlay\"). -->\n<ng-template #listTpl>\n  <!-- Roving tabindex (non-virtual) / aria-activedescendant (virtual): the tree\n       owns keyboard focus and routes arrow keys to its currently-focused row. -->\n  <ul\n    class=\"wr-tree__list\"\n    role=\"tree\"\n    [class.wr-tree__list--virtual]=\"virtualized()\"\n    [attr.tabindex]=\"virtualized() ? 0 : null\"\n    [attr.aria-activedescendant]=\"activeRowId()\"\n    [style.max-height]=\"virtualized() ? resolvedViewportHeight() : null\"\n    [style.overflow-y]=\"virtualized() ? 'auto' : null\"\n    (keydown)=\"onKeydown($event)\"\n  >\n    @if (virtualized() && virtualWindow().padTop > 0) {\n      <li\n        class=\"wr-tree__spacer\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        [style.height.px]=\"virtualWindow().padTop\"\n      ></li>\n    }\n    @for (entry of windowRows(); track entry.node.id) {\n      <!-- Click handler lives on focusable rows; keyboard handling is owned\n           by the parent <ul> via the roving-tabindex pattern. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n      <li\n        class=\"wr-tree__row\"\n        role=\"treeitem\"\n        [attr.id]=\"virtualized() ? rowId(entry.index) : null\"\n        [class.wr-tree__row--selected]=\"selectedSet().has(entry.node.id)\"\n        [class.wr-tree__row--active]=\"virtualized() && entry.index === focusedIndex()\"\n        [class.wr-tree__row--disabled]=\"entry.node.disabled\"\n        [attr.aria-level]=\"entry.depth + 1\"\n        [attr.aria-setsize]=\"virtualized() ? entry.setsize : null\"\n        [attr.aria-posinset]=\"virtualized() ? entry.posinset : null\"\n        [attr.aria-expanded]=\"entry.hasChildren ? expandedSet().has(entry.node.id) : null\"\n        [attr.aria-selected]=\"selectionMode() === 'none' ? null : selectedSet().has(entry.node.id)\"\n        [attr.aria-disabled]=\"entry.node.disabled || disabled() || null\"\n        [attr.data-tree-index]=\"entry.index\"\n        [attr.tabindex]=\"virtualized() ? null : entry.index === focusedIndex() ? 0 : -1\"\n        [style.--wr-tree-depth]=\"entry.depth\"\n        (click)=\"onRowClick(entry, $event)\"\n      >\n        @if (entry.hasChildren) {\n          <button\n            type=\"button\"\n            class=\"wr-tree__toggle\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"expandedSet().has(entry.node.id) ? collapseLabel : expandLabel\"\n            (click)=\"onToggleClick(entry.node, $event)\"\n          >\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <path d=\"M3 1 L7 5 L3 9 Z\" fill=\"currentColor\" />\n            </svg>\n          </button>\n        } @else {\n          <span class=\"wr-tree__toggle wr-tree__toggle--leaf\" aria-hidden=\"true\"></span>\n        }\n        <span class=\"wr-tree__label\">{{ entry.node.label }}</span>\n      </li>\n    }\n    @if (virtualized() && virtualWindow().padBottom > 0) {\n      <li\n        class=\"wr-tree__spacer\"\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        [style.height.px]=\"virtualWindow().padBottom\"\n      ></li>\n    }\n  </ul>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", 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"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOn", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], maxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTagCount", required: false }] }], defaultExpandAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpandAll", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], panelTpl: [{ type: i0.ViewChild, args: ['panelTpl', { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.