@radix-ng/primitives 0.51.0 → 1.0.0-beta.0

package/types/radix-ng-primitives-toolbar.d.ts

@@ -1,55 +1,180 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, Provider } from '@angular/core';
-import * as i1 from '@radix-ng/primitives/roving-focus';
-import { BooleanInput } from '@angular/cdk/coercion';
-import * as i1$1 from '@radix-ng/primitives/toggle-group';
-import * as i1$2 from '@radix-ng/primitives/separator';
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/separator';
+import { DataOrientation, BooleanInput } from '@radix-ng/primitives/core';
+import * as i1$1 from '@radix-ng/primitives/roving-focus';
+import { Direction } from '@radix-ng/primitives/roving-focus';
+import * as _radix_ng_primitives_toolbar from '@radix-ng/primitives/toolbar';
 
-declare class RdxToolbarRootDirective {
-    readonly orientation: i0.InputSignal<"horizontal" | "vertical">;
-    readonly dir: i0.InputSignal<"ltr" | "rtl">;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToolbarRootDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToolbarRootDirective, "[rdxToolbarRoot]", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: { "dir": "dir"; "orientation": "orientation"; "loop": "loop"; }; outputs: {}; }]>;
+/**
+ * A separator between toolbar items or groups.
+ *
+ * @see https://base-ui.com/react/components/toolbar
+ */
+declare class RdxToolbarSeparator {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarSeparator, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarSeparator, "[rdxToolbarSeparator]", ["rdxToolbarSeparator"], {}, {}, never, never, true, [{ directive: typeof i1.RdxSeparatorRootDirective; inputs: { "orientation": "orientation"; }; outputs: {}; }]>;
 }
 
