ng-primitives 0.117.2 → 0.119.0

package/fesm2022/ng-primitives-checkbox.mjs

@@ -4,14 +4,18 @@ import { uniqueId } from 'ng-primitives/utils';
 import { ngpFormControl } from 'ng-primitives/form-field';
 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, emitter, attrBinding, dataBinding, listener, deprecatedSetter } from 'ng-primitives/state';
 
-const [NgpCheckboxStateToken, ngpCheckbox, injectCheckboxState, provideCheckboxState] = createPrimitive('NgpCheckbox', ({ id = signal(uniqueId('ngp-checkbox')), checked: _checked = signal(false), indeterminate: _indeterminate = signal(false), disabled: _disabled = signal(false), onCheckedChange, onIndeterminateChange, }) => {
+const [NgpCheckboxStateToken, ngpCheckbox, injectCheckboxState, provideCheckboxState] = createPrimitive('NgpCheckbox', ({ id = signal(uniqueId('ngp-checkbox')), checked: _checked = signal(undefined), defaultChecked: _defaultChecked, indeterminate: _indeterminate = signal(false), disabled: _disabled = signal(false), onCheckedChange, onIndeterminateChange, }) => {
     const element = injectElementRef();
-    const checked = controlled(_checked);
+    const defaultChecked = controlled(_defaultChecked, false);
+    const [checked, setChecked, checkedChange] = controlledState({
+        value: _checked,
+        defaultValue: defaultChecked,
+        onChange: onCheckedChange,
+    });
     const indeterminate = controlled(_indeterminate);
     const disabled = controlled(_disabled);
-    const checkedChange = emitter();
     const indeterminateChange = emitter();
     const tabindex = computed(() => (disabled() ? -1 : 0), ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
     // Setup interactions and form control hooks
@@ -49,11 +53,6 @@ const [NgpCheckboxStateToken, ngpCheckbox, injectCheckboxState, provideCheckboxS
             setIndeterminate(false);
         }
     }
-    function setChecked(value) {
-        checked.set(value);
-        onCheckedChange?.(value);
-        checkedChange.emit(value);
-    }
     function setIndeterminate(value) {
         indeterminate.set(value);
         onIndeterminateChange?.(value);
@@ -64,13 +63,14 @@ const [NgpCheckboxStateToken, ngpCheckbox, injectCheckboxState, provideCheckboxS
     }
     return {
         id,
-        checked: deprecatedSetter(checked, 'setChecked'),
+        checked: deprecatedSetter(checked, 'setChecked', setChecked),
         indeterminate: deprecatedSetter(indeterminate, 'setIndeterminate'),
         disabled: deprecatedSetter(disabled, 'setDisabled'),
-        checkedChange: checkedChange.asObservable(),
+        checkedChange,
         indeterminateChange: indeterminateChange.asObservable(),
         toggle,
         setChecked,
+        setDefaultChecked: defaultChecked.set,
         setIndeterminate,
         setDisabled,
     };
@@ -89,11 +89,20 @@ class NgpCheckbox {
         /**
          * Defines whether the checkbox is checked.
          */
-        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked", alias: 'ngpCheckboxChecked',
+        this.checked = input(undefined, ...(ngDevMode ? [{ debugName: "checked", alias: 'ngpCheckboxChecked',
                 transform: booleanAttribute }] : [{
                 alias: 'ngpCheckboxChecked',
                 transform: booleanAttribute,
             }]));
+        /**
+         * The default checked state for uncontrolled usage.
+         * @default false
+         */
+        this.defaultChecked = input(false, ...(ngDevMode ? [{ debugName: "defaultChecked", alias: 'ngpCheckboxDefaultChecked',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpCheckboxDefaultChecked',
+                transform: booleanAttribute,
+            }]));
         /**
          * The event that is emitted when the checkbox value changes.
          */
@@ -136,6 +145,7 @@ class NgpCheckbox {
         this.state = ngpCheckbox({
             id: this.id,
             checked: this.checked,
+            defaultChecked: this.defaultChecked,
             indeterminate: this.indeterminate,
             disabled: this.disabled,
             onCheckedChange: value => this.checkedChange.emit(value),
@@ -148,8 +158,14 @@ class NgpCheckbox {
     /**
      * Update the checked value.
      */
-    setChecked(value) {
-        this.state.setChecked(value);
+    setChecked(value, options) {
+        this.state.setChecked(value, options);
+    }
+    /**
+     * Set the default checked state.
+     */
+    setDefaultChecked(value) {
+        this.state.setDefaultChecked(value);
     }
     /**
      * Update the indeterminate value.
@@ -164,7 +180,7 @@ class NgpCheckbox {
         this.state.setDisabled(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpCheckbox, isStandalone: true, selector: "[ngpCheckbox]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "ngpCheckboxChecked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "ngpCheckboxIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "ngpCheckboxRequired", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpCheckboxDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "ngpCheckboxCheckedChange", indeterminateChange: "ngpCheckboxIndeterminateChange" }, providers: [provideCheckboxState({ inherit: false })], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpCheckbox, isStandalone: true, selector: "[ngpCheckbox]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "ngpCheckboxChecked", isSignal: true, isRequired: false, transformFunction: null }, defaultChecked: { classPropertyName: "defaultChecked", publicName: "ngpCheckboxDefaultChecked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "ngpCheckboxIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "ngpCheckboxRequired", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpCheckboxDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "ngpCheckboxCheckedChange", indeterminateChange: "ngpCheckboxIndeterminateChange" }, providers: [provideCheckboxState({ inherit: false })], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpCheckbox, decorators: [{
             type: Directive,
@@ -172,7 +188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                     selector: '[ngpCheckbox]',
                     providers: [provideCheckboxState({ inherit: false })],
                 }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpCheckboxChecked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["ngpCheckboxCheckedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpCheckboxIndeterminate", required: false }] }], indeterminateChange: [{ type: i0.Output, args: ["ngpCheckboxIndeterminateChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpCheckboxRequired", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpCheckboxDisabled", required: false }] }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpCheckboxChecked", required: false }] }], defaultChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpCheckboxDefaultChecked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["ngpCheckboxCheckedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpCheckboxIndeterminate", required: false }] }], indeterminateChange: [{ type: i0.Output, args: ["ngpCheckboxIndeterminateChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpCheckboxRequired", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpCheckboxDisabled", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-checkbox.mjs","sources":["../../../../packages/ng-primitives/checkbox/src/checkbox/checkbox-state.ts","../../../../packages/ng-primitives/checkbox/src/checkbox/checkbox.ts","../../../../packages/ng-primitives/checkbox/src/ng-primitives-checkbox.ts"],"sourcesContent":["import { computed, Signal, signal, WritableSignal } from '@angular/core';\nimport { ngpFormControl } from 'ng-primitives/form-field';\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 { uniqueId } from 'ng-primitives/utils';\nimport { Observable } from 'rxjs';\n\n/**\n * Public state surface for the Checkbox primitive.\n */\nexport interface NgpCheckboxState {\n  /**\n   * The id of the checkbox.\n   */\n  readonly id: Signal<string>;\n  /**\n   * Whether the checkbox is checked.\n   */\n  readonly checked: WritableSignal<boolean>;\n  /**\n   * Whether the checkbox is indeterminate.\n   */\n  readonly indeterminate: WritableSignal<boolean>;\n  /**\n   * Whether the checkbox is disabled.\n   */\n  readonly disabled: WritableSignal<boolean>;\n  /**\n   * Emits when the checked state changes.\n   */\n  readonly checkedChange: Observable<boolean>;\n  /**\n   * Emits when the indeterminate state changes.\n   */\n  readonly indeterminateChange: Observable<boolean>;\n  /**\n   * Toggle the checkbox value.\n   */\n  toggle(event?: Event): void;\n  /**\n   * Update the checked value.\n   */\n  setChecked(value: boolean): void;\n  /**\n   * Update the indeterminate value.\n   */\n  setIndeterminate(value: boolean): void;\n  /**\n   * Set the disabled value.\n   */\n  setDisabled(value: boolean): void;\n}\n\n/**\n * Inputs for configuring the Checkbox primitive.\n */\nexport interface NgpCheckboxProps {\n  /**\n   * The id of the checkbox.\n   */\n  readonly id?: Signal<string>;\n  /**\n   * Whether the checkbox is checked.\n   */\n  readonly checked?: Signal<boolean>;\n  /**\n   * Whether the checkbox is indeterminate.\n   */\n  readonly indeterminate?: Signal<boolean>;\n  /**\n   * Whether the checkbox is disabled.\n   */\n  readonly disabled?: Signal<boolean>;\n  /**\n   * Callback fired when the checked state changes.\n   */\n  readonly onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Callback fired when the indeterminate state changes.\n   */\n  readonly onIndeterminateChange?: (indeterminate: boolean) => void;\n}\n\nexport const [NgpCheckboxStateToken, ngpCheckbox, injectCheckboxState, provideCheckboxState] =\n  createPrimitive(\n    'NgpCheckbox',\n    ({\n      id = signal(uniqueId('ngp-checkbox')),\n      checked: _checked = signal(false),\n      indeterminate: _indeterminate = signal(false),\n      disabled: _disabled = signal(false),\n      onCheckedChange,\n      onIndeterminateChange,\n    }: NgpCheckboxProps): NgpCheckboxState => {\n      const element = injectElementRef();\n      const checked = controlled(_checked);\n      const indeterminate = controlled(_indeterminate);\n      const disabled = controlled(_disabled);\n      const checkedChange = emitter<boolean>();\n      const indeterminateChange = emitter<boolean>();\n      const tabindex = computed(() => (disabled() ? -1 : 0));\n\n      // Setup interactions and form control hooks\n      ngpInteractions({ hover: true, press: true, focusVisible: true, disabled });\n      ngpFormControl({ id, disabled });\n\n      // Host bindings\n      attrBinding(element, 'role', 'checkbox');\n      attrBinding(element, 'aria-checked', () => (indeterminate() ? 'mixed' : checked()));\n      dataBinding(element, 'data-checked', checked);\n      dataBinding(element, 'data-indeterminate', indeterminate);\n      attrBinding(element, 'aria-disabled', disabled);\n      attrBinding(element, 'tabindex', () => tabindex().toString());\n\n      // Event listeners\n      listener(element, 'click', event => toggle(event));\n      listener(element, 'keydown', (event: KeyboardEvent) => {\n        if (event.key === 'Enter') {\n          // According to WAI ARIA, checkboxes don't activate on enter keypress\n          event.preventDefault();\n          return;\n        }\n\n        if (event.key === ' ' || event.key === 'Spacebar') {\n          toggle(event);\n        }\n      });\n\n      function toggle(event?: Event): void {\n        if (disabled()) {\n          return;\n        }\n\n        // prevent this firing twice in cases where the label is clicked and the checkbox is clicked by the one event\n        event?.preventDefault();\n\n        const nextChecked = indeterminate() ? true : !checked();\n        setChecked(nextChecked);\n\n        // if the checkbox was indeterminate, it isn't anymore\n        if (indeterminate()) {\n          setIndeterminate(false);\n        }\n      }\n\n      function setChecked(value: boolean): void {\n        checked.set(value);\n        onCheckedChange?.(value);\n        checkedChange.emit(value);\n      }\n\n      function setIndeterminate(value: boolean): void {\n        indeterminate.set(value);\n        onIndeterminateChange?.(value);\n        indeterminateChange.emit(value);\n      }\n\n      function setDisabled(value: boolean): void {\n        disabled.set(value);\n      }\n\n      return {\n        id,\n        checked: deprecatedSetter(checked, 'setChecked'),\n        indeterminate: deprecatedSetter(indeterminate, 'setIndeterminate'),\n        disabled: deprecatedSetter(disabled, 'setDisabled'),\n        checkedChange: checkedChange.asObservable(),\n        indeterminateChange: indeterminateChange.asObservable(),\n        toggle,\n        setChecked,\n        setIndeterminate,\n        setDisabled,\n      } satisfies NgpCheckboxState;\n    },\n  );\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { Directive, booleanAttribute, input, output } from '@angular/core';\nimport { uniqueId } from 'ng-primitives/utils';\nimport { ngpCheckbox, provideCheckboxState } from './checkbox-state';\n\n/**\n * Apply the `ngpCheckbox` directive to an element to that represents the checkbox, such as a `button`.\n */\n@Directive({\n  selector: '[ngpCheckbox]',\n  providers: [provideCheckboxState({ inherit: false })],\n})\nexport class NgpCheckbox {\n  /**\n   * The id of the checkbox.\n   * @internal\n   */\n  readonly id = input(uniqueId('ngp-checkbox'));\n\n  /**\n   * Defines whether the checkbox is checked.\n   */\n  readonly checked = input<boolean, BooleanInput>(false, {\n    alias: 'ngpCheckboxChecked',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The event that is emitted when the checkbox value changes.\n   */\n  readonly checkedChange = output<boolean>({\n    alias: 'ngpCheckboxCheckedChange',\n  });\n\n  /**\n   * Defines whether the checkbox is indeterminate.\n   */\n  readonly indeterminate = input<boolean, BooleanInput>(false, {\n    alias: 'ngpCheckboxIndeterminate',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The event that is emitted when the indeterminate value changes.\n   */\n  readonly indeterminateChange = output<boolean>({\n    alias: 'ngpCheckboxIndeterminateChange',\n  });\n\n  /**\n   * Whether the checkbox is required.\n   */\n  readonly required = input<boolean, BooleanInput>(false, {\n    alias: 'ngpCheckboxRequired',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Defines whether the checkbox is disabled.\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    alias: 'ngpCheckboxDisabled',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The state of the checkbox.\n   */\n  protected readonly state = ngpCheckbox({\n    id: this.id,\n    checked: this.checked,\n    indeterminate: this.indeterminate,\n    disabled: this.disabled,\n    onCheckedChange: value => this.checkedChange.emit(value),\n    onIndeterminateChange: value => this.indeterminateChange.emit(value),\n  });\n\n  toggle(event?: Event): void {\n    this.state.toggle(event);\n  }\n\n  /**\n   * Update the checked value.\n   */\n  setChecked(value: boolean): void {\n    this.state.setChecked(value);\n  }\n\n  /**\n   * Update the indeterminate value.\n   */\n  setIndeterminate(value: boolean): void {\n    this.state.setIndeterminate(value);\n  }\n\n  /**\n   * Set the disabled value.\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-checkbox.mjs","sources":["../../../../packages/ng-primitives/checkbox/src/checkbox/checkbox-state.ts","../../../../packages/ng-primitives/checkbox/src/checkbox/checkbox.ts","../../../../packages/ng-primitives/checkbox/src/ng-primitives-checkbox.ts"],"sourcesContent":["import { computed, Signal, signal, WritableSignal } from '@angular/core';\nimport { ngpFormControl } from 'ng-primitives/form-field';\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  emitter,\n  listener,\n  SetterOptions,\n} from 'ng-primitives/state';\nimport { uniqueId } from 'ng-primitives/utils';\nimport { Observable } from 'rxjs';\n\n/**\n * Public state surface for the Checkbox primitive.\n */\nexport interface NgpCheckboxState {\n  /**\n   * The id of the checkbox.\n   */\n  readonly id: Signal<string>;\n  /**\n   * Whether the checkbox is checked.\n   */\n  readonly checked: WritableSignal<boolean>;\n  /**\n   * Whether the checkbox is indeterminate.\n   */\n  readonly indeterminate: WritableSignal<boolean>;\n  /**\n   * Whether the checkbox is disabled.\n   */\n  readonly disabled: WritableSignal<boolean>;\n  /**\n   * Emits when the checked state changes.\n   */\n  readonly checkedChange: Observable<boolean>;\n  /**\n   * Emits when the indeterminate state changes.\n   */\n  readonly indeterminateChange: Observable<boolean>;\n  /**\n   * Toggle the checkbox value.\n   */\n  toggle(event?: Event): void;\n  /**\n   * Update the checked value.\n   */\n  setChecked(value: boolean, options?: SetterOptions): void;\n  /**\n   * Set the default checked state.\n   */\n  setDefaultChecked(value: boolean): void;\n  /**\n   * Update the indeterminate value.\n   */\n  setIndeterminate(value: boolean): void;\n  /**\n   * Set the disabled value.\n   */\n  setDisabled(value: boolean): void;\n}\n\n/**\n * Inputs for configuring the Checkbox primitive.\n */\nexport interface NgpCheckboxProps {\n  /**\n   * The id of the checkbox.\n   */\n  readonly id?: Signal<string>;\n  /**\n   * Whether the checkbox is checked.\n   */\n  readonly checked?: Signal<boolean | undefined>;\n  /**\n   * The default checked state for uncontrolled usage.\n   */\n  readonly defaultChecked?: Signal<boolean>;\n  /**\n   * Whether the checkbox is indeterminate.\n   */\n  readonly indeterminate?: Signal<boolean>;\n  /**\n   * Whether the checkbox is disabled.\n   */\n  readonly disabled?: Signal<boolean>;\n  /**\n   * Callback fired when the checked state changes.\n   */\n  readonly onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Callback fired when the indeterminate state changes.\n   */\n  readonly onIndeterminateChange?: (indeterminate: boolean) => void;\n}\n\nexport const [NgpCheckboxStateToken, ngpCheckbox, injectCheckboxState, provideCheckboxState] =\n  createPrimitive(\n    'NgpCheckbox',\n    ({\n      id = signal(uniqueId('ngp-checkbox')),\n      checked: _checked = signal<boolean | undefined>(undefined),\n      defaultChecked: _defaultChecked,\n      indeterminate: _indeterminate = signal(false),\n      disabled: _disabled = signal(false),\n      onCheckedChange,\n      onIndeterminateChange,\n    }: NgpCheckboxProps): NgpCheckboxState => {\n      const element = injectElementRef();\n      const defaultChecked = controlled(_defaultChecked, false);\n      const [checked, setChecked, checkedChange] = controlledState({\n        value: _checked,\n        defaultValue: defaultChecked,\n        onChange: onCheckedChange,\n      });\n      const indeterminate = controlled(_indeterminate);\n      const disabled = controlled(_disabled);\n      const indeterminateChange = emitter<boolean>();\n      const tabindex = computed(() => (disabled() ? -1 : 0));\n\n      // Setup interactions and form control hooks\n      ngpInteractions({ hover: true, press: true, focusVisible: true, disabled });\n      ngpFormControl({ id, disabled });\n\n      // Host bindings\n      attrBinding(element, 'role', 'checkbox');\n      attrBinding(element, 'aria-checked', () => (indeterminate() ? 'mixed' : checked()));\n      dataBinding(element, 'data-checked', checked);\n      dataBinding(element, 'data-indeterminate', indeterminate);\n      attrBinding(element, 'aria-disabled', disabled);\n      attrBinding(element, 'tabindex', () => tabindex().toString());\n\n      // Event listeners\n      listener(element, 'click', event => toggle(event));\n      listener(element, 'keydown', (event: KeyboardEvent) => {\n        if (event.key === 'Enter') {\n          // According to WAI ARIA, checkboxes don't activate on enter keypress\n          event.preventDefault();\n          return;\n        }\n\n        if (event.key === ' ' || event.key === 'Spacebar') {\n          toggle(event);\n        }\n      });\n\n      function toggle(event?: Event): void {\n        if (disabled()) {\n          return;\n        }\n\n        // prevent this firing twice in cases where the label is clicked and the checkbox is clicked by the one event\n        event?.preventDefault();\n\n        const nextChecked = indeterminate() ? true : !checked();\n        setChecked(nextChecked);\n\n        // if the checkbox was indeterminate, it isn't anymore\n        if (indeterminate()) {\n          setIndeterminate(false);\n        }\n      }\n\n      function setIndeterminate(value: boolean): void {\n        indeterminate.set(value);\n        onIndeterminateChange?.(value);\n        indeterminateChange.emit(value);\n      }\n\n      function setDisabled(value: boolean): void {\n        disabled.set(value);\n      }\n\n      return {\n        id,\n        checked: deprecatedSetter(checked, 'setChecked', setChecked),\n        indeterminate: deprecatedSetter(indeterminate, 'setIndeterminate'),\n        disabled: deprecatedSetter(disabled, 'setDisabled'),\n        checkedChange,\n        indeterminateChange: indeterminateChange.asObservable(),\n        toggle,\n        setChecked,\n        setDefaultChecked: defaultChecked.set,\n        setIndeterminate,\n        setDisabled,\n      } satisfies NgpCheckboxState;\n    },\n  );\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { Directive, booleanAttribute, input, output } from '@angular/core';\nimport { SetterOptions } from 'ng-primitives/state';\nimport { uniqueId } from 'ng-primitives/utils';\nimport { ngpCheckbox, provideCheckboxState } from './checkbox-state';\n\n/**\n * Apply the `ngpCheckbox` directive to an element to that represents the checkbox, such as a `button`.\n */\n@Directive({\n  selector: '[ngpCheckbox]',\n  providers: [provideCheckboxState({ inherit: false })],\n})\nexport class NgpCheckbox {\n  /**\n   * The id of the checkbox.\n   * @internal\n   */\n  readonly id = input(uniqueId('ngp-checkbox'));\n\n  /**\n   * Defines whether the checkbox is checked.\n   */\n  readonly checked = input<boolean | undefined, BooleanInput>(undefined, {\n    alias: 'ngpCheckboxChecked',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The default checked state for uncontrolled usage.\n   * @default false\n   */\n  readonly defaultChecked = input<boolean, BooleanInput>(false, {\n    alias: 'ngpCheckboxDefaultChecked',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The event that is emitted when the checkbox value changes.\n   */\n  readonly checkedChange = output<boolean>({\n    alias: 'ngpCheckboxCheckedChange',\n  });\n\n  /**\n   * Defines whether the checkbox is indeterminate.\n   */\n  readonly indeterminate = input<boolean, BooleanInput>(false, {\n    alias: 'ngpCheckboxIndeterminate',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The event that is emitted when the indeterminate value changes.\n   */\n  readonly indeterminateChange = output<boolean>({\n    alias: 'ngpCheckboxIndeterminateChange',\n  });\n\n  /**\n   * Whether the checkbox is required.\n   */\n  readonly required = input<boolean, BooleanInput>(false, {\n    alias: 'ngpCheckboxRequired',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Defines whether the checkbox is disabled.\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    alias: 'ngpCheckboxDisabled',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The state of the checkbox.\n   */\n  protected readonly state = ngpCheckbox({\n    id: this.id,\n    checked: this.checked,\n    defaultChecked: this.defaultChecked,\n    indeterminate: this.indeterminate,\n    disabled: this.disabled,\n    onCheckedChange: value => this.checkedChange.emit(value),\n    onIndeterminateChange: value => this.indeterminateChange.emit(value),\n  });\n\n  toggle(event?: Event): void {\n    this.state.toggle(event);\n  }\n\n  /**\n   * Update the checked value.\n   */\n  setChecked(value: boolean, options?: SetterOptions): void {\n    this.state.setChecked(value, options);\n  }\n\n  /**\n   * Set the default checked state.\n   */\n  setDefaultChecked(value: boolean): void {\n    this.state.setDefaultChecked(value);\n  }\n\n  /**\n   * Update the indeterminate value.\n   */\n  setIndeterminate(value: boolean): void {\n    this.state.setIndeterminate(value);\n  }\n\n  /**\n   * Set the disabled value.\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/fesm2022/ng-primitives-combobox.mjs

@@ -5,7 +5,7 @@ import { injectElementRef, observeResize, scrollIntoViewIfNeeded, domSort } from
 import { uniqueId } from 'ng-primitives/utils';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 import { ngpFormControl } from 'ng-primitives/form-field';
-import { createOverlay, coerceFlip } from 'ng-primitives/portal';
+import { createOverlay, coerceFlip, coerceOffset } from 'ng-primitives/portal';
 import { activeDescendantManager } from 'ng-primitives/a11y';
 
 /**
@@ -511,12 +511,14 @@ class NgpComboboxPortal {
             triggerElement: this.state().elementRef.nativeElement,
             injector: this.injector,
             placement: this.state().placement,
+            offset: this.state().offset(),
             flip: this.state().flip(),
             closeOnOutsideClick: true,
             closeOnEscape: true,
             restoreFocus: false,
             scrollBehaviour: 'reposition',
             container: this.state().container(),
+            onClose: () => this.state().onOverlayClosed(),
         };
         this.overlay.set(createOverlay(config));
     }
@@ -535,6 +537,7 @@ const defaultComboboxConfig = {
     placement: 'bottom',
     container: 'body',
     flip: true,
+    offset: 0,
 };
 const NgpComboboxConfigToken = new InjectionToken('NgpComboboxConfigToken');
 /**
@@ -614,6 +617,16 @@ class NgpCombobox {
                 alias: 'ngpComboboxDropdownFlip',
                 transform: coerceFlip,
             }]));
+        /**
+         * Define the offset of the combobox dropdown relative to the trigger.
+         * Can be a number (applies to mainAxis) or an object with mainAxis, crossAxis, and alignmentAxis.
+         * @default 0
+         */
+        this.offset = input(this.config.offset, ...(ngDevMode ? [{ debugName: "offset", alias: 'ngpComboboxDropdownOffset',
+                transform: coerceOffset }] : [{
+                alias: 'ngpComboboxDropdownOffset',
+                transform: coerceOffset,
+            }]));
         /**
          * A function that will scroll the active option into view. This can be overridden
          * for cases such as virtual scrolling where we cannot scroll the option directly because
@@ -740,8 +753,15 @@ class NgpCombobox {
         if (!this.open()) {
             return;
         }
-        this.openChange.emit(false);
         this.portal()?.detach();
+    }
+    /**
+     * Handles the dropdown being closed.
+     * Emits the openChange event and resets the active descendant.
+     * @internal
+     */
+    onOverlayClosed() {
+        this.openChange.emit(false);
         // clear the active descendant
         this.activeDescendantManager.reset();
     }
@@ -1164,7 +1184,7 @@ class NgpCombobox {
         return this.sortedOptions()[index];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpCombobox, isStandalone: true, selector: "[ngpCombobox]", inputs: { value: { classPropertyName: "value", publicName: "ngpComboboxValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "ngpComboboxMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpComboboxDisabled", isSignal: true, isRequired: false, transformFunction: null }, allowDeselect: { classPropertyName: "allowDeselect", publicName: "ngpComboboxAllowDeselect", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpComboboxCompareWith", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpComboboxDropdownPlacement", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpComboboxDropdownContainer", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpComboboxDropdownFlip", isSignal: true, isRequired: false, transformFunction: null }, scrollToOption: { classPropertyName: "scrollToOption", publicName: "ngpComboboxScrollToOption", isSignal: true, isRequired: false, transformFunction: null }, allOptions: { classPropertyName: "allOptions", publicName: "ngpComboboxOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpComboboxValueChange", openChange: "ngpComboboxOpenChange" }, host: { listeners: { "keydown": "handleKeydown($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "input() ? -1 : (state.disabled() ? -1 : 0)", "attr.data-open": "open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined", "attr.data-invalid": "controlStatus()?.invalid ? \"\" : undefined", "attr.data-valid": "controlStatus()?.valid ? \"\" : undefined", "attr.data-touched": "controlStatus()?.touched ? \"\" : undefined", "attr.data-pristine": "controlStatus()?.pristine ? \"\" : undefined", "attr.data-dirty": "controlStatus()?.dirty ? \"\" : undefined", "attr.data-pending": "controlStatus()?.pending ? \"\" : undefined" } }, providers: [provideComboboxState()], exportAs: ["ngpCombobox"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpCombobox, isStandalone: true, selector: "[ngpCombobox]", inputs: { value: { classPropertyName: "value", publicName: "ngpComboboxValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "ngpComboboxMultiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpComboboxDisabled", isSignal: true, isRequired: false, transformFunction: null }, allowDeselect: { classPropertyName: "allowDeselect", publicName: "ngpComboboxAllowDeselect", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpComboboxCompareWith", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpComboboxDropdownPlacement", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpComboboxDropdownContainer", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpComboboxDropdownFlip", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpComboboxDropdownOffset", isSignal: true, isRequired: false, transformFunction: null }, scrollToOption: { classPropertyName: "scrollToOption", publicName: "ngpComboboxScrollToOption", isSignal: true, isRequired: false, transformFunction: null }, allOptions: { classPropertyName: "allOptions", publicName: "ngpComboboxOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpComboboxValueChange", openChange: "ngpComboboxOpenChange" }, host: { listeners: { "keydown": "handleKeydown($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "input() ? -1 : (state.disabled() ? -1 : 0)", "attr.data-open": "open() ? \"\" : undefined", "attr.data-disabled": "state.disabled() ? \"\" : undefined", "attr.data-multiple": "state.multiple() ? \"\" : undefined", "attr.data-invalid": "controlStatus()?.invalid ? \"\" : undefined", "attr.data-valid": "controlStatus()?.valid ? \"\" : undefined", "attr.data-touched": "controlStatus()?.touched ? \"\" : undefined", "attr.data-pristine": "controlStatus()?.pristine ? \"\" : undefined", "attr.data-dirty": "controlStatus()?.dirty ? \"\" : undefined", "attr.data-pending": "controlStatus()?.pending ? \"\" : undefined" } }, providers: [provideComboboxState()], exportAs: ["ngpCombobox"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpCombobox, decorators: [{
             type: Directive,
@@ -1185,7 +1205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         '[attr.data-pending]': 'controlStatus()?.pending ? "" : undefined',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpComboboxValueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxMultiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDisabled", required: false }] }], allowDeselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxAllowDeselect", required: false }] }], openChange: [{ type: i0.Output, args: ["ngpComboboxOpenChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxCompareWith", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDropdownPlacement", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDropdownContainer", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDropdownFlip", required: false }] }], scrollToOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxScrollToOption", required: false }] }], allOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxOptions", required: false }] }], handleKeydown: [{
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpComboboxValueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxMultiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDisabled", required: false }] }], allowDeselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxAllowDeselect", required: false }] }], openChange: [{ type: i0.Output, args: ["ngpComboboxOpenChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxCompareWith", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDropdownPlacement", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDropdownContainer", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDropdownFlip", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxDropdownOffset", required: false }] }], scrollToOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxScrollToOption", required: false }] }], allOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpComboboxOptions", required: false }] }], handleKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }], onBlur: [{