ng-primitives 0.89.0 → 0.91.0

package/fesm2022/ng-primitives-switch.mjs

@@ -1,55 +1,101 @@
 import * as i0 from '@angular/core';
-import { Directive, input, booleanAttribute, output, HostListener } from '@angular/core';
+import { signal, computed, Directive, input, booleanAttribute, output } from '@angular/core';
 import { ngpInteractions } from 'ng-primitives/interactions';
-import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
-import { setupFormControl } from 'ng-primitives/form-field';
 import { injectElementRef } from 'ng-primitives/internal';
+import { createPrimitive, controlled, attrBinding, dataBinding, listener, deprecatedSetter } from 'ng-primitives/state';
+import { ngpFormControl } from 'ng-primitives/form-field';
 import { uniqueId } from 'ng-primitives/utils';
+import { Subject } from 'rxjs/internal/Subject';
 
-/**
- * The state token  for the Switch primitive.
- */
-const NgpSwitchStateToken = createStateToken('Switch');
-/**
- * Provides the Switch state.
- */
-const provideSwitchState = createStateProvider(NgpSwitchStateToken);
-/**
- * Injects the Switch state.
- */
-const injectSwitchState = createStateInjector(NgpSwitchStateToken);
-/**
- * The Switch state registration function.
- */
-const switchState = createState(NgpSwitchStateToken);
+const [NgpSwitchStateToken, ngpSwitch, injectSwitchState, provideSwitchState] = createPrimitive('NgpSwitch', ({ id = signal(uniqueId('ngp-switch')), checked: _checked = signal(false), disabled: _disabled = signal(false), onCheckedChange, }) => {
+    const element = injectElementRef();
+    const isButton = element.nativeElement.tagName.toLowerCase() === 'button';
+    const checked = controlled(_checked);
+    const disabledInput = controlled(_disabled);
+    // Form control and interactions
+    const status = ngpFormControl({ id, disabled: disabledInput });
+    const disabled = computed(() => status().disabled ?? disabledInput(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    ngpInteractions({ hover: true, press: true, focusVisible: true, disabled });
+    const checkedChange = new Subject();
+    const tabindex = computed(() => (disabled() ? -1 : 0), ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    // Host bindings
+    attrBinding(element, 'role', 'switch');
+    attrBinding(element, 'id', id);
+    attrBinding(element, 'type', () => (isButton ? 'button' : null));
+    attrBinding(element, 'aria-checked', checked);
+    dataBinding(element, 'data-checked', checked);
+    attrBinding(element, 'aria-disabled', disabled);
+    dataBinding(element, 'data-disabled', disabled);
+    attrBinding(element, 'disabled', () => (isButton && disabled() ? '' : null));
+    attrBinding(element, 'tabindex', tabindex);
+    // Listeners
+    listener(element, 'click', event => toggle(event));
+    listener(element, 'keydown', (event) => {
+        if (event.key === ' ' || event.key === 'Space') {
+            event.preventDefault();
+            if (!isButton) {
+                toggle(event);
+            }
+        }
+    });
+    function toggle(event) {
+        if (disabled()) {
+            return;
+        }
+        event?.preventDefault?.();
+        setChecked(!checked());
+    }
+    function setChecked(value) {
+        checked.set(value);
+        onCheckedChange?.(value);
+        checkedChange.next(value);
+    }
+    function setDisabled(value) {
+        disabledInput.set(value);
+    }
+    return {
+        id,
+        checked: deprecatedSetter(checked, 'setChecked'),
+        disabled: deprecatedSetter(disabledInput, 'setDisabled'),
+        checkedChange,
+        toggle,
+        setChecked,
+        setDisabled,
+    };
+});
+
+const [NgpSwitchThumbStateToken, ngpSwitchThumb, injectSwitchThumbState, provideSwitchThumbState,] = createPrimitive('NgpSwitchThumb', ({}) => {
+    const element = injectElementRef();
+    const switchState = injectSwitchState();
+    const checked = computed(() => switchState().checked(), ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    const disabled = computed(() => switchState().disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    // Host bindings
+    dataBinding(element, 'data-checked', checked);
+    dataBinding(element, 'data-disabled', disabled);
+    ngpInteractions({
+        hover: true,
+        focusVisible: true,
+        press: true,
+        disabled,
+    });
+    return { checked, disabled };
+});
 
 /**
  * Apply the `ngpSwitchThumb` directive to an element within a switch to represent the thumb.
  */
 class NgpSwitchThumb {
     constructor() {
-        /**
-         * Access the switch state.
-         */
-        this.state = injectSwitchState();
-        ngpInteractions({
-            hover: true,
-            focusVisible: true,
-            press: true,
-            disabled: this.state().disabled,
-        });
+        ngpSwitchThumb({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSwitchThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpSwitchThumb, isStandalone: true, selector: "[ngpSwitchThumb]", host: { properties: { "attr.data-checked": "state().checked() ? \"\" : null", "attr.data-disabled": "state().disabled() ? \"\" : null" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSwitchThumb, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpSwitchThumb, isStandalone: true, selector: "[ngpSwitchThumb]", providers: [provideSwitchThumbState({ inherit: false })], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSwitchThumb, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSwitchThumb, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpSwitchThumb]',
-                    host: {
-                        '[attr.data-checked]': 'state().checked() ? "" : null',
-                        '[attr.data-disabled]': 'state().disabled() ? "" : null',
-                    },
+                    providers: [provideSwitchThumbState({ inherit: false })],
                 }]
         }], ctorParameters: () => [] });
 
@@ -58,26 +104,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  */
 class NgpSwitch {
     constructor() {
-        /**
-         * Access the element ref.
-         */
-        this.elementRef = injectElementRef();
-        /**
-         * Determine if the switch is a button
-         */
-        this.isButton = this.elementRef.nativeElement.tagName === 'BUTTON';
         /**
          * The id of the switch. If not provided, a unique id will be generated.
          */
-        this.id = input(uniqueId('ngp-switch'));
+        this.id = input(uniqueId('ngp-switch'), ...(ngDevMode ? [{ debugName: "id" }] : []));
         /**
          * Determine if the switch is checked.
          * @default false
          */
-        this.checked = input(false, {
-            alias: 'ngpSwitchChecked',
-            transform: booleanAttribute,
-        });
+        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked", alias: 'ngpSwitchChecked',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpSwitchChecked',
+                transform: booleanAttribute,
+            }]));
         /**
          * Emits when the checked state changes.
          */
@@ -88,78 +127,43 @@ class NgpSwitch {
          * Determine if the switch is disabled.
          * @default false
          */
-        this.disabled = input(false, {
-            alias: 'ngpSwitchDisabled',
-            transform: booleanAttribute,
-        });
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpSwitchDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpSwitchDisabled',
+                transform: booleanAttribute,
+            }]));
         /**
          * The switch state.
          * @internal
          */
