ng-primitives 0.36.0 → 0.38.0

package/fesm2022/ng-primitives-progress.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { Directive, input, numberAttribute, computed } from '@angular/core';
+import { computed, Directive, input, numberAttribute, signal } from '@angular/core';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { uniqueId } from 'ng-primitives/utils';
 
 /**
  * The state token  for the Progress primitive.
@@ -29,18 +30,101 @@ class NgpProgressIndicator {
          * Access the progress state.
          */
         this.state = injectProgressState();
+        /**
+         * Get the percentage of the progress value.
+         */
+        this.percentage = computed(() => this.state().value() === null
+            ? null
+            : ((this.state().value() - this.state().min()) / (this.state().max() - this.state().min())) *
+                100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpProgressIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpProgressIndicator, isStandalone: true, selector: "[ngpProgressIndicator]", host: { properties: { "attr.data-state": "state().dataState()", "attr.data-value": "state().value()", "attr.data-max": "state().max()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpProgressIndicator, isStandalone: true, selector: "[ngpProgressIndicator]", host: { properties: { "style.width.%": "percentage()", "attr.data-progressing": "state().progressing() ? \"\" : null", "attr.data-indeterminate": "state().indeterminate() ? \"\" : null", "attr.data-complete": "state().complete() ? \"\" : null" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpProgressIndicator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpProgressIndicator]',
                     host: {
-                        '[attr.data-state]': 'state().dataState()',
-                        '[attr.data-value]': 'state().value()',
-                        '[attr.data-max]': 'state().max()',
+                        '[style.width.%]': 'percentage()',
+                        '[attr.data-progressing]': 'state().progressing() ? "" : null',
+                        '[attr.data-indeterminate]': 'state().indeterminate() ? "" : null',
+                        '[attr.data-complete]': 'state().complete() ? "" : null',
+                    },
+                }]
+        }] });
+
+class NgpProgressLabel {
+    constructor() {
+        /**
+         * Access the progress state.
+         */
+        this.state = injectProgressState();
+        /**
+         * The unique identifier for the progress label.
+         */
+        this.id = input(uniqueId('ngp-progress-label'));
+        this.state().label.set(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpProgressLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpProgressLabel, isStandalone: true, selector: "[ngpProgressLabel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-progressing": "state().progressing() ? \"\" : null", "attr.data-indeterminate": "state().indeterminate() ? \"\" : null", "attr.data-complete": "state().complete() ? \"\" : null" } }, exportAs: ["ngpProgressLabel"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpProgressLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpProgressLabel]',
+                    exportAs: 'ngpProgressLabel',
+                    host: {
+                        '[attr.data-progressing]': 'state().progressing() ? "" : null',
+                        '[attr.data-indeterminate]': 'state().indeterminate() ? "" : null',
+                        '[attr.data-complete]': 'state().complete() ? "" : null',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class NgpProgressTrack {
+    constructor() {
+        /**
+         * Access the progress state.
+         */
+        this.state = injectProgressState();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpProgressTrack, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpProgressTrack, isStandalone: true, selector: "[ngpProgressTrack]", host: { properties: { "attr.data-progressing": "state().progressing() ? \"\" : null", "attr.data-indeterminate": "state().indeterminate() ? \"\" : null", "attr.data-complete": "state().complete() ? \"\" : null" } }, exportAs: ["ngpProgressTrack"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpProgressTrack, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpProgressTrack]',
+                    exportAs: 'ngpProgressTrack',
+                    host: {
+                        '[attr.data-progressing]': 'state().progressing() ? "" : null',
+                        '[attr.data-indeterminate]': 'state().indeterminate() ? "" : null',
+                        '[attr.data-complete]': 'state().complete() ? "" : null',
+                    },
+                }]
+        }] });
+
+class NgpProgressValue {
+    constructor() {
+        /**
+         * Access the progress state.
+         */
+        this.state = injectProgressState();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpProgressValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpProgressValue, isStandalone: true, selector: "[ngpProgressValue]", host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-progressing": "state().progressing() ? \"\" : null", "attr.data-indeterminate": "state().indeterminate() ? \"\" : null", "attr.data-complete": "state().complete() ? \"\" : null" } }, exportAs: ["ngpProgressValue"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpProgressValue, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpProgressValue]',
+                    exportAs: 'ngpProgressValue',
+                    host: {
+                        'aria-hidden': 'true',
+                        '[attr.data-progressing]': 'state().progressing() ? "" : null',
+                        '[attr.data-indeterminate]': 'state().indeterminate() ? "" : null',
+                        '[attr.data-complete]': 'state().complete() ? "" : null',
                     },
                 }]
         }] });
