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

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

@@ -0,0 +1,66 @@
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
+import { BooleanInput } from '@radix-ng/primitives/core';
+
+type RdxMenubarOrientation = 'horizontal' | 'vertical';
+interface RdxMenubarContext {
+    activeId: Signal<string | null>;
+    isAnyOpen: Signal<boolean>;
+    disabled: Signal<boolean>;
+    orientation: Signal<RdxMenubarOrientation>;
+    registerItem: (id: string, el: HTMLElement, open: () => void, close: () => void, disabled: () => boolean) => () => void;
+    activateItem: (id: string) => void;
+    deactivateAll: () => void;
+    focusAdjacent: (currentId: string, offset: 1 | -1, openOnMove: boolean) => void;
+    focusBoundary: (boundary: 'first' | 'last', openOnMove: boolean) => void;
+}
+declare const injectRdxMenubarContext: (optional?: boolean) => RdxMenubarContext | null;
+declare const provideRdxMenubarContext: (useFactory: () => RdxMenubarContext) => _angular_core.Provider;
+/**
+ * Container for a horizontal application menu bar.
+ * Coordinates open/close state across multiple menus and provides arrow-key navigation.
+ */
+declare class RdxMenubarRoot {
+    private readonly menuRoots;
+    private readonly ids;
+    private items;
+    /** Whether every menubar trigger is disabled. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Whether arrow-key navigation wraps at the first/last trigger. */
+    readonly loopFocus: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** The menubar orientation. */
+    readonly orientation: _angular_core.InputSignal<RdxMenubarOrientation>;
+    readonly activeId: _angular_core.WritableSignal<string | null>;
+    readonly isAnyOpen: Signal<boolean>;
+    constructor();
+    registerItem(id: string, el: HTMLElement, open: () => void, close: () => void, disabled: () => boolean): () => void;
+    activateItem(id: string): void;
+    deactivateAll(): void;
+    focusBoundary(boundary: 'first' | 'last', openOnMove: boolean): void;
+    generateId(): string;
+    private idFor;
+    private registerMenuRoot;
+    private registerResolvedItem;
+    private handleTriggerInteraction;
+    private handleTriggerArrow;
+    private handleTriggerBoundary;
+    focusAdjacent(currentId: string, offset: 1 | -1, openOnMove: boolean): void;
+    protected handleArrowLeft(event: Event): void;
+    protected handleArrowRight(event: Event): void;
+    private handleOpenMenuNavigation;
+    private focusItem;
+    private updateTriggerTabStops;
+    private enabledItems;
+    private hasOpenMenu;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxMenubarRoot, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxMenubarRoot, "[rdxMenubarRoot]", ["rdxMenubarRoot"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loopFocus": { "alias": "loopFocus"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, ["menuRoots"], never, true, never>;
+}
+
+declare class RdxMenubarModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxMenubarModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxMenubarModule, never, [typeof RdxMenubarRoot], [typeof RdxMenubarRoot]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxMenubarModule>;
+}
+
+export { RdxMenubarModule, RdxMenubarRoot, injectRdxMenubarContext, provideRdxMenubarContext };
+export type { RdxMenubarContext, RdxMenubarOrientation };

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