-declare class RdxToolbarButtonDirective {
-    #private;
-    private readonly rdxRovingFocusItemDirective;
-    readonly disabled: i0.InputSignalWithTransform<boolean, BooleanInput>;
-    private readonly isDisabled;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToolbarButtonDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToolbarButtonDirective, "[rdxToolbarButton]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: { "focusable": "focusable"; }; outputs: {}; }]>;
+/**
+ * A container for grouping a set of controls, such as buttons, toggle groups or menus.
+ * Owns roving keyboard focus over its items.
+ *
+ * @see https://base-ui.com/react/components/toolbar
+ */
+declare class RdxToolbarRoot {
+    /**
+     * The orientation of the toolbar.
+     *
+     * @default 'horizontal'
+     */
+    readonly orientation: _angular_core.InputSignal<DataOrientation>;
+    /** Text direction for arrow-key navigation. */
+    readonly dir: _angular_core.InputSignal<Direction>;
+    /**
+     * Whether keyboard navigation should loop from the last item back to the first.
+     *
+     * @default true
+     */
+    readonly loopFocus: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the whole toolbar is disabled.
+     *
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    private readonly rovingFocusGroup;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarRoot, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarRoot, "[rdxToolbarRoot]", ["rdxToolbarRoot"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
 }
 
-declare class RdxToolbarLinkDirective {
-    onKeyDown($event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToolbarLinkDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToolbarLinkDirective, "[rdxToolbarLink]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: { "focusable": "focusable"; }; outputs: {}; }]>;
+/**
+ * A button within a toolbar.
+ *
+ * @see https://base-ui.com/react/components/toolbar
+ */
+declare class RdxToolbarButton {
+    protected readonly rootContext: _radix_ng_primitives_toolbar.RdxToolbarRootContext;
+    private readonly groupContext;
+    private readonly rovingItem;
+    /**
+     * Whether the button is disabled.
+     *
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the button stays focusable while disabled (so it remains discoverable for keyboard
+     * and screen-reader users).
+     *
+     * @default true
+     */
+    readonly focusableWhenDisabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the host is a native `<button>`. When `false`, adds `role="button"`.
+     *
+     * @default true
+     */
+    readonly nativeButton: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** @ignore Effective disabled state, combining the button, group and toolbar. */
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    constructor();
+    /** @ignore */
+    protected onClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarButton, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarButton, "[rdxToolbarButton]", ["rdxToolbarButton"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusableWhenDisabled": { "alias": "focusableWhenDisabled"; "required": false; "isSignal": true; }; "nativeButton": { "alias": "nativeButton"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
 }
 
-declare class RdxToolbarToggleGroupDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToolbarToggleGroupDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToolbarToggleGroupDirective, "[rdxToolbarToggleGroup]", never, {}, {}, never, never, true, [{ directive: typeof i1$1.RdxToggleGroupWithoutFocusDirective; inputs: { "value": "value"; "type": "type"; "disabled": "disabled"; }; outputs: {}; }]>;
+/**
+ * A link within a toolbar.
+ *
+ * @see https://base-ui.com/react/components/toolbar
+ */
+declare class RdxToolbarLink {
+    protected readonly rootContext: _radix_ng_primitives_toolbar.RdxToolbarRootContext;
+    /** @ignore Space activates a link, matching native button behavior in a toolbar. */
+    protected onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarLink, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarLink, "[rdxToolbarLink]", ["rdxToolbarLink"], {}, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
 }
 
-declare class RdxToolbarToggleItemDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToolbarToggleItemDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToolbarToggleItemDirective, "[rdxToolbarToggleItem]", never, {}, {}, never, never, true, [{ directive: typeof i1$1.RdxToggleGroupItemDirective; inputs: { "value": "value"; "disabled": "disabled"; }; outputs: {}; }]>;
+/**
+ * A native input within a toolbar. Participates in the toolbar's roving focus while keeping native
+ * text-editing: the arrow keys move the caret within the text and only move focus to the
+ * neighbouring toolbar item once the caret is at the corresponding edge (Base UI "composite" input).
+ *
+ * @see https://base-ui.com/react/components/toolbar
+ */
+declare class RdxToolbarInput {
+    protected readonly rootContext: _radix_ng_primitives_toolbar.RdxToolbarRootContext;
+    private readonly groupContext;
+    private readonly rovingItem;
+    private readonly elementRef;
+    private readonly isBrowser;
+    /** The initial value of the uncontrolled input. */
+    readonly defaultValue: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the input is disabled.
+     *
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the input stays focusable while disabled.
+     *
+     * @default true
+     */
+    readonly focusableWhenDisabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** @ignore */
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    private appliedDefault;
+    constructor();
+    private handleCaretKeydown;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarInput, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarInput, "input[rdxToolbarInput]", ["rdxToolbarInput"], { "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "focusableWhenDisabled": { "alias": "focusableWhenDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1$1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
 }
 
-declare class RdxToolbarSeparatorDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToolbarSeparatorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToolbarSeparatorDirective, "[rdxToolbarSeparator]", never, {}, {}, never, never, true, [{ directive: typeof i1$2.RdxSeparatorRootDirective; inputs: { "orientation": "orientation"; "decorative": "decorative"; }; outputs: {}; }]>;
+/**
+ * Groups several toolbar items together. Disabling the group disables all of its items.
+ *
+ * @see https://base-ui.com/react/components/toolbar
+ */
+declare class RdxToolbarGroup {
+    protected readonly rootContext: _radix_ng_primitives_toolbar.RdxToolbarRootContext;
+    /**
+     * Whether the group is disabled.
+     *
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** @ignore Effective disabled state, combining the group and the toolbar. */
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarGroup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxToolbarGroup, "[rdxToolbarGroup]", ["rdxToolbarGroup"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare const RDX_TOOLBAR_ROOT_TOKEN: InjectionToken<RdxToolbarRootDirective>;
-declare function injectRootContext(): RdxToolbarRootDirective;
-declare function provideRootContext(): Provider;
+interface RdxToolbarRootContext {
+    /** The orientation of the toolbar. */
+    readonly orientation: Signal<DataOrientation>;
+    /** Whether the whole toolbar is disabled. */
+    readonly disabled: Signal<boolean>;
+}
+declare const injectToolbarRootContext: (optional?: boolean) => RdxToolbarRootContext | null;
+declare const provideToolbarRootContext: (useFactory: () => RdxToolbarRootContext) => _angular_core.Provider;
+interface RdxToolbarGroupContext {
+    /** Whether the group (and therefore its items) is disabled. */
+    readonly disabled: Signal<boolean>;
+}
+declare const injectToolbarGroupContext: (optional?: boolean) => RdxToolbarGroupContext | null;
+declare const provideToolbarGroupContext: (useFactory: () => RdxToolbarGroupContext) => _angular_core.Provider;
 
+declare const toolbarImports: (typeof RdxToolbarSeparator)[];
 declare class RdxToolbarModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToolbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<RdxToolbarModule, never, [typeof RdxToolbarRootDirective, typeof RdxToolbarButtonDirective, typeof RdxToolbarLinkDirective, typeof RdxToolbarToggleGroupDirective, typeof RdxToolbarToggleItemDirective, typeof RdxToolbarSeparatorDirective], [typeof RdxToolbarRootDirective, typeof RdxToolbarButtonDirective, typeof RdxToolbarLinkDirective, typeof RdxToolbarToggleGroupDirective, typeof RdxToolbarToggleItemDirective, typeof RdxToolbarSeparatorDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<RdxToolbarModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxToolbarModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxToolbarModule, never, [typeof RdxToolbarRoot, typeof RdxToolbarButton, typeof RdxToolbarLink, typeof RdxToolbarInput, typeof RdxToolbarGroup, typeof RdxToolbarSeparator], [typeof RdxToolbarRoot, typeof RdxToolbarButton, typeof RdxToolbarLink, typeof RdxToolbarInput, typeof RdxToolbarGroup, typeof RdxToolbarSeparator]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxToolbarModule>;
 }
 
-export { RDX_TOOLBAR_ROOT_TOKEN, RdxToolbarButtonDirective, RdxToolbarLinkDirective, RdxToolbarModule, RdxToolbarRootDirective, RdxToolbarSeparatorDirective, RdxToolbarToggleGroupDirective, RdxToolbarToggleItemDirective, injectRootContext, provideRootContext };
+export { RdxToolbarButton, RdxToolbarGroup, RdxToolbarInput, RdxToolbarLink, RdxToolbarModule, RdxToolbarRoot, RdxToolbarSeparator, injectToolbarGroupContext, injectToolbarRootContext, provideToolbarGroupContext, provideToolbarRootContext, toolbarImports };
+export type { RdxToolbarGroupContext, RdxToolbarRootContext };