ng-primitives 0.89.0 → 0.90.0

package/combobox/index.d.ts

@@ -1,8 +1,414 @@
-export { NgpComboboxButton } from './combobox-button/combobox-button';
-export { NgpComboboxDropdown } from './combobox-dropdown/combobox-dropdown';
-export { NgpComboboxInput } from './combobox-input/combobox-input';
-export { NgpComboboxOption } from './combobox-option/combobox-option';
-export { NgpComboboxPortal } from './combobox-portal/combobox-portal';
-export { NgpCombobox, type NgpComboboxPlacement } from './combobox/combobox';
-export { injectComboboxState, provideComboboxState } from './combobox/combobox-state';
-export { NgpComboboxConfig, provideComboboxConfig } from './config/combobox-config';
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy, Provider, Injector } from '@angular/core';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as ng_primitives_combobox from 'ng-primitives/combobox';
+import * as ng_primitives_internal from 'ng-primitives/internal';
+import * as ng_primitives_utils from 'ng-primitives/utils';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { NgpActivatable } from 'ng-primitives/a11y';
+import * as ng_primitives_portal from 'ng-primitives/portal';
+import { NgpOverlay } from 'ng-primitives/portal';
+
+declare class NgpComboboxButton {
+    /** Access the combobox state. */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_combobox.NgpCombobox>>;
+    /**
+     * Access the element reference.
+     * @internal
+     */
+    readonly elementRef: _angular_core.ElementRef<HTMLButtonElement>;
+    /** The id of the button. */
+    readonly id: _angular_core.InputSignal<string>;
+    /** The id of the dropdown. */
+    readonly dropdownId: _angular_core.Signal<string | undefined>;
+    constructor();
+    protected toggleDropdown(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpComboboxButton, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpComboboxButton, "[ngpComboboxButton]", ["ngpComboboxButton"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgpComboboxDropdown {
+    /** Access the combobox state. */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_combobox.NgpCombobox>>;
+    /** The dimensions of the combobox. */
+    protected readonly comboboxDimensions: _angular_core.Signal<ng_primitives_internal.Dimensions>;
+    /** The dimensions of the combobox. */
+    protected readonly inputDimensions: _angular_core.Signal<ng_primitives_internal.Dimensions>;
+    /** Store the combobox button dimensions. */
+    protected readonly buttonDimensions: _angular_core.Signal<ng_primitives_internal.Dimensions>;
+    /**
+     * Access the element reference.
+     * @internal
+     */
+    readonly elementRef: _angular_core.ElementRef<HTMLElement>;
+    /** The id of the dropdown. */
+    readonly id: _angular_core.InputSignal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpComboboxDropdown, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpComboboxDropdown, "[ngpComboboxDropdown]", ["ngpComboboxDropdown"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgpComboboxInput {
+    /** Access the combobox state. */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_combobox.NgpCombobox>>;
+    /**
+     * Access the element reference.
+     * @internal
+     */
+    readonly elementRef: _angular_core.ElementRef<HTMLInputElement>;
+    /** The id of the input. */
+    readonly id: _angular_core.InputSignal<string>;
+    /** The id of the dropdown. */
+    readonly dropdownId: _angular_core.Signal<string | undefined>;
+    /** The id of the active descendant. */
+    protected readonly activeDescendant: _angular_core.Signal<string | undefined>;
+    /** Determine if the pointer was used to focus the input. */
+    protected pointerFocused: boolean;
+    /**
+     * The control status - this is required as we apply them to the combobox element as well as the input element.
+     * @internal
+     */
+    readonly controlStatus: _angular_core.Signal<ng_primitives_utils.NgpControlStatus>;
+    constructor();
+    /** Handle keydown events for accessibility. */
+    protected handleKeydown(event: KeyboardEvent): void;
+    protected closeDropdown(event: FocusEvent): void;
+    /**
+     * Focus the input field
+     * @internal
+     */
+    focus(): void;
+    protected highlightText(): void;
+    protected handlePointerDown(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpComboboxInput, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpComboboxInput, "input[ngpComboboxInput]", ["ngpComboboxInput"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgpComboboxOption implements OnInit, OnDestroy, NgpActivatable {
+    /** Access the combobox state. */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_combobox.NgpCombobox>>;
+    /**
+     * The element reference of the option.
+     * @internal
+     */
+    readonly elementRef: _angular_core.ElementRef<HTMLElement>;
+    /** The id of the option. */
+    readonly id: _angular_core.InputSignal<string>;
+    /** @required The value of the option. */
+    readonly value: _angular_core.InputSignal<any>;
+    /** The disabled state of the option. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether this option is the active descendant.
+     * @internal
+     */
+    protected readonly active: _angular_core.Signal<boolean>;
+    /** Whether this option is selected. */
+    protected readonly selected: _angular_core.Signal<boolean>;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Select the option.
+     * @internal
+     */
+    select(): void;
+    /**
+     * Scroll the option into view.
+     * @internal
+     */
+    scrollIntoView(): void;
+    /**
+     * Whenever the pointer enters the option, activate it.
+     * @internal
+     */
+    protected onPointerEnter(): void;
+    /**
+     * Whenever the pointer leaves the option, deactivate it.
+     * @internal
+     */
+    protected onPointerLeave(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpComboboxOption, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpComboboxOption, "[ngpComboboxOption]", ["ngpComboboxOption"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpComboboxOptionValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpComboboxOptionDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgpComboboxPortal implements OnDestroy {
+    /** Access the combobox state. */
+    private readonly state;
+    /** Access the view container reference. */
+    private readonly viewContainerRef;
+    /** Access the template reference. */
+    private readonly templateRef;
+    /** Access the injector. */
+    private readonly injector;
+    /**
+     * The overlay that manages the popover
+     * @internal
+     */
+    readonly overlay: _angular_core.WritableSignal<NgpOverlay<void> | null>;
+    constructor();
+    /** Cleanup the portal. */
+    ngOnDestroy(): void;
+    /**
+     * Attach the portal.
+     * @internal
+     */
+    show(): Promise<void>;
+    /**
+     * Detach the portal.
+     * @internal
+     */
+    detach(): Promise<void>;
+    /**
+     * Create the overlay that will contain the dropdown
+     */
+    private createOverlay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpComboboxPortal, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpComboboxPortal, "[ngpComboboxPortal]", ["ngpComboboxPortal"], {}, {}, never, never, true, never>;
+}
+
+interface NgpComboboxConfig {
+    /**
+     * The default placement for the combobox dropdown.
+     * @default 'bottom'
+     */
+    placement: NgpComboboxPlacement;
+    /**
+     * The container element or selector for the combobox dropdown.
+     * This can be used to control where the dropdown is rendered in the DOM.
+     * @default 'body'
+     */
+    container: HTMLElement | string | null;
+}
+/**
+ * Provide the default Combobox configuration
+ * @param config The Combobox configuration
+ * @returns The provider
+ */
+declare function provideComboboxConfig(config: Partial<NgpComboboxConfig>): Provider[];
+
+/**
+ * Ideally we would use a generic type here, unfortunately, unlike in React,
+ * we cannot infer the type based on another input. For example, if multiple
+ * is true, we cannot infer that the value is an array of T. Using a union
+ * type is not ideal either because it requires the user to handle multiple cases.
+ * Using a generic also isn't ideal because we need to use T as both an array and
+ * a single value.
+ *
+ * Any seems to be used by Angular Material, ng-select, and other libraries
+ * so we will use it here as well.
+ */
+type T = any;
+declare class NgpCombobox {
+    /** Access the combobox configuration. */
+    protected readonly config: NgpComboboxConfig;
+    /** @internal Access the combobox element. */
+    readonly elementRef: _angular_core.ElementRef<HTMLElement>;
+    /** Access the injector. */
+    protected readonly injector: Injector;
+    /** The value of the combobox. */
+    readonly value: _angular_core.InputSignal<any>;
+    /** Event emitted when the value changes. */
+    readonly valueChange: _angular_core.OutputEmitterRef<any>;
+    /** Whether the combobox is multiple selection. */
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Whether the combobox is disabled. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Whether the combobox allows deselection in single selection mode. */
+    readonly allowDeselect: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Emit when the dropdown open state changes. */
+    readonly openChange: _angular_core.OutputEmitterRef<boolean>;
+    /** The comparator function used to compare options. */
+    readonly compareWith: _angular_core.InputSignal<(a: T | undefined, b: T | undefined) => boolean>;
+    /** The position of the dropdown. */
+    readonly placement: _angular_core.InputSignal<NgpComboboxPlacement>;
+    /** The container for the dropdown. */
+    readonly container: _angular_core.InputSignal<string | HTMLElement | null>;
+    /**
+     * Store the combobox input
+     * @internal
+     */
+    readonly input: _angular_core.WritableSignal<NgpComboboxInput | undefined>;
+    /**
+     * Store the combobox button.
+     * @internal
+     */
+    readonly button: _angular_core.WritableSignal<NgpComboboxButton | undefined>;
+    /**
+     * Store the combobox portal.
+     * @internal
+     */
+    readonly portal: _angular_core.WritableSignal<NgpComboboxPortal | undefined>;
+    /**
+     * Store the combobox dropdown.
+     * @internal
+     */
+    readonly dropdown: _angular_core.WritableSignal<NgpComboboxDropdown | undefined>;
+    /**
+     * Store the combobox options.
+     * @internal
+     */
+    readonly options: _angular_core.WritableSignal<NgpComboboxOption[]>;
+    /**
+     * Access the overlay
+     * @internal
+     */
+    readonly overlay: _angular_core.Signal<ng_primitives_portal.NgpOverlay<void> | null | undefined>;
+    /**
+     * The open state of the combobox.
+     * @internal
+     */
+    readonly open: _angular_core.Signal<boolean>;
+    /**
+     * The active key descendant manager.
+     * @internal
+     */
+    readonly activeDescendantManager: {
+        activeDescendant: _angular_core.Signal<string | undefined>;
+        activeItem: _angular_core.Signal<NgpComboboxOption | undefined>;
+        activate: (item: NgpComboboxOption | undefined) => void;
+        first: () => void;
+        last: () => void;
+        next: () => void;
+        previous: () => void;
+        reset: () => void;
+    };
+    /** The control status */
+    protected readonly controlStatus: _angular_core.Signal<ng_primitives_utils.NgpControlStatus | undefined>;
+    /** The state of the combobox. */
+    protected readonly state: ng_primitives_state.CreatedState<NgpCombobox>;
+    constructor();
+    /**
+     * Open the dropdown.
+     * @internal
+     */
+    openDropdown(): Promise<void>;
+    /**
+     * Close the dropdown.
+     * @internal
+     */
+    closeDropdown(): void;
+    /**
+     * Toggle the dropdown.
+     * @internal
+     */
+    toggleDropdown(): Promise<void>;
+    /**
+     * Select an option.
+     * @param option The option to select.
+     * @internal
+     */
+    selectOption(option: NgpComboboxOption | undefined): void;
+    /**
+     * Deselect an option.
+     * @param option The option to deselect.
+     * @internal
+     */
+    deselectOption(option: NgpComboboxOption): void;
+    /**
+     * Toggle the selection of an option.
+     * @param option The option to toggle.
+     * @internal
+     */
+    toggleOption(option: NgpComboboxOption): void;
+    /**
+     * Determine if an option is selected.
+     * @param option The option to check.
+     * @internal
+     */
+    isOptionSelected(option: NgpComboboxOption): boolean;
+    /**
+     * Activate the next option in the list if there is one.
+     * If there is no option currently active, activate the selected option or the first option.
+     * @internal
+     */
+    activateNextOption(): void;
+    /**
+     * Activate the previous option in the list if there is one.
+     * @internal
+     */
+    activatePreviousOption(): void;
+    /**
+     * Register the dropdown portal with the combobox.
+     * @param portal The dropdown portal.
+     * @internal
+     */
+    registerPortal(portal: NgpComboboxPortal): void;
+    /**
+     * Register the combobox input with the combobox.
+     * @param input The combobox input.
+     * @internal
+     */
+    registerInput(input: NgpComboboxInput): void;
+    /**
+     * Register the combobox button with the combobox.
+     * @param button The combobox button.
+     * @internal
+     */
+    registerButton(button: NgpComboboxButton): void;
+    /**
+     * Register the dropdown with the combobox.
+     * @param dropdown The dropdown to register.
+     * @internal
+     */
+    registerDropdown(dropdown: NgpComboboxDropdown): void;
+    /**
+     * Register an option with the combobox.
+     * @param option The option to register.
+     * @internal
+     */
+    registerOption(option: NgpComboboxOption): void;
+    /**
+     * Unregister an option from the combobox.
+     * @param option The option to unregister.
+     * @internal
+     */
+    unregisterOption(option: NgpComboboxOption): void;
+    /**
+     * Focus the combobox.
+     * When an input element is present, it will be focused.
+     * Otherwise, the combobox element itself will be focused.
+     * This enables keyboard navigation for comboboxes without input elements.
+     * @internal
+     */
+    focus(): void;
+    /**
+     * Handle keydown events for keyboard navigation and accessibility.
+     * Supports:
+     * - Arrow Down: Open dropdown or navigate to next option
+     * - Arrow Up: Open dropdown or navigate to previous option
+     * - Home: Navigate to first option
+     * - End: Navigate to last option
+     * - Enter: Select the currently active option
+     * - Escape: Close the dropdown
+     * @param event - The keyboard event
+     * @internal
+     */
+    protected handleKeydown(event: KeyboardEvent): void;
+    /**
+     * Handle blur events to manage dropdown closing behavior.
+     * The dropdown will remain open if focus moves to:
+     * - The dropdown itself
+     * - The combobox button
+     * - The combobox input
+     * Otherwise, the dropdown will be closed.
+     * @param event - The focus event
+     * @internal
+     */
+    protected onBlur(event: FocusEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpCombobox, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpCombobox, "[ngpCombobox]", ["ngpCombobox"], { "value": { "alias": "ngpComboboxValue"; "required": false; "isSignal": true; }; "multiple": { "alias": "ngpComboboxMultiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpComboboxDisabled"; "required": false; "isSignal": true; }; "allowDeselect": { "alias": "ngpComboboxAllowDeselect"; "required": false; "isSignal": true; }; "compareWith": { "alias": "ngpComboboxCompareWith"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpComboboxDropdownPlacement"; "required": false; "isSignal": true; }; "container": { "alias": "ngpComboboxDropdownContainer"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpComboboxValueChange"; "openChange": "ngpComboboxOpenChange"; }, never, never, true, never>;
+}
+type NgpComboboxPlacement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+
+/**
+ * Provides the Combobox state.
+ */
+declare const provideComboboxState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Combobox state.
+ */
+declare const injectComboboxState: <U = NgpCombobox>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+export { NgpCombobox, NgpComboboxButton, NgpComboboxDropdown, NgpComboboxInput, NgpComboboxOption, NgpComboboxPortal, injectComboboxState, provideComboboxConfig, provideComboboxState };
+export type { NgpComboboxConfig, NgpComboboxPlacement };

package/common/index.d.ts

@@ -1,4 +1,31 @@
-export { NgpHeader } from './header/header';
-export { injectHeader, NgpHeaderToken } from './header/header-token';
-export { NgpOrientation } from './types/orientation';
-export { NgpSelectionMode } from './types/selection';
+import * as i0 from '@angular/core';
+import { InjectionToken } from '@angular/core';
+
+/**
+ * @deprecated
+ */
+declare class NgpHeader {
+    /**
+     * The id of the header.
+     */
+    readonly id: i0.InputSignal<string>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpHeader, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpHeader, "[ngpHeader]", ["ngpHeader"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @deprecated
+ */
+declare const NgpHeaderToken: InjectionToken<NgpHeader>;
+/**
+ * Inject the Header directive instance
+ */
+declare function injectHeader(): NgpHeader;
+
+type NgpOrientation = 'horizontal' | 'vertical';
+
+type NgpSelectionMode = 'single' | 'multiple';
+
+export { NgpHeader, NgpHeaderToken, injectHeader };
+export type { NgpOrientation, NgpSelectionMode };