ng-primitives 0.115.1 → 0.116.0

package/fesm2022/ng-primitives-toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-toggle.mjs","sources":["../../../../packages/ng-primitives/toggle/src/toggle/toggle-state.ts","../../../../packages/ng-primitives/toggle/src/toggle/toggle.ts","../../../../packages/ng-primitives/toggle/src/ng-primitives-toggle.ts"],"sourcesContent":["import { computed, Signal, signal, WritableSignal } from '@angular/core';\nimport { ngpInteractions } from 'ng-primitives/interactions';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport {\n  attrBinding,\n  controlled,\n  createPrimitive,\n  dataBinding,\n  deprecatedSetter,\n  emitter,\n  listener,\n} from 'ng-primitives/state';\nimport { Observable } from 'rxjs';\n\n/**\n * Public state surface for the Toggle primitive.\n */\nexport interface NgpToggleState {\n  /**\n   * Whether the toggle is selected.\n   */\n  readonly selected: WritableSignal<boolean>;\n  /**\n   * Whether the toggle is disabled.\n   */\n  readonly disabled: WritableSignal<boolean>;\n  /**\n   * Emits when the selected state changes.\n   */\n  readonly selectedChange: Observable<boolean>;\n  /**\n   * Toggle the selected state.\n   */\n  toggle(event?: Event): void;\n  /**\n   * Set the selected state.\n   */\n  setSelected(value: boolean): void;\n  /**\n   * Set the disabled state.\n   */\n  setDisabled(value: boolean): void;\n}\n\n/**\n * Inputs for configuring the Toggle primitive.\n */\nexport interface NgpToggleProps {\n  /**\n   * Whether the toggle is selected.\n   */\n  readonly selected?: Signal<boolean>;\n  /**\n   * Whether the toggle is disabled.\n   */\n  readonly disabled?: Signal<boolean>;\n  /**\n   * Callback fired when the selected state changes.\n   */\n  readonly onSelectedChange?: (selected: boolean) => void;\n}\n\nexport const [NgpToggleStateToken, ngpToggle, injectToggleState, provideToggleState] =\n  createPrimitive(\n    'NgpToggle',\n    ({\n      selected: _selected = signal(false),\n      disabled: _disabled = signal(false),\n      onSelectedChange,\n    }: NgpToggleProps): NgpToggleState => {\n      const element = injectElementRef<HTMLElement>();\n      const selected = controlled(_selected);\n      const disabled = controlled(_disabled);\n      const isButton = element.nativeElement.tagName.toLowerCase() === 'button';\n\n      const selectedChange = emitter<boolean>();\n\n      ngpInteractions({\n        hover: true,\n        press: true,\n        focusVisible: true,\n        disabled,\n      });\n\n      const tabindex = computed(() => (disabled() ? -1 : 0));\n\n      // Host bindings\n      attrBinding(element, 'type', () => (isButton ? 'button' : null));\n      attrBinding(element, 'aria-pressed', selected);\n      dataBinding(element, 'data-selected', selected);\n      dataBinding(element, 'data-disabled', disabled);\n      attrBinding(element, 'aria-disabled', disabled);\n      attrBinding(element, 'tabindex', () => tabindex().toString());\n\n      // Listeners\n      listener(element, 'click', event => toggle(event));\n      listener(element, 'keydown', (event: KeyboardEvent) => {\n        if (event.key === ' ' || event.key === 'Spacebar') {\n          if (!isButton && element.nativeElement.tagName !== 'a') {\n            event.preventDefault();\n            toggle(event);\n          }\n        }\n      });\n\n      function toggle(event?: Event): void {\n        if (disabled()) {\n          return;\n        }\n\n        event?.preventDefault?.();\n        setSelected(!selected());\n      }\n\n      function setSelected(value: boolean): void {\n        selected.set(value);\n        onSelectedChange?.(value);\n        selectedChange.emit(value);\n      }\n\n      function setDisabled(value: boolean): void {\n        disabled.set(value);\n      }\n\n      return {\n        selected: deprecatedSetter(selected, 'setSelected'),\n        disabled: deprecatedSetter(disabled, 'setDisabled'),\n        selectedChange: selectedChange.asObservable(),\n        toggle,\n        setSelected,\n        setDisabled,\n      } satisfies NgpToggleState;\n    },\n  );\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Directive, input, output } from '@angular/core';\nimport { ngpToggle, provideToggleState } from './toggle-state';\n\n/**\n * Apply the `ngpToggle` directive to an element to manage the toggle state. This must be applied to a `button` element.\n */\n@Directive({\n  selector: '[ngpToggle]',\n  exportAs: 'ngpToggle',\n  providers: [provideToggleState({ inherit: false })],\n})\nexport class NgpToggle {\n  /**\n   * Whether the toggle is selected.\n   * @default false\n   */\n  readonly selected = input<boolean, BooleanInput>(false, {\n    alias: 'ngpToggleSelected',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Emits when the selected state changes.\n   */\n  readonly selectedChange = output<boolean>({\n    alias: 'ngpToggleSelectedChange',\n  });\n\n  /**\n   * Whether the toggle is disabled.\n   * @default false\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    alias: 'ngpToggleDisabled',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The state for the toggle primitive.\n   * @internal\n   */\n  protected readonly state = ngpToggle({\n    selected: this.selected,\n    disabled: this.disabled,\n    onSelectedChange: value => this.selectedChange.emit(value),\n  });\n\n  /**\n   * Toggle the selected state.\n   */\n  toggle(): void {\n    this.state.toggle();\n  }\n\n  /**\n   * Set the selected state.\n   */\n  setSelected(value: boolean): void {\n    this.state.setSelected(value);\n  }\n\n  /*\n   * Set the disabled state.\n   */\n  setDisabled(value: boolean): void {\n    this.state.setDisabled(value);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-primitives-toggle.mjs","sources":["../../../../packages/ng-primitives/toggle/src/toggle/toggle-state.ts","../../../../packages/ng-primitives/toggle/src/toggle/toggle.ts","../../../../packages/ng-primitives/toggle/src/ng-primitives-toggle.ts"],"sourcesContent":["import { computed, Signal, WritableSignal } from '@angular/core';\nimport { ngpInteractions } from 'ng-primitives/interactions';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport {\n  attrBinding,\n  controlled,\n  controlledState,\n  createPrimitive,\n  dataBinding,\n  deprecatedSetter,\n  listener,\n  SetterOptions,\n} from 'ng-primitives/state';\nimport { Observable } from 'rxjs';\n\n/**\n * Public state surface for the Toggle primitive.\n */\nexport interface NgpToggleState {\n  /**\n   * Whether the toggle is selected.\n   */\n  readonly selected: WritableSignal<boolean>;\n  /**\n   * Whether the toggle is disabled.\n   */\n  readonly disabled: WritableSignal<boolean>;\n  /**\n   * Emits when the selected state changes.\n   */\n  readonly selectedChange: Observable<boolean>;\n  /**\n   * Toggle the selected state.\n   */\n  toggle(event?: Event): void;\n  /**\n   * Set the selected state.\n   */\n  setSelected(value: boolean, options?: SetterOptions): void;\n  /**\n   * Set the default selected state.\n   */\n  setDefaultSelected(value: boolean): void;\n  /**\n   * Set the disabled state.\n   */\n  setDisabled(value: boolean): void;\n}\n\n/**\n * Inputs for configuring the Toggle primitive.\n */\nexport interface NgpToggleProps {\n  /**\n   * Whether the toggle is selected.\n   */\n  readonly selected: Signal<boolean | undefined>;\n  /**\n   * The default selected state for uncontrolled usage.\n   */\n  readonly defaultSelected?: Signal<boolean>;\n  /**\n   * Whether the toggle is disabled.\n   */\n  readonly disabled?: Signal<boolean>;\n  /**\n   * Callback fired when the selected state changes.\n   */\n  readonly onSelectedChange?: (selected: boolean) => void;\n}\n\nexport const [NgpToggleStateToken, ngpToggle, injectToggleState, provideToggleState] =\n  createPrimitive(\n    'NgpToggle',\n    ({\n      selected: _selected,\n      defaultSelected: _defaultSelected,\n      disabled: _disabled,\n      onSelectedChange,\n    }: NgpToggleProps): NgpToggleState => {\n      const element = injectElementRef<HTMLElement>();\n\n      const isButton = element.nativeElement.tagName.toLowerCase() === 'button';\n      const defaultSelected = controlled(_defaultSelected, false);\n      const disabled = controlled(_disabled, false);\n      const tabindex = computed(() => (disabled() ? -1 : 0));\n\n      const [selected, setSelected, selectedChange] = controlledState({\n        value: _selected,\n        defaultValue: defaultSelected,\n        onChange: onSelectedChange,\n      });\n\n      ngpInteractions({\n        hover: true,\n        press: true,\n        focusVisible: true,\n        disabled,\n      });\n\n      // Host bindings\n      attrBinding(element, 'type', () => (isButton ? 'button' : null));\n      attrBinding(element, 'aria-pressed', selected);\n      dataBinding(element, 'data-selected', selected);\n      dataBinding(element, 'data-disabled', disabled);\n      attrBinding(element, 'aria-disabled', disabled);\n      attrBinding(element, 'tabindex', () => tabindex().toString());\n\n      // Listeners\n      listener(element, 'click', event => toggle(event));\n      listener(element, 'keydown', (event: KeyboardEvent) => {\n        if (event.key === ' ' || event.key === 'Spacebar') {\n          if (!isButton && element.nativeElement.tagName !== 'a') {\n            event.preventDefault();\n            toggle(event);\n          }\n        }\n      });\n\n      function toggle(event?: Event): void {\n        if (disabled()) {\n          return;\n        }\n\n        event?.preventDefault?.();\n        setSelected(!selected());\n      }\n\n      function setDisabled(value: boolean): void {\n        disabled.set(value);\n      }\n\n      return {\n        selected: deprecatedSetter(selected, 'setSelected', setSelected),\n        disabled: deprecatedSetter(disabled, 'setDisabled', setDisabled),\n        selectedChange,\n        toggle,\n        setSelected,\n        setDefaultSelected: defaultSelected.set,\n        setDisabled,\n      } satisfies NgpToggleState;\n    },\n  );\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Directive, input, output } from '@angular/core';\nimport { SetterOptions } from 'ng-primitives/state';\nimport { ngpToggle, provideToggleState } from './toggle-state';\n\n/**\n * Apply the `ngpToggle` directive to an element to manage the toggle state. This must be applied to a `button` element.\n */\n@Directive({\n  selector: '[ngpToggle]',\n  exportAs: 'ngpToggle',\n  providers: [provideToggleState({ inherit: false })],\n})\nexport class NgpToggle {\n  /**\n   * Whether the toggle is selected.\n   */\n  readonly selected = input<boolean | undefined, BooleanInput>(undefined, {\n    alias: 'ngpToggleSelected',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The default selected state for uncontrolled usage.\n   * @default false\n   */\n  readonly defaultSelected = input<boolean, BooleanInput>(false, {\n    alias: 'ngpToggleDefaultSelected',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Emits when the selected state changes.\n   */\n  readonly selectedChange = output<boolean>({\n    alias: 'ngpToggleSelectedChange',\n  });\n\n  /**\n   * Whether the toggle is disabled.\n   * @default false\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    alias: 'ngpToggleDisabled',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The state for the toggle primitive.\n   * @internal\n   */\n  protected readonly state = ngpToggle({\n    selected: this.selected,\n    defaultSelected: this.defaultSelected,\n    disabled: this.disabled,\n    onSelectedChange: value => this.selectedChange.emit(value),\n  });\n\n  /**\n   * Toggle the selected state.\n   */\n  toggle(): void {\n    this.state.toggle();\n  }\n\n  /**\n   * Set the selected state.\n   */\n  setSelected(value: boolean, options?: SetterOptions): void {\n    this.state.setSelected(value, options);\n  }\n\n  /**\n   * Set the default selected state.\n   */\n  setDefaultSelected(value: boolean): void {\n    this.state.setDefaultSelected(value);\n  }\n\n  /*\n   * Set the disabled state.\n   */\n  setDisabled(value: boolean): void {\n    this.state.setDisabled(value);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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.115.1",
+  "version": "0.116.0",
   "keywords": [
     "angular",
     "primitives",

package/schematics/ng-generate/templates/toggle/toggle.__fileSuffix@dasherize__.ts.template

@@ -77,7 +77,7 @@ export class Toggle<%= componentSuffix %> implements ControlValueAccessor {
 
   /** Write a new value to the toggle. */
   writeValue(value: boolean): void {
-    this.toggle().setSelected(value);
+    this.toggle().setSelected(value, { emit: false });
   }
 
   /** Register a callback function to be called when the value changes. */

package/schematics/ng-generate/templates/toggle-group/toggle-group.__fileSuffix@dasherize__.ts.template

@@ -58,7 +58,7 @@ export class ToggleGroup<%= componentSuffix %> implements ControlValueAccessor {
 
   /** Write a new value to the toggle group. */
   writeValue(value: string[]): void {
-    this.toggleGroup().setValue(value);
+    this.toggleGroup().setValue(value, { emit: false });
   }
 
   /** Register a callback function to be called when the value changes. */

package/state/index.d.ts

@@ -93,6 +93,36 @@ declare function createPrimitive<TFactory extends (...args: any[]) => unknown>(n
     }) => FactoryProvider
 ];
 declare function controlled<T>(value: Signal<T>): WritableSignal<T>;
+declare function controlled<T>(value: Signal<T> | undefined, defaultValue: T): WritableSignal<T>;
+interface ControlledStateOptions<T> {
+    /**
+     * The controlled value signal. When defined (not `undefined`), the component
+     * is in controlled mode and this value always wins.
+     */
+    readonly value: Signal<T | undefined>;
+    /**
+     * The default value signal for uncontrolled mode.
+     */
+    readonly defaultValue?: Signal<T>;
+    /**
+     * Callback fired when the value changes.
+     */
+    readonly onChange?: (value: T) => void;
+}
+interface SetterOptions {
+    /**
+     * Whether to fire `onChange` and emit on the `change` observable.
+     * Defaults to `true`. Set to `false` for cases like form `writeValue`
+     * where the internal state should sync without notifying listeners.
+     */
+    readonly emit?: boolean;
+}
+type ControlledState<T> = [
+    value: Signal<T>,
+    set: (value: T, options?: SetterOptions) => void,
+    change: Observable<T>
+];
+declare function controlledState<T>({ value, onChange, defaultValue, }: ControlledStateOptions<T>): ControlledState<T>;
 declare function attrBinding(element: ElementRef<HTMLElement>, attr: string, value: (() => string | number | boolean | null | undefined) | string | number | boolean | null | undefined): void;
 declare function styleBinding(element: ElementRef<HTMLElement>, style: string, value: (() => string | number | null) | string | number | null): void;
 declare function dataBinding(element: ElementRef<HTMLElement>, attr: string, value: (() => string | boolean | null) | string | boolean | null): void;
@@ -112,6 +142,7 @@ declare function onDestroy(callback: () => void): void;
  * signal and returns a proxy that warns the user when set is called directly.
  */
 declare function deprecatedSetter<T>(signal: WritableSignal<T>, methodName: string): WritableSignal<T>;
+declare function deprecatedSetter<T>(signal: Signal<T>, methodName: string, setter: (value: T) => void): WritableSignal<T>;
 /**
  * A utility function to inject an inherited state from a parent injector. This is useful for cases
  * where a primitive needs to inherit state from a parent primitive, such as in roving focus groups.
@@ -131,5 +162,5 @@ declare function emitter<T>({ injector, }?: {
     injector?: Injector;
 }): Emitter<T>;
 
-export { attrBinding, controlled, createPrimitive, createState, createStateInjector, createStateProvider, createStateToken, dataBinding, deprecatedSetter, emitter, injectInheritedState, listener, onDestroy, onMount, styleBinding };
-export type { CreatePrimitiveOptions, CreateStateProviderOptions, CreatedState, Emitter, InjectedState, State };
+export { attrBinding, controlled, controlledState, createPrimitive, createState, createStateInjector, createStateProvider, createStateToken, dataBinding, deprecatedSetter, emitter, injectInheritedState, listener, onDestroy, onMount, styleBinding };
+export type { ControlledState, ControlledStateOptions, CreatePrimitiveOptions, CreateStateProviderOptions, CreatedState, Emitter, InjectedState, SetterOptions, State };

package/toggle/index.d.ts

@@ -1,5 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { WritableSignal, Signal } from '@angular/core';
+import { SetterOptions } from 'ng-primitives/state';
 import { Observable } from 'rxjs';
 import { BooleanInput } from '@angular/cdk/coercion';
 
@@ -26,7 +27,11 @@ interface NgpToggleState {
     /**
      * Set the selected state.
      */
-    setSelected(value: boolean): void;
+    setSelected(value: boolean, options?: SetterOptions): void;
+    /**
+     * Set the default selected state.
+     */
+    setDefaultSelected(value: boolean): void;
     /**
      * Set the disabled state.
      */
@@ -39,7 +44,11 @@ interface NgpToggleProps {
     /**
      * Whether the toggle is selected.
      */
-    readonly selected?: Signal<boolean>;
+    readonly selected: Signal<boolean | undefined>;
+    /**
+     * The default selected state for uncontrolled usage.
+     */
+    readonly defaultSelected?: Signal<boolean>;
     /**
      * Whether the toggle is disabled.
      */
@@ -49,7 +58,7 @@ interface NgpToggleProps {
      */
     readonly onSelectedChange?: (selected: boolean) => void;
 }
-declare const ngpToggle: ({ selected: _selected, disabled: _disabled, onSelectedChange, }: NgpToggleProps) => NgpToggleState;
+declare const ngpToggle: ({ selected: _selected, defaultSelected: _defaultSelected, disabled: _disabled, onSelectedChange, }: NgpToggleProps) => NgpToggleState;
 declare const injectToggleState: {
     (): Signal<NgpToggleState>;
     (options: {
@@ -73,9 +82,13 @@ declare const provideToggleState: (opts?: {
 declare class NgpToggle {
     /**
      * Whether the toggle is selected.
+     */
+    readonly selected: _angular_core.InputSignalWithTransform<boolean | undefined, BooleanInput>;
+    /**
+     * The default selected state for uncontrolled usage.
      * @default false
      */
-    readonly selected: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly defaultSelected: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /**
      * Emits when the selected state changes.
      */
@@ -97,10 +110,14 @@ declare class NgpToggle {
     /**
      * Set the selected state.
      */
-    setSelected(value: boolean): void;
+    setSelected(value: boolean, options?: SetterOptions): void;
+    /**
+     * Set the default selected state.
+     */
+    setDefaultSelected(value: boolean): void;
     setDisabled(value: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpToggle, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggle, "[ngpToggle]", ["ngpToggle"], { "selected": { "alias": "ngpToggleSelected"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleDisabled"; "required": false; "isSignal": true; }; }, { "selectedChange": "ngpToggleSelectedChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpToggle, "[ngpToggle]", ["ngpToggle"], { "selected": { "alias": "ngpToggleSelected"; "required": false; "isSignal": true; }; "defaultSelected": { "alias": "ngpToggleDefaultSelected"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpToggleDisabled"; "required": false; "isSignal": true; }; }, { "selectedChange": "ngpToggleSelectedChange"; }, never, never, true, never>;
 }
 
 export { NgpToggle, injectToggleState, ngpToggle, provideToggleState };

package/toggle-group/index.d.ts

@@ -3,6 +3,7 @@ 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 { SetterOptions } from 'ng-primitives/state';
 import { Observable } from 'rxjs';
 
 interface NgpToggleGroupConfig {
@@ -127,7 +128,11 @@ interface NgpToggleGroupState {
     /**
      * Set the value(s) of the toggle group.
      */
-    setValue(newValue: string[]): void;
+    setValue(newValue: string[], options?: SetterOptions): void;
+    /**
+     * Set the default value(s) of the toggle group.
+     */
+    setDefaultValue(defaultValue: string[]): void;
     /**
      * Set the disabled state of the toggle group.
      */
@@ -160,7 +165,11 @@ interface NgpToggleGroupProps {
     /**
      * The value(s) of the toggle-group.
      */
-    readonly value?: Signal<string[] | undefined>;
+    readonly value: Signal<string[] | undefined>;
+    /**
+     * The default value(s) of the toggle-group for uncontrolled usage.
+     */
+    readonly defaultValue?: Signal<string[]>;
     /**
      * Whether the toggle-group is disabled.
      */
@@ -170,7 +179,7 @@ interface NgpToggleGroupProps {
      */
     readonly onValueChange?: (value: string[]) => void;
 }
-declare const ngpToggleGroup: ({ rovingFocusGroup, orientation: _orientation, allowDeselection, type, value: _value, disabled: _disabled, onValueChange, }: NgpToggleGroupProps) => NgpToggleGroupState;
+declare const ngpToggleGroup: ({ rovingFocusGroup, orientation: _orientation, allowDeselection: _allowDeselection, type: _type, value: _value, defaultValue: _defaultValue, disabled: _disabled, onValueChange, }: NgpToggleGroupProps) => NgpToggleGroupState;
 declare const injectToggleGroupState: {
     (): Signal<NgpToggleGroupState>;
     (options: {
@@ -214,7 +223,12 @@ declare class NgpToggleGroup {
     /**
      * The selected value(s) of the toggle group.
      */
-    readonly value: _angular_core.InputSignal<string[]>;
+    readonly value: _angular_core.InputSignal<string[] | undefined>;
+    /**
+     * The default selected value(s) for uncontrolled usage.
+     * @default []
+     */
+    readonly defaultValue: _angular_core.InputSignal<string[]>;
     /**
      * Emits when the value of the toggle group changes.
      */
@@ -234,7 +248,11 @@ declare class NgpToggleGroup {
     /**
      * Set the value(s) of the toggle group.
      */
-    setValue(newValue: string[]): void;
+    setValue(newValue: string[], options?: SetterOptions): void;
+    /**
+     * Set the default value(s) of the toggle group.
+     */
+    setDefaultValue(defaultValue: string[]): void;
     /**
      * Set the disabled state of the toggle group.
      */
@@ -244,7 +262,7 @@ declare class NgpToggleGroup {
      */
     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; }; "disabled": { "alias": "ngpToggleGroupDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpToggleGroupValueChange"; }, never, never, true, 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>;
 }
 
 export { NgpToggleGroup, NgpToggleGroupItem, injectToggleGroupItemState, injectToggleGroupState, ngpToggleGroup, ngpToggleGroupItem, provideToggleGroupConfig, provideToggleGroupItemState, provideToggleGroupState };