-        this.state = switchState(this);
-        ngpInteractions({
-            hover: true,
-            press: true,
-            focusVisible: true,
-            disabled: this.state.disabled,
+        this.state = ngpSwitch({
+            id: this.id,
+            checked: this.checked,
+            disabled: this.disabled,
+            onCheckedChange: value => this.checkedChange.emit(value),
         });
-        setupFormControl({ id: this.state.id, disabled: this.state.disabled });
     }
     /**
      * Toggle the checked state.
      */
     toggle() {
-        if (this.state.disabled()) {
-            return;
-        }
-        const checked = !this.state.checked();
-        this.state.checked.set(checked);
-        this.checkedChange.emit(checked);
-    }
-    /**
-     * Handle the keydown event.
-     */
-    onKeyDown(event) {
-        // Prevent the default action of the space key, which is to scroll the page.
-        event.preventDefault();
-        // If the switch is not a button then the space key will not toggle the checked state automatically,
-        // so we need to do it manually.
-        if (!this.isButton) {
-            this.toggle();
-        }
+        this.state.toggle();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSwitch, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpSwitch, isStandalone: true, selector: "[ngpSwitch]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "ngpSwitchChecked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSwitchDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "ngpSwitchCheckedChange" }, host: { attributes: { "role": "switch" }, listeners: { "click": "toggle()", "keydown.space": "onKeyDown($event)" }, properties: { "id": "id()", "attr.type": "isButton ? \"button\" : null", "attr.aria-checked": "state.checked()", "attr.data-checked": "state.checked() ? \"\" : null", "attr.disabled": "isButton && state.disabled() ? \"\" : null", "attr.data-disabled": "state.disabled() ? \"\" : null", "attr.aria-disabled": "state.disabled()", "attr.tabindex": "state.disabled() ? -1 : 0" } }, providers: [provideSwitchState()], exportAs: ["ngpSwitch"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSwitch, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpSwitch, isStandalone: true, selector: "[ngpSwitch]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "ngpSwitchChecked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSwitchDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "ngpSwitchCheckedChange" }, providers: [provideSwitchState({ inherit: false })], exportAs: ["ngpSwitch"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSwitch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSwitch, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpSwitch]',
                     exportAs: 'ngpSwitch',
-                    providers: [provideSwitchState()],
-                    host: {
-                        role: 'switch',
-                        '[id]': 'id()',
-                        '[attr.type]': 'isButton ? "button" : null',
-                        '[attr.aria-checked]': 'state.checked()',
-                        '[attr.data-checked]': 'state.checked() ? "" : null',
-                        '[attr.disabled]': 'isButton && state.disabled() ? "" : null',
-                        '[attr.data-disabled]': 'state.disabled() ? "" : null',
-                        '[attr.aria-disabled]': 'state.disabled()',
-                        '[attr.tabindex]': 'state.disabled() ? -1 : 0',
-                    },
+                    providers: [provideSwitchState({ inherit: false })],
                 }]
