@yuuvis/client-framework 3.0.0-beta.20.2 → 3.0.0-beta.21.1

package/fesm2022/yuuvis-client-framework-list.mjs

@@ -1,687 +1,11 @@
-import * as i0 from '@angular/core';
-import { inject, ElementRef, input, linkedSignal, Input, Directive, contentChildren, output, HostAttributeToken, untracked, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChild, NgModule } from '@angular/core';
-import { Utils } from '@yuuvis/client-core';
-import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+export { ListComponent, ListItemDirective, ListTileComponent, YuvListModule } from '@yuuvis/client-components/list';
 
 /**
- * Directive for list items. It is used in the `yuvList` component
- * to keep track of active and selected items. Every element with this
- * directive will be treated as a list item and can be selected and focused.
- *
- *```html
- * <yuv-list (itemSelect)="itemSelected($event)">
- *   <div yuvListItem>Entry #1</div>
- *   <div yuvListItem>Entry #2</div>
- * </yuv-list>
- * ```
+ * @deprecated Import from `@yuuvis/client-components/list` instead.
+ * This entry point is a backward-compatibility shim and will be removed in a future release.
  */
-class ListItemDirective {
-    constructor() {
-        this.#elRef = inject(ElementRef);
-        /**
-         * Whether the item is active or not.
-         */
-        this.active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
-        /**
-         * Whether the item is selected or not.
-         */
-        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
-        this.selectedInput = linkedSignal(...(ngDevMode ? [{ debugName: "selectedInput", source: this.selected,
-                computation: (newOptions, previous) => (newOptions !== previous ? newOptions : previous) }] : [{
-                source: this.selected,
-                computation: (newOptions, previous) => (newOptions !== previous ? newOptions : previous)
-            }]));
-        this.activeInput = linkedSignal(...(ngDevMode ? [{ debugName: "activeInput", source: this.active,
-                computation: (newOptions, previous) => (newOptions !== previous ? newOptions : previous) }] : [{
-                source: this.active,
-                computation: (newOptions, previous) => (newOptions !== previous ? newOptions : previous)
-            }]));
-        this.focusableChildren = [];
-        this.focusedIndex = -1;
-    }
-    #elRef;
-    onHostClick(evt) {
-        if (!this.disabled && this.onClick) {
-            this.#elRef.nativeElement.parentElement.focus();
-            this.onClick(evt);
-        }
-    }
-    setActiveStyles() {
-        this.activeInput.set(true);
-        this.#scrollIntoView();
-    }
-    setInactiveStyles() {
-        this.activeInput.set(false);
-    }
-    focusNext() { }
-    focusPrevious() { }
-    #scrollIntoView() {
-        const el = this.#elRef.nativeElement;
-        const { bottom, top, left, right } = el.getBoundingClientRect();
-        const containerRect = this.#elRef.nativeElement.parentElement.getBoundingClientRect();
-        const offsetY = top <= containerRect.top
-            ? containerRect.top - top > 0
-                ? (containerRect.top - top) * -1
-                : 0
-            : bottom - containerRect.bottom > 0
-                ? bottom - containerRect.bottom
-                : 0;
-        const offsetX = left <= containerRect.left
-            ? containerRect.left - left > 0
-                ? (containerRect.left - left) * -1
-                : 0
-            : right - containerRect.right > 0
-                ? right - containerRect.right
-                : 0;
-        if (offsetX || offsetY)
-            this.#elRef.nativeElement.parentElement.scrollBy(offsetX, offsetY);
-    }
-    ngAfterViewInit() {
-        // get all focusable elements and set tabindex to -1
-        this.focusableChildren = Utils.getFocusableChildren(this.#elRef.nativeElement);
-        this.focusableChildren.forEach((el) => el.setAttribute('tabindex', '-1'));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ListItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.19", type: ListItemDirective, isStandalone: true, selector: "[yuvListItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "attr.aria-current": "activeInput()", "attr.aria-selected": "selectedInput()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ListItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[yuvListItem]',
-                    standalone: true,
-                    host: {
-                        '[attr.aria-current]': 'activeInput()',
-                        '[attr.aria-selected]': 'selectedInput()',
-                        '(click)': 'onHostClick($event)'
-                    }
-                }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
-
-/**
- * Accessible list component with keyboard navigation, single- and multi-selection,
- * and flexible delegation of click- and selection-handling to the parent.
- *
- * The component renders as an ARIA `listbox` and delegates keyboard focus tracking
- * to Angular CDK's `ActiveDescendantKeyManager`. Content is projected via
- * `[yuvListItem]`-attributed children (see `ListItemDirective`).
- *
- * **Key Features:**
- * - Single and multi-selection (with Shift / Ctrl modifier support)
- * - Full keyboard navigation (Arrow keys, Space, Enter, Escape)
- * - Horizontal and vertical layout via the `horizontal` host attribute
- * - Auto-selection on initialization via the `autoSelect` input
- * - Selection guarding via `preventChangeUntil` callback
- * - Optional delegation of click and selection handling to the parent component
- * - Accessible: `role="listbox"`, active-descendant focus management, `aria-selected` on items
- *
- * **Basic usage:**
- * ```html
- * <yuv-list (itemSelect)="onItemSelect($event)">
- *   <div yuvListItem>Entry #1</div>
- *   <div yuvListItem>Entry #2</div>
- * </yuv-list>
- * ```
- *
- * **Multi-selection with Shift/Ctrl:**
- * ```html
- * <yuv-list [multiselect]="true" (itemSelect)="onSelect($event)">
- *   @for (item of items; track item.id) {
- *     <div yuvListItem>{{ item.label }}</div>
- *   }
- * </yuv-list>
- * ```
- *
- * **Host Attributes (set declaratively in the template):**
- * - `selectOnEnter` — treat the Enter key as a selection trigger (in addition to Space)
- * - `horizontal` — switch key navigation to left/right arrows instead of up/down
- *
- * @example
- * ```html
- * <!-- Horizontal list, Enter key selects -->
- * <yuv-list horizontal selectOnEnter (itemSelect)="onSelect($event)">
- *   <button yuvListItem>A</button>
- *   <button yuvListItem>B</button>
- * </yuv-list>
- * ```
- */
-class ListComponent {
-    //#region Dependencies
-    #dir;
-    #elRef;
-    #keyManager;
-    #selection;
-    #lastSelection;
-    //#endregion
-    //#region Lifecycle Hooks
-    constructor() {
-        //#region Dependencies
-        this.#dir = inject(Directionality);
-        this.#elRef = inject(ElementRef);
-        //#endregion
-        //#region Angular Stuff
-        /**
-         * All `[yuvListItem]` children projected into this list.
-         *
-         * Queried reactively via `contentChildren` — every time the projected content
-         * changes (items added, removed, or reordered), the `#itemsEffect` re-runs,
-         * rebuilds the key manager, and re-attaches click handlers.
-         */
-        this.items = contentChildren(ListItemDirective, ...(ngDevMode ? [{ debugName: "items" }] : []));
-        /**
-         * Guard function that temporarily blocks all selection changes.
-         *
-         * Provide a factory that returns a predicate; as long as that predicate
-         * returns `true`, any attempt to change the selection (via click, keyboard,
-         * or programmatic API) is silently ignored. Useful when the parent has
-         * unsaved changes tied to the current selection and needs to prevent the user
-         * from accidentally navigating away.
-         *
-         * @example
-         * ```ts
-         * // Block selection while a save is in progress
-         * preventChangeUntil = () => () => this.isSaving();
-         * ```
-         *
-         * @default () => false  (never prevents)
-         */
-        this.preventChangeUntil = input(() => false, ...(ngDevMode ? [{ debugName: "preventChangeUntil" }] : []));
-        /**
-         * Enables multi-selection mode.
-         *
-         * When `true`, the user can hold **Shift** to range-select items between the last
-         * selected item and the clicked one, or hold **Ctrl** to toggle individual items
-         * in and out of the selection. The programmatic `multiSelect()` method is also
-         * only effective when this input is `true`.
-         *
-         * @default false
-         */
-        this.multiselect = input(false, ...(ngDevMode ? [{ debugName: "multiselect" }] : []));
-        /**
-         * Delegates visual selection and focus state rendering to the parent component.
-         *
-         * When `false` (default), `yuv-list` applies `.selected` and `.active` CSS classes
-         * to items via `ListItemDirective` signals, so the list stylesheet controls the look.
-         * When `true`, those signals are still updated but the host gets the
-         * `self-handle-selection` CSS class, which the parent can use to opt into its own
-         * visual treatment — useful when item templates have custom selected/focused styling.
-         *
-         * @default false
-         */
-        this.selfHandleSelection = input(false, ...(ngDevMode ? [{ debugName: "selfHandleSelection" }] : []));
-        /**
-         * Disables the built-in click-to-select behavior, letting the parent component
-         * decide when `select()` is called.
-         *
-         * By default the list attaches an `onClick` handler to every `ListItemDirective`
-         * that calls `select()` with the correct Shift/Ctrl modifier flags. Set this
-         * input to `true` to suppress that wiring — the parent must then call `select()`
-         * imperatively in response to whatever interaction it chooses (e.g. a single-click
-         * that is distinguished from a double-click by `ClickDoubleDirective`).
-         *
-         * @default false
-         */
-        this.selfHandleClick = input(false, ...(ngDevMode ? [{ debugName: "selfHandleClick" }] : []));
-        /**
-         * Automatically selects an item when the list is first rendered.
-         *
-         * The selection logic runs once per content-children change (see `#itemsEffect`)
-         * and follows this priority order:
-         * 1. The first non-disabled item that already carries the `selected` attribute.
-         * 2. If no such item exists and `autoSelect` is `true`, the item at index 0.
-         *
-         * Accepts any truthy string value in addition to a real boolean because the
-         * input is also consumable as a plain HTML attribute (`<yuv-list autoSelect>`).
-         *
-         * @default false
-         */
-        this.autoSelect = input(false, ...(ngDevMode ? [{ debugName: "autoSelect", transform: (value) => coerceBooleanProperty(value) }] : [{
-                transform: (value) => coerceBooleanProperty(value)
-            }]));
-        /**
-         * Emits the current selection as an array of zero-based item indices whenever
-         * the selection changes — via click, keyboard, or programmatic API calls.
-         *
-         * An empty array signals that the selection has been cleared.
-         *
-         * @example
-         * ```ts
-         * onItemSelect(indices: number[]): void {
-         *   this.selectedItems = indices.map(i => this.items[i]);
-         * }
-         * ```
-         */
-        this.itemSelect = output();
-        /**
-         * Emits the zero-based index of the item that received keyboard focus
-         * (i.e. the active descendant managed by `ActiveDescendantKeyManager`).
-         *
-         * Note that focus and selection are independent: navigating with arrow keys
-         * moves focus without changing the selection until Space (or Enter when
-         * `selectOnEnter` is set) is pressed.
-         */
-        this.itemFocus = output();
-        /**
-         * Puts the list into a display-only mode where no item can be selected.
-         *
-         * When `true`, all selection paths are blocked: clicks, keyboard shortcuts
-         * (`Space`, `Enter`, `Escape`), and programmatic calls to `select()`,
-         * `multiSelect()`, and `clear()` are all no-ops. The list still renders
-         * normally and keyboard navigation still moves the focus indicator.
-         *
-         * @default false
-         */
-        this.disableSelection = input(false, ...(ngDevMode ? [{ debugName: "disableSelection" }] : []));
-        //#endregion
-        //#region Properties
-        /**
-         * When `true`, pressing **Enter** triggers item selection in addition to **Space**.
-         *
-         * Resolved once at construction time from the static `selectOnEnter` host attribute.
-         * Useful in contexts where Enter has a conventional "confirm" meaning (e.g. search
-         * result lists, command palettes).
-         *
-         * Set declaratively in the template: `<yuv-list selectOnEnter>`.
-         */
-        this.selectOnEnter = (inject(new HostAttributeToken('selectOnEnter'), { optional: true }) || 'false') === 'true';
-        /**
-         * When `true`, switches the `ActiveDescendantKeyManager` to horizontal mode so that
-         * the **Left** / **Right** arrow keys navigate between items instead of **Up** / **Down**.
-         *
-         * Resolved once at construction time from the static `horizontal` host attribute.
-         * The text direction of the document is respected automatically (RTL-aware via CDK
-         * `Directionality`).
-         *
-         * Set declaratively in the template: `<yuv-list horizontal>`.
-         */
-        this.horizontal = (inject(new HostAttributeToken('horizontal'), { optional: true }) || 'false') === 'true';
-        this.#selection = [];
-        //#endregion
-        //#region Effects
-        this.#itemsEffect = () => {
-            const items = this.items();
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            if (this.#keyManager)
-                this.#keyManager.destroy();
-            untracked(() => {
-                this.#keyManager = this.horizontal
-                    ? new ActiveDescendantKeyManager(items).withWrap().withHorizontalOrientation(this.#dir.value)
-                    : new ActiveDescendantKeyManager(items).withWrap();
-                this.#keyManager.change.subscribe((activeIndex) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                    if (activeIndex !== null) {
-                        this.#updateActiveItemState();
-                        this.itemFocus.emit(activeIndex);
-                    }
-                });
-                if (!this.selfHandleClick()) {
-                    items.forEach((item, index) => {
-                        item.onClick = (evt) => {
-                            this.select(index, evt.shiftKey, evt.ctrlKey);
-                        };
-                        item.activeInput.set(false);
-                    });
-                }
-                if (this.#lastSelection !== undefined && this.#lastSelection <= items.length) {
-                    this.select(this.#lastSelection);
-                }
-                this.#preselectItem();
-            });
-        };
-        effect(this.#itemsEffect);
-    }
-    ngOnDestroy() {
-        this.#keyManager.destroy();
-    }
-    //#endregion
-    //#region Public
-    /**
-     * Moves keyboard focus to the item at the given index and selects it.
-     *
-     * Combines three operations in one call: updating the CDK key manager's active
-     * descendant (which drives the ARIA active-descendant attribute and the visual focus ring),
-     * selecting the item, and transferring DOM focus to the list host element so that
-     * subsequent keyboard events are processed correctly.
-     *
-     * Safe to call before the key manager is initialized — the guard at the top of
-     * the method prevents errors during early lifecycle phases.
-     *
-     * @param index Zero-based index of the item to activate.
-     */
-    setActiveItem(index) {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (this.#keyManager) {
-            this.#keyManager.setActiveItem(index);
-            this.#select(index);
-            this.focus();
-        }
-    }
-    /**
-     * Transfers DOM focus to the list host element.
-     *
-     * Calling this ensures that subsequent keyboard events (arrow keys, Space, etc.)
-     * are routed to the list's `(keydown)` handler. Called internally by
-     * `setActiveItem()`, but also useful from the parent when programmatic focus
-     * management is needed (e.g. after closing a dialog that was triggered from a
-     * list item).
-     */
-    focus() {
-        this.#elRef.nativeElement.focus();
-    }
-    /**
-     * Smoothly scrolls the list container back to the top.
-     *
-     * Useful after programmatically refreshing the list contents when the user may
-     * have scrolled far down and the new result set should be shown from the beginning.
-     */
-    scrollToTop() {
-        this.#elRef.nativeElement.scrollTo({ top: 0, behavior: 'smooth' });
-    }
-    /**
-     * Shifts all selected and focused item indices by the given offset.
-     *
-     * Use this when items are prepended or inserted at the beginning of the list so
-     * that the existing selection and keyboard-focus position stay attached to the
-     * same logical items after the index space shifts. A positive offset moves
-     * indices forward (items were inserted before the selection); a negative offset
-     * moves them backward (items were removed before the selection).
-     *
-     * Does **not** emit `itemSelect` — the selection indices change structurally,
-     * not because the user chose different items.
-     *
-     * @param offset Number of positions to shift every selected index by.
-     */
-    shiftSelectionBy(offset) {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (this.#keyManager?.activeItemIndex !== null && this.#keyManager?.activeItemIndex !== undefined) {
-            this.#keyManager.setActiveItem(this.#keyManager.activeItemIndex + offset);
-        }
-        this.#selection = this.#selection.map((i) => i + offset);
-        if (this.#lastSelection !== undefined)
-            this.#lastSelection += offset;
-        this.items().forEach((item, i) => item.selectedInput.set(this.#selection.includes(i)));
-    }
-    /**
-     * Programmatically replaces the entire selection with the given indices.
-     *
-     * Only effective when `multiselect` is `true` and `disableSelection` is `false`.
-     * Out-of-range indices are silently discarded. The resulting selection is sorted
-     * ascending before being applied and emitted.
-     *
-     * Use this when the parent needs to restore a previously saved multi-selection
-     * state, e.g. after navigation or on component re-initialization.
-     *
-     * @param index Array of zero-based item indices to select.
-     */
-    multiSelect(index) {
-        if (this.#preventEmit())
-            return;
-        if (!this.multiselect() || this.disableSelection())
-            return;
-        this.#selection = index.filter((i) => i >= 0 && i < this.items().length);
-        this.#selection.sort();
-        this.items().forEach((item, i) => item.selectedInput.set(this.#selection.includes(i)));
-        this.#emitSelection();
-    }
-    /**
-     * Selects the item at the given index, optionally extending or toggling
-     * the existing selection using modifier-key semantics.
-     *
-     * - **No modifiers** (default): replaces the current selection with the single item.
-     * - **`shiftKey = true`** (`multiselect` only): range-selects all items between the
-     *   last selected index and `index` (inclusive of neither endpoint, matching typical
-     *   OS list behavior).
-     * - **`ctrlKey = true`** (`multiselect` only): toggles `index` in the selection
-     *   without affecting the rest.
-     *
-     * Index is clamped to `[0, items.length - 1]`. Negative values and calls while
-     * `disableSelection` is `true` are ignored. The `preventChangeUntil` guard is
-     * also respected.
-     *
-     * Emits `itemSelect` after updating the visual state.
-     *
-     * @param index    Zero-based index of the item to select.
-     * @param shiftKey Extend the selection from the last selected item to `index`.
-     * @param ctrlKey  Toggle `index` in or out of the current selection.
-     */
-    select(index, shiftKey = false, ctrlKey = false) {
-        if (this.#preventEmit())
-            return;
-        if (this.disableSelection() || index < 0)
-            return;
-        if (index >= this.items().length)
-            index = this.items().length - 1;
-        this.#select(index, shiftKey, ctrlKey);
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (this.#keyManager)
-            this.#keyManager.setActiveItem(index);
-        this.#emitSelection();
-    }
-    /**
-     * Clears the current selection and resets the active keyboard-focus index.
-     *
-     * If the selection is already empty, the method is a no-op (no event emitted,
-     * no state update). The `preventChangeUntil` guard is respected — if the guard
-     * returns `true`, the clear is blocked entirely.
-     *
-     * Also triggered internally when the user presses **Escape**.
-     *
-     * @param silent When `true`, skips emitting `itemSelect` after clearing. Use this
-     *               when the parent needs to reset state programmatically without
-     *               triggering downstream reactions.
-     */
-    clear(silent = false) {
-        if (this.#preventEmit())
-            return;
-        if (this.#selection.length !== 0) {
-            this.#select(-1);
-            this.#keyManager.setActiveItem(-1);
-            if (!silent)
-                this.#emitSelection();
-        }
-    }
-    //#endregion
-    //#region UI Methods
-    /**
-     * Host `keydown` handler — routes keyboard events to selection or navigation logic.
-     *
-     * Handled keys:
-     * - **Escape**: clears the selection.
-     * - **Space** (always) / **Enter** (when `selectOnEnter` is set): selects the
-     *   currently focused item. `preventDefault()` is called to stop the browser
-     *   from scrolling the container when Space is pressed.
-     * - **All other keys**: forwarded to `ActiveDescendantKeyManager` so arrow keys,
-     *   Home, End, etc. move the focus indicator without changing the selection.
-     *
-     * When `disableSelection` is `true`, only navigation keys are forwarded to the
-     * key manager — selection keys (Space, Enter, Escape) are suppressed.
-     *
-     * Bound via the `host` metadata as `(keydown)`.
-     *
-     * @param event The keyboard event originating from the list host element.
-     */
-    onKeydown(event) {
-        if (this.disableSelection()) {
-            this.#keyManager?.onKeydown(event);
-            return;
-        }
-        if (event.code === 'Escape') {
-            this.clear();
-        }
-        if (event.code === 'Space' || (this.selectOnEnter && event.code === 'Enter')) {
-            // prevent default behavior of space in scroll environments
-            if (this.#preventEmit())
-                return;
-            event.preventDefault();
-            const aii = this.#keyManager.activeItemIndex !== null ? this.#keyManager.activeItemIndex : -1;
-            if (aii >= 0) {
-                this.#select(aii);
-                this.#emitSelection();
-            }
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        }
-        else
-            this.#keyManager?.onKeydown(event);
-    }
-    /**
-     * Host `focus` handler — restores a sensible focus position when the list
-     * host element receives DOM focus without an item already being active.
-     *
-     * The logic runs inside a 300 ms timeout so that focus events triggered by
-     * an item being clicked (which also bubbles a focus event up to the host)
-     * have already resolved their own active-item state before this handler acts.
-     * If an active item already exists when the timeout fires, nothing happens.
-     *
-     * Focus target priority:
-     * 1. The first index in the current selection (so the user lands back on the
-     *    previously selected item when tabbing into the list).
-     * 2. Index 0 as the fallback when there is no selection.
-     *
-     * Bound via the `host` metadata as `(focus)`.
-     */
-    onFocus() {
-        // set timeout to check if the focus is coming from an item being clicked
-        setTimeout(() => {
-            // if there already is an active item, we do not want to set the focus again
-            if (this.#keyManager.activeItemIndex === -1 && this.items().length > 0) {
-                const indexToFocus = this.#selection.length > 0 ? this.#selection[0] : 0;
-                this.#keyManager.setActiveItem(indexToFocus);
-                this.itemFocus.emit(indexToFocus);
-                this.#updateActiveItemState();
-            }
-            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-        }, 300);
-    }
-    //#endregion
-    //#region Utilities
-    #preventEmit() {
-        const preventUntilIsTrue = this.preventChangeUntil();
-        return preventUntilIsTrue();
-    }
-    #select(index, shiftKey = false, ctrlKey = false) {
-        if (index === -1)
-            this.#selection = [];
-        else {
-            if (this.multiselect()) {
-                this.#selection = this.#selection.filter((i) => i !== index);
-                if (ctrlKey) {
-                    this.#selection.push(index);
-                }
-                else if (shiftKey) {
-                    if (this.#lastSelection) {
-                        for (let i = this.#lastSelection < index ? this.#lastSelection : index; i < (this.#lastSelection > index ? this.#lastSelection : index); i++) {
-                            this.#selection.push(i);
-                        }
-                    }
-                    else {
-                        this.#selection = [index];
-                    }
-                }
-                else {
-                    this.#selection = [index];
-                }
-            }
-            else
-                this.#selection = [index];
-        }
-        this.#lastSelection = this.#selection.length === 0 ? undefined : index;
-        this.#selection.sort();
-        this.items().forEach((item, i) => item.selectedInput.set(this.#selection.includes(i)));
-    }
-    #updateActiveItemState() {
-        const activeIndex = this.#keyManager.activeItemIndex;
-        this.items().forEach((item, i) => {
-            item.activeInput.set(i === activeIndex);
-        });
-    }
-    #emitSelection() {
-        this.itemSelect.emit(this.#selection);
-    }
-    #preselectItem() {
-        if (this.#selection.length > 0)
-            return; // if there is already a selection, do not preselect
-        const items = this.items();
-        const autoSelect = this.autoSelect();
-        let itemIndexToSelect = -1;
-        // If the list has no items, do nothing.
-        if (items.length < 1)
-            return;
-        // Find the first item that has the "selected"-attribute and is not disabled
-        itemIndexToSelect = items.findIndex((item) => item.selected() && !item.disabled);
-        // If no valid item index is given, but autoSelect is true, select the first item
-        if (itemIndexToSelect === -1 && autoSelect) {
-            itemIndexToSelect = 0;
-        }
-        // If there is a valid item index, select that item, otherwise do nothing
-        if (itemIndexToSelect !== -1) {
-            this.select(itemIndexToSelect);
-        }
-    }
-    //#endregion
-    //#region Effects
-    #itemsEffect;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.19", type: ListComponent, isStandalone: true, selector: "yuv-list", inputs: { preventChangeUntil: { classPropertyName: "preventChangeUntil", publicName: "preventChangeUntil", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, selfHandleSelection: { classPropertyName: "selfHandleSelection", publicName: "selfHandleSelection", isSignal: true, isRequired: false, transformFunction: null }, selfHandleClick: { classPropertyName: "selfHandleClick", publicName: "selfHandleClick", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, disableSelection: { classPropertyName: "disableSelection", publicName: "disableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", itemFocus: "itemFocus" }, host: { attributes: { "role": "listbox", "tabindex": "0" }, listeners: { "focus": "onFocus()", "keydown": "onKeydown($event)" }, properties: { "class.self-handle-selection": "selfHandleSelection()" } }, queries: [{ propertyName: "items", predicate: ListItemDirective, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["yuv-list{display:block;max-height:100%;overflow-y:auto;outline:none}yuv-list:not(.self-handle-selection) [yuvListItem]:not(:has(yuv-list-tile)){position:relative;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}yuv-list:not(.self-handle-selection) [yuvListItem]:not(:has(yuv-list-tile)):hover,yuv-list:not(.self-handle-selection) [yuvListItem]:not(:has(yuv-list-tile))[aria-current=true]{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}yuv-list:not(.self-handle-selection) [yuvListItem]:not(:has(yuv-list-tile))[aria-selected=true]{background-color:var(--ymt-selection-background);color:var(--ymt-on-selection-background);font-weight:500}yuv-list:not(.self-handle-selection) [yuvListItem]:has(yuv-list-tile):hover:not([aria-selected=true]) .tile{--_tile-background: var(--ymt-hover-background)}yuv-list:not(.self-handle-selection) [yuvListItem]:has(yuv-list-tile)[aria-selected=true] .tile{--_tile-background: var(--ymt-selection-background)}yuv-list:not(.self-handle-selection) [yuvListItem]:has(yuv-list-tile)[aria-current=true] .tile{--_tile-background: var(--ymt-focus-background)}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-list', standalone: true, imports: [A11yModule], template: '<ng-content />', encapsulation: ViewEncapsulation.None, host: {
-                        role: 'listbox',
-                        tabindex: '0',
-                        '[class.self-handle-selection]': 'selfHandleSelection()',
-                        '(focus)': 'onFocus()',
-                        '(keydown)': 'onKeydown($event)'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["yuv-list{display:block;max-height:100%;overflow-y:auto;outline:none}yuv-list:not(.self-handle-selection) [yuvListItem]:not(:has(yuv-list-tile)){position:relative;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}yuv-list:not(.self-handle-selection) [yuvListItem]:not(:has(yuv-list-tile)):hover,yuv-list:not(.self-handle-selection) [yuvListItem]:not(:has(yuv-list-tile))[aria-current=true]{background-color:var(--ymt-focus-background);color:var(--ymt-on-focus-background)}yuv-list:not(.self-handle-selection) [yuvListItem]:not(:has(yuv-list-tile))[aria-selected=true]{background-color:var(--ymt-selection-background);color:var(--ymt-on-selection-background);font-weight:500}yuv-list:not(.self-handle-selection) [yuvListItem]:has(yuv-list-tile):hover:not([aria-selected=true]) .tile{--_tile-background: var(--ymt-hover-background)}yuv-list:not(.self-handle-selection) [yuvListItem]:has(yuv-list-tile)[aria-selected=true] .tile{--_tile-background: var(--ymt-selection-background)}yuv-list:not(.self-handle-selection) [yuvListItem]:has(yuv-list-tile)[aria-current=true] .tile{--_tile-background: var(--ymt-focus-background)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ListItemDirective), { isSignal: true }] }], preventChangeUntil: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventChangeUntil", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], selfHandleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selfHandleSelection", required: false }] }], selfHandleClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "selfHandleClick", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], itemFocus: [{ type: i0.Output, args: ["itemFocus"] }], disableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelection", required: false }] }] } });
-
-class ListTileComponent {
-    constructor() {
-        this.iconSlot = contentChild('iconSlot', ...(ngDevMode ? [{ debugName: "iconSlot", descendants: true }] : [{
-                descendants: true
-            }]));
-        this.titleSlot = contentChild('titleSlot', ...(ngDevMode ? [{ debugName: "titleSlot" }] : []));
-        this.descriptionSlot = contentChild('descriptionSlot', ...(ngDevMode ? [{ debugName: "descriptionSlot" }] : []));
-        this.asideSlot = contentChild('asideSlot', ...(ngDevMode ? [{ debugName: "asideSlot" }] : []));
-        this.actionsSlot = contentChild('actionsSlot', ...(ngDevMode ? [{ debugName: "actionsSlot", descendants: true }] : [{
-                descendants: true
-            }]));
-        this.badgesSlot = contentChild('badgesSlot', ...(ngDevMode ? [{ debugName: "badgesSlot" }] : []));
-        this.metaSlot = contentChild('metaSlot', ...(ngDevMode ? [{ debugName: "metaSlot" }] : []));
-        this.extensionSlot = contentChild('extensionSlot', ...(ngDevMode ? [{ debugName: "extensionSlot" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ListTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.19", type: ListTileComponent, isStandalone: true, selector: "yuv-list-tile", queries: [{ propertyName: "iconSlot", first: true, predicate: ["iconSlot"], descendants: true, isSignal: true }, { propertyName: "titleSlot", first: true, predicate: ["titleSlot"], descendants: true, isSignal: true }, { propertyName: "descriptionSlot", first: true, predicate: ["descriptionSlot"], descendants: true, isSignal: true }, { propertyName: "asideSlot", first: true, predicate: ["asideSlot"], descendants: true, isSignal: true }, { propertyName: "actionsSlot", first: true, predicate: ["actionsSlot"], descendants: true, isSignal: true }, { propertyName: "badgesSlot", first: true, predicate: ["badgesSlot"], descendants: true, isSignal: true }, { propertyName: "metaSlot", first: true, predicate: ["metaSlot"], descendants: true, isSignal: true }, { propertyName: "extensionSlot", first: true, predicate: ["extensionSlot"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"tile\">\n  <div data-slot=\"icon\">\n    <ng-container *ngTemplateOutlet=\"iconSlot() || null\"></ng-container>\n  </div>\n  <div class=\"slots\"> \n    <div data-slot=\"title-description\">\n      <div data-slot=\"title\">\n        <ng-container *ngTemplateOutlet=\"titleSlot() || null\"></ng-container>\n      </div>\n      <div data-slot=\"description\">\n        <ng-container *ngTemplateOutlet=\"descriptionSlot() || null\"></ng-container>\n      </div>\n    </div>\n    <div data-slot=\"actions\">\n      <ng-container *ngTemplateOutlet=\"actionsSlot() || null\"></ng-container>\n    </div>\n    <div data-slot=\"aside\">\n      <ng-container *ngTemplateOutlet=\"asideSlot() || null\"></ng-container>\n    </div>\n    <div data-slot=\"meta\">\n      <ng-container *ngTemplateOutlet=\"metaSlot() || null\"></ng-container>\n    </div>\n    <div data-slot=\"badges\">\n      <ng-container *ngTemplateOutlet=\"badgesSlot() || null\"></ng-container>\n    </div>\n    <div class=\"extension\">\n      <ng-container *ngTemplateOutlet=\"extensionSlot() || null\"></ng-container>\n    </div>\n  </div>\n</div>\n", styles: [":host{--_tile-background: var(--tile-background, transparent);--_tile-margin: var(--tile-margin, var(--ymt-spacing-xs));--_tile-padding-inline: var(--tile-padding-inline, var(--ymt-spacing-2xl));--_tile-padding-block: var(--tile-padding-block, var(--ymt-spacing-l));--_transition-duration: var(--transition-duration, .1s);--_tile-icon-size: var(--tile-icon-size, initial);--_tile-font-title: var(--tile-font-title, var(--ymt-font-title-smallest));--_tile-font-description: var(--tile-font-description, var(--ymt-font-body));--_tile-font-meta: var(--tile-font-meta, var(--ymt-font-body-subtle));--_tile-font-aside: var(--tile-font-aside, var(--ymt-font-body-subtle));display:block;cursor:pointer}:host.dense .tile{--_tile-padding-inline: var(--ymt-spacing-m);--_tile-padding-block: var(--ymt-spacing-s);--_tile-margin: var(--ymt-spacing-xs);gap:var(--ymt-spacing-s)}:host.dense .tile .extension,:host.dense .tile [data-slot=aside],:host.dense .tile [data-slot=meta],:host.dense .tile [data-slot=actions]{display:none}:host.dense .tile [data-slot=icon]{--icon-renderer-icon-size: 18px}:host .tile{display:flex;align-items:center;background-color:var(--_tile-background);padding:calc(var(--_tile-padding-block) - var(--_tile-margin)) calc(var(--_tile-padding-inline) - var(--_tile-margin));transition:background-color var(--_transition-duration);position:relative;color:var(--ymt-text-color);border-radius:var(--ymt-corner-s);margin:var(--_tile-margin);gap:var(--ymt-spacing-m)}:host .tile .slots{display:grid;grid-template-rows:repeat(4,auto);grid-template-columns:auto;grid-template-areas:\"title-description title-description actions\" \"meta meta aside\" \"badges badges badges\" \"ext ext ext\";flex:1}:host .tile [data-slot]{-webkit-user-select:none;user-select:none;display:grid;align-self:baseline;word-break:break-word}:host .tile [data-slot=icon]{--icon-renderer-icon-size: var(--_tile-icon-size);grid-area:icon;display:flex;align-self:flex-start}:host .tile [data-slot=title-description]{grid-area:title-description;display:grid;grid-template-areas:\"title\" \"description\";align-self:flex-start}:host .tile [data-slot=title]{font:var(--_tile-font-title);grid-area:title;align-self:flex-start;--tile-slot-padding: 0}:host .tile [data-slot=description]{grid-area:description;font:var(--_tile-font-description);color:var(--ymt-text-color-subtle);--tile-slot-padding: 0}:host .tile [data-slot=meta]{grid-area:meta;font:var(--_tile-font-meta);color:var(--ymt-text-color-subtle);--tile-slot-padding: var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) 0}:host .tile [data-slot=aside]{flex:0 0 auto;grid-area:aside;font:var(--_tile-font-aside);color:var(--ymt-text-color-subtle);justify-content:flex-end;text-align:right;--tile-slot-padding: var(--ymt-spacing-2xs)}:host .tile [data-slot=actions]{opacity:.2;transition:opacity var(--_transition-duration);pointer-events:none;display:flex;justify-content:flex-end;padding-block-end:var(--ymt-spacing-2xs);gap:var(--ymt-spacing-3xs)}:host .tile:hover [data-slot=actions]{opacity:1;pointer-events:all}:host .tile [data-slot=actions]{grid-area:actions;flex:0 0 auto;display:flex;align-items:start}:host .tile [data-slot=actions] button{gap:2px}:host .tile [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host .tile .extension{grid-area:ext}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ListTileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'yuv-list-tile', imports: [CommonModule], template: "<ng-content></ng-content>\n<div class=\"tile\">\n  <div data-slot=\"icon\">\n    <ng-container *ngTemplateOutlet=\"iconSlot() || null\"></ng-container>\n  </div>\n  <div class=\"slots\"> \n    <div data-slot=\"title-description\">\n      <div data-slot=\"title\">\n        <ng-container *ngTemplateOutlet=\"titleSlot() || null\"></ng-container>\n      </div>\n      <div data-slot=\"description\">\n        <ng-container *ngTemplateOutlet=\"descriptionSlot() || null\"></ng-container>\n      </div>\n    </div>\n    <div data-slot=\"actions\">\n      <ng-container *ngTemplateOutlet=\"actionsSlot() || null\"></ng-container>\n    </div>\n    <div data-slot=\"aside\">\n      <ng-container *ngTemplateOutlet=\"asideSlot() || null\"></ng-container>\n    </div>\n    <div data-slot=\"meta\">\n      <ng-container *ngTemplateOutlet=\"metaSlot() || null\"></ng-container>\n    </div>\n    <div data-slot=\"badges\">\n      <ng-container *ngTemplateOutlet=\"badgesSlot() || null\"></ng-container>\n    </div>\n    <div class=\"extension\">\n      <ng-container *ngTemplateOutlet=\"extensionSlot() || null\"></ng-container>\n    </div>\n  </div>\n</div>\n", styles: [":host{--_tile-background: var(--tile-background, transparent);--_tile-margin: var(--tile-margin, var(--ymt-spacing-xs));--_tile-padding-inline: var(--tile-padding-inline, var(--ymt-spacing-2xl));--_tile-padding-block: var(--tile-padding-block, var(--ymt-spacing-l));--_transition-duration: var(--transition-duration, .1s);--_tile-icon-size: var(--tile-icon-size, initial);--_tile-font-title: var(--tile-font-title, var(--ymt-font-title-smallest));--_tile-font-description: var(--tile-font-description, var(--ymt-font-body));--_tile-font-meta: var(--tile-font-meta, var(--ymt-font-body-subtle));--_tile-font-aside: var(--tile-font-aside, var(--ymt-font-body-subtle));display:block;cursor:pointer}:host.dense .tile{--_tile-padding-inline: var(--ymt-spacing-m);--_tile-padding-block: var(--ymt-spacing-s);--_tile-margin: var(--ymt-spacing-xs);gap:var(--ymt-spacing-s)}:host.dense .tile .extension,:host.dense .tile [data-slot=aside],:host.dense .tile [data-slot=meta],:host.dense .tile [data-slot=actions]{display:none}:host.dense .tile [data-slot=icon]{--icon-renderer-icon-size: 18px}:host .tile{display:flex;align-items:center;background-color:var(--_tile-background);padding:calc(var(--_tile-padding-block) - var(--_tile-margin)) calc(var(--_tile-padding-inline) - var(--_tile-margin));transition:background-color var(--_transition-duration);position:relative;color:var(--ymt-text-color);border-radius:var(--ymt-corner-s);margin:var(--_tile-margin);gap:var(--ymt-spacing-m)}:host .tile .slots{display:grid;grid-template-rows:repeat(4,auto);grid-template-columns:auto;grid-template-areas:\"title-description title-description actions\" \"meta meta aside\" \"badges badges badges\" \"ext ext ext\";flex:1}:host .tile [data-slot]{-webkit-user-select:none;user-select:none;display:grid;align-self:baseline;word-break:break-word}:host .tile [data-slot=icon]{--icon-renderer-icon-size: var(--_tile-icon-size);grid-area:icon;display:flex;align-self:flex-start}:host .tile [data-slot=title-description]{grid-area:title-description;display:grid;grid-template-areas:\"title\" \"description\";align-self:flex-start}:host .tile [data-slot=title]{font:var(--_tile-font-title);grid-area:title;align-self:flex-start;--tile-slot-padding: 0}:host .tile [data-slot=description]{grid-area:description;font:var(--_tile-font-description);color:var(--ymt-text-color-subtle);--tile-slot-padding: 0}:host .tile [data-slot=meta]{grid-area:meta;font:var(--_tile-font-meta);color:var(--ymt-text-color-subtle);--tile-slot-padding: var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) var(--ymt-spacing-2xs) 0}:host .tile [data-slot=aside]{flex:0 0 auto;grid-area:aside;font:var(--_tile-font-aside);color:var(--ymt-text-color-subtle);justify-content:flex-end;text-align:right;--tile-slot-padding: var(--ymt-spacing-2xs)}:host .tile [data-slot=actions]{opacity:.2;transition:opacity var(--_transition-duration);pointer-events:none;display:flex;justify-content:flex-end;padding-block-end:var(--ymt-spacing-2xs);gap:var(--ymt-spacing-3xs)}:host .tile:hover [data-slot=actions]{opacity:1;pointer-events:all}:host .tile [data-slot=actions]{grid-area:actions;flex:0 0 auto;display:flex;align-items:start}:host .tile [data-slot=actions] button{gap:2px}:host .tile [data-slot=badges]{grid-area:badges;justify-self:end;flex:0 0 auto}:host .tile .extension{grid-area:ext}\n"] }]
-        }], propDecorators: { iconSlot: [{ type: i0.ContentChild, args: ['iconSlot', { ...{
-                            descendants: true
-                        }, isSignal: true }] }], titleSlot: [{ type: i0.ContentChild, args: ['titleSlot', { isSignal: true }] }], descriptionSlot: [{ type: i0.ContentChild, args: ['descriptionSlot', { isSignal: true }] }], asideSlot: [{ type: i0.ContentChild, args: ['asideSlot', { isSignal: true }] }], actionsSlot: [{ type: i0.ContentChild, args: ['actionsSlot', { ...{
-                            descendants: true
-                        }, isSignal: true }] }], badgesSlot: [{ type: i0.ContentChild, args: ['badgesSlot', { isSignal: true }] }], metaSlot: [{ type: i0.ContentChild, args: ['metaSlot', { isSignal: true }] }], extensionSlot: [{ type: i0.ContentChild, args: ['extensionSlot', { isSignal: true }] }] } });
-
-class YuvListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: YuvListModule, imports: [ListComponent, ListItemDirective, ListTileComponent], exports: [ListComponent, ListItemDirective, ListTileComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvListModule, imports: [ListComponent, ListTileComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: YuvListModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [ListComponent, ListItemDirective, ListTileComponent],
-                    exports: [ListComponent, ListItemDirective, ListTileComponent]
-                }]
-        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
-
-export { ListComponent, ListItemDirective, ListTileComponent, YuvListModule };
 //# sourceMappingURL=yuuvis-client-framework-list.mjs.map