ng-primitives 0.91.2 → 0.93.0

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-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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"}
+{"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  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 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: Observable<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 = emitter<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.emit(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: checkedChange.asObservable(),\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

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, HOST_TAG_NAME, input, booleanAttribute, computed, HostListener, Directive, output, signal } from '@angular/core';
+import { InjectionToken, inject, signal, computed, HOST_TAG_NAME, input, booleanAttribute, Directive, output } from '@angular/core';
+import { ngpRovingFocusItem, provideRovingFocusItemState, ngpRovingFocusGroup, provideRovingFocusGroupState } from 'ng-primitives/roving-focus';
 import { ngpInteractions } from 'ng-primitives/interactions';
-import * as i1 from 'ng-primitives/roving-focus';
-import { NgpRovingFocusItem, injectRovingFocusGroupState, NgpRovingFocusGroup } from 'ng-primitives/roving-focus';
-import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
-import { explicitEffect } from 'ng-primitives/internal';
+import { injectElementRef } from 'ng-primitives/internal';
+import { createPrimitive, controlled, attrBinding, dataBinding, deprecatedSetter, listener, onMount, onDestroy } from 'ng-primitives/state';
 import { uniqueId } from 'ng-primitives/utils';
 
 const defaultTabsConfig = {
@@ -34,36 +33,120 @@ function injectTabsConfig() {
     return inject(NgpTabsConfigToken, { optional: true }) ?? defaultTabsConfig;
 }
 
-/**
- * The state token  for the Tabset primitive.
- */
-const NgpTabsetStateToken = createStateToken('Tabset');
-/**
- * Provides the Tabset state.
- */
-const provideTabsetState = createStateProvider(NgpTabsetStateToken);
-/**
- * Injects the Tabset state.
- */
-const injectTabsetState = createStateInjector(NgpTabsetStateToken);
-/**
- * The Tabset state registration function.
- */
-const tabsetState = createState(NgpTabsetStateToken);
+const [NgpTabsetStateToken, ngpTabset, injectTabsetState, provideTabsetState] = createPrimitive('NgpTabset', ({ id = signal(uniqueId('ngp-tabset')), value: _value = signal(undefined), orientation: _orientation = signal('horizontal'), activateOnFocus = signal(false), onValueChange, }) => {
+    const element = injectElementRef();
+    const tabs = signal([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    const value = controlled(_value);
+    const orientation = controlled(_orientation);
+    // Host bindings
+    attrBinding(element, 'id', id);
+    dataBinding(element, 'data-orientation', orientation);
+    // Computed selected tab
+    const selectedTab = computed(() => {
+        const tabList = tabs();
+        const currentValue = value();
+        // if there are no tabs then return the selected value
+        if (tabList.length === 0) {
+            return currentValue;
+        }
+        // if there is a value set and a tab with that value exists, return the value
+        if (currentValue && tabList.some(tab => tab.value() === currentValue)) {
+            return currentValue;
+        }
+        // otherwise return the first non-disabled tab's value
+        return tabList.find(tab => !tab.disabled())?.value();
+    }, ...(ngDevMode ? [{ debugName: "selectedTab" }] : []));
+    function select(newValue) {
+        // if the value is already selected, do nothing
+        if (value() === newValue) {
+            return;
+        }
+        value.set(newValue);
+        onValueChange?.(newValue);
+    }
+    function setOrientation(newOrientation) {
+        orientation.set(newOrientation);
+    }
+    function registerTab(tab) {
+        tabs.update(currentTabs => [...currentTabs, tab]);
+    }
+    function unregisterTab(tabValue) {
+        tabs.update(currentTabs => currentTabs.filter(tab => tab.value() !== tabValue));
+    }
+    return {
+        id,
+        orientation,
+        activateOnFocus,
+        value: deprecatedSetter(value, 'select'),
+        selectedTab,
+        select,
+        setOrientation,
+        registerTab,
+        unregisterTab,
+    };
+});
+
+const [NgpTabButtonStateToken, ngpTabButton, injectTabButtonState, provideTabButtonState] = createPrimitive('NgpTabButton', ({ value, disabled = signal(false), id }) => {
+    const element = injectElementRef();
+    const tagName = inject(HOST_TAG_NAME);
+    const tabset = injectTabsetState();
+    // Computed properties
+    const buttonId = computed(() => id?.() ?? `${tabset().id()}-button-${value()}`, ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
+    const ariaControls = computed(() => `${tabset().id()}-panel-${value()}`, ...(ngDevMode ? [{ debugName: "ariaControls" }] : []));
+    const active = computed(() => tabset().selectedTab() === value(), ...(ngDevMode ? [{ debugName: "active" }] : []));
+    // Host bindings
+    attrBinding(element, 'role', 'tab');
+    attrBinding(element, 'id', buttonId);
+    attrBinding(element, 'aria-controls', ariaControls);
+    attrBinding(element, 'aria-selected', active);
+    dataBinding(element, 'data-active', active);
+    dataBinding(element, 'data-disabled', disabled);
+    attrBinding(element, 'disabled', () => (tagName === 'button' && disabled() ? '' : null));
+    dataBinding(element, 'data-orientation', () => tabset().orientation());
+    // Event listeners
+    listener(element, 'click', select);
+    listener(element, 'focus', activateOnFocus);
+    // Setup interactions
+    ngpInteractions({
+        hover: true,
+        press: true,
+        focusVisible: true,
+        disabled,
+    });
+    function select() {
+        if (disabled?.() === false) {
+            tabset().select(value());
+        }
+    }
+    function activateOnFocus() {
+        if (tabset().activateOnFocus()) {
+            select();
+        }
+    }
+    onMount(() => {
+        // we can't use a required input for value as it is used in a computed property before the input is set
+        if (value() === undefined) {
+            throw new Error('ngpTabButton: value is required');
+        }
+        // Register with tabset now that inputs are available
+        tabset().registerTab({ value, disabled });
+    });
+    // Unregister on destroy
+    onDestroy(() => {
+        tabset().unregisterTab(value());
+    });
+    return {
+        id: buttonId,
+        active,
+        select,
+    };
+});
 
 /**
  * Apply the `ngpTabButton` directive to an element within a tab list to represent a tab button. This directive should be applied to a button element.
  */
 class NgpTabButton {
     constructor() {
-        /**
-         * Access the tag host name
-         */
-        this.tagName = inject(HOST_TAG_NAME);
-        /**
-         * Access the tabset state
-         */
-        this.state = injectTabsetState();
         /**
          * The value of the tab this trigger controls
          * @required
@@ -83,128 +166,97 @@ class NgpTabButton {
          * @internal
          */
         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()}`, ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
-        /**
-         * Determine the aria-controls of the tab button
-         * @internal
-         */
-        this.ariaControls = computed(() => `${this.state().id()}-panel-${this.value()}`, ...(ngDevMode ? [{ debugName: "ariaControls" }] : []));
+        this.state = ngpTabButton({
+            value: this.value,
+            disabled: this.disabled,
+            id: this.id,
+        });
         /**
          * Whether the tab is active
          */
-        this.active = computed(() => this.state().selectedTab() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : []));
-        this.state().registerTab(this);
-        ngpInteractions({
-            hover: true,
-            press: true,
-            focusVisible: true,
-            disabled: this.disabled,
-        });
-    }
-    ngOnInit() {
-        if (this.value() === undefined) {
-            throw new Error('ngpTabButton: value is required');
-        }
-    }
-    ngOnDestroy() {
-        this.state().unregisterTab(this);
+        this.active = this.state.active;
+        ngpRovingFocusItem({ disabled: this.disabled });
     }
     /**
      * Select the tab this trigger controls
      */
     select() {
-        if (this.disabled() === false) {
-            this.state().select(this.value());
-        }
-    }
-    /**
-     * On focus select the tab this trigger controls if activateOnFocus is true
-     */
-    activateOnFocus() {
-        if (this.state().activateOnFocus()) {
-            this.select();
-        }
+        this.state.select();
     }
     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 }); }
+    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 } }, providers: [provideTabButtonState(), provideRovingFocusItemState()], exportAs: ["ngpTabButton"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTabButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpTabButton]',
                     exportAs: 'ngpTabButton',
-                    host: {
-                        role: 'tab',
-                        '[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()',
-                    },
-                    hostDirectives: [
-                        {
-                            directive: NgpRovingFocusItem,
-                            inputs: ['ngpRovingFocusItemDisabled: ngpTabButtonDisabled'],
-                        },
-                    ],
+                    providers: [provideTabButtonState(), provideRovingFocusItemState()],
                 }]
-        }], 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: [{
-                type: HostListener,
-                args: ['focus']
-            }] } });
+        }], 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 }] }] } });
+
+const [NgpTabListStateToken, ngpTabList, injectTabListState, provideTabListState] = createPrimitive('NgpTabList', ({}) => {
+    const element = injectElementRef();
+    const tabsetState = injectTabsetState();
+    // Host bindings
+    attrBinding(element, 'role', 'tablist');
+    attrBinding(element, 'aria-orientation', () => tabsetState().orientation());
+    dataBinding(element, 'data-orientation', () => tabsetState().orientation());
+    return {};
+});
 
 /**
  * Apply the `ngpTabList` directive to an element that represents the list of tab buttons.
  */
 class NgpTabList {
     constructor() {
-        /**
-         * Access the tabset state
-         */
-        this.state = injectTabsetState();
+        ngpTabList({});
     }
     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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpTabList, isStandalone: true, selector: "[ngpTabList]", providers: [provideTabListState()], exportAs: ["ngpTabList"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTabList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpTabList]',
                     exportAs: 'ngpTabList',
-                    host: {
-                        role: 'tablist',
-                        '[attr.aria-orientation]': 'state().orientation()',
-                        '[attr.data-orientation]': 'state().orientation()',
-                    },
+                    providers: [provideTabListState()],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-const NgpTabPanelToken = new InjectionToken('NgpTabPanelToken');
-/**
- * Inject the TabPanel directive instance
- * @returns The TabPanel directive instance
- */
-function injectTabPanel() {
-    return inject(NgpTabPanelToken);
-}
+const [NgpTabPanelStateToken, ngpTabPanel, injectTabPanelState, provideTabPanelState] = createPrimitive('NgpTabPanel', ({ value, id }) => {
+    const element = injectElementRef();
+    const tabset = injectTabsetState();
+    // Computed properties
+    const panelId = computed(() => id?.() ?? `${tabset().id()}-panel-${value?.()}`, ...(ngDevMode ? [{ debugName: "panelId" }] : []));
+    const labelledBy = computed(() => `${tabset().id()}-button-${value?.()}`, ...(ngDevMode ? [{ debugName: "labelledBy" }] : []));
+    const active = computed(() => tabset().selectedTab() === value?.(), ...(ngDevMode ? [{ debugName: "active" }] : []));
+    // Host bindings
+    attrBinding(element, 'role', 'tabpanel');
+    attrBinding(element, 'tabindex', () => (active() ? '0' : null));
+    attrBinding(element, 'aria-hidden', () => (active() ? null : 'true'));
+    attrBinding(element, 'id', panelId);
+    attrBinding(element, 'aria-labelledby', labelledBy);
+    dataBinding(element, 'data-active', active);
+    dataBinding(element, 'data-orientation', () => tabset().orientation());
+    // Ensure value is provided
+    onMount(() => {
+        if (value() === undefined) {
+            throw new Error('ngpTabPanel: value is required');
+        }
+    });
+    return {
+        panelId,
+        labelledBy,
+        active,
+    };
+});
 
 /**
  * Apply the `ngpTabPanel` directive to an element that represents the content of a tab.
  */
 class NgpTabPanel {
     constructor() {
-        /**
-         * Access the tabset
-         */
-        this.state = injectTabsetState();
         /**
          * The value of the tab
          * @required
@@ -215,43 +267,24 @@ class NgpTabPanel {
          * @internal
          */
         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()}`, ...(ngDevMode ? [{ debugName: "panelId" }] : []));
-        /**
-         * Determine the aria-labelledby of the tab panel
-         * @internal
-         */
-        this.labelledBy = computed(() => `${this.state().id()}-button-${this.value()}`, ...(ngDevMode ? [{ debugName: "labelledBy" }] : []));
+        this.state = ngpTabPanel({
+            value: this.value,
+            id: this.id,
+        });
         /**
          * Whether the tab is active
          */
-        this.active = computed(() => this.state().selectedTab() === this.value(), ...(ngDevMode ? [{ debugName: "active" }] : []));
-    }
-    ngOnInit() {
-        if (this.value() === undefined) {
-            throw new Error('ngpTabPanel: value is required');
-        }
+        this.active = this.state.active;
     }
     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 }); }
