ng-primitives 0.89.0 → 0.91.0

package/internal/index.d.ts

@@ -1,10 +1,201 @@
-export { NgpExitAnimation, NgpExitAnimationRef, setupExitAnimation, } from './exit-animation/exit-animation';
-export { injectExitAnimationManager, NgpExitAnimationManager, provideExitAnimationManager, } from './exit-animation/exit-animation-manager';
-export * from './signals/explicit-effect';
-export * from './style-injector/style-injector';
-export * from './utilities/dom-removal';
-export * from './utilities/element-ref';
-export { fromMutationObserver } from './utilities/mutation-observer';
-export { setupOverflowListener } from './utilities/overflow';
-export { Dimensions, fromResizeEvent, injectDimensions, observeResize } from './utilities/resize';
-export * from './utilities/scrolling';
+import * as i0 from '@angular/core';
+import { OnDestroy, ClassProvider, EffectCleanupRegisterFn, CreateEffectOptions, EffectRef, ElementRef, Signal, Injector } from '@angular/core';
+import { Observable } from 'rxjs';
+
+declare class NgpExitAnimation implements OnDestroy {
+    /** The animation manager. */
+    private readonly animationManager;
+    /** Access the element reference. */
+    protected readonly elementRef: i0.ElementRef<HTMLElement>;
+    /** Exist animation reference. */
+    protected readonly ref: NgpExitAnimationRef;
+    constructor();
+    ngOnDestroy(): void;
+    /** Mark the element as exiting. */
+    exit(): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpExitAnimation, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpExitAnimation, "[ngpExitAnimation]", ["ngpExitAnimation"], {}, {}, never, never, true, never>;
+}
+interface NgpExitAnimationOptions {
+    /** The element to animate. */
+    element: HTMLElement;
+}
+interface NgpExitAnimationRef {
+    /** Mark the element as exiting and wait for the animation to finish. */
+    exit: () => Promise<void>;
+}
+declare function setupExitAnimation({ element }: NgpExitAnimationOptions): NgpExitAnimationRef;
+
+declare class NgpExitAnimationManager {
+    /** Store the instances of the exit animation directive. */
+    private readonly instances;
+    /** Add an instance to the manager. */
+    add(instance: NgpExitAnimation): void;
+    /** Remove an instance from the manager. */
+    remove(instance: NgpExitAnimation): void;
+    /** Exit all instances. */
+    exit(): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpExitAnimationManager, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NgpExitAnimationManager>;
+}
+declare function provideExitAnimationManager(): ClassProvider;
+declare function injectExitAnimationManager(): NgpExitAnimationManager;
+
+/**
+ * This implementation is heavily inspired by the great work on ngextension!
+ * https://github.com/ngxtension/ngxtension-platform/blob/main/libs/ngxtension/explicit-effect/src/explicit-effect.ts
+ */
+
+/**
+ * We want to have the Tuple in order to use the types in the function signature
+ */
+type ExplicitEffectValues<T> = {
+    [K in keyof T]: () => T[K];
+};
+/**
+ * This explicit effect function will take the dependencies and the function to run when the dependencies change.
+ * @param deps - The dependencies that the effect will run on
+ * @param fn - The function to run when the dependencies change
+ * @param options - The options for the effect with the addition of defer (it allows the computation to run on first change, not immediately)
+ */
+declare function explicitEffect<Input extends readonly unknown[], Params = Input>(deps: readonly [...ExplicitEffectValues<Input>], fn: (deps: Params, onCleanup: EffectCleanupRegisterFn) => void, options?: CreateEffectOptions): EffectRef;
+
+/**
+ * A utility service for injecting styles into the document.
+ * Angular doesn't allow directives to specify styles, only components.
+ * As we ship directives, occasionally we need to associate styles with them.
+ * This service allows us to programmatically inject styles into the document.
+ */
+declare class StyleInjector {
+    /**
+     * Access the CSP nonce
+     */
+    private readonly cspNonce;
+    /**
+     * Access the document.
+     */
+    private readonly document;
+    /**
+     * Detect the platform.
+     */
+    private readonly platformId;
+    /**
+     * Store the map of style elements with their unique identifiers.
+     */
+    private readonly styleElements;
+    constructor();
+    /**
+     * Inject a style into the document.
+     * @param id The unique identifier for the style.
+     * @param style The style to inject.
+     */
+    add(id: string, style: string): void;
+    /**
+     * Remove a style from the document.
+     * @param id The unique identifier for the style.
+     */
+    remove(id: string): void;
+    /**
+     * Collect any styles that were rendered by the server.
+     */
+    private collectServerStyles;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StyleInjector, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<StyleInjector>;
+}
+declare function injectStyleInjector(): StyleInjector;
+
+/**
+ * Whenever an element is removed from the DOM, we call the callback.
+ * @param element The element to watch for removal.
+ * @param callback The callback to call when the element is removed.
+ */
+declare function onDomRemoval(element: HTMLElement, callback: () => void): void;
+
+/**
+ * A simple utility function to inject an element reference with less boilerplate.
+ * @returns The element reference.
+ */
+declare function injectElementRef<T extends HTMLElement>(): ElementRef<T>;
+
+interface NgpMutationObserverOptions {
+    /**
+     * Whether to listen for events.
+     */
+    disabled?: Signal<boolean>;
+    /**
+     * The injector to use when called from outside of the injector context.
+     */
+    injector?: Injector;
+    /**
+     * Whether the childList should be observed.
+     */
+    childList?: boolean;
+    /**
+     * Whether the subtree should be observed.
+     */
+    subtree?: boolean;
+    /**
+     * Whether the attributes should be observed.
+     */
+    attributes?: boolean;
+    /**
+     * Whether the characterData should be observed.
+     */
+    characterData?: boolean;
+    /**
+     * Whether the attributeFilter should be observed.
+     */
+    attributeFilter?: string[];
+}
+/**
+ * This function sets up a mutation observer to listen for changes in the DOM.
+ * It will stop listening when the `disabled` signal is true, and re-enable when it is false.
+ * @param options - Options for the mutation observer
+ */
+declare function fromMutationObserver(element: HTMLElement, { childList, subtree, attributes, characterData, disabled, injector, }?: NgpMutationObserverOptions): Observable<MutationRecord[]>;
+
+interface NgpOverflowListenerOptions {
+    /**
+     * Whether to listen for overflow changes.
+     */
+    disabled?: Signal<boolean>;
+    /**
+     * The injector to use when called from outside of the injector context.
+     */
+    injector?: Injector;
+}
+declare function setupOverflowListener(element: HTMLElement, { disabled, injector }: NgpOverflowListenerOptions): Signal<boolean>;
+
+interface NgpResizeObserverOptions {
+    /**
+     * Whether to listen for events.
+     */
+    disabled?: Signal<boolean>;
+    /**
+     * The injector to use when called from outside of the injector context.
+     */
+    injector?: Injector;
+}
+/**
+ * A simple helper function to create a resize observer as an RxJS Observable.
+ * @param element The element to observe for resize events.
+ * @returns The resize event as an Observable.
+ */
+declare function fromResizeEvent(element: HTMLElement, { disabled, injector }?: NgpResizeObserverOptions): Observable<Dimensions>;
+/**
+ * A utility function to observe any element for resize events and return the dimensions as a signal.
+ */
+declare function observeResize(elementFn: () => HTMLElement | undefined): Signal<Dimensions>;
+interface Dimensions {
+    width: number;
+    height: number;
+}
+/**
+ * A simple utility to get the dimensions of an element as a signal.
+ */
+declare function injectDimensions(): Signal<Dimensions>;
+
+declare function scrollIntoViewIfNeeded(element: HTMLElement): void;
+
+export { NgpExitAnimation, NgpExitAnimationManager, StyleInjector, explicitEffect, fromMutationObserver, fromResizeEvent, injectDimensions, injectElementRef, injectExitAnimationManager, injectStyleInjector, observeResize, onDomRemoval, provideExitAnimationManager, scrollIntoViewIfNeeded, setupExitAnimation, setupOverflowListener };
+export type { Dimensions, NgpExitAnimationRef };