@@ -55,6 +139,14 @@ class NgpProgress {
          */
         this.value = input(0, {
             alias: 'ngpProgressValue',
+            transform: v => (v == null ? null : numberAttribute(v)),
+        });
+        /**
+         * Define the progress min value.
+         * @default '0'
+         */
+        this.min = input(0, {
+            alias: 'ngpProgressMin',
             transform: numberAttribute,
         });
         /**
@@ -75,19 +167,37 @@ class NgpProgress {
             alias: 'ngpProgressValueLabel',
         });
         /**
-         * Get the state of the progress bar.
-         * @returns 'indeterminate' | 'loading' | 'complete'
+         * Determine if the progress is indeterminate.
+         * @internal
+         */
+        this.indeterminate = computed(() => this.state.value() === null);
+        /**
+         * Determine if the progress is in a progressing state.
          * @internal
          */
-        this.dataState = computed(() => this.state.value() == null
-            ? 'indeterminate'
-            : this.state.value() === this.state.max()
-                ? 'complete'
-                : 'loading');
+        this.progressing = computed(() => this.state.value() != null &&
+            this.state.value() > 0 &&
+            this.state.value() < this.state.max());
         /**
-         * Get the progress value label.
+         * Determine if the progress is complete.
+         * @internal
+         */
+        this.complete = computed(() => this.state.value() === this.state.max());
+        /**
+         * Get the progress value text.
+         */
+        this.valueText = computed(() => {
+            const value = this.state.value();
+            if (value == null) {
+                return '';
+            }
+            return this.state.valueLabel()(value, this.state.max());
+        });
+        /**
+         * The label associated with the progress bar.
+         * @internal
          */
-        this.label = computed(() => this.state.valueLabel()(this.state.value(), this.state.max()));
+        this.label = signal(null);
         /**
          * The state of the progress bar.
          * @internal
@@ -95,7 +205,7 @@ class NgpProgress {
         this.state = progressState(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpProgress, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpProgress, isStandalone: true, selector: "[ngpProgress]", inputs: { value: { classPropertyName: "value", publicName: "ngpProgressValue", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpProgressMax", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "ngpProgressValueLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.aria-valuemax": "state.max()", "attr.aria-valuemin": "0", "attr.aria-valuenow": "state.value()", "attr.aria-valuetext": "label()", "attr.data-state": "dataState()", "attr.data-value": "state.value()", "attr.data-max": "state.max()" } }, providers: [provideProgressState()], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpProgress, isStandalone: true, selector: "[ngpProgress]", inputs: { value: { classPropertyName: "value", publicName: "ngpProgressValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "ngpProgressMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpProgressMax", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "ngpProgressValueLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.aria-valuemax": "state.max()", "attr.aria-valuemin": "0", "attr.aria-valuenow": "state.value()", "attr.aria-valuetext": "valueText()", "attr.aria-labelledby": "label() ? label().id : null", "attr.data-progressing": "progressing() ? \"\" : null", "attr.data-indeterminate": "indeterminate() ? \"\" : null", "attr.data-complete": "complete() ? \"\" : null" } }, providers: [provideProgressState()], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpProgress, decorators: [{
             type: Directive,
@@ -107,10 +217,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         '[attr.aria-valuemax]': 'state.max()',
                         '[attr.aria-valuemin]': '0',
                         '[attr.aria-valuenow]': 'state.value()',
-                        '[attr.aria-valuetext]': 'label()',
-                        '[attr.data-state]': 'dataState()',
-                        '[attr.data-value]': 'state.value()',
-                        '[attr.data-max]': 'state.max()',
+                        '[attr.aria-valuetext]': 'valueText()',
+                        '[attr.aria-labelledby]': 'label() ? label().id : null',
+                        '[attr.data-progressing]': 'progressing() ? "" : null',
+                        '[attr.data-indeterminate]': 'indeterminate() ? "" : null',
+                        '[attr.data-complete]': 'complete() ? "" : null',
                     },
                 }]
         }] });
@@ -119,5 +230,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgpProgress, NgpProgressIndicator, injectProgressState, provideProgressState };
+export { NgpProgress, NgpProgressIndicator, NgpProgressLabel, NgpProgressTrack, NgpProgressValue, injectProgressState, provideProgressState };
 //# sourceMappingURL=ng-primitives-progress.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-progress.mjs","sources":["../../../../packages/ng-primitives/progress/src/progress/progress-state.ts","../../../../packages/ng-primitives/progress/src/progress-indicator/progress-indicator.ts","../../../../packages/ng-primitives/progress/src/progress/progress.ts","../../../../packages/ng-primitives/progress/src/ng-primitives-progress.ts"],"sourcesContent":["import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpProgress } from './progress';\n\n/**\n * The state token  for the Progress primitive.\n */\nexport const NgpProgressStateToken = createStateToken<NgpProgress>('Progress');\n\n/**\n * Provides the Progress state.\n */\nexport const provideProgressState = createStateProvider(NgpProgressStateToken);\n\n/**\n * Injects the Progress state.\n */\nexport const injectProgressState = createStateInjector(NgpProgressStateToken);\n\n/**\n * The Progress state registration function.\n */\nexport const progressState = createState(NgpProgressStateToken);\n","import { Directive } from '@angular/core';\nimport { injectProgressState } from '../progress/progress-state';\n\n/**\n * Apply the `ngpProgressIndicator` directive to an element that represents the current progress.\n * The width of this element can be set to the percentage of the progress value.\n */\n@Directive({\n  selector: '[ngpProgressIndicator]',\n  host: {\n    '[attr.data-state]': 'state().dataState()',\n    '[attr.data-value]': 'state().value()',\n    '[attr.data-max]': 'state().max()',\n  },\n})\nexport class NgpProgressIndicator {\n  /**\n   * Access the progress state.\n   */\n  protected readonly state = injectProgressState();\n}\n","import { NumberInput } from '@angular/cdk/coercion';\nimport { Directive, computed, input, numberAttribute } from '@angular/core';\nimport { progressState, provideProgressState } from './progress-state';\n\n/**\n * Apply the `ngpProgress` directive to an element that represents the progress bar.\n */\n@Directive({\n  selector: '[ngpProgress]',\n  providers: [provideProgressState()],\n  host: {\n    role: 'progressbar',\n    '[attr.aria-valuemax]': 'state.max()',\n    '[attr.aria-valuemin]': '0',\n    '[attr.aria-valuenow]': 'state.value()',\n    '[attr.aria-valuetext]': 'label()',\n    '[attr.data-state]': 'dataState()',\n    '[attr.data-value]': 'state.value()',\n    '[attr.data-max]': 'state.max()',\n  },\n})\nexport class NgpProgress {\n  /**\n   * Define the progress value.\n   */\n  readonly value = input<number, NumberInput>(0, {\n    alias: 'ngpProgressValue',\n    transform: numberAttribute,\n  });\n\n  /**\n   * Define the progress max value.\n   * @default 100\n   */\n  readonly max = input<number, NumberInput>(100, {\n    alias: 'ngpProgressMax',\n    transform: numberAttribute,\n  });\n\n  /**\n   * Define a function that returns the progress value label.\n   * @param value The current value\n   * @param max The maximum value\n   * @returns The value label\n   */\n  readonly valueLabel = input<NgpProgressValueLabelFn>(\n    (value, max) => `${Math.round((value / max) * 100)}%`,\n    {\n      alias: 'ngpProgressValueLabel',\n    },\n  );\n\n  /**\n   * Get the state of the progress bar.\n   * @returns 'indeterminate' | 'loading' | 'complete'\n   * @internal\n   */\n  protected readonly dataState = computed(() =>\n    this.state.value() == null\n      ? 'indeterminate'\n      : this.state.value() === this.state.max()\n        ? 'complete'\n        : 'loading',\n  );\n\n  /**\n   * Get the progress value label.\n   */\n  protected readonly label = computed(() =>\n    this.state.valueLabel()(this.state.value(), this.state.max()),\n  );\n\n  /**\n   * The state of the progress bar.\n   * @internal\n   */\n  protected readonly state = progressState<NgpProgress>(this);\n}\n\nexport type NgpProgressValueLabelFn = (value: number, max: number) => string;\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-progress.mjs","sources":["../../../../packages/ng-primitives/progress/src/progress/progress-state.ts","../../../../packages/ng-primitives/progress/src/progress-indicator/progress-indicator.ts","../../../../packages/ng-primitives/progress/src/progress-label/progress-label.ts","../../../../packages/ng-primitives/progress/src/progress-track/progress-track.ts","../../../../packages/ng-primitives/progress/src/progress-value/progress-value.ts","../../../../packages/ng-primitives/progress/src/progress/progress.ts","../../../../packages/ng-primitives/progress/src/ng-primitives-progress.ts"],"sourcesContent":["import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpProgress } from './progress';\n\n/**\n * The state token  for the Progress primitive.\n */\nexport const NgpProgressStateToken = createStateToken<NgpProgress>('Progress');\n\n/**\n * Provides the Progress state.\n */\nexport const provideProgressState = createStateProvider(NgpProgressStateToken);\n\n/**\n * Injects the Progress state.\n */\nexport const injectProgressState = createStateInjector(NgpProgressStateToken);\n\n/**\n * The Progress state registration function.\n */\nexport const progressState = createState(NgpProgressStateToken);\n","import { computed, Directive } from '@angular/core';\nimport { injectProgressState } from '../progress/progress-state';\n\n/**\n * Apply the `ngpProgressIndicator` directive to an element that represents the current progress.\n * The width of this element can be set to the percentage of the progress value.\n */\n@Directive({\n  selector: '[ngpProgressIndicator]',\n  host: {\n    '[style.width.%]': 'percentage()',\n    '[attr.data-progressing]': 'state().progressing() ? \"\" : null',\n    '[attr.data-indeterminate]': 'state().indeterminate() ? \"\" : null',\n    '[attr.data-complete]': 'state().complete() ? \"\" : null',\n  },\n})\nexport class NgpProgressIndicator {\n  /**\n   * Access the progress state.\n   */\n  protected readonly state = injectProgressState();\n\n  /**\n   * Get the percentage of the progress value.\n   */\n  protected readonly percentage = computed(() =>\n    this.state().value() === null\n      ? null\n      : ((this.state().value()! - this.state().min()) / (this.state().max() - this.state().min())) *\n        100,\n  );\n}\n","import { Directive, input } from '@angular/core';\nimport { uniqueId } from 'ng-primitives/utils';\nimport { injectProgressState } from '../progress/progress-state';\n\n@Directive({\n  selector: '[ngpProgressLabel]',\n  exportAs: 'ngpProgressLabel',\n  host: {\n    '[attr.data-progressing]': 'state().progressing() ? \"\" : null',\n    '[attr.data-indeterminate]': 'state().indeterminate() ? \"\" : null',\n    '[attr.data-complete]': 'state().complete() ? \"\" : null',\n  },\n})\nexport class NgpProgressLabel {\n  /**\n   * Access the progress state.\n   */\n  protected readonly state = injectProgressState();\n\n  /**\n   * The unique identifier for the progress label.\n   */\n  readonly id = input<string>(uniqueId('ngp-progress-label'));\n\n  constructor() {\n    this.state().label.set(this);\n  }\n}\n","import { Directive } from '@angular/core';\nimport { injectProgressState } from '../progress/progress-state';\n\n@Directive({\n  selector: '[ngpProgressTrack]',\n  exportAs: 'ngpProgressTrack',\n  host: {\n    '[attr.data-progressing]': 'state().progressing() ? \"\" : null',\n    '[attr.data-indeterminate]': 'state().indeterminate() ? \"\" : null',\n    '[attr.data-complete]': 'state().complete() ? \"\" : null',\n  },\n})\nexport class NgpProgressTrack {\n  /**\n   * Access the progress state.\n   */\n  protected readonly state = injectProgressState();\n}\n","import { Directive } from '@angular/core';\nimport { injectProgressState } from '../progress/progress-state';\n\n@Directive({\n  selector: '[ngpProgressValue]',\n  exportAs: 'ngpProgressValue',\n  host: {\n    'aria-hidden': 'true',\n    '[attr.data-progressing]': 'state().progressing() ? \"\" : null',\n    '[attr.data-indeterminate]': 'state().indeterminate() ? \"\" : null',\n    '[attr.data-complete]': 'state().complete() ? \"\" : null',\n  },\n})\nexport class NgpProgressValue {\n  /**\n   * Access the progress state.\n   */\n  protected readonly state = injectProgressState();\n}\n","import { NumberInput } from '@angular/cdk/coercion';\nimport { Directive, computed, input, numberAttribute, signal } from '@angular/core';\nimport { NgpProgressLabel } from '../progress-label/progress-label';\nimport { progressState, provideProgressState } from './progress-state';\n\n/**\n * Apply the `ngpProgress` directive to an element that represents the progress bar.\n */\n@Directive({\n  selector: '[ngpProgress]',\n  providers: [provideProgressState()],\n  host: {\n    role: 'progressbar',\n    '[attr.aria-valuemax]': 'state.max()',\n    '[attr.aria-valuemin]': '0',\n    '[attr.aria-valuenow]': 'state.value()',\n    '[attr.aria-valuetext]': 'valueText()',\n    '[attr.aria-labelledby]': 'label() ? label().id : null',\n    '[attr.data-progressing]': 'progressing() ? \"\" : null',\n    '[attr.data-indeterminate]': 'indeterminate() ? \"\" : null',\n    '[attr.data-complete]': 'complete() ? \"\" : null',\n  },\n})\nexport class NgpProgress {\n  /**\n   * Define the progress value.\n   */\n  readonly value = input<number | null, NumberInput>(0, {\n    alias: 'ngpProgressValue',\n    transform: v => (v == null ? null : numberAttribute(v)),\n  });\n\n  /**\n   * Define the progress min value.\n   * @default '0'\n   */\n  readonly min = input<number, NumberInput>(0, {\n    alias: 'ngpProgressMin',\n    transform: numberAttribute,\n  });\n\n  /**\n   * Define the progress max value.\n   * @default 100\n   */\n  readonly max = input<number, NumberInput>(100, {\n    alias: 'ngpProgressMax',\n    transform: numberAttribute,\n  });\n\n  /**\n   * Define a function that returns the progress value label.\n   * @param value The current value\n   * @param max The maximum value\n   * @returns The value label\n   */\n  readonly valueLabel = input<NgpProgressValueTextFn>(\n    (value, max) => `${Math.round((value / max) * 100)}%`,\n    {\n      alias: 'ngpProgressValueLabel',\n    },\n  );\n\n  /**\n   * Determine if the progress is indeterminate.\n   * @internal\n   */\n  readonly indeterminate = computed(() => this.state.value() === null);\n\n  /**\n   * Determine if the progress is in a progressing state.\n   * @internal\n   */\n  readonly progressing = computed(\n    () =>\n      this.state.value() != null &&\n      this.state.value()! > 0 &&\n      this.state.value()! < this.state.max(),\n  );\n\n  /**\n   * Determine if the progress is complete.\n   * @internal\n   */\n  readonly complete = computed(() => this.state.value() === this.state.max());\n\n  /**\n   * Get the progress value text.\n   */\n  protected readonly valueText = computed(() => {\n    const value = this.state.value();\n\n    if (value == null) {\n      return '';\n    }\n\n    return this.state.valueLabel()(value, this.state.max());\n  });\n\n  /**\n   * The label associated with the progress bar.\n   * @internal\n   */\n  readonly label = signal<NgpProgressLabel | null>(null);\n\n  /**\n   * The state of the progress bar.\n   * @internal\n   */\n  protected readonly state = progressState<NgpProgress>(this);\n}\n\nexport type NgpProgressValueTextFn = (value: number, max: number) => string;\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,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, input, booleanAttribute, computed, Directive, HostListener, output, signal } from '@angular/core';