-        }], ctorParameters: () => [], propDecorators: { toggle: [{
-                type: HostListener,
-                args: ['click']
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown.space', ['$event']]
-            }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSwitchChecked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["ngpSwitchCheckedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSwitchDisabled", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpSwitch, NgpSwitchThumb, injectSwitchState, provideSwitchState };
+export { NgpSwitch, NgpSwitchThumb, injectSwitchState, injectSwitchThumbState, ngpSwitch, ngpSwitchThumb, provideSwitchState, provideSwitchThumbState };
 //# sourceMappingURL=ng-primitives-switch.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-switch.mjs","sources":["../../../../packages/ng-primitives/switch/src/switch/switch-state.ts","../../../../packages/ng-primitives/switch/src/switch-thumb/switch-thumb.ts","../../../../packages/ng-primitives/switch/src/switch/switch.ts","../../../../packages/ng-primitives/switch/src/ng-primitives-switch.ts"],"sourcesContent":["import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpSwitch } from './switch';\n\n/**\n * The state token  for the Switch primitive.\n */\nexport const NgpSwitchStateToken = createStateToken<NgpSwitch>('Switch');\n\n/**\n * Provides the Switch state.\n */\nexport const provideSwitchState = createStateProvider(NgpSwitchStateToken);\n\n/**\n * Injects the Switch state.\n */\nexport const injectSwitchState = createStateInjector<NgpSwitch>(NgpSwitchStateToken);\n\n/**\n * The Switch state registration function.\n */\nexport const switchState = createState(NgpSwitchStateToken);\n","import { Directive } from '@angular/core';\nimport { ngpInteractions } from 'ng-primitives/interactions';\nimport { injectSwitchState } from '../switch/switch-state';\n\n/**\n * Apply the `ngpSwitchThumb` directive to an element within a switch to represent the thumb.\n */\n@Directive({\n  selector: '[ngpSwitchThumb]',\n  host: {\n    '[attr.data-checked]': 'state().checked() ? \"\" : null',\n    '[attr.data-disabled]': 'state().disabled() ? \"\" : null',\n  },\n})\nexport class NgpSwitchThumb {\n  /**\n   * Access the switch state.\n   */\n  protected readonly state = injectSwitchState();\n\n  constructor() {\n    ngpInteractions({\n      hover: true,\n      focusVisible: true,\n      press: true,\n      disabled: this.state().disabled,\n    });\n  }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Directive, HostListener, input, output } from '@angular/core';\nimport { setupFormControl } from 'ng-primitives/form-field';\nimport { ngpInteractions } from 'ng-primitives/interactions';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { uniqueId } from 'ng-primitives/utils';\nimport { provideSwitchState, switchState } from './switch-state';\n\n/**\n * Apply the `ngpSwitch` directive to an element to manage the checked state.\n */\n@Directive({\n  selector: '[ngpSwitch]',\n  exportAs: 'ngpSwitch',\n  providers: [provideSwitchState()],\n  host: {\n    role: 'switch',\n    '[id]': 'id()',\n    '[attr.type]': 'isButton ? \"button\" : null',\n    '[attr.aria-checked]': 'state.checked()',\n    '[attr.data-checked]': 'state.checked() ? \"\" : null',\n    '[attr.disabled]': 'isButton && state.disabled() ? \"\" : null',\n    '[attr.data-disabled]': 'state.disabled() ? \"\" : null',\n    '[attr.aria-disabled]': 'state.disabled()',\n    '[attr.tabindex]': 'state.disabled() ? -1 : 0',\n  },\n})\nexport class NgpSwitch {\n  /**\n   * Access the element ref.\n   */\n  private readonly elementRef = injectElementRef();\n\n  /**\n   * Determine if the switch is a button\n   */\n  protected isButton = this.elementRef.nativeElement.tagName === 'BUTTON';\n\n  /**\n   * The id of the switch. If not provided, a unique id will be generated.\n   */\n  readonly id = input<string>(uniqueId('ngp-switch'));\n\n  /**\n   * Determine if the switch is checked.\n   * @default false\n   */\n  readonly checked = input<boolean, BooleanInput>(false, {\n    alias: 'ngpSwitchChecked',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Emits when the checked state changes.\n   */\n  readonly checkedChange = output<boolean>({\n    alias: 'ngpSwitchCheckedChange',\n  });\n\n  /**\n   * Determine if the switch is disabled.\n   * @default false\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    alias: 'ngpSwitchDisabled',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The switch state.\n   * @internal\n   */\n  readonly state = switchState<NgpSwitch>(this);\n\n  constructor() {\n    ngpInteractions({\n      hover: true,\n      press: true,\n      focusVisible: true,\n      disabled: this.state.disabled,\n    });\n    setupFormControl({ id: this.state.id, disabled: this.state.disabled });\n  }\n\n  /**\n   * Toggle the checked state.\n   */\n  @HostListener('click')\n  toggle(): void {\n    if (this.state.disabled()) {\n      return;\n    }\n\n    const checked = !this.state.checked();\n    this.state.checked.set(checked);\n    this.checkedChange.emit(checked);\n  }\n\n  /**\n   * Handle the keydown event.\n   */\n  @HostListener('keydown.space', ['$event'])\n  protected onKeyDown(event: KeyboardEvent): void {\n    // Prevent the default action of the space key, which is to scroll the page.\n    event.preventDefault();\n\n    // If the switch is not a button then the space key will not toggle the checked state automatically,\n    // so we need to do it manually.\n    if (!this.isButton) {\n      this.toggle();\n    }\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-switch.mjs","sources":["../../../../packages/ng-primitives/switch/src/switch/switch-state.ts","../../../../packages/ng-primitives/switch/src/switch-thumb/switch-thumb-state.ts","../../../../packages/ng-primitives/switch/src/switch-thumb/switch-thumb.ts","../../../../packages/ng-primitives/switch/src/switch/switch.ts","../../../../packages/ng-primitives/switch/src/ng-primitives-switch.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  listener,\n} from 'ng-primitives/state';\nimport { uniqueId } from 'ng-primitives/utils';\nimport { Subject } from 'rxjs/internal/Subject';\n\n/**\n * Public state surface for the Switch primitive.\n */\nexport interface NgpSwitchState {\n  /**\n   * The id of the switch.\n   */\n  readonly id: Signal<string>;\n  /**\n   * Whether the switch is checked.\n   */\n  readonly checked: WritableSignal<boolean>;\n  /**\n   * Whether the switch is disabled (includes form control state).\n   */\n  readonly disabled: WritableSignal<boolean>;\n  /**\n   * Emits when the checked state changes.\n   */\n  readonly checkedChange: Subject<boolean>;\n  /**\n   * Toggle the switch state.\n   */\n  toggle(event?: Event): void;\n  /**\n   * Update the checked value.\n   */\n  setChecked(value: boolean): void;\n  /**\n   * Update the disabled value.\n   */\n  setDisabled(value: boolean): void;\n}\n\n/**\n * Inputs for configuring the Switch primitive.\n */\nexport interface NgpSwitchProps {\n  /**\n   * The id of the switch.\n   */\n  readonly id?: Signal<string>;\n  /**\n   * Whether the switch is checked.\n   */\n  readonly checked?: Signal<boolean>;\n  /**\n   * Whether the switch 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\nexport const [NgpSwitchStateToken, ngpSwitch, injectSwitchState, provideSwitchState] =\n  createPrimitive(\n    'NgpSwitch',\n    ({\n      id = signal(uniqueId('ngp-switch')),\n      checked: _checked = signal(false),\n      disabled: _disabled = signal(false),\n      onCheckedChange,\n    }: NgpSwitchProps): NgpSwitchState => {\n      const element = injectElementRef<HTMLElement>();\n      const isButton = element.nativeElement.tagName.toLowerCase() === 'button';\n      const checked = controlled(_checked);\n      const disabledInput = controlled(_disabled);\n\n      // Form control and interactions\n      const status = ngpFormControl({ id, disabled: disabledInput });\n      const disabled = computed(() => status().disabled ?? disabledInput());\n      ngpInteractions({ hover: true, press: true, focusVisible: true, disabled });\n\n      const checkedChange = new Subject<boolean>();\n      const tabindex = computed(() => (disabled() ? -1 : 0));\n\n      // Host bindings\n      attrBinding(element, 'role', 'switch');\n      attrBinding(element, 'id', id);\n      attrBinding(element, 'type', () => (isButton ? 'button' : null));\n      attrBinding(element, 'aria-checked', checked);\n      dataBinding(element, 'data-checked', checked);\n      attrBinding(element, 'aria-disabled', disabled);\n      dataBinding(element, 'data-disabled', disabled);\n      attrBinding(element, 'disabled', () => (isButton && disabled() ? '' : null));\n      attrBinding(element, 'tabindex', tabindex);\n\n      // Listeners\n      listener(element, 'click', event => toggle(event));\n      listener(element, 'keydown', (event: KeyboardEvent) => {\n        if (event.key === ' ' || event.key === 'Space') {\n          event.preventDefault();\n          if (!isButton) {\n            toggle(event);\n          }\n        }\n      });\n\n      function toggle(event?: Event): void {\n        if (disabled()) {\n          return;\n        }\n\n        event?.preventDefault?.();\n        setChecked(!checked());\n      }\n\n      function setChecked(value: boolean): void {\n        checked.set(value);\n        onCheckedChange?.(value);\n        checkedChange.next(value);\n      }\n\n      function setDisabled(value: boolean): void {\n        disabledInput.set(value);\n      }\n\n      return {\n        id,\n        checked: deprecatedSetter(checked, 'setChecked'),\n        disabled: deprecatedSetter(disabledInput, 'setDisabled'),\n        checkedChange,\n        toggle,\n        setChecked,\n        setDisabled,\n      };\n    },\n  );\n","import { computed, Signal } from '@angular/core';\nimport { ngpInteractions } from 'ng-primitives/interactions';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { createPrimitive, dataBinding } from 'ng-primitives/state';\nimport { injectSwitchState } from '../switch/switch-state';\n\n/**\n * Public state surface for the Switch Thumb primitive.\n */\nexport interface NgpSwitchThumbState {\n  /**\n   * Whether the switch is checked.\n   */\n  readonly checked: Signal<boolean>;\n  /**\n   * Whether the switch is disabled.\n   */\n  readonly disabled: Signal<boolean>;\n}\n\n/**\n * Inputs for configuring the Switch Thumb primitive.\n */\nexport interface NgpSwitchThumbProps {}\n\nexport const [\n  NgpSwitchThumbStateToken,\n  ngpSwitchThumb,\n  injectSwitchThumbState,\n  provideSwitchThumbState,\n] = createPrimitive('NgpSwitchThumb', ({}: NgpSwitchThumbProps): NgpSwitchThumbState => {\n  const element = injectElementRef();\n  const switchState = injectSwitchState();\n\n  const checked = computed(() => switchState().checked());\n  const disabled = computed(() => switchState().disabled());\n\n  // Host bindings\n  dataBinding(element, 'data-checked', checked);\n  dataBinding(element, 'data-disabled', disabled);\n\n  ngpInteractions({\n    hover: true,\n    focusVisible: true,\n    press: true,\n    disabled,\n  });\n\n  return { checked, disabled };\n});\n","import { Directive } from '@angular/core';\nimport { ngpSwitchThumb, provideSwitchThumbState } from './switch-thumb-state';\n\n/**\n * Apply the `ngpSwitchThumb` directive to an element within a switch to represent the thumb.\n */\n@Directive({\n  selector: '[ngpSwitchThumb]',\n  providers: [provideSwitchThumbState({ inherit: false })],\n})\nexport class NgpSwitchThumb {\n  constructor() {\n    ngpSwitchThumb({});\n  }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Directive, input, output } from '@angular/core';\nimport { uniqueId } from 'ng-primitives/utils';\nimport { ngpSwitch, provideSwitchState } from './switch-state';\n\n/**\n * Apply the `ngpSwitch` directive to an element to manage the checked state.\n */\n@Directive({\n  selector: '[ngpSwitch]',\n  exportAs: 'ngpSwitch',\n  providers: [provideSwitchState({ inherit: false })],\n})\nexport class NgpSwitch {\n  /**\n   * The id of the switch. If not provided, a unique id will be generated.\n   */\n  readonly id = input<string>(uniqueId('ngp-switch'));\n\n  /**\n   * Determine if the switch is checked.\n   * @default false\n   */\n  readonly checked = input<boolean, BooleanInput>(false, {\n    alias: 'ngpSwitchChecked',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Emits when the checked state changes.\n   */\n  readonly checkedChange = output<boolean>({\n    alias: 'ngpSwitchCheckedChange',\n  });\n\n  /**\n   * Determine if the switch is disabled.\n   * @default false\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    alias: 'ngpSwitchDisabled',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The switch state.\n   * @internal\n   */\n  readonly state = ngpSwitch({\n    id: this.id,\n    checked: this.checked,\n    disabled: this.disabled,\n    onCheckedChange: value => this.checkedChange.emit(value),\n  });\n\n  /**\n   * Toggle the checked state.\n   */\n  toggle(): void {\n    this.state.toggle();\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-tabs.mjs

@@ -68,34 +68,35 @@ class NgpTabButton {
          * The value of the tab this trigger controls
          * @required
          */
-        this.value = input(undefined, { alias: 'ngpTabButtonValue' });
+        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpTabButtonValue' }] : [{ alias: 'ngpTabButtonValue' }]));
         /**
          * Whether the tab is disabled
          * @default false
          */
-        this.disabled = input(false, {
-            alias: 'ngpTabButtonDisabled',
-            transform: booleanAttribute,
-        });
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpTabButtonDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpTabButtonDisabled',
+                transform: booleanAttribute,
+            }]));
         /**
          * Determine the id of the tab button
          * @internal
          */
