ng-primitives 0.89.0 → 0.91.0

package/select/index.d.ts

@@ -1,8 +1,341 @@
-export { NgpNativeSelect } from './native-select/native-select';
-export { injectNativeSelectState, provideNativeSelectState, } from './native-select/native-select-state';
-export { NgpSelectDropdown } from './select-dropdown/select-dropdown';
-export { NgpSelectOption } from './select-option/select-option';
-export { NgpSelectPortal } from './select-portal/select-portal';
-export { NgpSelect } from './select/select';
-export { injectSelectState, provideSelectState } from './select/select-state';
-export { provideSelectConfig, injectSelectConfig } from './config/select-config';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy, Provider, Injector } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import * as ng_primitives_internal from 'ng-primitives/internal';
+import * as ng_primitives_select from 'ng-primitives/select';
+import { NgpActivatable } from 'ng-primitives/a11y';
+import * as ng_primitives_portal from 'ng-primitives/portal';
+import { NgpOverlay } from 'ng-primitives/portal';
+import { Placement } from '@floating-ui/dom';
+
+/**
+ * Apply the `ngpNativeSelect` directive to a select element that you want to enhance.
+ */
+declare class NgpNativeSelect {
+    /**
+     * The id of the select. If not provided, a unique id will be generated.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * Whether the select is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The select state.
+     */
+    protected readonly state: ng_primitives_state.CreatedState<NgpNativeSelect>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpNativeSelect, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpNativeSelect, "select[ngpNativeSelect]", ["ngpNativeSelect"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpNativeSelectDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Provides the Select state.
+ */
+declare const provideNativeSelectState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Select state.
+ */
+declare const injectNativeSelectState: <U = NgpNativeSelect>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+declare class NgpSelectDropdown {
+    /** Access the select state. */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_select.NgpSelect>>;
+    /** The dimensions of the select. */
+    protected readonly selectDimensions: _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<NgpSelectDropdown, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSelectDropdown, "[ngpSelectDropdown]", ["ngpSelectDropdown"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgpSelectOption implements OnInit, OnDestroy, NgpActivatable {
+    /** Access the select state. */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_select.NgpSelect>>;
+    /**
+     * 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<NgpSelectOption, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSelectOption, "[ngpSelectOption]", ["ngpSelectOption"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpSelectOptionValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSelectOptionDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgpSelectPortal implements OnDestroy {
+    /** Access the select 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<NgpSelectPortal, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSelectPortal, "[ngpSelectPortal]", ["ngpSelectPortal"], {}, {}, never, never, true, never>;
+}
+
+interface NgpSelectConfig {
+    /**
+     * The default placement for the select dropdown.
+     * @default 'bottom'
+     */
+    placement: Placement;
+    /**
+     * The container element or selector for the select dropdown.
+     * This can be used to control where the dropdown is rendered in the DOM.
+     * @default 'body'
+     */
+    container: HTMLElement | string | null;
+}
+/**
+ * Provide the default Select configuration
+ * @param config The Select configuration
+ * @returns The provider
+ */
+declare function provideSelectConfig(config: Partial<NgpSelectConfig>): Provider[];
+/**
+ * Inject the Select configuration
+ * @returns The global Select configuration
+ */
+declare function injectSelectConfig(): NgpSelectConfig;
+
+/**
+ * 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 NgpSelect {
+    /** Access the select configuration. */
+    protected readonly config: NgpSelectConfig;
+    /** @internal Access the select element. */
+    readonly elementRef: _angular_core.ElementRef<HTMLElement>;
+    /** Access the injector. */
+    protected readonly injector: Injector;
+    /** The unique id of the select. */
+    readonly id: _angular_core.InputSignal<string>;
+    /** The value of the select. */
+    readonly value: _angular_core.InputSignal<any>;
+    /** Event emitted when the value changes. */
+    readonly valueChange: _angular_core.OutputEmitterRef<any>;
+    /** Whether the select is multiple selection. */
+    readonly multiple: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Whether the select is disabled. */
+    readonly disabled: _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<Placement>;
+    /** The container for the dropdown. */
+    readonly container: _angular_core.InputSignal<string | HTMLElement | null>;
+    /**
+     * Store the select portal.
+     * @internal
+     */
+    readonly portal: _angular_core.WritableSignal<NgpSelectPortal | undefined>;
+    /**
+     * Store the select dropdown.
+     * @internal
+     */
+    readonly dropdown: _angular_core.WritableSignal<NgpSelectDropdown | undefined>;
+    /**
+     * Store the select options.
+     * @internal
+     */
+    readonly options: _angular_core.WritableSignal<NgpSelectOption[]>;
+    /**
+     * Access the overlay
+     * @internal
+     */
+    readonly overlay: _angular_core.Signal<ng_primitives_portal.NgpOverlay<void> | null | undefined>;
+    /**
+     * The open state of the select.
+     * @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<NgpSelectOption | undefined>;
+        activate: (item: NgpSelectOption | undefined) => void;
+        first: () => void;
+        last: () => void;
+        next: () => void;
+        previous: () => void;
+        reset: () => void;
+    };
+    /** The state of the select. */
+    protected readonly state: ng_primitives_state.CreatedState<NgpSelect>;
+    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: NgpSelectOption | undefined): void;
+    /**
+     * Deselect an option.
+     * @param option The option to deselect.
+     * @internal
+     */
+    deselectOption(option: NgpSelectOption): void;
+    /**
+     * Toggle the selection of an option.
+     * @param option The option to toggle.
+     * @internal
+     */
+    toggleOption(option: NgpSelectOption): void;
+    /**
+     * Determine if an option is selected.
+     * @param option The option to check.
+     * @internal
+     */
+    isOptionSelected(option: NgpSelectOption): 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 select.
+     * @param portal The dropdown portal.
+     * @internal
+     */
+    registerPortal(portal: NgpSelectPortal): void;
+    /**
+     * Register the dropdown with the select.
+     * @param dropdown The dropdown to register.
+     * @internal
+     */
+    registerDropdown(dropdown: NgpSelectDropdown): void;
+    /**
+     * Register an option with the select.
+     * @param option The option to register.
+     * @internal
+     */
+    registerOption(option: NgpSelectOption): void;
+    /**
+     * Unregister an option from the select.
+     * @param option The option to unregister.
+     * @internal
+     */
+    unregisterOption(option: NgpSelectOption): void;
+    /**
+     * Focus the select.
+     * @internal
+     */
+    focus(): void;
+    /** Handle keydown events for accessibility. */
+    protected handleKeydown(event: KeyboardEvent): void;
+    protected onBlur(event: FocusEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSelect, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSelect, "[ngpSelect]", ["ngpSelect"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpSelectValue"; "required": false; "isSignal": true; }; "multiple": { "alias": "ngpSelectMultiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSelectDisabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "ngpSelectCompareWith"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpSelectDropdownPlacement"; "required": false; "isSignal": true; }; "container": { "alias": "ngpSelectDropdownContainer"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpSelectValueChange"; "openChange": "ngpSelectOpenChange"; }, never, never, true, never>;
+}
+
+/**
+ * Provides the Select state.
+ */
+declare const provideSelectState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Select state.
+ */
+declare const injectSelectState: <U = NgpSelect>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+export { NgpNativeSelect, NgpSelect, NgpSelectDropdown, NgpSelectOption, NgpSelectPortal, injectNativeSelectState, injectSelectConfig, injectSelectState, provideNativeSelectState, provideSelectConfig, provideSelectState };

package/separator/index.d.ts

@@ -1,2 +1,30 @@
-export { NgpSeparatorConfig, provideSeparatorConfig } from './config/separator-config';
-export { NgpSeparator } from './separator/separator';
+import * as i0 from '@angular/core';
+import { Provider } from '@angular/core';
+import { NgpOrientation } from 'ng-primitives/common';
+
+interface NgpSeparatorConfig {
+    /**
+     * The default separator orientation
+     * @default 'horizontal'
+     */
+    orientation: NgpOrientation;
+}
+/**
+ * Provide the default Separator configuration
+ * @param config The Separator configuration
+ * @returns The provider
+ */
+declare function provideSeparatorConfig(config: Partial<NgpSeparatorConfig>): Provider[];
+
+declare class NgpSeparator {
+    private readonly config;
+    /**
+     * The orientation of the separator.
+     */
+    readonly orientation: i0.InputSignal<NgpOrientation>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpSeparator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSeparator, "[ngpSeparator]", ["ngpSeparator"], { "orientation": { "alias": "ngpSeparatorOrientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgpSeparator, provideSeparatorConfig };
+export type { NgpSeparatorConfig };