ng-primitives 0.124.0 → 0.126.0

package/types/ng-primitives-switch.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal, WritableSignal } from '@angular/core';
 import * as ng_primitives_state from 'ng-primitives/state';
+import { SetterOptions } from 'ng-primitives/state';
 import * as ng_primitives_switch from 'ng-primitives/switch';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Observable } from 'rxjs';
@@ -64,6 +65,11 @@ declare class NgpSwitch {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether the switch is required.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /**
      * The switch state.
      * @internal
@@ -76,13 +82,13 @@ declare class NgpSwitch {
     /**
      * Update the checked value.
      */
-    setChecked(value: boolean): void;
+    setChecked(value: boolean, options?: SetterOptions): void;
     /**
      * Update the disabled value.
      */
     setDisabled(value: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSwitch, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSwitch, "[ngpSwitch]", ["ngpSwitch"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "ngpSwitchChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSwitchDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpSwitchCheckedChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSwitch, "[ngpSwitch]", ["ngpSwitch"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "ngpSwitchChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSwitchDisabled"; "required": false; "isSignal": true; }; "required": { "alias": "ngpSwitchRequired"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpSwitchCheckedChange"; }, never, never, true, never>;
 }
 
 /**
@@ -112,7 +118,7 @@ interface NgpSwitchState {
     /**
      * Update the checked value.
      */
-    setChecked(value: boolean): void;
+    setChecked(value: boolean, options?: SetterOptions): void;
     /**
      * Update the disabled value.
      */
@@ -134,12 +140,16 @@ interface NgpSwitchProps {
      * Whether the switch is disabled.
      */
     readonly disabled?: Signal<boolean>;
+    /**
+     * Whether the switch is required.
+     */
+    readonly required?: Signal<boolean>;
     /**
      * Callback fired when the checked state changes.
      */
     readonly onCheckedChange?: (checked: boolean) => void;
 }
-declare const ngpSwitch: ({ id, checked: _checked, disabled: _disabled, onCheckedChange, }: NgpSwitchProps) => NgpSwitchState;
+declare const ngpSwitch: ({ id, checked: _checked, disabled: _disabled, required: _required, onCheckedChange, }: NgpSwitchProps) => NgpSwitchState;
 declare const injectSwitchState: {
     (): Signal<NgpSwitchState>;
     (options: ng_primitives_state.StateInjectionOptions): Signal<NgpSwitchState | null>;

package/types/ng-primitives-tabs.d.ts

@@ -277,6 +277,11 @@ declare class NgpTabset {
      * Whether tabs should activate on focus
      */
     readonly activateOnFocus: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Whether keyboard focus should wrap around the tab list.
+     * @default true (from the global tabs config)
+     */
+    readonly wrap: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     private readonly state;
     /**
      * @internal
@@ -294,7 +299,7 @@ declare class NgpTabset {
      */
     setOrientation(orientation: NgpOrientation): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTabset, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTabset, "[ngpTabset]", ["ngpTabset"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpTabsetValue"; "required": false; "isSignal": true; }; "orientation": { "alias": "ngpTabsetOrientation"; "required": false; "isSignal": true; }; "activateOnFocus": { "alias": "ngpTabsetActivateOnFocus"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpTabsetValueChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTabset, "[ngpTabset]", ["ngpTabset"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpTabsetValue"; "required": false; "isSignal": true; }; "orientation": { "alias": "ngpTabsetOrientation"; "required": false; "isSignal": true; }; "activateOnFocus": { "alias": "ngpTabsetActivateOnFocus"; "required": false; "isSignal": true; }; "wrap": { "alias": "ngpTabsetWrap"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpTabsetValueChange"; }, never, never, true, never>;
 }
 
 /**

package/types/ng-primitives-toggle-group.d.ts

@@ -3,7 +3,7 @@ import { Provider, OnInit, Signal, WritableSignal } from '@angular/core';
 import { NgpOrientation } from 'ng-primitives/common';
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as ng_primitives_state from 'ng-primitives/state';
-import { SetterOptions } from 'ng-primitives/state';
+import { SetterOptions, StateInjectionOptions } from 'ng-primitives/state';
 import * as ng_primitives_toggle_group from 'ng-primitives/toggle-group';
 import { Observable } from 'rxjs';
 
@@ -36,20 +36,20 @@ interface NgpToggleGroupConfig {
  */
 declare function provideToggleGroupConfig(config: Partial<NgpToggleGroupConfig>): Provider[];
 
-declare class NgpToggleGroupItem implements OnInit {
+declare class NgpToggleGroupItem<T = string> implements OnInit {
     /**
      * The value of the item.
      * @required
      */
-    readonly value: _angular_core.InputSignal<string | undefined>;
+    readonly value: _angular_core.InputSignal<T | undefined>;
     /**
      * Whether the item is disabled.
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     constructor();
     ngOnInit(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToggleGroupItem, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggleGroupItem, "[ngpToggleGroupItem]", ["ngpToggleGroupItem"], { "value": { "alias": "ngpToggleGroupItemValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupItemDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToggleGroupItem<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggleGroupItem<any>, "[ngpToggleGroupItem]", ["ngpToggleGroupItem"], { "value": { "alias": "ngpToggleGroupItemValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupItemDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -62,17 +62,17 @@ interface NgpToggleGroupItemState {
 /**
  * The props interface for the ToggleGroupItem pattern.
  */
-interface NgpToggleGroupItemProps {
+interface NgpToggleGroupItemProps<T = string> {
     /**
      * The value of the toggle group item.
      */
-    value: Signal<string>;
+    value: Signal<T>;
     /**
      * Whether the toggle group item is disabled.
      */
     disabled?: Signal<boolean>;
 }
-declare const ngpToggleGroupItem: ({ value, disabled }: NgpToggleGroupItemProps) => NgpToggleGroupItemState;
+declare const ngpToggleGroupItem: <T = string>({ value, disabled, }: NgpToggleGroupItemProps<T>) => NgpToggleGroupItemState;
 declare const injectToggleGroupItemState: {
     (): Signal<NgpToggleGroupItemState>;
     (options: ng_primitives_state.StateInjectionOptions): Signal<NgpToggleGroupItemState | null>;
@@ -82,7 +82,7 @@ declare const provideToggleGroupItemState: (opts?: {
     inherit?: boolean;
 }) => _angular_core.FactoryProvider;
 
-declare class NgpToggleGroup {
+declare class NgpToggleGroup<T = string> {
     /**
      * Access the global toggle group configuration.
      */
@@ -108,16 +108,22 @@ declare class NgpToggleGroup {
     /**
      * The selected value(s) of the toggle group.
      */
-    readonly value: _angular_core.InputSignal<string[] | undefined>;
+    readonly value: _angular_core.InputSignal<T[] | undefined>;
     /**
      * The default selected value(s) for uncontrolled usage.
      * @default []
      */
-    readonly defaultValue: _angular_core.InputSignal<string[]>;
+    readonly defaultValue: _angular_core.InputSignal<T[]>;
     /**
      * Emits when the value of the toggle group changes.
      */
-    readonly valueChange: _angular_core.OutputEmitterRef<string[]>;
+    readonly valueChange: _angular_core.OutputEmitterRef<T[]>;
+    /**
+     * The comparator used to determine whether two values are equal.
+     * Useful when values are objects and equality should be checked by value rather than by reference.
+     * @default (a, b) => a === b
+     */
+    readonly compareWith: _angular_core.InputSignal<(a: T, b: T) => boolean>;
     /**
      * Whether the toggle group is disabled.
      */
@@ -125,19 +131,19 @@ declare class NgpToggleGroup {
     /**
      * The state of the toggle group.
      */
-    protected readonly state: ng_primitives_toggle_group.NgpToggleGroupState;
+    protected readonly state: ng_primitives_toggle_group.NgpToggleGroupState<T>;
     /**
      * Toggle a value in the toggle group.
      */
-    toggle(value: string): void;
+    toggle(value: T): void;
     /**
      * Set the value(s) of the toggle group.
      */
-    setValue(newValue: string[], options?: SetterOptions): void;
+    setValue(newValue: T[], options?: SetterOptions): void;
     /**
      * Set the default value(s) of the toggle group.
      */
-    setDefaultValue(defaultValue: string[]): void;
+    setDefaultValue(defaultValue: T[]): void;
     /**
      * Set the disabled state of the toggle group.
      */
@@ -146,22 +152,22 @@ declare class NgpToggleGroup {
      * Set the orientation of the toggle group.
      */
     setOrientation(newOrientation: NgpOrientation): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToggleGroup, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggleGroup, "[ngpToggleGroup]", ["ngpToggleGroup"], { "orientation": { "alias": "ngpToggleGroupOrientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "ngpToggleGroupWrap"; "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; }; "defaultValue": { "alias": "ngpToggleGroupDefaultValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpToggleGroupValueChange"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToggleGroup<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggleGroup<any>, "[ngpToggleGroup]", ["ngpToggleGroup"], { "orientation": { "alias": "ngpToggleGroupOrientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "ngpToggleGroupWrap"; "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; }; "defaultValue": { "alias": "ngpToggleGroupDefaultValue"; "required": false; "isSignal": true; }; "compareWith": { "alias": "ngpToggleGroupCompareWith"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleGroupDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpToggleGroupValueChange"; }, never, never, true, never>;
 }
 
 /**
  * The state interface for the ToggleGroup pattern.
  */
-interface NgpToggleGroupState {
+interface NgpToggleGroupState<T = string> {
     /**
      * The current value(s) of the toggle group.
      */
-    readonly value: WritableSignal<string[]>;
+    readonly value: WritableSignal<T[]>;
     /**
      * Emit when the value changes.
      */
-    readonly valueChange: Observable<string[]>;
+    readonly valueChange: Observable<T[]>;
     /**
      * Whether the toggle group is disabled.
      */
@@ -170,30 +176,34 @@ interface NgpToggleGroupState {
      * The orientation of the toggle group.
      */
     readonly orientation: WritableSignal<NgpOrientation>;
+    /**
+     * The type of the toggle group, whether only one item can be selected or multiple.
+     */
+    readonly type: Signal<'single' | 'multiple'>;
     /**
      * Select a value in the toggle group.
      */
-    select(selection: string): void;
+    select(selection: T): void;
     /**
      * De-select a value in the toggle group.
      */
-    deselect(selection: string): void;
+    deselect(selection: T): void;
     /**
      * Check if a value is selected in the toggle group.
      */
-    isSelected(selection: string): boolean;
+    isSelected(selection: T): boolean;
     /**
      * Toggle a value in the toggle group.
      */
-    toggle(selection: string): void;
+    toggle(selection: T): void;
     /**
      * Set the value(s) of the toggle group.
      */
-    setValue(newValue: string[], options?: SetterOptions): void;
+    setValue(newValue: T[], options?: SetterOptions): void;
     /**
      * Set the default value(s) of the toggle group.
      */
-    setDefaultValue(defaultValue: string[]): void;
+    setDefaultValue(defaultValue: T[]): void;
     /**
      * Set the disabled state of the toggle group.
      */
@@ -206,7 +216,7 @@ interface NgpToggleGroupState {
 /**
  * The props interface for the ToggleGroup pattern.
  */
-interface NgpToggleGroupProps {
+interface NgpToggleGroupProps<T = string> {
     /**
      * The orientation of the toggle-group.
      */
@@ -226,29 +236,33 @@ interface NgpToggleGroupProps {
     /**
      * The value(s) of the toggle-group.
      */
-    readonly value: Signal<string[] | undefined>;
+    readonly value: Signal<T[] | undefined>;
     /**
      * The default value(s) of the toggle-group for uncontrolled usage.
      */
-    readonly defaultValue?: Signal<string[]>;
+    readonly defaultValue?: Signal<T[]>;
     /**
      * Whether the toggle-group is disabled.
      */
     readonly disabled?: Signal<boolean>;
+    /**
+     * The comparator used to determine whether two values are equal.
+     * @default (a, b) => a === b
+     */
+    readonly compareWith?: Signal<(a: T, b: T) => boolean>;
     /**
      * Emit when the value changes.
      */
-    readonly onValueChange?: (value: string[]) => void;
+    readonly onValueChange?: (value: T[]) => void;
 }
-declare const ngpToggleGroup: ({ orientation: _orientation, wrap: _wrap, allowDeselection: _allowDeselection, type: _type, value: _value, defaultValue: _defaultValue, disabled: _disabled, onValueChange, }: NgpToggleGroupProps) => NgpToggleGroupState;
-declare const injectToggleGroupState: {
-    (): Signal<NgpToggleGroupState>;
-    (options: ng_primitives_state.StateInjectionOptions): Signal<NgpToggleGroupState | null>;
-    (options?: ng_primitives_state.StateInjectionOptions): Signal<NgpToggleGroupState> | Signal<NgpToggleGroupState | null>;
-};
+declare const ngpToggleGroup: <T = string>({ orientation: _orientation, wrap: _wrap, allowDeselection: _allowDeselection, type: _type, value: _value, defaultValue: _defaultValue, disabled: _disabled, compareWith: _compareWith, onValueChange, }: NgpToggleGroupProps<T>) => NgpToggleGroupState<T>;
 declare const provideToggleGroupState: (opts?: {
     inherit?: boolean;
 }) => _angular_core.FactoryProvider;
+/**
+ * Injects the ToggleGroup state, typed to the value type `T`.
+ */
+declare function injectToggleGroupState<T = string>(options?: StateInjectionOptions): Signal<NgpToggleGroupState<T>>;
 
 export { NgpToggleGroup, NgpToggleGroupItem, injectToggleGroupItemState, injectToggleGroupState, ngpToggleGroup, ngpToggleGroupItem, provideToggleGroupConfig, provideToggleGroupItemState, provideToggleGroupState };
 export type { NgpToggleGroupConfig, NgpToggleGroupItemProps, NgpToggleGroupItemState, NgpToggleGroupProps, NgpToggleGroupState };