ng-primitives 0.89.0 → 0.91.0

package/a11y/index.d.ts

@@ -1,3 +1,98 @@
-export * from './active-descendant/active-descendant';
-export * from './visually-hidden/visually-hidden';
-export { injectVisuallyHiddenState, provideVisuallyHiddenState, } from './visually-hidden/visually-hidden-state';
+import * as _angular_core from '@angular/core';
+import { Signal, ElementRef } from '@angular/core';
+
+interface ActiveDescendantManagerOptions<T extends NgpActivatable> {
+    /**
+     * The disabled state of the active descendant group.
+     * @default false
+     */
+    disabled?: Signal<boolean>;
+    /**
+     * The items in the active descendant group.
+     */
+    items: Signal<T[]>;
+    /**
+     * Whether active descendant should wrap around.
+     * @default false
+     */
+    wrap?: Signal<boolean>;
+}
+interface NgpActivatable {
+    /**
+     * The id of the item.
+     */
+    id: Signal<string>;
+    /**
+     * Whether the item is disabled.
+     */
+    disabled?: Signal<boolean>;
+    /**
+     * The element that represents the item.
+     */
+    elementRef: ElementRef<HTMLElement>;
+}
+declare function activeDescendantManager<T extends NgpActivatable>(options: ActiveDescendantManagerOptions<T>): {
+    activeDescendant: Signal<string | undefined>;
+    activeItem: Signal<T | undefined>;
+    activate: (item: T | undefined) => void;
+    first: () => void;
+    last: () => void;
+    next: () => void;
+    previous: () => void;
+    reset: () => void;
+};
+
+/**
+ * The state interface for the VisuallyHidden pattern.
+ */
+interface NgpVisuallyHiddenState {
+    /**
+     * Whether the element is hidden.
+     */
+    readonly hidden: Signal<boolean>;
+    /**
+     * Set the element visibility.
+     * @param visible
+     */
+    setVisibility(visible: boolean): void;
+}
+/**
+ * The props interface for the VisuallyHidden pattern.
+ */
+interface NgpVisuallyHiddenProps {
+    /**
+     * Whether the element is hidden. Default is true.
+     */
+    readonly hidden?: Signal<boolean>;
+}
+declare const NgpVisuallyHiddenStateToken: _angular_core.InjectionToken<_angular_core.WritableSignal<NgpVisuallyHiddenState>>;
+declare const ngpVisuallyHidden: ({ hidden: _hidden }: NgpVisuallyHiddenProps) => NgpVisuallyHiddenState;
+declare const injectVisuallyHiddenState: {
+    (): Signal<NgpVisuallyHiddenState>;
+    (options: {
+        hoisted: true;
+    }): Signal<NgpVisuallyHiddenState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<NgpVisuallyHiddenState | null>;
+};
+declare const provideVisuallyHiddenState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * Hide an element visually while keeping it present in the DOM.
+ */
+declare class NgpVisuallyHidden {
+    protected readonly state: NgpVisuallyHiddenState;
+    /**
+     * Set the element visibility.
+     * @param visible
+     */
+    setVisibility(visible: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpVisuallyHidden, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpVisuallyHidden, "[ngpVisuallyHidden]", ["ngpVisuallyHidden"], {}, {}, never, never, true, never>;
+}
+
+export { NgpVisuallyHidden, NgpVisuallyHiddenStateToken, activeDescendantManager, injectVisuallyHiddenState, ngpVisuallyHidden, provideVisuallyHiddenState };
+export type { NgpActivatable, NgpVisuallyHiddenProps, NgpVisuallyHiddenState };

package/accordion/index.d.ts

@@ -1,7 +1,361 @@
-export { NgpAccordionContent } from './accordion-content/accordion-content';
-export { NgpAccordionItem } from './accordion-item/accordion-item';
-export { injectAccordionItemState, provideAccordionItemState, } from './accordion-item/accordion-item-state';
-export { NgpAccordionTrigger } from './accordion-trigger/accordion-trigger';
-export { NgpAccordion } from './accordion/accordion';
-export { injectAccordionState, provideAccordionState } from './accordion/accordion-state';
-export { NgpAccordionConfig, provideAccordionConfig } from './config/accordion-config';
+import * as _angular_core from '@angular/core';
+import { Signal, WritableSignal, Provider } from '@angular/core';
+import { NgpOrientation } from 'ng-primitives/common';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+/**
+ * Apply the `ngpAccordionContent` directive to an element that represents the content of an accordion item.
+ */
+declare class NgpAccordionContent<T> {
+    /**
+     * The id of the content region
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpAccordionContent<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpAccordionContent<any>, "[ngpAccordionContent]", ["ngpAccordionContent"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface NgpAccordionContentState {
+    /**
+     * The id of the content region
+     */
+    readonly id: Signal<string>;
+}
+interface NgpAccordionContentProps {
+    /**
+     * The id of the content region
+     */
+    readonly id?: Signal<string>;
+}
+declare const NgpAccordionContentStateToken: _angular_core.InjectionToken<_angular_core.WritableSignal<{}>>;
+declare const ngpAccordionContent: <T>({ id }: NgpAccordionContentProps) => {};
+declare const injectAccordionContentState: {
+    (): Signal<{}>;
+    (options: {
+        hoisted: true;
+    }): Signal<{} | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<{} | null>;
+};
+declare const provideAccordionContentState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * The state interface for the Accordion pattern.
+ */
+interface NgpAccordionState<T> {
+    /**
+     * The value of the accordion.
+     */
+    readonly value: WritableSignal<T | T[] | null>;
+    /**
+     * Whether the accordion is disabled.
+     */
+    readonly disabled: WritableSignal<boolean>;
+    /**
+     * The accordion orientation.
+     */
+    readonly orientation: WritableSignal<NgpOrientation>;
+    /**
+     * Set the value of the accordion.
+     */
+    setValue(value: T | T[] | null): void;
+    /**
+     * Set the disabled state of the accordion.
+     */
+    setDisabled(value: boolean): void;
+    /**
+     * Set the orientation of the accordion.
+     */
+    setOrientation(value: NgpOrientation): void;
+    /**
+     * Whether the specified value is open.
+     */
+    isOpen(value: T): boolean;
+    /**
+     * Toggle the specified value.
+     */
+    toggle(value: T): void;
+}
+/**
+ * The props interface for the Accordion pattern.
+ */
+interface NgpAccordionProps<T> {
+    /**
+     * The type of the accordion.
+     */
+    readonly type: Signal<NgpAccordionType>;
+    /**
+     * Whether the accordion is collapsible.
+     */
+    readonly collapsible: Signal<boolean>;
+    /**
+     * The value of the accordion.
+     */
+    readonly value: Signal<T | T[] | null>;
+    /**
+     * Whether the accordion is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+    /**
+     * The accordion orientation.
+     */
+    readonly orientation: Signal<NgpOrientation>;
+    /**
+     * Callback fired when valueChange is emitted.
+     */
+    readonly onValueChange?: (value: T | T[] | null) => void;
+}
+declare const NgpAccordionStateToken: _angular_core.InjectionToken<WritableSignal<NgpAccordionState<unknown>>>;
+declare const ngpAccordion: <T>({ type, collapsible, value: _value, disabled: _disabled, orientation: _orientation, onValueChange, }: NgpAccordionProps<T>) => NgpAccordionState<T>;
+declare const provideAccordionState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+type NgpAccordionType = 'single' | 'multiple';
+declare function injectAccordionState<T>(): Signal<NgpAccordionState<T>>;
+
+/**
+ * Apply the `ngpAccordionItem` directive to an element that represents an accordion item.
+ */
+declare class NgpAccordionItem<T> {
+    /**
+     * Access the accordion.
+     */
+    protected readonly accordion: _angular_core.Signal<NgpAccordionState<T>>;
+    /**
+     * The value of the accordion item.
+     */
+    readonly value: _angular_core.InputSignal<T>;
+    /**
+     * Whether the accordion item is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The accordion item state.
+     */
+    protected readonly state: {
+        value: _angular_core.Signal<T>;
+        open: _angular_core.Signal<boolean>;
+        disabled: _angular_core.WritableSignal<boolean>;
+        triggerId: _angular_core.WritableSignal<string | undefined>;
+        contentId: _angular_core.WritableSignal<string | undefined>;
+        setDisabled: (value: boolean) => void;
+        setTrigger: (id: string) => void;
+        setContent: (id: string) => void;
+    };
+    /**
+     * The open state of the accordion item.
+     */
+    readonly open: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpAccordionItem<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpAccordionItem<any>, "[ngpAccordionItem]", ["ngpAccordionItem"], { "value": { "alias": "ngpAccordionItemValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpAccordionItemDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface NgpAccordionItemState<T> {
+    /**
+     * The value of the accordion item.
+     */
+    readonly value: Signal<T>;
+    /**
+     * Whether the accordion item is disabled.
+     */
+    readonly disabled: Signal<boolean>;
+    /**
+     * Whether the accordion item is expanded.
+     */
+    readonly open: Signal<boolean>;
+    /**
+     * The trigger id.
+     */
+    readonly triggerId: Signal<string | undefined>;
+    /**
+     * The content id.
+     */
+    readonly contentId: Signal<string | undefined>;
+    /**
+     * Set the disabled state of the accordion item.
+     */
+    setDisabled(value: boolean): void;
+    /**
+     * Set the trigger of the accordion item.
+     */
+    setTrigger(id: string): void;
+    /**
+     * Set the content of the accordion item.
+     */
+    setContent(id: string): void;
+}
+interface NgpAccordionItemProps<T> {
+    /**
+     * The value of the accordion item.
+     */
+    readonly value: Signal<T>;
+    /**
+     * Whether the accordion item is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+}
+declare const NgpAccordionItemStateToken: _angular_core.InjectionToken<_angular_core.WritableSignal<{
+    value: Signal<unknown>;
+    open: Signal<boolean>;
+    disabled: _angular_core.WritableSignal<boolean>;
+    triggerId: _angular_core.WritableSignal<string | undefined>;
+    contentId: _angular_core.WritableSignal<string | undefined>;
+    setDisabled: (value: boolean) => void;
+    setTrigger: (id: string) => void;
+    setContent: (id: string) => void;
+}>>;
+declare const ngpAccordionItem: <T>({ value, disabled: _disabled }: NgpAccordionItemProps<T>) => {
+    value: Signal<T>;
+    open: Signal<boolean>;
+    disabled: _angular_core.WritableSignal<boolean>;
+    triggerId: _angular_core.WritableSignal<string | undefined>;
+    contentId: _angular_core.WritableSignal<string | undefined>;
+    setDisabled: (value: boolean) => void;
+    setTrigger: (id: string) => void;
+    setContent: (id: string) => void;
+};
+declare const provideAccordionItemState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+declare function injectAccordionItemState<T>(): Signal<NgpAccordionItemState<T>>;
+
+/**
+ * Apply the `ngpAccordionTrigger` directive to an element that represents the trigger for an accordion item, such as a button.
+ */
+declare class NgpAccordionTrigger<T> {
+    /**
+     * The id of the trigger.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    private readonly state;
+    /**
+     * Toggle the accordion item.
+     */
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpAccordionTrigger<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpAccordionTrigger<any>, "[ngpAccordionTrigger]", ["ngpAccordionTrigger"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Apply the `ngpAccordion` directive to an element that represents the group of accordion items.
+ */
+declare class NgpAccordion<T> {
+    /**
+     * Access the global accordion configuration.
+     */
+    private readonly config;
+    /**
+     * The type of the accordion.
+     */
+    readonly type: _angular_core.InputSignal<NgpAccordionType>;
+    /**
+     * Whether the accordion is collapsible.
+     */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The value of the accordion.
+     */
+    readonly value: _angular_core.InputSignal<T | T[] | null>;
+    /**
+     * Event emitted when the accordion value changes.
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<T | T[] | null>;
+    /**
+     * Whether the accordion is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The accordion orientation.
+     */
+    readonly orientation: _angular_core.InputSignal<NgpOrientation>;
+    /**
+     * The accordion state.
+     */
+    protected readonly state: NgpAccordionState<T>;
+    /**
+     * @param value The value to check.
+     * @returns Whether the value is open.
+     * @internal
+     */
+    isOpen(value: T): boolean;
+    toggle(value: T): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpAccordion<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpAccordion<any>, "[ngpAccordion]", ["ngpAccordion"], { "type": { "alias": "ngpAccordionType"; "required": false; "isSignal": true; }; "collapsible": { "alias": "ngpAccordionCollapsible"; "required": false; "isSignal": true; }; "value": { "alias": "ngpAccordionValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpAccordionDisabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "ngpAccordionOrientation"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpAccordionValueChange"; }, never, never, true, never>;
+}
+
+interface NgpAccordionConfig {
+    /**
+     * The default type of the accordion
+     * @default 'single'
+     */
+    type: NgpAccordionType;
+    /**
+     * Whether the accordion is collapsible
+     * @default false
+     */
+    collapsible: boolean;
+    /**
+     * The default orientation of the accordion
+     * @default 'vertical'
+     */
+    orientation: 'vertical' | 'horizontal';
+}
+/**
+ * Provide the default Accordion configuration
+ * @param config The Accordion configuration
+ * @returns The provider
+ */
+declare function provideAccordionConfig(config: Partial<NgpAccordionConfig>): Provider[];
+
+interface NgpAccordionTriggerState {
+    /**
+     * The id of the trigger button
+     */
+    readonly id: Signal<string>;
+    /**
+     * Toggle the accordion item.
+     */
+    toggle(): void;
+}
+interface NgpAccordionTriggerProps {
+    /**
+     * The id of the trigger button
+     */
+    readonly id?: Signal<string>;
+}
+declare const NgpAccordionTriggerStateToken: _angular_core.InjectionToken<_angular_core.WritableSignal<{
+    id: Signal<string>;
+    toggle: () => void;
+}>>;
+declare const ngpAccordionTrigger: <T>({ id }: NgpAccordionTriggerProps) => {
+    id: Signal<string>;
+    toggle: () => void;
+};
+declare const injectAccordionTriggerState: {
+    (): Signal<{
+        id: Signal<string>;
+        toggle: () => void;
+    }>;
+    (options: {
+        hoisted: true;
+    }): Signal<{
+        id: Signal<string>;
+        toggle: () => void;
+    } | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<{
+        id: Signal<string>;
+        toggle: () => void;
+    } | null>;
+};
+declare const provideAccordionTriggerState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+export { NgpAccordion, NgpAccordionContent, NgpAccordionContentStateToken, NgpAccordionItem, NgpAccordionItemStateToken, NgpAccordionStateToken, NgpAccordionTrigger, NgpAccordionTriggerStateToken, injectAccordionContentState, injectAccordionItemState, injectAccordionState, injectAccordionTriggerState, ngpAccordion, ngpAccordionContent, ngpAccordionItem, ngpAccordionTrigger, provideAccordionConfig, provideAccordionContentState, provideAccordionItemState, provideAccordionState, provideAccordionTriggerState };
+export type { NgpAccordionConfig, NgpAccordionContentProps, NgpAccordionContentState, NgpAccordionItemProps, NgpAccordionItemState, NgpAccordionProps, NgpAccordionState, NgpAccordionTriggerProps, NgpAccordionTriggerState, NgpAccordionType };