@@ -0,0 +1,193 @@
+import * as _angular_core from '@angular/core';
+
+type MeterValueFormatter = (formattedValue: string, value: number) => string;
+interface MeterProps {
+    value: number;
+    min?: number;
+    max?: number;
+    locale?: Intl.LocalesArgument;
+    format?: Intl.NumberFormatOptions;
+    ariaValueText?: string;
+    getAriaValueText?: MeterValueFormatter;
+}
+declare const meterRootContext: () => {
+    labelId: _angular_core.InputSignal<string>;
+    valueId: _angular_core.InputSignal<string>;
+    minState: _angular_core.Signal<number>;
+    maxState: _angular_core.Signal<number>;
+    valueState: _angular_core.Signal<number>;
+    percentageState: _angular_core.Signal<number>;
+    formattedValueState: _angular_core.Signal<string>;
+    ariaValueTextState: _angular_core.Signal<string | undefined>;
+};
+type RdxMeterRootContext = ReturnType<typeof meterRootContext>;
+declare const injectMeterRootContext: (optional?: boolean) => {
+    labelId: _angular_core.InputSignal<string>;
+    valueId: _angular_core.InputSignal<string>;
+    minState: _angular_core.Signal<number>;
+    maxState: _angular_core.Signal<number>;
+    valueState: _angular_core.Signal<number>;
+    percentageState: _angular_core.Signal<number>;
+    formattedValueState: _angular_core.Signal<string>;
+    ariaValueTextState: _angular_core.Signal<string | undefined>;
+} | null;
+declare const provideMeterRootContext: (useFactory: () => {
+    labelId: _angular_core.InputSignal<string>;
+    valueId: _angular_core.InputSignal<string>;
+    minState: _angular_core.Signal<number>;
+    maxState: _angular_core.Signal<number>;
+    valueState: _angular_core.Signal<number>;
+    percentageState: _angular_core.Signal<number>;
+    formattedValueState: _angular_core.Signal<string>;
+    ariaValueTextState: _angular_core.Signal<string | undefined>;
+}) => _angular_core.Provider;
+/**
+ * Provides meter state and accessibility attributes.
+ *
+ * @group Components
+ */
+declare class RdxMeterRootDirective {
+    /**
+     * Current meter value.
+     *
+     * @group Props
+     */
+    readonly value: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Minimum meter value.
+     *
+     * @group Props
+     * @defaultValue 0
+     */
+    readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Maximum meter value.
+     *
+     * @group Props
+     * @defaultValue 100
+     */
+    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Locale used by `Intl.NumberFormat` when formatting the displayed value.
+     *
+     * @group Props
+     */
+    readonly locale: _angular_core.InputSignal<Intl.LocalesArgument>;
+    /**
+     * Number formatting options for the displayed value.
+     *
+     * @group Props
+     */
+    readonly format: _angular_core.InputSignal<Intl.NumberFormatOptions | undefined>;
+    /**
+     * Human-readable text alternative for the current value.
+     *
+     * @group Props
+     */
+    readonly ariaValueText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Formats a human-readable text alternative for the current value.
+     *
+     * @group Props
+     */
+    readonly getAriaValueText: _angular_core.InputSignal<MeterValueFormatter | undefined>;
+    readonly labelId: _angular_core.InputSignal<string>;
+    readonly valueId: _angular_core.InputSignal<string>;
+    readonly minState: _angular_core.Signal<number>;
+    readonly maxState: _angular_core.Signal<number>;
+    readonly valueState: _angular_core.Signal<number>;
+    readonly percentageState: _angular_core.Signal<number>;
+    readonly formattedValueState: _angular_core.Signal<string>;
+    readonly ariaValueTextState: _angular_core.Signal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxMeterRootDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxMeterRootDirective, "[rdxMeterRoot]", ["rdxMeterRoot"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "ariaValueText": { "alias": "aria-valuetext"; "required": false; "isSignal": true; }; "getAriaValueText": { "alias": "getAriaValueText"; "required": false; "isSignal": true; }; "labelId": { "alias": "labelId"; "required": false; "isSignal": true; }; "valueId": { "alias": "valueId"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Labels the meter.
+ *
+ * @group Components
+ */
+declare class RdxMeterLabelDirective {
+    protected readonly meter: {
+        labelId: _angular_core.InputSignal<string>;
+        valueId: _angular_core.InputSignal<string>;
+        minState: _angular_core.Signal<number>;
+        maxState: _angular_core.Signal<number>;
+        valueState: _angular_core.Signal<number>;
+        percentageState: _angular_core.Signal<number>;
+        formattedValueState: _angular_core.Signal<string>;
+        ariaValueTextState: _angular_core.Signal<string | undefined>;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxMeterLabelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxMeterLabelDirective, "[rdxMeterLabel]", ["rdxMeterLabel"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Displays the formatted meter value.
+ *
+ * @group Components
+ */
+declare class RdxMeterValueDirective {
+    protected readonly meter: {
+        labelId: _angular_core.InputSignal<string>;
+        valueId: _angular_core.InputSignal<string>;
+        minState: _angular_core.Signal<number>;
+        maxState: _angular_core.Signal<number>;
+        valueState: _angular_core.Signal<number>;
+        percentageState: _angular_core.Signal<number>;
+        formattedValueState: _angular_core.Signal<string>;
+        ariaValueTextState: _angular_core.Signal<string | undefined>;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxMeterValueDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxMeterValueDirective, "[rdxMeterValue]", ["rdxMeterValue"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Contains the visual meter indicator.
+ *
+ * @group Components
+ */
+declare class RdxMeterTrackDirective {
+    protected readonly meter: {
+        labelId: _angular_core.InputSignal<string>;
+        valueId: _angular_core.InputSignal<string>;
+        minState: _angular_core.Signal<number>;
+        maxState: _angular_core.Signal<number>;
+        valueState: _angular_core.Signal<number>;
+        percentageState: _angular_core.Signal<number>;
+        formattedValueState: _angular_core.Signal<string>;
+        ariaValueTextState: _angular_core.Signal<string | undefined>;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxMeterTrackDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxMeterTrackDirective, "[rdxMeterTrack]", ["rdxMeterTrack"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Displays the visual meter fill.
+ *
+ * @group Components
+ */
+declare class RdxMeterIndicatorDirective {
+    protected readonly meter: {
+        labelId: _angular_core.InputSignal<string>;
+        valueId: _angular_core.InputSignal<string>;
+        minState: _angular_core.Signal<number>;
+        maxState: _angular_core.Signal<number>;
+        valueState: _angular_core.Signal<number>;
+        percentageState: _angular_core.Signal<number>;
+        formattedValueState: _angular_core.Signal<string>;
+        ariaValueTextState: _angular_core.Signal<string | undefined>;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxMeterIndicatorDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxMeterIndicatorDirective, "[rdxMeterIndicator]", ["rdxMeterIndicator"], {}, {}, never, never, true, never>;
+}
+
+declare class RdxMeterModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxMeterModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<RdxMeterModule, never, [typeof RdxMeterRootDirective, typeof RdxMeterLabelDirective, typeof RdxMeterValueDirective, typeof RdxMeterTrackDirective, typeof RdxMeterIndicatorDirective], [typeof RdxMeterRootDirective, typeof RdxMeterLabelDirective, typeof RdxMeterValueDirective, typeof RdxMeterTrackDirective, typeof RdxMeterIndicatorDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<RdxMeterModule>;
+}
+
+export { RdxMeterIndicatorDirective, RdxMeterLabelDirective, RdxMeterModule, RdxMeterRootDirective, RdxMeterTrackDirective, RdxMeterValueDirective, injectMeterRootContext, provideMeterRootContext };
+export type { MeterProps, MeterValueFormatter, RdxMeterRootContext };