-import { setupInteractions } from 'ng-primitives/internal';
+import { setupInteractions, syncState } from 'ng-primitives/internal';
 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';
@@ -80,7 +80,7 @@ class NgpTabButton {
          * Determine a unique id for the tab button if not provided
          * @internal
          */
-        this.defaultId = computed(() => `${this.state().id()}-button-${this.value()}`);
+        this.buttonId = computed(() => this.id() ?? `${this.state().id()}-button-${this.value()}`);
         /**
          * Determine the aria-controls of the tab button
          * @internal
@@ -117,7 +117,7 @@ class NgpTabButton {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpTabButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", 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": "id() ?? defaultId()", "attr.aria-controls": "ariaControls()", "attr.data-active": "active() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-orientation": "state().orientation()" } }, exportAs: ["ngpTabButton"], hostDirectives: [{ directive: i1.NgpRovingFocusItem }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", 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.data-orientation": "state().orientation()" } }, exportAs: ["ngpTabButton"], hostDirectives: [{ directive: i1.NgpRovingFocusItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpTabButton, decorators: [{
             type: Directive,
@@ -126,7 +126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                     exportAs: 'ngpTabButton',
                     host: {
                         role: 'tab',
-                        '[attr.id]': 'id() ?? defaultId()',
+                        '[attr.id]': 'buttonId()',
                         '[attr.aria-controls]': 'ariaControls()',
                         '[attr.data-active]': 'active() ? "" : null',
                         '[attr.data-disabled]': 'disabled() ? "" : null',
@@ -199,7 +199,7 @@ class NgpTabPanel {
          * Determine a unique id for the tab panel if not provided
          * @internal
          */
-        this.defaultId = computed(() => `${this.state().id()}-panel-${this.value()}`);
+        this.panelId = computed(() => this.id() ?? `${this.state().id()}-panel-${this.value()}`);
         /**
          * Determine the aria-labelledby of the tab panel
          * @internal
@@ -220,7 +220,7 @@ class NgpTabPanel {
         this.state().unregisterTab(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", 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: { "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: "19.0.7", 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.0.7", ngImport: i0, type: NgpTabPanel, decorators: [{
             type: Directive,
@@ -231,6 +231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                     host: {
                         role: 'tabpanel',
                         tabIndex: '0',
+                        '[id]': 'panelId()',
                         '[attr.aria-labelledby]': 'labelledBy()',
                         '[attr.data-active]': 'active() ? "" : null',
                         '[attr.data-orientation]': 'state().orientation()',
@@ -303,11 +304,7 @@ class NgpTabset {
          * The state of the tabset
          */
         this.state = tabsetState(this);
-    }
-    ngOnInit() {
-        // the roving focus group defaults to vertical orientation whereas
-        // the default for the tabset may be different if provided via global config
-        this.rovingFocusGroupState().orientation.set(this.state.orientation());
+        syncState(this.state.orientation, this.rovingFocusGroupState().orientation);
     }
     /**
      * Select a tab by its value
@@ -336,7 +333,7 @@ class NgpTabset {
         this.panels.update(panels => panels.filter(panel => panel !== tab));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpTabset, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", 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()], exportAs: ["ngpTabset"], hostDirectives: [{ directive: i1.NgpRovingFocusGroup, inputs: ["ngpRovingFocusGroupOrientation", "ngpTabsetOrientation"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", 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()], exportAs: ["ngpTabset"], hostDirectives: [{ directive: i1.NgpRovingFocusGroup }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpTabset, decorators: [{
             type: Directive,
@@ -344,18 +341,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                     selector: '[ngpTabset]',
                     exportAs: 'ngpTabset',
                     providers: [provideTabsetState()],
-                    hostDirectives: [
-                        {
-                            directive: NgpRovingFocusGroup,
-                            inputs: ['ngpRovingFocusGroupOrientation:ngpTabsetOrientation'],
-                        },
-                    ],
+                    hostDirectives: [NgpRovingFocusGroup],
                     host: {
                         '[attr.id]': 'state.id()',
                         '[attr.data-orientation]': 'state.orientation()',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-tabs.mjs","sources":["../../../../packages/ng-primitives/tabs/src/config/tabs-config.ts","../../../../packages/ng-primitives/tabs/src/tabset/tabset-state.ts","../../../../packages/ng-primitives/tabs/src/tab-button/tab-button.ts","../../../../packages/ng-primitives/tabs/src/tab-list/tab-list.ts","../../../../packages/ng-primitives/tabs/src/tab-panel/tab-panel-token.ts","../../../../packages/ng-primitives/tabs/src/tab-panel/tab-panel.ts","../../../../packages/ng-primitives/tabs/src/tabset/tabset.ts","../../../../packages/ng-primitives/tabs/src/ng-primitives-tabs.ts"],"sourcesContent":["import { InjectionToken, Provider, inject } from '@angular/core';\nimport { NgpOrientation } from 'ng-primitives/common';\n\nexport interface NgpTabsConfig {\n  /**\n   * The orientation of the tabset\n   * @default 'horizontal'\n   */\n  orientation: NgpOrientation;\n\n  /**\n   * Whether tabs should activate on focus\n   * @default true\n   */\n  activateOnFocus: boolean;\n\n  /**\n   * Whether focus should wrap within the tab list when using the keyboard.\n   * @default true\n   */\n  wrap: boolean;\n}\n\nexport const defaultTabsConfig: NgpTabsConfig = {\n  orientation: 'horizontal',\n  activateOnFocus: true,\n  wrap: true,\n};\n\nexport const NgpTabsConfigToken = new InjectionToken<NgpTabsConfig>('NgpTabsConfigToken');\n\n/**\n * Provide the default Tabs configuration\n * @param config The Tabs configuration\n * @returns The provider\n */\nexport function provideTabsConfig(config: Partial<NgpTabsConfig>): Provider[] {\n  return [\n    {\n      provide: NgpTabsConfigToken,\n      useValue: { ...defaultTabsConfig, ...config },\n    },\n  ];\n}\n\n/**\n * Inject the Tabs configuration\n * @returns The global Tabs configuration\n */\nexport function injectTabsConfig(): NgpTabsConfig {\n  return inject(NgpTabsConfigToken, { optional: true }) ?? defaultTabsConfig;\n}\n","import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpTabset } from './tabset';\n\n/**\n * The state token  for the Tabset primitive.\n */\nexport const NgpTabsetStateToken = createStateToken<NgpTabset>('Tabset');\n\n/**\n * Provides the Tabset state.\n */\nexport const provideTabsetState = createStateProvider(NgpTabsetStateToken);\n\n/**\n * Injects the Tabset state.\n */\nexport const injectTabsetState = createStateInjector(NgpTabsetStateToken);\n\n/**\n * The Tabset state registration function.\n */\nexport const tabsetState = createState(NgpTabsetStateToken);\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { Directive, HostListener, OnInit, booleanAttribute, computed, input } from '@angular/core';\nimport { setupInteractions } from 'ng-primitives/internal';\nimport { NgpRovingFocusItem } from 'ng-primitives/roving-focus';\nimport { injectTabsetState } from '../tabset/tabset-state';\n\n/**\n * 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.\n */\n@Directive({\n  selector: '[ngpTabButton]',\n  exportAs: 'ngpTabButton',\n  host: {\n    role: 'tab',\n    '[attr.id]': 'id() ?? defaultId()',\n    '[attr.aria-controls]': 'ariaControls()',\n    '[attr.data-active]': 'active() ? \"\" : null',\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\n    '[attr.data-orientation]': 'state().orientation()',\n  },\n  hostDirectives: [NgpRovingFocusItem],\n})\nexport class NgpTabButton implements OnInit {\n  /**\n   * Access the tabset state\n   */\n  protected readonly state = injectTabsetState();\n\n  /**\n   * The value of the tab this trigger controls\n   */\n  readonly value = input<string>(undefined, { alias: 'ngpTabButtonValue' });\n\n  /**\n   * Whether the tab is disabled\n   * @default false\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    alias: 'ngpTabButtonDisabled',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Determine the id of the tab button\n   * @internal\n   */\n  readonly id = input<string>();\n\n  /**\n   * Determine a unique id for the tab button if not provided\n   * @internal\n   */\n  readonly defaultId = computed(() => `${this.state().id()}-button-${this.value()}`);\n\n  /**\n   * Determine the aria-controls of the tab button\n   * @internal\n   */\n  readonly ariaControls = computed(() => `${this.state().id()}-panel-${this.value()}`);\n\n  /**\n   * Whether the tab is active\n   */\n  readonly active = computed(() => this.state().selectedTab() === this.value());\n\n  constructor() {\n    setupInteractions({\n      hover: true,\n      press: true,\n      focusVisible: true,\n      disabled: this.disabled,\n    });\n  }\n\n  ngOnInit(): void {\n    if (this.value() === undefined) {\n      throw new Error('ngpTabButton: value is required');\n    }\n  }\n\n  /**\n   * Select the tab this trigger controls\n   */\n  @HostListener('click')\n  select(): void {\n    this.state().select(this.value()!);\n  }\n\n  /**\n   * On focus select the tab this trigger controls if activateOnFocus is true\n   */\n  @HostListener('focus')\n  protected activateOnFocus(): void {\n    if (this.state().activateOnFocus()) {\n      this.select();\n    }\n  }\n}\n","import { Directive } from '@angular/core';\nimport { injectTabsetState } from '../tabset/tabset-state';\n\n/**\n * Apply the `ngpTabList` directive to an element that represents the list of tab buttons.\n */\n@Directive({\n  selector: '[ngpTabList]',\n  exportAs: 'ngpTabList',\n  host: {\n    role: 'tablist',\n    '[attr.aria-orientation]': 'state().orientation()',\n    '[attr.data-orientation]': 'state().orientation()',\n  },\n})\nexport class NgpTabList {\n  /**\n   * Access the tabset state\n   */\n  protected readonly state = injectTabsetState();\n}\n","import { InjectionToken, inject } from '@angular/core';\nimport type { NgpTabPanel } from './tab-panel';\n\nexport const NgpTabPanelToken = new InjectionToken<NgpTabPanel>('NgpTabPanelToken');\n\n/**\n * Inject the TabPanel directive instance\n * @returns The TabPanel directive instance\n */\nexport function injectTabPanel(): NgpTabPanel {\n  return inject(NgpTabPanelToken);\n}\n","import { Directive, OnDestroy, OnInit, computed, input } from '@angular/core';\nimport { injectTabsetState } from '../tabset/tabset-state';\nimport { NgpTabPanelToken } from './tab-panel-token';\n\n/**\n * Apply the `ngpTabPanel` directive to an element that represents the content of a tab.\n */\n@Directive({\n  selector: '[ngpTabPanel]',\n  exportAs: 'ngpTabPanel',\n  providers: [{ provide: NgpTabPanelToken, useExisting: NgpTabPanel }],\n  host: {\n    role: 'tabpanel',\n    tabIndex: '0',\n    '[attr.aria-labelledby]': 'labelledBy()',\n    '[attr.data-active]': 'active() ? \"\" : null',\n    '[attr.data-orientation]': 'state().orientation()',\n  },\n})\nexport class NgpTabPanel implements OnInit, OnDestroy {\n  /**\n   * Access the tabset\n   */\n  protected readonly state = injectTabsetState();\n\n  /**\n   * The value of the tab\n   */\n  readonly value = input<string>(undefined, { alias: 'ngpTabPanelValue' });\n\n  /**\n   * Determine the id of the tab panel\n   * @internal\n   */\n  readonly id = input<string>();\n\n  /**\n   * Determine a unique id for the tab panel if not provided\n   * @internal\n   */\n  protected readonly defaultId = computed(() => `${this.state().id()}-panel-${this.value()}`);\n\n  /**\n   * Determine the aria-labelledby of the tab panel\n   * @internal\n   */\n  protected readonly labelledBy = computed(() => `${this.state().id()}-button-${this.value()}`);\n\n  /**\n   * Whether the tab is active\n   */\n  protected readonly active = computed(() => this.state().selectedTab() === this.value());\n\n  ngOnInit(): void {\n    this.state().registerTab(this);\n\n    if (this.value() === undefined) {\n      throw new Error('ngpTabPanel: value is required');\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.state().unregisterTab(this);\n  }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n  booleanAttribute,\n  computed,\n  Directive,\n  input,\n  OnInit,\n  output,\n  signal,\n} from '@angular/core';\nimport { NgpOrientation } from 'ng-primitives/common';\nimport { injectRovingFocusGroupState, NgpRovingFocusGroup } from 'ng-primitives/roving-focus';\nimport { uniqueId } from 'ng-primitives/utils';\nimport { injectTabsConfig } from '../config/tabs-config';\nimport type { NgpTabPanel } from '../tab-panel/tab-panel';\nimport { provideTabsetState, tabsetState } from './tabset-state';\n\n/**\n * Apply the `ngpTabset` directive to an element to manage the tabs.\n */\n@Directive({\n  selector: '[ngpTabset]',\n  exportAs: 'ngpTabset',\n  providers: [provideTabsetState()],\n  hostDirectives: [\n    {\n      directive: NgpRovingFocusGroup,\n      inputs: ['ngpRovingFocusGroupOrientation:ngpTabsetOrientation'],\n    },\n  ],\n  host: {\n    '[attr.id]': 'state.id()',\n    '[attr.data-orientation]': 'state.orientation()',\n  },\n})\nexport class NgpTabset implements OnInit {\n  /**\n   * Access the global tabset configuration\n   */\n  private readonly config = injectTabsConfig();\n\n  /**\n   * Access the roving focus group state\n   */\n  private readonly rovingFocusGroupState = injectRovingFocusGroupState();\n\n  /**\n   * Define the id for the tabset\n   */\n  readonly id = input<string>(uniqueId('ngp-tabset'));\n\n  /**\n   * Define the active tab\n   */\n  readonly value = input<string>(undefined, {\n    alias: 'ngpTabsetValue',\n  });\n\n  /**\n   * Emit the value of the selected tab when it changes\n   */\n  readonly valueChange = output<string | undefined>({\n    alias: 'ngpTabsetValueChange',\n  });\n\n  /**\n   * The orientation of the tabset\n   * @default 'horizontal'\n   */\n  readonly orientation = input<NgpOrientation>(this.config.orientation, {\n    alias: 'ngpTabsetOrientation',\n  });\n\n  /**\n   * Whether tabs should activate on focus\n   */\n  readonly activateOnFocus = input<boolean, BooleanInput>(this.config.activateOnFocus, {\n    alias: 'ngpTabsetActivateOnFocus',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Access the tabs within the tabset\n   * @internal\n   */\n  readonly panels = signal<NgpTabPanel[]>([]);\n\n  /**\n   * @internal\n   * Get the id of the selected tab\n   */\n  readonly selectedTab = computed(() => {\n    const panels = this.panels();\n\n    // if there is a value set and a tab with that value exists, return the value\n    if (panels.some(panel => panel.value() === this.state.value())) {\n      return this.state.value();\n    }\n\n    // otherwise return the first tab\n    return panels[0]?.value();\n  });\n\n  /**\n   * The state of the tabset\n   */\n  protected readonly state = tabsetState<NgpTabset>(this);\n\n  ngOnInit(): void {\n    // the roving focus group defaults to vertical orientation whereas\n    // the default for the tabset may be different if provided via global config\n    this.rovingFocusGroupState().orientation.set(this.state.orientation());\n  }\n\n  /**\n   * Select a tab by its value\n   * @param value The value of the tab to select\n   */\n  select(value: string): void {\n    // if the value is already selected, do nothing\n    if (this.state.value() === value) {\n      return;\n    }\n\n    this.state.value.set(value);\n    this.valueChange.emit(value);\n  }\n\n  /**\n   * @internal\n   * Register a tab with the tabset\n   */\n  registerTab(tab: NgpTabPanel): void {\n    this.panels.update(panels => [...panels, tab]);\n  }\n\n  /**\n   * @internal\n   * Unregister a tab with the tabset\n   */\n  unregisterTab(tab: NgpTabPanel): void {\n    this.panels.update(panels => panels.filter(panel => panel !== tab));\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-tabs.mjs","sources":["../../../../packages/ng-primitives/tabs/src/config/tabs-config.ts","../../../../packages/ng-primitives/tabs/src/tabset/tabset-state.ts","../../../../packages/ng-primitives/tabs/src/tab-button/tab-button.ts","../../../../packages/ng-primitives/tabs/src/tab-list/tab-list.ts","../../../../packages/ng-primitives/tabs/src/tab-panel/tab-panel-token.ts","../../../../packages/ng-primitives/tabs/src/tab-panel/tab-panel.ts","../../../../packages/ng-primitives/tabs/src/tabset/tabset.ts","../../../../packages/ng-primitives/tabs/src/ng-primitives-tabs.ts"],"sourcesContent":["import { InjectionToken, Provider, inject } from '@angular/core';\nimport { NgpOrientation } from 'ng-primitives/common';\n\nexport interface NgpTabsConfig {\n  /**\n   * The orientation of the tabset\n   * @default 'horizontal'\n   */\n  orientation: NgpOrientation;\n\n  /**\n   * Whether tabs should activate on focus\n   * @default true\n   */\n  activateOnFocus: boolean;\n\n  /**\n   * Whether focus should wrap within the tab list when using the keyboard.\n   * @default true\n   */\n  wrap: boolean;\n}\n\nexport const defaultTabsConfig: NgpTabsConfig = {\n  orientation: 'horizontal',\n  activateOnFocus: true,\n  wrap: true,\n};\n\nexport const NgpTabsConfigToken = new InjectionToken<NgpTabsConfig>('NgpTabsConfigToken');\n\n/**\n * Provide the default Tabs configuration\n * @param config The Tabs configuration\n * @returns The provider\n */\nexport function provideTabsConfig(config: Partial<NgpTabsConfig>): Provider[] {\n  return [\n    {\n      provide: NgpTabsConfigToken,\n      useValue: { ...defaultTabsConfig, ...config },\n    },\n  ];\n}\n\n/**\n * Inject the Tabs configuration\n * @returns The global Tabs configuration\n */\nexport function injectTabsConfig(): NgpTabsConfig {\n  return inject(NgpTabsConfigToken, { optional: true }) ?? defaultTabsConfig;\n}\n","import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpTabset } from './tabset';\n\n/**\n * The state token  for the Tabset primitive.\n */\nexport const NgpTabsetStateToken = createStateToken<NgpTabset>('Tabset');\n\n/**\n * Provides the Tabset state.\n */\nexport const provideTabsetState = createStateProvider(NgpTabsetStateToken);\n\n/**\n * Injects the Tabset state.\n */\nexport const injectTabsetState = createStateInjector(NgpTabsetStateToken);\n\n/**\n * The Tabset state registration function.\n */\nexport const tabsetState = createState(NgpTabsetStateToken);\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { Directive, HostListener, OnInit, booleanAttribute, computed, input } from '@angular/core';\nimport { setupInteractions } from 'ng-primitives/internal';\nimport { NgpRovingFocusItem } from 'ng-primitives/roving-focus';\nimport { injectTabsetState } from '../tabset/tabset-state';\n\n/**\n * 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.\n */\n@Directive({\n  selector: '[ngpTabButton]',\n  exportAs: 'ngpTabButton',\n  host: {\n    role: 'tab',\n    '[attr.id]': 'buttonId()',\n    '[attr.aria-controls]': 'ariaControls()',\n    '[attr.data-active]': 'active() ? \"\" : null',\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\n    '[attr.data-orientation]': 'state().orientation()',\n  },\n  hostDirectives: [NgpRovingFocusItem],\n})\nexport class NgpTabButton implements OnInit {\n  /**\n   * Access the tabset state\n   */\n  protected readonly state = injectTabsetState();\n\n  /**\n   * The value of the tab this trigger controls\n   */\n  readonly value = input<string>(undefined, { alias: 'ngpTabButtonValue' });\n\n  /**\n   * Whether the tab is disabled\n   * @default false\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    alias: 'ngpTabButtonDisabled',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Determine the id of the tab button\n   * @internal\n   */\n  readonly id = input<string>();\n\n  /**\n   * Determine a unique id for the tab button if not provided\n   * @internal\n   */\n  readonly buttonId = computed(() => this.id() ?? `${this.state().id()}-button-${this.value()}`);\n\n  /**\n   * Determine the aria-controls of the tab button\n   * @internal\n   */\n  readonly ariaControls = computed(() => `${this.state().id()}-panel-${this.value()}`);\n\n  /**\n   * Whether the tab is active\n   */\n  readonly active = computed(() => this.state().selectedTab() === this.value());\n\n  constructor() {\n    setupInteractions({\n      hover: true,\n      press: true,\n      focusVisible: true,\n      disabled: this.disabled,\n    });\n  }\n\n  ngOnInit(): void {\n    if (this.value() === undefined) {\n      throw new Error('ngpTabButton: value is required');\n    }\n  }\n\n  /**\n   * Select the tab this trigger controls\n   */\n  @HostListener('click')\n  select(): void {\n    this.state().select(this.value()!);\n  }\n\n  /**\n   * On focus select the tab this trigger controls if activateOnFocus is true\n   */\n  @HostListener('focus')\n  protected activateOnFocus(): void {\n    if (this.state().activateOnFocus()) {\n      this.select();\n    }\n  }\n}\n","import { Directive } from '@angular/core';\nimport { injectTabsetState } from '../tabset/tabset-state';\n\n/**\n * Apply the `ngpTabList` directive to an element that represents the list of tab buttons.\n */\n@Directive({\n  selector: '[ngpTabList]',\n  exportAs: 'ngpTabList',\n  host: {\n    role: 'tablist',\n    '[attr.aria-orientation]': 'state().orientation()',\n    '[attr.data-orientation]': 'state().orientation()',\n  },\n})\nexport class NgpTabList {\n  /**\n   * Access the tabset state\n   */\n  protected readonly state = injectTabsetState();\n}\n","import { InjectionToken, inject } from '@angular/core';\nimport type { NgpTabPanel } from './tab-panel';\n\nexport const NgpTabPanelToken = new InjectionToken<NgpTabPanel>('NgpTabPanelToken');\n\n/**\n * Inject the TabPanel directive instance\n * @returns The TabPanel directive instance\n */\nexport function injectTabPanel(): NgpTabPanel {\n  return inject(NgpTabPanelToken);\n}\n","import { Directive, OnDestroy, OnInit, computed, input } from '@angular/core';\nimport { injectTabsetState } from '../tabset/tabset-state';\nimport { NgpTabPanelToken } from './tab-panel-token';\n\n/**\n * Apply the `ngpTabPanel` directive to an element that represents the content of a tab.\n */\n@Directive({\n  selector: '[ngpTabPanel]',\n  exportAs: 'ngpTabPanel',\n  providers: [{ provide: NgpTabPanelToken, useExisting: NgpTabPanel }],\n  host: {\n    role: 'tabpanel',\n    tabIndex: '0',\n    '[id]': 'panelId()',\n    '[attr.aria-labelledby]': 'labelledBy()',\n    '[attr.data-active]': 'active() ? \"\" : null',\n    '[attr.data-orientation]': 'state().orientation()',\n  },\n})\nexport class NgpTabPanel implements OnInit, OnDestroy {\n  /**\n   * Access the tabset\n   */\n  protected readonly state = injectTabsetState();\n\n  /**\n   * The value of the tab\n   */\n  readonly value = input<string>(undefined, { alias: 'ngpTabPanelValue' });\n\n  /**\n   * Determine the id of the tab panel\n   * @internal\n   */\n  readonly id = input<string>();\n\n  /**\n   * Determine a unique id for the tab panel if not provided\n   * @internal\n   */\n  protected readonly panelId = computed(\n    () => this.id() ?? `${this.state().id()}-panel-${this.value()}`,\n  );\n\n  /**\n   * Determine the aria-labelledby of the tab panel\n   * @internal\n   */\n  protected readonly labelledBy = computed(() => `${this.state().id()}-button-${this.value()}`);\n\n  /**\n   * Whether the tab is active\n   */\n  protected readonly active = computed(() => this.state().selectedTab() === this.value());\n\n  ngOnInit(): void {\n    this.state().registerTab(this);\n\n    if (this.value() === undefined) {\n      throw new Error('ngpTabPanel: value is required');\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.state().unregisterTab(this);\n  }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, computed, Directive, input, output, signal } from '@angular/core';\nimport { NgpOrientation } from 'ng-primitives/common';\nimport { syncState } from 'ng-primitives/internal';\nimport { injectRovingFocusGroupState, NgpRovingFocusGroup } from 'ng-primitives/roving-focus';\nimport { uniqueId } from 'ng-primitives/utils';\nimport { injectTabsConfig } from '../config/tabs-config';\nimport type { NgpTabPanel } from '../tab-panel/tab-panel';\nimport { provideTabsetState, tabsetState } from './tabset-state';\n\n/**\n * Apply the `ngpTabset` directive to an element to manage the tabs.\n */\n@Directive({\n  selector: '[ngpTabset]',\n  exportAs: 'ngpTabset',\n  providers: [provideTabsetState()],\n  hostDirectives: [NgpRovingFocusGroup],\n  host: {\n    '[attr.id]': 'state.id()',\n    '[attr.data-orientation]': 'state.orientation()',\n  },\n})\nexport class NgpTabset {\n  /**\n   * Access the global tabset configuration\n   */\n  private readonly config = injectTabsConfig();\n\n  /**\n   * Access the roving focus group state\n   */\n  private readonly rovingFocusGroupState = injectRovingFocusGroupState();\n\n  /**\n   * Define the id for the tabset\n   */\n  readonly id = input<string>(uniqueId('ngp-tabset'));\n\n  /**\n   * Define the active tab\n   */\n  readonly value = input<string>(undefined, {\n    alias: 'ngpTabsetValue',\n  });\n\n  /**\n   * Emit the value of the selected tab when it changes\n   */\n  readonly valueChange = output<string | undefined>({\n    alias: 'ngpTabsetValueChange',\n  });\n\n  /**\n   * The orientation of the tabset\n   * @default 'horizontal'\n   */\n  readonly orientation = input<NgpOrientation>(this.config.orientation, {\n    alias: 'ngpTabsetOrientation',\n  });\n\n  /**\n   * Whether tabs should activate on focus\n   */\n  readonly activateOnFocus = input<boolean, BooleanInput>(this.config.activateOnFocus, {\n    alias: 'ngpTabsetActivateOnFocus',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Access the tabs within the tabset\n   * @internal\n   */\n  readonly panels = signal<NgpTabPanel[]>([]);\n\n  /**\n   * @internal\n   * Get the id of the selected tab\n   */\n  readonly selectedTab = computed(() => {\n    const panels = this.panels();\n\n    // if there is a value set and a tab with that value exists, return the value\n    if (panels.some(panel => panel.value() === this.state.value())) {\n      return this.state.value();\n    }\n\n    // otherwise return the first tab\n    return panels[0]?.value();\n  });\n\n  /**\n   * The state of the tabset\n   */\n  protected readonly state = tabsetState<NgpTabset>(this);\n\n  constructor() {\n    syncState(this.state.orientation, this.rovingFocusGroupState().orientation);\n  }\n\n  /**\n   * Select a tab by its value\n   * @param value The value of the tab to select\n   */\n  select(value: string): void {\n    // if the value is already selected, do nothing\n    if (this.state.value() === value) {\n      return;\n    }\n\n    this.state.value.set(value);\n    this.valueChange.emit(value);\n  }\n\n  /**\n   * @internal\n   * Register a tab with the tabset\n   */\n  registerTab(tab: NgpTabPanel): void {\n    this.panels.update(panels => [...panels, tab]);\n  }\n\n  /**\n   * @internal\n   * Unregister a tab with the tabset\n   */\n  unregisterTab(tab: NgpTabPanel): void {\n    this.panels.update(panels => panels.filter(panel => panel !== tab));\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-toggle-group.mjs

@@ -3,6 +3,7 @@ import { InjectionToken, inject, input, booleanAttribute, computed, Directive, o
 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 { syncState } from 'ng-primitives/internal';
 
 const defaultToggleGroupConfig = {
     orientation: 'horizontal',
@@ -174,7 +175,7 @@ class NgpToggleGroup {
         this.state = toggleGroupState(this);
         // the roving focus group defaults to vertical orientation whereas
         // the default for the toggle group may be different if provided via global config
-        this.rovingFocusGroupState().orientation.set(this.state.orientation());
+        syncState(this.state.orientation, this.rovingFocusGroupState().orientation);
     }
     /**
      * Select a value in the toggle group.
@@ -221,7 +222,7 @@ class NgpToggleGroup {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpToggleGroup, isStandalone: true, selector: "[ngpToggleGroup]", inputs: { orientation: { classPropertyName: "orientation", publicName: "ngpToggleGroupOrientation", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "ngpToggleGroupType", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpToggleGroupValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpToggleGroupDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpToggleGroupValueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-orientation": "state.orientation()", "attr.data-orientation": "state.orientation()", "attr.data-type": "state.type()", "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [provideToggleGroupState()], exportAs: ["ngpToggleGroup"], hostDirectives: [{ directive: i1.NgpRovingFocusGroup, inputs: ["ngpRovingFocusGroupOrientation", "ngpToggleGroupOrientation"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpToggleGroup, isStandalone: true, selector: "[ngpToggleGroup]", inputs: { orientation: { classPropertyName: "orientation", publicName: "ngpToggleGroupOrientation", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "ngpToggleGroupType", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpToggleGroupValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpToggleGroupDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpToggleGroupValueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.data-orientation": "state.orientation()", "attr.data-type": "state.type()", "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [provideToggleGroupState()], exportAs: ["ngpToggleGroup"], hostDirectives: [{ directive: i1.NgpRovingFocusGroup }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpToggleGroup, decorators: [{
             type: Directive,
@@ -229,15 +230,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                     selector: '[ngpToggleGroup]',
                     exportAs: 'ngpToggleGroup',
                     providers: [provideToggleGroupState()],
-                    hostDirectives: [
-                        {
-                            directive: NgpRovingFocusGroup,
-                            inputs: ['ngpRovingFocusGroupOrientation:ngpToggleGroupOrientation'],
-                        },
-                    ],
+                    hostDirectives: [NgpRovingFocusGroup],
                     host: {
                         role: 'group',
-                        '[attr.aria-orientation]': 'state.orientation()',
                         '[attr.data-orientation]': 'state.orientation()',
                         '[attr.data-type]': 'state.type()',
                         '[attr.data-disabled]': 'state.disabled() ? "" : null',