-        this.id = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
         /**
          * Determine a unique id for the tab button if not provided
          * @internal
          */
-        this.buttonId = computed(() => this.id() ?? `${this.state().id()}-button-${this.value()}`);
+        this.buttonId = computed(() => this.id() ?? `${this.state().id()}-button-${this.value()}`, ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
         /**
          * Determine the aria-controls of the tab button
          * @internal
          */
-        this.ariaControls = computed(() => `${this.state().id()}-panel-${this.value()}`);
+        this.ariaControls = computed(() => `${this.state().id()}-panel-${this.value()}`, ...(ngDevMode ? [{ debugName: "ariaControls" }] : []));
         /**
          * Whether the tab is active
          */
-        this.active = computed(() => this.state().selectedTab() === this.value());
+        this.active = computed(() => this.state().selectedTab() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : []));
         this.state().registerTab(this);
         ngpInteractions({
             hover: true,
@@ -128,10 +129,10 @@ class NgpTabButton {
             this.select();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpTabButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpTabButton, isStandalone: true, selector: "[ngpTabButton]", inputs: { value: { classPropertyName: "value", publicName: "ngpTabButtonValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpTabButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "select()", "focus": "activateOnFocus()" }, properties: { "attr.id": "buttonId()", "attr.aria-controls": "ariaControls()", "attr.data-active": "active() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.disabled": "tagName === \"button\" && disabled() ? \"\" : null", "attr.data-orientation": "state().orientation()" } }, exportAs: ["ngpTabButton"], hostDirectives: [{ directive: i1.NgpRovingFocusItem, inputs: ["ngpRovingFocusItemDisabled", "ngpTabButtonDisabled"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTabButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpTabButton, isStandalone: true, selector: "[ngpTabButton]", inputs: { value: { classPropertyName: "value", publicName: "ngpTabButtonValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpTabButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tab" }, listeners: { "click": "select()", "focus": "activateOnFocus()" }, properties: { "attr.id": "buttonId()", "attr.aria-controls": "ariaControls()", "attr.data-active": "active() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.disabled": "tagName === \"button\" && disabled() ? \"\" : null", "attr.data-orientation": "state().orientation()" } }, exportAs: ["ngpTabButton"], hostDirectives: [{ directive: i1.NgpRovingFocusItem, inputs: ["ngpRovingFocusItemDisabled", "ngpTabButtonDisabled"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpTabButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTabButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpTabButton]',
@@ -152,7 +153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         },
                     ],
                 }]
-        }], ctorParameters: () => [], propDecorators: { select: [{
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTabButtonValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTabButtonDisabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], select: [{
                 type: HostListener,
                 args: ['click']
             }], activateOnFocus: [{
@@ -170,10 +171,10 @@ class NgpTabList {
          */
         this.state = injectTabsetState();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpTabList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpTabList, isStandalone: true, selector: "[ngpTabList]", host: { attributes: { "role": "tablist" }, properties: { "attr.aria-orientation": "state().orientation()", "attr.data-orientation": "state().orientation()" } }, exportAs: ["ngpTabList"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTabList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpTabList, isStandalone: true, selector: "[ngpTabList]", host: { attributes: { "role": "tablist" }, properties: { "attr.aria-orientation": "state().orientation()", "attr.data-orientation": "state().orientation()" } }, exportAs: ["ngpTabList"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpTabList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTabList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpTabList]',
@@ -208,36 +209,36 @@ class NgpTabPanel {
          * The value of the tab
          * @required
          */
-        this.value = input(undefined, { alias: 'ngpTabPanelValue' });
+        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpTabPanelValue' }] : [{ alias: 'ngpTabPanelValue' }]));
         /**
          * Determine the id of the tab panel
          * @internal
          */
-        this.id = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
         /**
          * Determine a unique id for the tab panel if not provided
          * @internal
          */
-        this.panelId = computed(() => this.id() ?? `${this.state().id()}-panel-${this.value()}`);
+        this.panelId = computed(() => this.id() ?? `${this.state().id()}-panel-${this.value()}`, ...(ngDevMode ? [{ debugName: "panelId" }] : []));
         /**
          * Determine the aria-labelledby of the tab panel
          * @internal
          */
-        this.labelledBy = computed(() => `${this.state().id()}-button-${this.value()}`);
+        this.labelledBy = computed(() => `${this.state().id()}-button-${this.value()}`, ...(ngDevMode ? [{ debugName: "labelledBy" }] : []));
         /**
          * Whether the tab is active
          */
-        this.active = computed(() => this.state().selectedTab() === this.value());
+        this.active = computed(() => this.state().selectedTab() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : []));
     }
     ngOnInit() {
         if (this.value() === undefined) {
             throw new Error('ngpTabPanel: value is required');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpTabPanel, isStandalone: true, selector: "[ngpTabPanel]", inputs: { value: { classPropertyName: "value", publicName: "ngpTabPanelValue", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel", "tabIndex": "0" }, properties: { "id": "panelId()", "attr.aria-labelledby": "labelledBy()", "attr.data-active": "active() ? \"\" : null", "attr.data-orientation": "state().orientation()" } }, providers: [{ provide: NgpTabPanelToken, useExisting: NgpTabPanel }], exportAs: ["ngpTabPanel"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpTabPanel, isStandalone: true, selector: "[ngpTabPanel]", inputs: { value: { classPropertyName: "value", publicName: "ngpTabPanelValue", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tabpanel", "tabIndex": "0" }, properties: { "id": "panelId()", "attr.aria-labelledby": "labelledBy()", "attr.data-active": "active() ? \"\" : null", "attr.data-orientation": "state().orientation()" } }, providers: [{ provide: NgpTabPanelToken, useExisting: NgpTabPanel }], exportAs: ["ngpTabPanel"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpTabPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTabPanel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpTabPanel]',
@@ -252,7 +253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '[attr.data-orientation]': 'state().orientation()',
                     },
                 }]
-        }] });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTabPanelValue", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
  * Apply the `ngpTabset` directive to an element to manage the tabs.
@@ -270,13 +271,13 @@ class NgpTabset {
         /**
          * Define the id for the tabset
          */
-        this.id = input(uniqueId('ngp-tabset'));
+        this.id = input(uniqueId('ngp-tabset'), ...(ngDevMode ? [{ debugName: "id" }] : []));
         /**
          * Define the active tab
          */
-        this.value = input(undefined, {
-            alias: 'ngpTabsetValue',
-        });
+        this.value = input(undefined, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpTabsetValue' }] : [{
+                alias: 'ngpTabsetValue',
+            }]));
         /**
          * Emit the value of the selected tab when it changes
          */
@@ -287,21 +288,22 @@ class NgpTabset {
          * The orientation of the tabset
          * @default 'horizontal'
          */
-        this.orientation = input(this.config.orientation, {
-            alias: 'ngpTabsetOrientation',
-        });
+        this.orientation = input(this.config.orientation, ...(ngDevMode ? [{ debugName: "orientation", alias: 'ngpTabsetOrientation' }] : [{
+                alias: 'ngpTabsetOrientation',
+            }]));
         /**
          * Whether tabs should activate on focus
          */
-        this.activateOnFocus = input(this.config.activateOnFocus, {
-            alias: 'ngpTabsetActivateOnFocus',
-            transform: booleanAttribute,
-        });
+        this.activateOnFocus = input(this.config.activateOnFocus, ...(ngDevMode ? [{ debugName: "activateOnFocus", alias: 'ngpTabsetActivateOnFocus',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpTabsetActivateOnFocus',
+                transform: booleanAttribute,
+            }]));
         /**
          * Access the tabs within the tabset
          * @internal
          */
-        this.buttons = signal([]);
+        this.buttons = signal([], ...(ngDevMode ? [{ debugName: "buttons" }] : []));
         /**
          * @internal
          * Get the id of the selected tab
@@ -315,12 +317,15 @@ class NgpTabset {
             }
             // otherwise return the first non-disabled tab's value
             return buttons.find(button => !button.disabled())?.value();
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedTab" }] : []));
         /**
          * The state of the tabset
          */
         this.state = tabsetState(this);
-        explicitEffect([this.state.orientation], ([orientation]) => this.rovingFocusGroupState().orientation.set(orientation));
+        explicitEffect([this.state.orientation], ([orientation]) => {
+            const rovingFocusGroupState = this.rovingFocusGroupState();
+            rovingFocusGroupState?.setOrientation(orientation);
+        });
     }
     /**
      * Select a tab by its value
@@ -348,10 +353,10 @@ class NgpTabset {
     unregisterTab(tab) {
         this.buttons.update(buttons => buttons.filter(button => button !== tab));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpTabset, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpTabset, isStandalone: true, selector: "[ngpTabset]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpTabsetValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "ngpTabsetOrientation", isSignal: true, isRequired: false, transformFunction: null }, activateOnFocus: { classPropertyName: "activateOnFocus", publicName: "ngpTabsetActivateOnFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpTabsetValueChange" }, host: { properties: { "attr.id": "state.id()", "attr.data-orientation": "state.orientation()" } }, providers: [provideTabsetState({ inherit: false })], exportAs: ["ngpTabset"], hostDirectives: [{ directive: i1.NgpRovingFocusGroup }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTabset, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpTabset, isStandalone: true, selector: "[ngpTabset]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpTabsetValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "ngpTabsetOrientation", isSignal: true, isRequired: false, transformFunction: null }, activateOnFocus: { classPropertyName: "activateOnFocus", publicName: "ngpTabsetActivateOnFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpTabsetValueChange" }, host: { properties: { "attr.id": "state.id()", "attr.data-orientation": "state.orientation()" } }, providers: [provideTabsetState({ inherit: false })], exportAs: ["ngpTabset"], hostDirectives: [{ directive: i1.NgpRovingFocusGroup }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpTabset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTabset, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpTabset]',
@@ -363,7 +368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         '[attr.data-orientation]': 'state.orientation()',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTabsetValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpTabsetValueChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTabsetOrientation", required: false }] }], activateOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTabsetActivateOnFocus", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.