ng-primitives 0.99.3 → 0.99.5

package/file-upload/index.d.ts

@@ -45,6 +45,91 @@ declare class NgpFileDropzone {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpFileDropzone, "[ngpFileDropzone]", ["ngpFileDropzone"], { "fileTypes": { "alias": "ngpFileDropzoneFileTypes"; "required": false; "isSignal": true; }; "multiple": { "alias": "ngpFileDropzoneMultiple"; "required": false; "isSignal": true; }; "directory": { "alias": "ngpFileDropzoneDirectory"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpFileDropzoneDisabled"; "required": false; "isSignal": true; }; }, { "selected": "ngpFileDropzoneSelected"; "rejected": "ngpFileDropzoneRejected"; "dragOver": "ngpFileDropzoneDragOver"; }, never, never, true, never>;
 }
 
+/**
+ * The state for the NgpFileDropzone directive.
+ */
+interface NgpFileDropzoneState {
+    /**
+     * Whether the file dropzone is disabled.
+     */
+    readonly disabled: Signal<boolean | undefined>;
+    /**
+     * Whether the user is currently dragging over the element.
+     */
+    readonly isDragOver: Signal<boolean>;
+    /**
+     * Observable that emits when files are selected.
+     */
+    readonly selected: Observable<FileList | null>;
+    /**
+     * Observable that emits when files are rejected.
+     */
+    readonly rejected: Observable<void>;
+    /**
+     * Observable that emits when drag over state changes.
+     */
+    readonly dragOver: Observable<boolean>;
+    /**
+     * Set the accepted file types.
+     */
+    readonly fileTypes: Signal<string[] | undefined>;
+    /**
+     * Whether multiple files can be selected.
+     */
+    readonly multiple: Signal<boolean | undefined>;
+    /**
+     * Whether directories can be selected.
+     */
+    readonly directory: Signal<boolean | undefined>;
+    /**
+     * Set the disabled state.
+     */
+    setDisabled(value: boolean): void;
+}
+/**
+ * The props for the NgpFileDropzone state.
+ */
+interface NgpFileDropzoneProps {
+    /**
+     * The accepted file types.
+     */
+    readonly fileTypes?: Signal<string[] | undefined>;
+    /**
+     * Whether multiple files can be selected.
+     */
+    readonly multiple?: Signal<boolean>;
+    /**
+     * Whether directories can be selected.
+     */
+    readonly directory?: Signal<boolean>;
+    /**
+     * Whether the file dropzone is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+    /**
+     * Callback when files are selected.
+     */
+    readonly onSelected?: (files: FileList | null) => void;
+    /**
+     * Callback when files are rejected.
+     */
+    readonly onRejected?: () => void;
+    /**
+     * Callback when drag over state changes.
+     */
+    readonly onDragOver?: (isDragOver: boolean) => void;
+}
+declare const ngpFileDropzone: ({ fileTypes, multiple, directory, disabled: _disabled, onSelected, onRejected, onDragOver, }: NgpFileDropzoneProps) => {
+    disabled: _angular_core.WritableSignal<boolean>;
+    fileTypes: Signal<string[] | undefined>;
+    multiple: Signal<boolean>;
+    directory: Signal<boolean>;
+    isDragOver: _angular_core.WritableSignal<boolean>;
+    selected: Observable<FileList | null>;
+    rejected: Observable<void>;
+    dragOver: Observable<boolean>;
+    setDisabled: (value: boolean) => void;
+};
 declare const injectFileDropzoneState: {
     (): Signal<{
         disabled: _angular_core.WritableSignal<boolean>;
@@ -156,6 +241,84 @@ declare class NgpFileUpload {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpFileUpload, "[ngpFileUpload]", ["ngpFileUpload"], { "fileTypes": { "alias": "ngpFileUploadFileTypes"; "required": false; "isSignal": true; }; "multiple": { "alias": "ngpFileUploadMultiple"; "required": false; "isSignal": true; }; "directory": { "alias": "ngpFileUploadDirectory"; "required": false; "isSignal": true; }; "dragAndDrop": { "alias": "ngpFileUploadDragDrop"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpFileUploadDisabled"; "required": false; "isSignal": true; }; }, { "selected": "ngpFileUploadSelected"; "canceled": "ngpFileUploadCanceled"; "rejected": "ngpFileUploadRejected"; "dragOver": "ngpFileUploadDragOver"; }, never, never, true, never>;
 }
 
+/**
+ * The state for the NgpFileUpload directive.
+ */
+interface NgpFileUploadState {
+    /**
+     * Whether the user is currently dragging over the element.
+     */
+    readonly isDragOver: Signal<boolean>;
+    /**
+     * Observable that emits when files are selected.
+     */
+    readonly selected: Observable<FileList | null>;
+    /**
+     * Observable that emits when file selection is canceled.
+     */
+    readonly canceled: Observable<void>;
+    /**
+     * Observable that emits when files are rejected.
+     */
+    readonly rejected: Observable<void>;
+    /**
+     * Observable that emits when drag over state changes.
+     */
+    readonly dragOver: Observable<boolean>;
+    /**
+     * Show the file dialog.
+     */
+    showFileDialog(): void;
+}
+/**
+ * The props for the NgpFileUpload state.
+ */
+interface NgpFileUploadProps {
+    /**
+     * The accepted file types.
+     */
+    readonly fileTypes?: Signal<string[] | undefined>;
+    /**
+     * Whether multiple files can be selected.
+     */
+    readonly multiple?: Signal<boolean>;
+    /**
+     * Whether directories can be selected.
+     */
+    readonly directory?: Signal<boolean>;
+    /**
+     * Whether drag and drop is enabled.
+     */
+    readonly dragAndDrop?: Signal<boolean>;
+    /**
+     * Whether the file upload is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+    /**
+     * Callback when files are selected.
+     */
+    readonly onSelected?: (files: FileList | null) => void;
+    /**
+     * Callback when file selection is canceled.
+     */
+    readonly onCanceled?: () => void;
+    /**
+     * Callback when files are rejected.
+     */
+    readonly onRejected?: () => void;
+    /**
+     * Callback when drag over state changes.
+     */
+    readonly onDragOver?: (isDragOver: boolean) => void;
+}
+declare const ngpFileUpload: ({ fileTypes, multiple, directory, dragAndDrop, disabled, onSelected, onCanceled, onRejected, onDragOver, }: NgpFileUploadProps) => {
+    isDragOver: _angular_core.WritableSignal<boolean>;
+    selected: Observable<FileList | null>;
+    canceled: Observable<void>;
+    rejected: Observable<void>;
+    dragOver: Observable<boolean>;
+    showFileDialog: () => void;
+};
 declare const injectFileUploadState: {
     (): Signal<{
         isDragOver: _angular_core.WritableSignal<boolean>;
@@ -201,4 +364,5 @@ declare const provideFileUploadState: (opts?: {
     inherit?: boolean;
 }) => _angular_core.FactoryProvider;
 
-export { NgpFileDropzone, NgpFileUpload, injectFileDropzoneState, injectFileUploadState, provideFileDropzoneState, provideFileUploadState };
+export { NgpFileDropzone, NgpFileUpload, injectFileDropzoneState, injectFileUploadState, ngpFileDropzone, ngpFileUpload, provideFileDropzoneState, provideFileUploadState };
+export type { NgpFileDropzoneProps, NgpFileDropzoneState, NgpFileUploadProps, NgpFileUploadState };

package/menu/index.d.ts

@@ -188,7 +188,7 @@ interface NgpMenuTriggerState<T = unknown> {
     /**
      * The context provided to the menu.
      */
-    readonly context?: WritableSignal<T>;
+    readonly context: WritableSignal<T>;
     /**
      * Set whether the trigger is disabled.
      * @param isDisabled - Whether the trigger is disabled

package/package.json

@@ -2,7 +2,7 @@
   "name": "ng-primitives",
   "description": "Angular Primitives is a low-level headless UI component library with a focus on accessibility, customization, and developer experience. ",
   "license": "Apache-2.0",
-  "version": "0.99.3",
+  "version": "0.99.5",
   "keywords": [
     "angular",
     "primitives",

package/progress/index.d.ts

@@ -77,6 +77,111 @@ declare class NgpProgress {
 }
 type NgpProgressValueTextFn = (value: number, max: number) => string;
 
+interface NgpProgressProps {
+    /**
+     * The unique identifier for the progress.
+     */
+    readonly id?: Signal<string>;
+    /**
+     * Define the progress value.
+     */
+    readonly value?: Signal<number | null>;
+    /**
+     * Define the progress min value.
+     * @default '0'
+     */
+    readonly min?: Signal<number>;
+    /**
+     * Define the progress max value.
+     * @default 100
+     */
+    readonly max?: Signal<number>;
+    /**
+     * Define a function that returns the progress value label.
+     * @param value The current value
+     * @param max The maximum value
+     * @returns The value label
+     */
+    readonly valueLabel?: Signal<NgpProgressValueTextFn>;
+}
+interface NgpProgressState {
+    /**
+     * The unique identifier for the progress.
+     */
+    readonly id: Signal<string>;
+    /**
+     * Define the progress value.
+     */
+    readonly value: WritableSignal<number | null>;
+    /**
+     * Define the progress min value.
+     * @default '0'
+     */
+    readonly min: WritableSignal<number>;
+    /**
+     * Define the progress max value.
+     * @default 100
+     */
+    readonly max: WritableSignal<number>;
+    /**
+     * Get the progress value text.
+     */
+    readonly valueText: Signal<string>;
+    /**
+     * The id of label associated with the progress bar.
+     * @internal
+     */
+    readonly labelId: Signal<string | undefined>;
+    /**
+     * Determine if the progress is indeterminate.
+     * @internal
+     */
+    readonly indeterminate: Signal<boolean>;
+    /**
+     * Determine if the progress is in a progressing state.
+     * @internal
+     */
+    readonly progressing: Signal<boolean>;
+    /**
+     * Determine if the progress is complete.
+     * @internal
+     */
+    readonly complete: Signal<boolean>;
+    /**
+     * Set the label of the progress bar.
+     */
+    setLabel(id: string): void;
+    /**
+     * Set the value of the progress bar.
+     * @param value The progress value
+     */
+    setValue(value: number | null): void;
+    /**
+     * Set the minimum value of the progress bar.
+     * @param min The minimum value
+     */
+    setMin(min: number): void;
+    /**
+     * Set the maximum value of the progress bar.
+     * @param max The maximum value
+     */
+    setMax(max: number): void;
+}
+declare const ngpProgress: ({ valueLabel: _valueLabel, value: _value, min: _min, max: _max, id, }: NgpProgressProps) => {
+    max: WritableSignal<number>;
+    min: WritableSignal<number>;
+    value: WritableSignal<number | null>;
+    labelId: WritableSignal<string | undefined>;
+    valueText: Signal<string>;
+    id: Signal<string>;
+    indeterminate: Signal<boolean>;
+    progressing: Signal<boolean>;
+    complete: Signal<boolean>;
+    setLabel: (id: string) => void;
+    setValue: (newValue: number | null) => void;
+    setMin: (newMin: number) => void;
+    setMax: (newMax: number) => void;
+};
 declare const injectProgressState: {
     (): Signal<{
         max: WritableSignal<number>;
@@ -150,5 +255,5 @@ declare const provideProgressState: (opts?: {
     inherit?: boolean;
 }) => i0.FactoryProvider;
 
-export { NgpProgress, NgpProgressIndicator, NgpProgressLabel, NgpProgressTrack, NgpProgressValue, injectProgressState, provideProgressState };
-export type { NgpProgressValueTextFn };
+export { NgpProgress, NgpProgressIndicator, NgpProgressLabel, NgpProgressTrack, NgpProgressValue, injectProgressState, ngpProgress, provideProgressState };
+export type { NgpProgressProps, NgpProgressState, NgpProgressValueTextFn };

package/toggle-group/index.d.ts

@@ -2,6 +2,7 @@ import * as _angular_core from '@angular/core';
 import { Provider, OnInit, Signal, WritableSignal } from '@angular/core';
 import { NgpOrientation } from 'ng-primitives/common';
 import { BooleanInput } from '@angular/cdk/coercion';
+import { NgpRovingFocusGroupState } from 'ng-primitives/roving-focus';
 import { Observable } from 'rxjs';
 
 interface NgpToggleGroupConfig {
@@ -51,6 +52,20 @@ interface NgpToggleGroupItemState {
     selected: Signal<boolean>;
     toggle(): void;
 }
+/**
+ * The props interface for the ToggleGroupItem pattern.
+ */
+interface NgpToggleGroupItemProps {
+    /**
+     * The value of the toggle group item.
+     */
+    value: Signal<string>;
+    /**
+     * Whether the toggle group item is disabled.
+     */
+    disabled?: Signal<boolean>;
+}
+declare const ngpToggleGroupItem: ({ value, disabled }: NgpToggleGroupItemProps) => NgpToggleGroupItemState;
 declare const injectToggleGroupItemState: {
     (): Signal<NgpToggleGroupItemState>;
     (options: {
@@ -117,6 +132,40 @@ interface NgpToggleGroupState {
      */
     setOrientation(newOrientation: NgpOrientation): void;
 }
+/**
+ * The props interface for the ToggleGroup pattern.
+ */
+interface NgpToggleGroupProps {
+    /**
+     * The roving focus group state for the toggle-group.
+     */
+    readonly rovingFocusGroup: NgpRovingFocusGroupState;
+    /**
+     * The orientation of the toggle-group.
+     */
+    readonly orientation?: Signal<NgpOrientation>;
+    /**
+     * Whether deselection is allowed in the toggle-group.
+     */
+    readonly allowDeselection?: Signal<boolean>;
+    /**
+     * The type of the toggle-group (e.g., 'single' or 'multiple').
+     */
+    readonly type?: Signal<'single' | 'multiple'>;
+    /**
+     * The value(s) of the toggle-group.
+     */
+    readonly value?: Signal<string[] | undefined>;
+    /**
+     * Whether the toggle-group is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+    /**
+     * Emit when the value changes.
+     */
+    readonly onValueChange?: (value: string[]) => void;
+}
+declare const ngpToggleGroup: ({ rovingFocusGroup, orientation: _orientation, allowDeselection, type, value: _value, disabled: _disabled, onValueChange, }: NgpToggleGroupProps) => NgpToggleGroupState;
 declare const injectToggleGroupState: {
     (): Signal<NgpToggleGroupState>;
     (options: {
@@ -188,5 +237,5 @@ declare class NgpToggleGroup {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggleGroup, "[ngpToggleGroup]", ["ngpToggleGroup"], { "orientation": { "alias": "ngpToggleGroupOrientation"; "required": false; "isSignal": true; }; "allowDeselection": { "alias": "ngpToggleGroupAllowDeselection"; "required": false; "isSignal": true; }; "type": { "alias": "ngpToggleGroupType"; "required": false; "isSignal": true; }; "value": { "alias": "ngpToggleGroupValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpToggleGroupValueChange"; }, never, never, true, never>;
 }
 
-export { NgpToggleGroup, NgpToggleGroupItem, injectToggleGroupItemState, injectToggleGroupState, provideToggleGroupConfig, provideToggleGroupItemState, provideToggleGroupState };
-export type { NgpToggleGroupConfig };
+export { NgpToggleGroup, NgpToggleGroupItem, injectToggleGroupItemState, injectToggleGroupState, ngpToggleGroup, ngpToggleGroupItem, provideToggleGroupConfig, provideToggleGroupItemState, provideToggleGroupState };
+export type { NgpToggleGroupConfig, NgpToggleGroupItemProps, NgpToggleGroupItemState, NgpToggleGroupProps, NgpToggleGroupState };

package/toolbar/index.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal, WritableSignal } from '@angular/core';
 import { NgpOrientation } from 'ng-primitives/common';
+import { NgpRovingFocusGroupState } from 'ng-primitives/roving-focus';
 
 declare class NgpToolbar {
     /**
@@ -18,6 +19,31 @@ declare class NgpToolbar {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToolbar, "[ngpToolbar]", ["ngpToolbar"], { "orientation": { "alias": "ngpToolbarOrientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+interface NgpToolbarState {
+    /**
+     * The orientation of the toolbar.
+     */
+    readonly orientation: WritableSignal<NgpOrientation>;
+    /**
+     * Set the orientation of the toolbar.
+     * @param value The orientation value
+     */
+    setOrientation(value: NgpOrientation): void;
+}
+interface NgpToolbarProps {
+    /**
+     * The roving focus group state.
+     */
+    readonly rovingFocusGroup: NgpRovingFocusGroupState;
+    /**
+     * The orientation of the toolbar.
+     */
+    readonly orientation: Signal<NgpOrientation>;
+}
+declare const ngpToolbar: ({ rovingFocusGroup, orientation: _orientation }: NgpToolbarProps) => {
+    orientation: WritableSignal<NgpOrientation>;
+    setOrientation: (value: NgpOrientation) => void;
+};
 declare const injectToolbarState: {
     (): Signal<{
         orientation: WritableSignal<NgpOrientation>;
@@ -47,4 +73,5 @@ declare const provideToolbarState: (opts?: {
     inherit?: boolean;
 }) => _angular_core.FactoryProvider;
 
-export { NgpToolbar, injectToolbarState, provideToolbarState };
+export { NgpToolbar, injectToolbarState, ngpToolbar, provideToolbarState };
+export type { NgpToolbarProps, NgpToolbarState };