+    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 } }, providers: [provideTabPanelState()], exportAs: ["ngpTabPanel"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTabPanel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpTabPanel]',
                     exportAs: 'ngpTabPanel',
-                    providers: [{ provide: NgpTabPanelToken, useExisting: NgpTabPanel }],
-                    host: {
-                        role: 'tabpanel',
-                        tabIndex: '0',
-                        '[id]': 'panelId()',
-                        '[attr.aria-labelledby]': 'labelledBy()',
-                        '[attr.data-active]': 'active() ? "" : null',
-                        '[attr.data-orientation]': 'state().orientation()',
-                    },
+                    providers: [provideTabPanelState()],
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpTabPanelValue", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
@@ -264,10 +297,6 @@ class NgpTabset {
          * Access the global tabset configuration
          */
         this.config = injectTabsConfig();
-        /**
-         * Access the roving focus group state
-         */
-        this.rovingFocusGroupState = injectRovingFocusGroupState();
         /**
          * Define the id for the tabset
          */
@@ -299,32 +328,23 @@ class NgpTabset {
                 alias: 'ngpTabsetActivateOnFocus',
                 transform: booleanAttribute,
             }]));
-        /**
-         * Access the tabs within the tabset
-         * @internal
-         */
-        this.buttons = signal([], ...(ngDevMode ? [{ debugName: "buttons" }] : []));
+        this.state = ngpTabset({
+            id: this.id,
+            value: this.value,
+            orientation: this.orientation,
+            activateOnFocus: this.activateOnFocus,
+            onValueChange: value => this.valueChange.emit(value),
+        });
         /**
          * @internal
          * Get the id of the selected tab
          */