package/listbox/index.d.ts

@@ -1,6 +1,209 @@
-export { NgpListboxHeader } from './listbox-header/listbox-header';
-export { NgpListboxOption } from './listbox-option/listbox-option';
-export { NgpListboxSection } from './listbox-section/listbox-section';
-export { NgpListboxTrigger } from './listbox-trigger/listbox-trigger';
-export { NgpListbox } from './listbox/listbox';
-export { injectListboxState, provideListboxState } from './listbox/listbox-state';
+import * as _angular_core from '@angular/core';
+import { AfterContentInit, OnDestroy } from '@angular/core';
+import * as ng_primitives_state from 'ng-primitives/state';
+import { ActiveDescendantKeyManager, FocusOrigin } from '@angular/cdk/a11y';
+import { BooleanInput } from '@angular/cdk/coercion';
+import * as ng_primitives_common from 'ng-primitives/common';
+import { NgpSelectionMode } from 'ng-primitives/common';
+
+declare class NgpListboxHeader {
+    /**
+     * The id of the listbox header.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpListboxHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpListboxHeader, "[ngpListboxHeader]", ["ngpListboxHeader"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgpListbox<T> implements AfterContentInit {
+    /**
+     * Access the injector.
+     */
+    private readonly injector;
+    /**
+     * Access the destroy ref.
+     */
+    private readonly destroyRef;
+    /**
+     * The listbox may be used within a popover, which we may want to close on selection.
+     */
+    private readonly popoverTrigger;
+    /**
+     * The id of the listbox.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * The listbox selection mode.
+     */
+    readonly mode: _angular_core.InputSignal<NgpSelectionMode>;
+    /**
+     * The listbox selection.
+     */
+    readonly value: _angular_core.InputSignal<T[]>;
+    /**
+     * Emits when the listbox selection changes.
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<T[]>;
+    /**
+     * The listbox disabled state.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The comparator function to use when comparing values.
+     * If not provided, strict equality (===) is used.
+     */
+    readonly compareWith: _angular_core.InputSignal<(a: T, b: T) => boolean>;
+    /**
+     * The tabindex of the listbox.
+     */
+    protected readonly tabindex: _angular_core.Signal<-1 | 0>;
+    /**
+     * Access the options in the listbox.
+     */
+    protected readonly options: _angular_core.WritableSignal<NgpListboxOption<T>[]>;
+    /**
+     * The active descendant of the listbox.
+     */
+    protected readonly keyManager: ActiveDescendantKeyManager<NgpListboxOption<T>>;
+    /**
+     * Gets the active descendant of the listbox.
+     */
+    protected readonly activeDescendant: _angular_core.WritableSignal<string | undefined>;
+    /**
+     * @internal
+     * Whether the listbox is focused.
+     */
+    readonly isFocused: _angular_core.WritableSignal<boolean>;
+    /**
+     * The listbox state
+     */
+    protected readonly state: ng_primitives_state.CreatedState<NgpListbox<T>>;
+    constructor();
+    ngAfterContentInit(): void;
+    private updateActiveItem;
+    protected onKeydown(event: KeyboardEvent): void;
+    /**
+     * @internal
+     * Selects an option in the listbox.
+     */
+    selectOption(value: T, origin: FocusOrigin): void;
+    /**
+     * @internal
+     * Determine if an option is selected using the compareWith function.
+     */
+    isSelected(value: T): boolean;
+    /**
+     * @internal
+     * Activate an option in the listbox.
+     */
+    activateOption(value: T): void;
+    /**
+     * Registers an option with the listbox.
+     * @internal
+     */
+    addOption(option: NgpListboxOption<T>): void;
+    /**
+     * Deregisters an option with the listbox.
+     * @internal
+     */
+    removeOption(option: NgpListboxOption<T>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpListbox<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpListbox<any>, "[ngpListbox]", ["ngpListbox"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "mode": { "alias": "ngpListboxMode"; "required": false; "isSignal": true; }; "value": { "alias": "ngpListboxValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpListboxDisabled"; "required": false; "isSignal": true; }; "compareWith": { "alias": "ngpListboxCompareWith"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpListboxValueChange"; }, never, never, true, never>;
+}
+
+declare class NgpListboxOption<T> implements OnDestroy {
+    protected readonly listbox: _angular_core.Signal<ng_primitives_state.State<NgpListbox<T>> | undefined>;
+    private readonly elementRef;
+    /**
+     * The id of the listbox.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * The value of the option.
+     */
+    readonly value: _angular_core.InputSignal<T>;
+    /**
+     * Whether the option is disabled.
+     */
+    readonly optionDisabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the option is active.
+     */
+    protected readonly active: _angular_core.WritableSignal<boolean>;
+    /**
+     * @internal
+     * Whether the option is selected.
+     */
+    readonly selected: _angular_core.Signal<boolean | undefined>;
+    /**
+     * @internal
+     * Whether the option is disabled - this is used by the `Highlightable` interface.
+     */
+    get disabled(): boolean;
+    /**
+     * Whether the option is disabled.
+     */
+    protected readonly _disabled: _angular_core.Signal<boolean>;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * @internal
+     * Sets the active state of the option.
+     */
+    setActiveStyles(): void;
+    /**
+     * @internal
+     * Sets the inactive state of the option.
+     */
+    setInactiveStyles(): void;
+    /**
+     * @internal
+     * Gets the label of the option, used by the `Highlightable` interface.
+     */
+    getLabel(): string;
+    /**
+     * @internal
+     * Selects the option.
+     */
+    select(origin: FocusOrigin): void;
+    /**
+     * @internal
+     * Activate the current options.
+     */
+    activate(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpListboxOption<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpListboxOption<any>, "[ngpListboxOption]", ["ngpListboxOption"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpListboxOptionValue"; "required": true; "isSignal": true; }; "optionDisabled": { "alias": "ngpListboxOptionDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NgpListboxSection {
+    /**
+     * Access the header of the section if it exists.
+     */
+    protected readonly header: _angular_core.Signal<ng_primitives_common.NgpHeader | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpListboxSection, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpListboxSection, "[ngpListboxSection]", ["ngpListboxSection"], {}, {}, ["header"], never, true, never>;
+}
+
+declare class NgpListboxTrigger {
+    /**
+     * There must also be a popover trigger directive associated with this element.
+     */
+    private readonly popoverTrigger;
+    /**
+     * When the up or down arrow key is pressed, open the popover.
+     */
+    openPopover(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpListboxTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpListboxTrigger, "[ngpListboxTrigger]", ["ngpListboxTrigger"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Provides the Listbox state.
+ */
+declare const provideListboxState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the Listbox state.
+ */
+declare const injectListboxState: <U = NgpListbox<unknown>>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U> | undefined>;
+
+export { NgpListbox, NgpListboxHeader, NgpListboxOption, NgpListboxSection, NgpListboxTrigger, injectListboxState, provideListboxState };