@yuuvis/client-components 3.0.0-beta.21.1

package/types/yuuvis-client-components-list.d.ts

@@ -0,0 +1,380 @@
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { Highlightable } from '@angular/cdk/a11y';
+
+/**
+ * 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>
+ * ```
+ */
+declare class ListItemDirective implements Highlightable, AfterViewInit {
+    #private;
+    onClick?: (evt: MouseEvent) => void;
+    disabled?: boolean | undefined;
+    /**
+     * Whether the item is active or not.
+     */
+    active: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the item is selected or not.
+     */
+    selected: _angular_core.InputSignal<boolean>;
+    selectedInput: _angular_core.WritableSignal<any>;
+    activeInput: _angular_core.WritableSignal<any>;
+    focusableChildren: Element[];
+    focusedIndex: number;
+    onHostClick(evt: MouseEvent): void;
+    setActiveStyles(): void;
+    setInactiveStyles(): void;
+    focusNext(): void;
+    focusPrevious(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListItemDirective, "[yuvListItem]", never, { "disabled": { "alias": "disabled"; "required": false; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * 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>
+ * ```
+ */
+declare class ListComponent implements OnDestroy {
+    #private;
+    /**
+     * 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.
+     */
+    items: _angular_core.Signal<readonly ListItemDirective[]>;
+    /**
+     * 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)
+     */
+    preventChangeUntil: _angular_core.InputSignal<() => boolean>;
+    /**
+     * 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
+     */
+    multiselect: _angular_core.InputSignal<boolean>;
+    /**
+     * 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
+     */
+    selfHandleSelection: _angular_core.InputSignal<boolean>;
+    /**
+     * 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
+     */
+    selfHandleClick: _angular_core.InputSignal<boolean>;
+    /**
+     * 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
+     */
+    autoSelect: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * 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]);
+     * }
+     * ```
+     */
+    itemSelect: _angular_core.OutputEmitterRef<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.
+     */
+    itemFocus: _angular_core.OutputEmitterRef<number>;
+    /**
+     * 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
+     */
+    disableSelection: _angular_core.InputSignal<boolean>;
+    /**
+     * 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>`.
+     */
+    selectOnEnter: boolean;
+    /**
+     * 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>`.
+     */
+    horizontal: boolean;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * 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: number): void;
+    /**
+     * 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(): void;
+    /**
+     * 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(): void;
+    /**
+     * 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: number): void;
+    /**
+     * 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: number[]): void;
+    /**
+     * 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: number, shiftKey?: boolean, ctrlKey?: boolean): void;
+    /**
+     * 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?: boolean): void;
+    /**
+     * 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.
+     */
+    protected onKeydown(event: KeyboardEvent): void;
+    /**
+     * 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)`.
+     */
+    protected onFocus(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "yuv-list", never, { "preventChangeUntil": { "alias": "preventChangeUntil"; "required": false; "isSignal": true; }; "multiselect": { "alias": "multiselect"; "required": false; "isSignal": true; }; "selfHandleSelection": { "alias": "selfHandleSelection"; "required": false; "isSignal": true; }; "selfHandleClick": { "alias": "selfHandleClick"; "required": false; "isSignal": true; }; "autoSelect": { "alias": "autoSelect"; "required": false; "isSignal": true; }; "disableSelection": { "alias": "disableSelection"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; "itemFocus": "itemFocus"; }, ["items"], ["*"], true, never>;
+}
+
+declare class ListTileComponent {
+    iconSlot: _angular_core.Signal<TemplateRef<any> | undefined>;
+    titleSlot: _angular_core.Signal<TemplateRef<any> | undefined>;
+    descriptionSlot: _angular_core.Signal<TemplateRef<any> | undefined>;
+    asideSlot: _angular_core.Signal<TemplateRef<any> | undefined>;
+    actionsSlot: _angular_core.Signal<TemplateRef<any> | undefined>;
+    badgesSlot: _angular_core.Signal<TemplateRef<any> | undefined>;
+    metaSlot: _angular_core.Signal<TemplateRef<any> | undefined>;
+    extensionSlot: _angular_core.Signal<TemplateRef<any> | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListTileComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListTileComponent, "yuv-list-tile", never, {}, {}, ["iconSlot", "titleSlot", "descriptionSlot", "asideSlot", "actionsSlot", "badgesSlot", "metaSlot", "extensionSlot"], ["*"], true, never>;
+}
+
+declare class YuvListModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuvListModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<YuvListModule, never, [typeof ListComponent, typeof ListItemDirective, typeof ListTileComponent], [typeof ListComponent, typeof ListItemDirective, typeof ListTileComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<YuvListModule>;
+}
+
+export { ListComponent, ListItemDirective, ListTileComponent, YuvListModule };

package/types/yuuvis-client-components-master-details.d.ts

@@ -0,0 +1,69 @@
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, TemplateRef } from '@angular/core';
+
+interface MasterDetailsLayoutOptions {
+    masterSize?: number;
+    masterMinSize?: number;
+    detailsSize?: number;
+    detailsMinSize?: number;
+    resizable: boolean;
+}
+
+/**
+ * Component rendering a master/details view.
+ *
+ * @example
+ * <yuv-master-details [(detailsActive)]="detailsActive">
+ *   <ng-template #yuvMasterPane>Main Pane</ng-template>
+ *   <ng-template #yuvDetailsPane>Details Pane</ng-template>
+ * </yuv-master-details>
+ */
+declare class YuvMasterDetailsComponent implements AfterViewInit {
+    #private;
+    masterPane: _angular_core.Signal<TemplateRef<any>>;
+    detailsPane: _angular_core.Signal<TemplateRef<any>>;
+    detailsPaneTplateRef: _angular_core.Signal<TemplateRef<any>>;
+    private _defaultLayoutOptions;
+    /**
+     * Enable/disable details pane (also use as two-way-bound variable: [(detailsActive)])
+     */
+    detailsActive: _angular_core.ModelSignal<boolean>;
+    smallScreenLayout: _angular_core.WritableSignal<boolean>;
+    /**
+     * Layout settings is the state of the master details that could be persisted.
+     * Setting a `layoutSettingsID` will save the current state (details area visibilkity and
+     * split area sizes etc.) to the local storage. If the component is created, it will load
+     * those settings and re-apply them.
+     */
+    readonly layoutSettingsID: _angular_core.InputSignal<string | undefined>;
+    private _layoutOptions;
+    /**
+     * Layout options to be applied.
+     */
+    set layoutOptions(lo: Partial<MasterDetailsLayoutOptions>);
+    get layoutOptions(): MasterDetailsLayoutOptions;
+    undockableDetails: _angular_core.InputSignal<boolean>;
+    /**
+     * Styles tp be applied to the panels
+     */
+    panelStyle: _angular_core.InputSignal<{
+        [key: string]: string;
+    } | undefined>;
+    /**
+     * Size of the gutter in Pixel.
+     */
+    gutterSize: _angular_core.InputSignal<number | undefined>;
+    onPopIn(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuvMasterDetailsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuvMasterDetailsComponent, "yuv-master-details", never, { "detailsActive": { "alias": "detailsActive"; "required": false; "isSignal": true; }; "layoutSettingsID": { "alias": "layoutSettingsID"; "required": false; "isSignal": true; }; "layoutOptions": { "alias": "layoutOptions"; "required": false; }; "undockableDetails": { "alias": "undockableDetails"; "required": false; "isSignal": true; }; "panelStyle": { "alias": "panelStyle"; "required": false; "isSignal": true; }; "gutterSize": { "alias": "gutterSize"; "required": false; "isSignal": true; }; }, { "detailsActive": "detailsActiveChange"; }, ["masterPane", "detailsPane"], never, true, never>;
+}
+
+declare class YuvMasterDetailsModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuvMasterDetailsModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<YuvMasterDetailsModule, never, [typeof YuvMasterDetailsComponent], [typeof YuvMasterDetailsComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<YuvMasterDetailsModule>;
+}
+
+export { YuvMasterDetailsComponent, YuvMasterDetailsModule };
+export type { MasterDetailsLayoutOptions };

package/types/yuuvis-client-components-overflow-hidden.d.ts

@@ -0,0 +1,72 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
+
+/**
+ * A layout component that switches rendered content based on available space.
+ *
+ * @remarks
+ * When there is sufficient space, the `yuvDefaultSlot` content is displayed.
+ * Once the default content would overflow its container, it is hidden and the
+ * optional `yuvOverflowSlot` content is shown in its place. If no overflow slot
+ * is provided, the component simply disappears to free up space for surrounding
+ * components.
+ *
+ * This can also be used to remove certain elements on small screens, making layouts more adaptive.
+ *
+ * Overflow detection uses an
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver | IntersectionObserver}
+ * that watches whether the default slot is fully visible within the host element.
+ * The host element receives the CSS class `overflowing` while content is hidden.
+ *
+ * @example
+ * ```html
+ * <yuv-overflow-hidden>
+ *   <ng-template #yuvDefaultSlot>
+ *     <my-full-component />
+ *   </ng-template>
+ *   <!-- optional: shown instead of the default slot when space is insufficient -->
+ *   <ng-template #yuvOverflowSlot>
+ *     <my-compact-component />
+ *   </ng-template>
+ * </yuv-overflow-hidden>
+ * ```
+ */
+declare class OverflowHiddenComponent implements AfterViewInit, OnDestroy {
+    #private;
+    /**
+     * Required content template rendered when there is sufficient space.
+     *
+     * @remarks
+     * Declare the template with the variable `#yuvDefaultSlot` inside the component's
+     * content projection area.
+     */
+    defaultSlot: i0.Signal<TemplateRef<any>>;
+    /**
+     * Optional content template rendered when the default slot overflows.
+     *
+     * @remarks
+     * Declare the template with the variable `#yuvOverflowSlot` inside the component's
+     * content projection area. When omitted, the component becomes invisible once its
+     * default content no longer fits.
+     */
+    overflowSlot: i0.Signal<TemplateRef<any> | undefined>;
+    /**
+     * Reactive signal indicating whether the default slot content is currently overflowing.
+     *
+     * `true` when the default content no longer fits within the host element and is hidden;
+     * `false` when the default content is fully visible.
+     */
+    overflow: i0.WritableSignal<boolean>;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OverflowHiddenComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OverflowHiddenComponent, "yuv-overflow-hidden", never, {}, {}, ["defaultSlot", "overflowSlot"], never, true, never>;
+}
+
+declare class YuvOverflowHiddenModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<YuvOverflowHiddenModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<YuvOverflowHiddenModule, never, [typeof OverflowHiddenComponent], [typeof OverflowHiddenComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<YuvOverflowHiddenModule>;
+}
+
+export { OverflowHiddenComponent, YuvOverflowHiddenModule };

package/types/yuuvis-client-components-overflow-menu.d.ts

@@ -0,0 +1,89 @@
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, OnDestroy } from '@angular/core';
+
+interface OverflowMenuItem {
+    id: string;
+    icon: string;
+    svgIcon?: string;
+    label: string;
+    active?: boolean;
+    group?: string;
+    disabled?: boolean;
+    callback: (item: OverflowMenuItem) => void;
+}
+
+type __MenuItem = OverflowMenuItem & {
+    overflow: boolean;
+};
+interface MenuGroup {
+    id: string;
+    items: __MenuItem[];
+}
+/**
+ * A responsive toolbar component that automatically moves items that no longer
+ * fit into the available horizontal (or vertical) space into an overflow menu.
+ *
+ * Items are rendered as icon buttons with a tooltip. When items overflow, they
+ * collapse into a `MatMenu` triggered by the overflow icon button. Items that
+ * share the same `group` value on {@link OverflowMenuItem} are rendered in
+ * labeled sections both in the toolbar and in the overflow menu.
+ *
+ * @example
+ * ```html
+ * <yuv-overflow-menu
+ *   [menuItems]="actions"
+ *   [groupLabels]="{ edit: 'Edit', view: 'View' }"
+ * />
+ * ```
+ *
+ * @selector `yuv-overflow-menu`
+ */
+declare class OverflowMenuComponent implements AfterViewInit, OnDestroy {
+    #private;
+    /**
+     * Material icon ligature used for the overflow trigger button.
+     * Defaults to `'more_horiz'` (three horizontal dots).
+     */
+    overflowIcon: _angular_core.InputSignal<string>;
+    /**
+     * Optional display labels for item groups shown in the overflow menu.
+     * The key must match the `group` property of the corresponding
+     * {@link OverflowMenuItem} entries.
+     *
+     * @example
+     * ```ts
+     * { edit: 'Edit actions', view: 'View options' }
+     * ```
+     */
+    groupLabels: _angular_core.InputSignal<Record<string, string> | undefined>;
+    /**
+     * The list of items to render in the toolbar.
+     * Items are displayed as icon buttons and overflow into a `MatMenu`
+     * when they no longer fit the available space.
+     */
+    menuItems: _angular_core.InputSignal<OverflowMenuItem[]>;
+    /**
+     * When `true` the toolbar is laid out vertically and tooltips appear
+     * to the right of each button instead of below.
+     * The host element receives the CSS class `vertical` to allow style overrides.
+     * Defaults to `false`.
+     */
+    vertical: _angular_core.InputSignal<boolean>;
+    __menuGroups: _angular_core.Signal<MenuGroup[]>;
+    private __menuItems;
+    overflowGroups: _angular_core.WritableSignal<MenuGroup[]>;
+    activeStyles: {};
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OverflowMenuComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OverflowMenuComponent, "yuv-overflow-menu", never, { "overflowIcon": { "alias": "overflowIcon"; "required": false; "isSignal": true; }; "groupLabels": { "alias": "groupLabels"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class YuvOverflowMenuModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuvOverflowMenuModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<YuvOverflowMenuModule, never, [typeof OverflowMenuComponent], [typeof OverflowMenuComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<YuvOverflowMenuModule>;
+}
+
+export { OverflowMenuComponent, YuvOverflowMenuModule };
+export type { OverflowMenuItem };