@yuuvis/client-framework 2.19.0 → 2.20.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, linkedSignal, HostListener, Input, Directive, contentChildren, effect, untracked, output, HostAttributeToken, ViewEncapsulation, Component, contentChild, NgModule } from '@angular/core';
+import { inject, ElementRef, input, linkedSignal, HostListener, 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';
@@ -106,174 +106,319 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }] } });
 
 /**
- * Component rendering a simple list of items. It supports keyboard
- * navigation and takes care of accessibility. To create a list just wrap
- * `yuvListItem` elements into this component:
+ * 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)="itemSelected($event)">
+ * <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);
-        this.#itemsEffect = effect(() => {
-            const items = this.items();
-            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) => {
-                    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();
-            });
-        });
-        this.#selection = [];
         /**
-         * Function that returns `true` if selection changes should be prevented.
-         * This can be used to temporarily block selection changes, e.g. while
-         * there is a pending change inside another component that refers to the
-         * current selection.
+         * 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);
         /**
-         * If `true`, multiple items can be selected at once.
+         * 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);
         /**
-         * If `true`, the component will handle selection itself. This means that
-         * the parent component will be responsible for styling the selected and
-         * focused items. If `false`, the component will take care of visualizing
-         * the selection and focus states.
+         * 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);
         /**
-         * By default the list handles click events on its items to select them.
-         * If this input is set to `true`, the parent component has to handle
-         * click events itself and call the `select()` method accordingly.
+         * 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`).
          *
-         * If you for example use the `ClickDoubleDirective` on the list items,
-         * you have to set this input to `true` to prevent the list from
-         * selecting items on single click.
          * @default false
          */
         this.selfHandleClick = input(false);
         /**
-         * If `true`, the list will select an item automatically on initialization.
-         * First, list will search for an item item that has the "selected"-attribute
-         * and is not disabled. If no such item exists, the first item will be selected.
+         * 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, { transform: (value) => coerceBooleanProperty(value) });
+        this.autoSelect = input(false, {
+            transform: (value) => coerceBooleanProperty(value)
+        });
         /**
-         * Emits the selected items indices.
+         * 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 index of the item that has focus.
-         * @type {output<number>}
+         * 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();
-        this.selectOnEnter = (inject(new HostAttributeToken('selectOnEnter'), { optional: true }) || 'false') === 'true';
-        this.horizontal = (inject(new HostAttributeToken('horizontal'), { optional: true }) || 'false') === 'true';
         /**
-         * If `true`, the list will not allow selection of items.
-         * This is useful for lists that are used for display purposes only.
+         * 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);
+        //#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);
     }
-    #dir;
-    #elRef;
-    onKeydown(event) {
-        if (this.disableSelection())
-            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();
-            }
-        }
-        else
-            this.#keyManager?.onKeydown(event);
-    }
-    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();
-            }
-        }, 300);
+    ngOnDestroy() {
+        this.#keyManager.destroy();
     }
-    #itemsEffect;
-    #keyManager;
-    #selection;
-    #lastSelection;
+    //#endregion
+    //#region Public
     /**
-     * Sets the active (focused) item by index. This updates the visual focus
-     * indicator and scrolls the item into view, without changing the selection.
+     * 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' });
     }
     /**
-     * Shift the current selection by the given offset. Used for dynamically
-     * adding items to the list without losing the current selection.
-     * @param offset Number of items to shift the selection by.
+     * 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) {
-        if (this.#keyManager?.activeItemIndex)
+        // 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)));
     }
     /**
-     * Select multiple items by their indices.
+     * 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())
@@ -286,10 +431,25 @@ class ListComponent {
         this.#emitSelection();
     }
     /**
-     * Selects a single item by its index.
-     * @param index Index of the item to select.
-     * @param shiftKey If `true`, selection will be extended from the last selected item to the given index.
-     * @param ctrlKey If `true`, the item at the given index will be toggled in the selection.
+     * 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())
@@ -299,17 +459,23 @@ class ListComponent {
         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();
     }
-    #preventEmit() {
-        const preventUntilIsTrue = this.preventChangeUntil();
-        return preventUntilIsTrue();
-    }
     /**
-     * Clear the current selection.
-     * @param silent If `true`, the `itemSelect` event will not be emitted.
+     * 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())
@@ -321,6 +487,84 @@ class ListComponent {
                 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 = [];
@@ -378,22 +622,22 @@ class ListComponent {
             this.select(itemIndexToSelect);
         }
     }
-    ngOnDestroy() {
-        this.#keyManager?.destroy();
-    }
+    //#endregion
+    //#region Effects
+    #itemsEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.20", 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></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: CommonModule }, { kind: "ngmodule", type: A11yModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.20", 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: CommonModule }, { kind: "ngmodule", type: A11yModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-list', standalone: true, imports: [CommonModule, A11yModule], template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'yuv-list', standalone: true, imports: [CommonModule, A11yModule], template: '<ng-content />', encapsulation: ViewEncapsulation.None, host: {
                         role: 'listbox',
                         tabindex: '0',
                         '[class.self-handle-selection]': 'selfHandleSelection()',
                         '(focus)': 'onFocus()',
                         '(keydown)': 'onKeydown($event)'
-                    }, 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"] }]
-        }] });
+                    }, 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: () => [] });
 
 class ListTileComponent {
     constructor() {