ng-primitives 0.115.2 → 0.117.0

package/fesm2022/ng-primitives-toggle.mjs

@@ -1,22 +1,26 @@
 import * as i0 from '@angular/core';
-import { signal, computed, input, booleanAttribute, output, Directive } from '@angular/core';
+import { computed, input, booleanAttribute, output, Directive } from '@angular/core';
 import { ngpInteractions } from 'ng-primitives/interactions';
 import { injectElementRef } from 'ng-primitives/internal';
-import { createPrimitive, controlled, emitter, attrBinding, dataBinding, listener, deprecatedSetter } from 'ng-primitives/state';
+import { createPrimitive, controlled, controlledState, attrBinding, dataBinding, listener, deprecatedSetter } from 'ng-primitives/state';
 
-const [NgpToggleStateToken, ngpToggle, injectToggleState, provideToggleState] = createPrimitive('NgpToggle', ({ selected: _selected = signal(false), disabled: _disabled = signal(false), onSelectedChange, }) => {
+const [NgpToggleStateToken, ngpToggle, injectToggleState, provideToggleState] = createPrimitive('NgpToggle', ({ selected: _selected, defaultSelected: _defaultSelected, disabled: _disabled, onSelectedChange, }) => {
     const element = injectElementRef();
-    const selected = controlled(_selected);
-    const disabled = controlled(_disabled);
     const isButton = element.nativeElement.tagName.toLowerCase() === 'button';
-    const selectedChange = emitter();
+    const defaultSelected = controlled(_defaultSelected, false);
+    const disabled = controlled(_disabled, false);
+    const tabindex = computed(() => (disabled() ? -1 : 0), ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    const [selected, setSelected, selectedChange] = controlledState({
+        value: _selected,
+        defaultValue: defaultSelected,
+        onChange: onSelectedChange,
+    });
     ngpInteractions({
         hover: true,
         press: true,
         focusVisible: true,
         disabled,
     });
-    const tabindex = computed(() => (disabled() ? -1 : 0), ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
     // Host bindings
     attrBinding(element, 'type', () => (isButton ? 'button' : null));
     attrBinding(element, 'aria-pressed', selected);
@@ -41,20 +45,16 @@ const [NgpToggleStateToken, ngpToggle, injectToggleState, provideToggleState] =
         event?.preventDefault?.();
         setSelected(!selected());
     }
-    function setSelected(value) {
-        selected.set(value);
-        onSelectedChange?.(value);
-        selectedChange.emit(value);
-    }
     function setDisabled(value) {
         disabled.set(value);
     }
     return {
-        selected: deprecatedSetter(selected, 'setSelected'),
-        disabled: deprecatedSetter(disabled, 'setDisabled'),
-        selectedChange: selectedChange.asObservable(),
+        selected: deprecatedSetter(selected, 'setSelected', setSelected),
+        disabled: deprecatedSetter(disabled, 'setDisabled', setDisabled),
+        selectedChange,
         toggle,
         setSelected,
+        setDefaultSelected: defaultSelected.set,
         setDisabled,
     };
 });
@@ -66,13 +66,21 @@ class NgpToggle {
     constructor() {
         /**
          * Whether the toggle is selected.
-         * @default false
          */
-        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", alias: 'ngpToggleSelected',
+        this.selected = input(undefined, ...(ngDevMode ? [{ debugName: "selected", alias: 'ngpToggleSelected',
                 transform: booleanAttribute }] : [{
                 alias: 'ngpToggleSelected',
                 transform: booleanAttribute,
             }]));
+        /**
+         * The default selected state for uncontrolled usage.
+         * @default false
+         */
+        this.defaultSelected = input(false, ...(ngDevMode ? [{ debugName: "defaultSelected", alias: 'ngpToggleDefaultSelected',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpToggleDefaultSelected',
+                transform: booleanAttribute,
+            }]));
         /**
          * Emits when the selected state changes.
          */
@@ -94,6 +102,7 @@ class NgpToggle {
          */
         this.state = ngpToggle({
             selected: this.selected,
+            defaultSelected: this.defaultSelected,
             disabled: this.disabled,
             onSelectedChange: value => this.selectedChange.emit(value),
         });
@@ -107,8 +116,14 @@ class NgpToggle {
     /**
      * Set the selected state.
      */
-    setSelected(value) {
-        this.state.setSelected(value);
+    setSelected(value, options) {
+        this.state.setSelected(value, options);
+    }
+    /**
+     * Set the default selected state.
+     */
+    setDefaultSelected(value) {
+        this.state.setDefaultSelected(value);
     }
     /*
      * Set the disabled state.
@@ -117,7 +132,7 @@ class NgpToggle {
         this.state.setDisabled(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpToggle, isStandalone: true, selector: "[ngpToggle]", inputs: { selected: { classPropertyName: "selected", publicName: "ngpToggleSelected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpToggleDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "ngpToggleSelectedChange" }, providers: [provideToggleState({ inherit: false })], exportAs: ["ngpToggle"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpToggle, isStandalone: true, selector: "[ngpToggle]", inputs: { selected: { classPropertyName: "selected", publicName: "ngpToggleSelected", isSignal: true, isRequired: false, transformFunction: null }, defaultSelected: { classPropertyName: "defaultSelected", publicName: "ngpToggleDefaultSelected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpToggleDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "ngpToggleSelectedChange" }, providers: [provideToggleState({ inherit: false })], exportAs: ["ngpToggle"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpToggle, decorators: [{
             type: Directive,
@@ -126,7 +141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                     exportAs: 'ngpToggle',
                     providers: [provideToggleState({ inherit: false })],
                 }]
-        }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpToggleSelected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["ngpToggleSelectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpToggleDisabled", required: false }] }] } });
+        }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpToggleSelected", required: false }] }], defaultSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpToggleDefaultSelected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["ngpToggleSelectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpToggleDisabled", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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":";;;;;;AAuEO,MAAM,CAAC,mBAAmB,EAAE,SAAS,EAAE,iBAAiB,EAAE,kBAAkB,CAAC,GAClF,eAAe,CACb,WAAW,EACX,CAAC,EACC,QAAQ,EAAE,SAAS,EACnB,eAAe,EAAE,gBAAgB,EACjC,QAAQ,EAAE,SAAS,EACnB,gBAAgB,GACD,KAAoB;AACnC,IAAA,MAAM,OAAO,GAAG,gBAAgB,EAAe;AAE/C,IAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,QAAQ;IACzE,MAAM,eAAe,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC;IAC3D,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC;IAC7C,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,QAAQ,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;IAEtD,MAAM,CAAC,QAAQ,EAAE,WAAW,EAAE,cAAc,CAAC,GAAG,eAAe,CAAC;AAC9D,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,YAAY,EAAE,eAAe;AAC7B,QAAA,QAAQ,EAAE,gBAAgB;AAC3B,KAAA,CAAC;AAEF,IAAA,eAAe,CAAC;AACd,QAAA,KAAK,EAAE,IAAI;AACX,QAAA,KAAK,EAAE,IAAI;AACX,QAAA,YAAY,EAAE,IAAI;QAClB,QAAQ;AACT,KAAA,CAAC;;IAGF,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,CAAC;AAChE,IAAA,WAAW,CAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,CAAC;AAC9C,IAAA,WAAW,CAAC,OAAO,EAAE,eAAe,EAAE,QAAQ,CAAC;AAC/C,IAAA,WAAW,CAAC,OAAO,EAAE,eAAe,EAAE,QAAQ,CAAC;AAC/C,IAAA,WAAW,CAAC,OAAO,EAAE,eAAe,EAAE,QAAQ,CAAC;AAC/C,IAAA,WAAW,CAAC,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC;;AAG7D,IAAA,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;IAClD,QAAQ,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,KAAoB,KAAI;AACpD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,EAAE;YACjD,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,aAAa,CAAC,OAAO,KAAK,GAAG,EAAE;gBACtD,KAAK,CAAC,cAAc,EAAE;gBACtB,MAAM,CAAC,KAAK,CAAC;YACf;QACF;AACF,IAAA,CAAC,CAAC;IAEF,SAAS,MAAM,CAAC,KAAa,EAAA;QAC3B,IAAI,QAAQ,EAAE,EAAE;YACd;QACF;AAEA,QAAA,KAAK,EAAE,cAAc,IAAI;AACzB,QAAA,WAAW,CAAC,CAAC,QAAQ,EAAE,CAAC;IAC1B;IAEA,SAAS,WAAW,CAAC,KAAc,EAAA;AACjC,QAAA,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;IACrB;IAEA,OAAO;QACL,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,EAAE,aAAa,EAAE,WAAW,CAAC;QAChE,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,EAAE,aAAa,EAAE,WAAW,CAAC;QAChE,cAAc;QACd,MAAM;QACN,WAAW;QACX,kBAAkB,EAAE,eAAe,CAAC,GAAG;QACvC,WAAW;KACa;AAC5B,CAAC;;ACxIL;;AAEG;MAMU,SAAS,CAAA;AALtB,IAAA,WAAA,GAAA;AAME;;AAEG;AACM,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAoC,SAAS,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EACpE,KAAK,EAAE,mBAAmB;gBAC1B,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAF2C;AACtE,gBAAA,KAAK,EAAE,mBAAmB;AAC1B,gBAAA,SAAS,EAAE,gBAAgB;AAC5B,aAAA,CAAA,CAAA,CAAC;AAEF;;;AAGG;AACM,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAwB,KAAK,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,iBAAA,EAC3D,KAAK,EAAE,0BAA0B;gBACjC,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAFkC;AAC7D,gBAAA,KAAK,EAAE,0BAA0B;AACjC,gBAAA,SAAS,EAAE,gBAAgB;AAC5B,aAAA,CAAA,CAAA,CAAC;AAEF;;AAEG;QACM,IAAA,CAAA,cAAc,GAAG,MAAM,CAAU;AACxC,YAAA,KAAK,EAAE,yBAAyB;AACjC,SAAA,CAAC;AAEF;;;AAGG;AACM,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAwB,KAAK,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EACpD,KAAK,EAAE,mBAAmB;gBAC1B,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAF2B;AACtD,gBAAA,KAAK,EAAE,mBAAmB;AAC1B,gBAAA,SAAS,EAAE,gBAAgB;AAC5B,aAAA,CAAA,CAAA,CAAC;AAEF;;;AAGG;QACgB,IAAA,CAAA,KAAK,GAAG,SAAS,CAAC;YACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,gBAAgB,EAAE,KAAK,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;AAC3D,SAAA,CAAC;AA6BH,IAAA;AA3BC;;AAEG;IACH,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;IACrB;AAEA;;AAEG;IACH,WAAW,CAAC,KAAc,EAAE,OAAuB,EAAA;QACjD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;IACxC;AAEA;;AAEG;AACH,IAAA,kBAAkB,CAAC,KAAc,EAAA;AAC/B,QAAA,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC;IACtC;AAEA;;AAEG;AACH,IAAA,WAAW,CAAC,KAAc,EAAA;AACxB,QAAA,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;IAC/B;8GAvEW,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,0BAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,yBAAA,EAAA,EAAA,SAAA,EAFT,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAExC,SAAS,EAAA,UAAA,EAAA,CAAA;kBALrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,QAAQ,EAAE,WAAW;oBACrB,SAAS,EAAE,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;AACpD,iBAAA;;;ACZD;;AAEG;;;;"}

package/menu/index.d.ts

@@ -541,6 +541,26 @@ interface NgpMenuTriggerProps<T = unknown> {
      */
     readonly hideDelay?: Signal<number>;
 }
+declare const NgpMenuTriggerStateToken: _angular_core.InjectionToken<WritableSignal<{
+    menu: WritableSignal<NgpOverlayContent<unknown> | undefined>;
+    placement: WritableSignal<NgpMenuPlacement>;
+    offset: WritableSignal<NgpOffset>;
+    disabled: WritableSignal<boolean>;
+    context: WritableSignal<unknown>;
+    open: Signal<boolean>;
+    openOrigin: WritableSignal<FocusOrigin>;
+    show: (origin?: FocusOrigin) => void;
+    hide: (origin?: FocusOrigin) => void;
+    toggle: (event: MouseEvent) => void;
+    setDisabled: (isDisabled: boolean) => void;
+    setMenu: (newMenu: NgpOverlayContent<unknown> | undefined) => void;
+    setFlip: (shouldFlip: NgpFlip) => void;
+    setPlacement: (newPlacement: NgpMenuPlacement) => void;
+    setOffset: (newOffset: NgpOffset) => void;
+    setContext: (newContext: unknown) => void;
+    setPointerOverContent: (isOver: boolean) => void;
+    flip: WritableSignal<NgpFlip>;
+}>>;
 declare const ngpMenuTrigger: <T>({ disabled: _disabled, menu: _menu, placement: _placement, offset: _offset, flip: _flip, context: _context, container, scrollBehavior, cooldown, triggers, showDelay, hideDelay, }: NgpMenuTriggerProps<T>) => {
     menu: WritableSignal<NgpOverlayContent<T> | undefined>;
     placement: WritableSignal<NgpMenuPlacement>;
@@ -790,6 +810,25 @@ interface NgpSubmenuTriggerProps<T = unknown> {
      */
     readonly flip?: Signal<NgpFlip>;
 }
+declare const NgpSubmenuTriggerStateToken: _angular_core.InjectionToken<WritableSignal<{
+    placement: WritableSignal<NgpMenuPlacement>;
+    offset: WritableSignal<NgpOffset>;
+    disabled: WritableSignal<boolean>;
+    menu: WritableSignal<NgpOverlayContent<unknown> | undefined>;
+    flip: WritableSignal<NgpFlip>;
+    open: Signal<boolean>;
+    openOrigin: WritableSignal<FocusOrigin>;
+    show: (origin?: FocusOrigin) => void;
+    hide: (origin?: FocusOrigin) => void;
+    toggle: (event: MouseEvent) => void;
+    setDisabled: (isDisabled: boolean) => void;
+    setMenu: (newMenu: NgpOverlayContent<unknown> | undefined) => void;
+    setFlip: (shouldFlip: NgpFlip) => void;
+    setPlacement: (newPlacement: NgpMenuPlacement) => void;
+    setOffset: (newOffset: NgpOffset) => void;
+    focus: (origin: FocusOrigin) => void;
+    setPointerOverContent: (_isOver: boolean) => void;
+}>>;
 declare const ngpSubmenuTrigger: <T>({ disabled: _disabled, menu: _menu, placement: _placement, offset: _offset, flip: _flip, }: NgpSubmenuTriggerProps<T>) => {
     placement: WritableSignal<NgpMenuPlacement>;
     offset: WritableSignal<NgpOffset>;
@@ -898,5 +937,5 @@ declare const provideSubmenuTriggerState: (opts?: {
     inherit?: boolean;
 }) => _angular_core.FactoryProvider;
 
-export { NgpMenu, NgpMenuItem, NgpMenuItemCheckbox, NgpMenuItemIndicator, NgpMenuItemRadio, NgpMenuItemRadioGroup, NgpMenuTrigger, NgpSubmenuTrigger, injectMenuItemCheckboxState, injectMenuItemRadioGroupState, injectMenuItemRadioState, injectMenuItemState, injectMenuState, injectMenuTriggerState, injectSubmenuTriggerState, ngpMenu, ngpMenuItem, ngpMenuItemCheckbox, ngpMenuItemRadio, ngpMenuItemRadioGroup, ngpMenuTrigger, ngpSubmenuTrigger, provideMenuConfig, provideMenuItemCheckboxState, provideMenuItemRadioGroupState, provideMenuItemRadioState, provideMenuItemState, provideMenuState, provideMenuTriggerState, provideSubmenuTriggerState };
+export { NgpMenu, NgpMenuItem, NgpMenuItemCheckbox, NgpMenuItemIndicator, NgpMenuItemRadio, NgpMenuItemRadioGroup, NgpMenuTrigger, NgpMenuTriggerStateToken, NgpSubmenuTrigger, NgpSubmenuTriggerStateToken, injectMenuItemCheckboxState, injectMenuItemRadioGroupState, injectMenuItemRadioState, injectMenuItemState, injectMenuState, injectMenuTriggerState, injectSubmenuTriggerState, ngpMenu, ngpMenuItem, ngpMenuItemCheckbox, ngpMenuItemRadio, ngpMenuItemRadioGroup, ngpMenuTrigger, ngpSubmenuTrigger, provideMenuConfig, provideMenuItemCheckboxState, provideMenuItemRadioGroupState, provideMenuItemRadioState, provideMenuItemState, provideMenuState, provideMenuTriggerState, provideSubmenuTriggerState };
 export type { NgpMenuConfig, NgpMenuItemCheckboxProps, NgpMenuItemCheckboxState, NgpMenuItemProps, NgpMenuItemRadioGroupProps, NgpMenuItemRadioGroupState, NgpMenuItemRadioProps, NgpMenuItemRadioState, NgpMenuItemState, NgpMenuPlacement, NgpMenuProps, NgpMenuState, NgpMenuTriggerProps, NgpMenuTriggerState, NgpSubmenuTriggerProps, NgpSubmenuTriggerState };

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.2",
+  "version": "0.117.0",
   "keywords": [
     "angular",
     "primitives",
@@ -104,6 +104,10 @@
       "types": "./common/index.d.ts",
       "default": "./fesm2022/ng-primitives-common.mjs"
     },
+    "./context-menu": {
+      "types": "./context-menu/index.d.ts",
+      "default": "./fesm2022/ng-primitives-context-menu.mjs"
+    },
     "./date-picker": {
       "types": "./date-picker/index.d.ts",
       "default": "./fesm2022/ng-primitives-date-picker.mjs"

package/portal/index.d.ts

@@ -248,6 +248,11 @@ interface NgpOverlayConfig<T = unknown> {
      * Use with trackPosition for smooth cursor following.
      */
     position?: Signal<NgpPosition | null>;
+    /**
+     * If true, clicks on the trigger element count as outside clicks for dismiss purposes.
+     * Useful for context menus where the trigger area is large and clicks on it should dismiss the menu.
+     */
+    treatTriggerClickAsOutside?: boolean;
     /**
      * Overlay type identifier for cooldown grouping.
      * When set, overlays of the same type share a cooldown period.
@@ -544,6 +549,8 @@ interface NgpOverlayEntry {
     anchorElement?: HTMLElement | null;
     /** Per-instance dismiss configuration */
     dismissPolicy: NgpDismissPolicy;
+    /** If true, clicks on the trigger element are treated as outside clicks */
+    treatTriggerClickAsOutside?: boolean;
     /** Optional subject that receives pointer events that occur outside the overlay */
     outsidePointerEvents$?: Subject<MouseEvent>;
 }

package/schematics/ng-generate/templates/context-menu/context-menu-item.__fileSuffix@dasherize__.ts.template

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { NgpContextMenuItem } from 'ng-primitives/context-menu';
+
+@Component({
+  selector: 'button[<%= prefix %>-context-menu-item]',
+  hostDirectives: [NgpContextMenuItem],
+  host: { type: 'button' },
+  template: `
+    <ng-content />
+  `,
+  styles: `
+/* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
+
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 6px 8px 6px 14px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      border-radius: 4px;
+      min-width: 120px;
+      text-align: start;
+      outline: none;
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    :host[data-hover] {
+      background-color: var(--ngp-background-active);
+    }
+
+    :host[data-focus-visible] {
+      outline: 2px solid var(--ngp-focus-ring);
+      z-index: 1;
+    }
+  `,
+})
+export class ContextMenuItem<%= componentSuffix %> {}

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

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { NgpContextMenu } from 'ng-primitives/context-menu';
+
+@Component({
+  selector: '<%= prefix %>-context-menu',
+  hostDirectives: [NgpContextMenu],
+  template: `
+    <ng-content />
+  `,
+  styles: `
+/* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
+
+    :host {
+      position: fixed;
+      display: flex;
+      flex-direction: column;
+      width: max-content;
+      background: var(--ngp-background);
+      border: 1px solid var(--ngp-border);
+      box-shadow: var(--ngp-shadow);
+      border-radius: 8px;
+      padding: 4px;
+      transform-origin: var(--ngp-menu-transform-origin);
+      animation: menu-show 300ms ease-out;
+    }
+
+    :host[data-exit] {
+      animation: menu-hide 300ms ease-out;
+    }
+
+    @keyframes menu-show {
+      0% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    @keyframes menu-hide {
+      0% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      100% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+    }
+  `,
+})
+export class ContextMenu<%= componentSuffix %> {}

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 };