-        this.selectedTab = computed(() => {
-            const buttons = this.buttons();
-            // if there are no tabs then return the selected value
-            // if there is a value set and a tab with that value exists, return the value
-            if (buttons.length === 0 || buttons.some(button => button.value() === this.state.value())) {
-                return this.state.value();
-            }
-            // 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]) => {
-            const rovingFocusGroupState = this.rovingFocusGroupState();
-            rovingFocusGroupState?.setOrientation(orientation);
+        this.selectedTab = this.state.selectedTab;
+        ngpRovingFocusGroup({
+            orientation: this.orientation,
+            disabled: signal(false),
+            wrap: signal(false),
+            homeEnd: signal(true),
         });
     }
     /**
@@ -332,41 +352,23 @@ class NgpTabset {
      * @param value The value of the tab to select
      */
     select(value) {
-        // if the value is already selected, do nothing
-        if (this.state.value() === value) {
-            return;
-        }
-        this.state.value.set(value);
-        this.valueChange.emit(value);
-    }
-    /**
-     * @internal
-     * Register a tab with the tabset
-     */
-    registerTab(tab) {
-        this.buttons.update(buttons => [...buttons, tab]);
-    }
-    /**
-     * @internal
-     * Unregister a tab with the tabset
-     */
-    unregisterTab(tab) {
-        this.buttons.update(buttons => buttons.filter(button => button !== tab));
+        this.state.select(value);
     }
     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 }); }
+    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" }, providers: [
+            provideTabsetState({ inherit: false }),
+            provideRovingFocusGroupState({ inherit: false }),
+        ], exportAs: ["ngpTabset"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpTabset, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpTabset]',
                     exportAs: 'ngpTabset',
-                    providers: [provideTabsetState({ inherit: false })],
-                    hostDirectives: [NgpRovingFocusGroup],
-                    host: {
-                        '[attr.id]': 'state.id()',
-                        '[attr.data-orientation]': 'state.orientation()',
-                    },
+                    providers: [
+                        provideTabsetState({ inherit: false }),
+                        provideRovingFocusGroupState({ inherit: false }),
+                    ],
                 }]
         }], 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 }] }] } });
 
@@ -374,5 +376,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgpTabButton, NgpTabList, NgpTabPanel, NgpTabPanelToken, NgpTabset, injectTabPanel, injectTabsetState, provideTabsConfig, provideTabsetState };
+export { NgpTabButton, NgpTabButtonStateToken, NgpTabList, NgpTabListStateToken, NgpTabPanel, NgpTabPanelStateToken, NgpTabset, NgpTabsetStateToken, injectTabButtonState, injectTabListState, injectTabPanelState, injectTabsetState, ngpTabButton, ngpTabList, ngpTabPanel, ngpTabset, provideTabButtonState, provideTabListState, provideTabPanelState, provideTabsConfig, provideTabsetState };
 //# sourceMappingURL=ng-primitives-tabs.mjs.map