ng-primitives 0.89.0 → 0.91.0

package/fesm2022/ng-primitives-toggle.mjs

@@ -1,41 +1,79 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, output, HostListener, Directive } from '@angular/core';
-import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { signal, computed, input, booleanAttribute, output, Directive } from '@angular/core';
+import { ngpInteractions } from 'ng-primitives/interactions';
+import { injectElementRef } from 'ng-primitives/internal';
+import { createPrimitive, controlled, attrBinding, dataBinding, listener, deprecatedSetter } from 'ng-primitives/state';
+import { Subject } from 'rxjs';
 
-/**
- * The state token  for the Toggle primitive.
- */
-const NgpToggleStateToken = createStateToken('Toggle');
-/**
- * Provides the Toggle state.
- */
-const provideToggleState = createStateProvider(NgpToggleStateToken);
-/**
- * Injects the Toggle state.
- */
-const injectToggleState = createStateInjector(NgpToggleStateToken);
-/**
- * The Toggle state registration function.
- */
-const toggleState = createState(NgpToggleStateToken);
+const [NgpToggleStateToken, ngpToggle, injectToggleState, provideToggleState] = createPrimitive('NgpToggle', ({ selected: _selected = signal(false), disabled: _disabled = signal(false), onSelectedChange, }) => {
+    const element = injectElementRef();
+    const selected = controlled(_selected);
+    const disabled = controlled(_disabled);
+    const isButton = element.nativeElement.tagName.toLowerCase() === 'button';
+    const selectedChange = new Subject();
+    ngpInteractions({
+        hover: true,
+        press: true,
+        focusVisible: true,
+        disabled,
+    });
+    const tabindex = computed(() => (disabled() ? -1 : 0), ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    // Host bindings
+    attrBinding(element, 'type', () => (isButton ? 'button' : null));
+    attrBinding(element, 'aria-pressed', selected);
+    dataBinding(element, 'data-selected', selected);
+    dataBinding(element, 'data-disabled', disabled);
+    attrBinding(element, 'aria-disabled', disabled);
+    attrBinding(element, 'tabindex', () => tabindex().toString());
+    // Listeners
+    listener(element, 'click', event => toggle(event));
+    listener(element, 'keydown', (event) => {
+        if (event.key === ' ' || event.key === 'Spacebar') {
+            if (!isButton && element.nativeElement.tagName !== 'a') {
+                event.preventDefault();
+                toggle(event);
+            }
+        }
+    });
+    function toggle(event) {
+        if (disabled()) {
+            return;
+        }
+        event?.preventDefault?.();
+        setSelected(!selected());
+    }
+    function setSelected(value) {
+        selected.set(value);
+        onSelectedChange?.(value);
+        selectedChange.next(value);
+    }
+    function setDisabled(value) {
+        disabled.set(value);
+    }
+    return {
+        selected: deprecatedSetter(selected, 'setSelected'),
+        disabled: deprecatedSetter(disabled, 'setDisabled'),
+        selectedChange,
+        toggle,
+        setSelected,
+        setDisabled,
+    };
+});
 
 /**
  * Apply the `ngpToggle` directive to an element to manage the toggle state. This must be applied to a `button` element.
  */
 class NgpToggle {
     constructor() {
-        /**
-         * Access the element.
-         */
-        this.element = inject(ElementRef);
         /**
          * Whether the toggle is selected.
          * @default false
          */
-        this.selected = input(false, {
-            alias: 'ngpToggleSelected',
-            transform: booleanAttribute,
-        });
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", alias: 'ngpToggleSelected',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpToggleSelected',
+                transform: booleanAttribute,
+            }]));
         /**
          * Emits when the selected state changes.
          */
@@ -46,67 +84,42 @@ class NgpToggle {
          * Whether the toggle is disabled.
          * @default false
          */
-        this.disabled = input(false, {
-            alias: 'ngpToggleDisabled',
-            transform: booleanAttribute,
-        });
-        /**
-         * Determine if the element is a button.
-         */
-        this.isButton = this.element.nativeElement.tagName === 'BUTTON';
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpToggleDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpToggleDisabled',
+                transform: booleanAttribute,
+            }]));
         /**
          * The state for the toggle primitive.
          * @internal
          */
-        this.state = toggleState(this);
+        this.state = ngpToggle({
+            selected: this.selected,
+            disabled: this.disabled,
+            onSelectedChange: value => this.selectedChange.emit(value),
+        });
     }
     /**
      * Toggle the selected state.
      */
     toggle() {
-        if (this.state.disabled()) {
-            return;
-        }
-        const isSelected = !this.state.selected();
-        this.state.selected.set(isSelected);
-        this.selectedChange.emit(isSelected);
-    }
-    /**
-     * If the element is not a button or a link the space key should toggle the selected state.
-     */
-    onKeyDown(event) {
-        if (!this.isButton && this.element.nativeElement.tagName !== 'A') {
-            event.preventDefault();
-            this.toggle();
-        }
+        this.state.toggle();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpToggle, isStandalone: true, selector: "[ngpToggle]", inputs: { selected: { classPropertyName: "selected", publicName: "ngpToggleSelected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpToggleDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "ngpToggleSelectedChange" }, host: { listeners: { "click": "toggle()", "keydown.space": "onKeyDown($event)" }, properties: { "attr.type": "isButton ? \"button\" : null", "attr.aria-pressed": "state.selected()", "attr.data-selected": "state.selected() ? \"\" : null", "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [provideToggleState()], exportAs: ["ngpToggle"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpToggle, isStandalone: true, selector: "[ngpToggle]", inputs: { selected: { classPropertyName: "selected", publicName: "ngpToggleSelected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpToggleDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "ngpToggleSelectedChange" }, providers: [provideToggleState({ inherit: false })], exportAs: ["ngpToggle"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpToggle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpToggle]',
                     exportAs: 'ngpToggle',
-                    providers: [provideToggleState()],
-                    host: {
-                        '[attr.type]': 'isButton ? "button" : null',
-                        '[attr.aria-pressed]': 'state.selected()',
-                        '[attr.data-selected]': 'state.selected() ? "" : null',
-                        '[attr.data-disabled]': 'state.disabled() ? "" : null',
-                    },
+                    providers: [provideToggleState({ inherit: false })],
                 }]
-        }], propDecorators: { toggle: [{
-                type: HostListener,
-                args: ['click']
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown.space', ['$event']]
-            }] } });
+        }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpToggleSelected", required: false }] }], selectedChange: [{ type: i0.Output, args: ["ngpToggleSelectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpToggleDisabled", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpToggle, injectToggleState, provideToggleState };
+export { NgpToggle, injectToggleState, ngpToggle, provideToggleState };
 //# sourceMappingURL=ng-primitives-toggle.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-toggle.mjs","sources":["../../../../packages/ng-primitives/toggle/src/toggle/toggle-state.ts","../../../../packages/ng-primitives/toggle/src/toggle/toggle.ts","../../../../packages/ng-primitives/toggle/src/ng-primitives-toggle.ts"],"sourcesContent":["import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpToggle } from './toggle';\n\n/**\n * The state token  for the Toggle primitive.\n */\nexport const NgpToggleStateToken = createStateToken<NgpToggle>('Toggle');\n\n/**\n * Provides the Toggle state.\n */\nexport const provideToggleState = createStateProvider(NgpToggleStateToken);\n\n/**\n * Injects the Toggle state.\n */\nexport const injectToggleState = createStateInjector<NgpToggle>(NgpToggleStateToken);\n\n/**\n * The Toggle state registration function.\n */\nexport const toggleState = createState(NgpToggleStateToken);\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n  Directive,\n  ElementRef,\n  HostListener,\n  booleanAttribute,\n  inject,\n  input,\n  output,\n} from '@angular/core';\nimport { provideToggleState, toggleState } from './toggle-state';\n\n/**\n * Apply the `ngpToggle` directive to an element to manage the toggle state. This must be applied to a `button` element.\n */\n@Directive({\n  selector: '[ngpToggle]',\n  exportAs: 'ngpToggle',\n  providers: [provideToggleState()],\n  host: {\n    '[attr.type]': 'isButton ? \"button\" : null',\n    '[attr.aria-pressed]': 'state.selected()',\n    '[attr.data-selected]': 'state.selected() ? \"\" : null',\n    '[attr.data-disabled]': 'state.disabled() ? \"\" : null',\n  },\n})\nexport class NgpToggle {\n  /**\n   * Access the element.\n   */\n  private readonly element = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /**\n   * Whether the toggle is selected.\n   * @default false\n   */\n  readonly selected = input<boolean, BooleanInput>(false, {\n    alias: 'ngpToggleSelected',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Emits when the selected state changes.\n   */\n  readonly selectedChange = output<boolean>({\n    alias: 'ngpToggleSelectedChange',\n  });\n\n  /**\n   * Whether the toggle is disabled.\n   * @default false\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    alias: 'ngpToggleDisabled',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Determine if the element is a button.\n   */\n  protected isButton = this.element.nativeElement.tagName === 'BUTTON';\n\n  /**\n   * The state for the toggle primitive.\n   * @internal\n   */\n  protected readonly state = toggleState<NgpToggle>(this);\n\n  /**\n   * Toggle the selected state.\n   */\n  @HostListener('click')\n  toggle(): void {\n    if (this.state.disabled()) {\n      return;\n    }\n\n    const isSelected = !this.state.selected();\n\n    this.state.selected.set(isSelected);\n    this.selectedChange.emit(isSelected);\n  }\n\n  /**\n   * If the element is not a button or a link the space key should toggle the selected state.\n   */\n  @HostListener('keydown.space', ['$event'])\n  protected onKeyDown(event: KeyboardEvent): void {\n    if (!this.isButton && this.element.nativeElement.tagName !== 'A') {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-primitives-toggle.mjs","sources":["../../../../packages/ng-primitives/toggle/src/toggle/toggle-state.ts","../../../../packages/ng-primitives/toggle/src/toggle/toggle.ts","../../../../packages/ng-primitives/toggle/src/ng-primitives-toggle.ts"],"sourcesContent":["import { computed, Signal, signal, WritableSignal } from '@angular/core';\nimport { ngpInteractions } from 'ng-primitives/interactions';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport {\n  attrBinding,\n  controlled,\n  createPrimitive,\n  dataBinding,\n  deprecatedSetter,\n  listener,\n} from 'ng-primitives/state';\nimport { Subject } from 'rxjs';\n\n/**\n * Public state surface for the Toggle primitive.\n */\nexport interface NgpToggleState {\n  /**\n   * Whether the toggle is selected.\n   */\n  readonly selected: WritableSignal<boolean>;\n  /**\n   * Whether the toggle is disabled.\n   */\n  readonly disabled: WritableSignal<boolean>;\n  /**\n   * Emits when the selected state changes.\n   */\n  readonly selectedChange: Subject<boolean>;\n  /**\n   * Toggle the selected state.\n   */\n  toggle(event?: Event): void;\n  /**\n   * Set the selected state.\n   */\n  setSelected(value: boolean): void;\n  /**\n   * Set the disabled state.\n   */\n  setDisabled(value: boolean): void;\n}\n\n/**\n * Inputs for configuring the Toggle primitive.\n */\nexport interface NgpToggleProps {\n  /**\n   * Whether the toggle is selected.\n   */\n  readonly selected?: Signal<boolean>;\n  /**\n   * Whether the toggle is disabled.\n   */\n  readonly disabled?: Signal<boolean>;\n  /**\n   * Callback fired when the selected state changes.\n   */\n  readonly onSelectedChange?: (selected: boolean) => void;\n}\n\nexport const [NgpToggleStateToken, ngpToggle, injectToggleState, provideToggleState] =\n  createPrimitive(\n    'NgpToggle',\n    ({\n      selected: _selected = signal(false),\n      disabled: _disabled = signal(false),\n      onSelectedChange,\n    }: NgpToggleProps): NgpToggleState => {\n      const element = injectElementRef<HTMLElement>();\n      const selected = controlled(_selected);\n      const disabled = controlled(_disabled);\n      const isButton = element.nativeElement.tagName.toLowerCase() === 'button';\n\n      const selectedChange = new Subject<boolean>();\n\n      ngpInteractions({\n        hover: true,\n        press: true,\n        focusVisible: true,\n        disabled,\n      });\n\n      const tabindex = computed(() => (disabled() ? -1 : 0));\n\n      // Host bindings\n      attrBinding(element, 'type', () => (isButton ? 'button' : null));\n      attrBinding(element, 'aria-pressed', selected);\n      dataBinding(element, 'data-selected', selected);\n      dataBinding(element, 'data-disabled', disabled);\n      attrBinding(element, 'aria-disabled', disabled);\n      attrBinding(element, 'tabindex', () => tabindex().toString());\n\n      // Listeners\n      listener(element, 'click', event => toggle(event));\n      listener(element, 'keydown', (event: KeyboardEvent) => {\n        if (event.key === ' ' || event.key === 'Spacebar') {\n          if (!isButton && element.nativeElement.tagName !== 'a') {\n            event.preventDefault();\n            toggle(event);\n          }\n        }\n      });\n\n      function toggle(event?: Event): void {\n        if (disabled()) {\n          return;\n        }\n\n        event?.preventDefault?.();\n        setSelected(!selected());\n      }\n\n      function setSelected(value: boolean): void {\n        selected.set(value);\n        onSelectedChange?.(value);\n        selectedChange.next(value);\n      }\n\n      function setDisabled(value: boolean): void {\n        disabled.set(value);\n      }\n\n      return {\n        selected: deprecatedSetter(selected, 'setSelected'),\n        disabled: deprecatedSetter(disabled, 'setDisabled'),\n        selectedChange,\n        toggle,\n        setSelected,\n        setDisabled,\n      };\n    },\n  );\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Directive, input, output } from '@angular/core';\nimport { provideToggleState, ngpToggle } from './toggle-state';\n\n/**\n * Apply the `ngpToggle` directive to an element to manage the toggle state. This must be applied to a `button` element.\n */\n@Directive({\n  selector: '[ngpToggle]',\n  exportAs: 'ngpToggle',\n  providers: [provideToggleState({ inherit: false })],\n})\nexport class NgpToggle {\n  /**\n   * Whether the toggle is selected.\n   * @default false\n   */\n  readonly selected = input<boolean, BooleanInput>(false, {\n    alias: 'ngpToggleSelected',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Emits when the selected state changes.\n   */\n  readonly selectedChange = output<boolean>({\n    alias: 'ngpToggleSelectedChange',\n  });\n\n  /**\n   * Whether the toggle is disabled.\n   * @default false\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    alias: 'ngpToggleDisabled',\n    transform: booleanAttribute,\n  });\n\n  /**\n   * The state for the toggle primitive.\n   * @internal\n   */\n  protected readonly state = ngpToggle({\n    selected: this.selected,\n    disabled: this.disabled,\n    onSelectedChange: value => this.selectedChange.emit(value),\n  });\n\n  /**\n   * Toggle the selected state.\n   */\n  toggle(): void {\n    this.state.toggle();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-primitives-toolbar.mjs

@@ -1,62 +1,53 @@
 import * as i0 from '@angular/core';
 import { input, Directive } from '@angular/core';
-import { explicitEffect } from 'ng-primitives/internal';
-import * as i1 from 'ng-primitives/roving-focus';
-import { injectRovingFocusGroupState, NgpRovingFocusGroup } from 'ng-primitives/roving-focus';
-import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { ngpRovingFocusGroup, provideRovingFocusGroupState } from 'ng-primitives/roving-focus';
+import { injectElementRef } from 'ng-primitives/internal';
+import { createPrimitive, controlled, attrBinding, dataBinding, deprecatedSetter } from 'ng-primitives/state';
 
-/**
- * The state token  for the Toolbar primitive.
- */
-const NgpToolbarStateToken = createStateToken('Toolbar');
-/**
- * Provides the Toolbar state.
- */
-const provideToolbarState = createStateProvider(NgpToolbarStateToken);
-/**
- * Injects the Toolbar state.
- */
-const injectToolbarState = createStateInjector(NgpToolbarStateToken);
-/**
- * The Toolbar state registration function.
- */
-const toolbarState = createState(NgpToolbarStateToken);
+const [NgpToolbarStateToken, ngpToolbar, injectToolbarState, provideToolbarState] = createPrimitive('NgpToolbar', ({ rovingFocusGroup, orientation: _orientation }) => {
+    const element = injectElementRef();
+    const orientation = controlled(_orientation);
+    // Setup host attribute bindings
+    attrBinding(element, 'role', () => 'toolbar');
+    attrBinding(element, 'aria-orientation', () => orientation());
+    dataBinding(element, 'data-orientation', orientation);
+    function setOrientation(value) {
+        orientation.set(value);
+        rovingFocusGroup.setOrientation(value);
+    }
+    return {
+        orientation: deprecatedSetter(orientation, 'setOrientation'),
+        setOrientation,
+    };
+});
 
 class NgpToolbar {
     constructor() {
-        /**
-         * Access the roving focus group state.
-         */
-        this.rovingFocusGroup = injectRovingFocusGroupState();
         /**
          * The orientation of the toolbar.
          */
-        this.orientation = input('horizontal', {
-            alias: 'ngpToolbarOrientation',
-        });
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation", alias: 'ngpToolbarOrientation' }] : [{
+                alias: 'ngpToolbarOrientation',
+            }]));
         /**
          * The toolbar state.
          */
-        this.state = toolbarState(this);
-        explicitEffect([this.state.orientation], ([orientation]) => this.rovingFocusGroup().orientation.set(orientation));
+        this.state = ngpToolbar({
+            rovingFocusGroup: ngpRovingFocusGroup({ orientation: this.orientation }),
+            orientation: this.orientation,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpToolbar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpToolbar, isStandalone: true, selector: "[ngpToolbar]", inputs: { orientation: { classPropertyName: "orientation", publicName: "ngpToolbarOrientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar" }, properties: { "attr.aria-orientation": "state.orientation()", "attr.data-orientation": "state.orientation()" } }, providers: [provideToolbarState()], exportAs: ["ngpToolbar"], hostDirectives: [{ directive: i1.NgpRovingFocusGroup }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpToolbar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpToolbar, isStandalone: true, selector: "[ngpToolbar]", inputs: { orientation: { classPropertyName: "orientation", publicName: "ngpToolbarOrientation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideToolbarState(), provideRovingFocusGroupState()], exportAs: ["ngpToolbar"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpToolbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpToolbar, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpToolbar]',
                     exportAs: 'ngpToolbar',
-                    providers: [provideToolbarState()],
-                    hostDirectives: [NgpRovingFocusGroup],
-                    host: {
-                        role: 'toolbar',
-                        '[attr.aria-orientation]': 'state.orientation()',
-                        '[attr.data-orientation]': 'state.orientation()',
-                    },
+                    providers: [provideToolbarState(), provideRovingFocusGroupState()],
                 }]
-        }], ctorParameters: () => [] });
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpToolbarOrientation", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-toolbar.mjs","sources":["../../../../packages/ng-primitives/toolbar/src/toolbar/toolbar-state.ts","../../../../packages/ng-primitives/toolbar/src/toolbar/toolbar.ts","../../../../packages/ng-primitives/toolbar/src/ng-primitives-toolbar.ts"],"sourcesContent":["import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpToolbar } from './toolbar';\n\n/**\n * The state token  for the Toolbar primitive.\n */\nexport const NgpToolbarStateToken = createStateToken<NgpToolbar>('Toolbar');\n\n/**\n * Provides the Toolbar state.\n */\nexport const provideToolbarState = createStateProvider(NgpToolbarStateToken);\n\n/**\n * Injects the Toolbar state.\n */\nexport const injectToolbarState = createStateInjector<NgpToolbar>(NgpToolbarStateToken);\n\n/**\n * The Toolbar state registration function.\n */\nexport const toolbarState = createState(NgpToolbarStateToken);\n","import { Directive, input } from '@angular/core';\nimport { NgpOrientation } from 'ng-primitives/common';\nimport { explicitEffect } from 'ng-primitives/internal';\nimport { injectRovingFocusGroupState, NgpRovingFocusGroup } from 'ng-primitives/roving-focus';\nimport { provideToolbarState, toolbarState } from './toolbar-state';\n\n@Directive({\n  selector: '[ngpToolbar]',\n  exportAs: 'ngpToolbar',\n  providers: [provideToolbarState()],\n  hostDirectives: [NgpRovingFocusGroup],\n  host: {\n    role: 'toolbar',\n    '[attr.aria-orientation]': 'state.orientation()',\n    '[attr.data-orientation]': 'state.orientation()',\n  },\n})\nexport class NgpToolbar {\n  /**\n   * Access the roving focus group state.\n   */\n  private readonly rovingFocusGroup = injectRovingFocusGroupState();\n\n  /**\n   * The orientation of the toolbar.\n   */\n  readonly orientation = input<NgpOrientation>('horizontal', {\n    alias: 'ngpToolbarOrientation',\n  });\n\n  /**\n   * The toolbar state.\n   */\n  protected readonly state = toolbarState<NgpToolbar>(this);\n\n  constructor() {\n    explicitEffect([this.state.orientation], ([orientation]) =>\n      this.rovingFocusGroup().orientation.set(orientation),\n    );\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAQA;;AAEG;AACI,MAAM,oBAAoB,GAAG,gBAAgB,CAAa,SAAS,CAAC;AAE3E;;AAEG;MACU,mBAAmB,GAAG,mBAAmB,CAAC,oBAAoB;AAE3E;;AAEG;MACU,kBAAkB,GAAG,mBAAmB,CAAa,oBAAoB;AAEtF;;AAEG;AACI,MAAM,YAAY,GAAG,WAAW,CAAC,oBAAoB,CAAC;;MCThD,UAAU,CAAA;AAkBrB,IAAA,WAAA,GAAA;AAjBA;;AAEG;QACc,IAAA,CAAA,gBAAgB,GAAG,2BAA2B,EAAE;AAEjE;;AAEG;AACM,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAiB,YAAY,EAAE;AACzD,YAAA,KAAK,EAAE,uBAAuB;AAC/B,SAAA,CAAC;AAEF;;AAEG;AACgB,QAAA,IAAA,CAAA,KAAK,GAAG,YAAY,CAAa,IAAI,CAAC;AAGvD,QAAA,cAAc,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,KACrD,IAAI,CAAC,gBAAgB,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CACrD;IACH;+GAtBW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAV,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,SAAA,EAAA,EAAA,UAAA,EAAA,EAAA,uBAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,SAAA,EARV,CAAC,mBAAmB,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAQvB,UAAU,EAAA,UAAA,EAAA,CAAA;kBAXtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,SAAS,EAAE,CAAC,mBAAmB,EAAE,CAAC;oBAClC,cAAc,EAAE,CAAC,mBAAmB,CAAC;AACrC,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,SAAS;AACf,wBAAA,yBAAyB,EAAE,qBAAqB;AAChD,wBAAA,yBAAyB,EAAE,qBAAqB;AACjD,qBAAA;AACF,iBAAA;;;AChBD;;AAEG;;;;"}
+{"version":3,"file":"ng-primitives-toolbar.mjs","sources":["../../../../packages/ng-primitives/toolbar/src/toolbar/toolbar-state.ts","../../../../packages/ng-primitives/toolbar/src/toolbar/toolbar.ts","../../../../packages/ng-primitives/toolbar/src/ng-primitives-toolbar.ts"],"sourcesContent":["import { Signal, WritableSignal } from '@angular/core';\nimport { NgpOrientation } from 'ng-primitives/common';\nimport { injectElementRef } from 'ng-primitives/internal';\nimport { NgpRovingFocusGroupState } from 'ng-primitives/roving-focus';\nimport {\n  attrBinding,\n  controlled,\n  createPrimitive,\n  dataBinding,\n  deprecatedSetter,\n} from 'ng-primitives/state';\n\nexport interface NgpToolbarState {\n  orientation: WritableSignal<NgpOrientation>;\n  setOrientation(value: NgpOrientation): void;\n}\n\nexport interface NgpToolbarProps {\n  rovingFocusGroup: NgpRovingFocusGroupState;\n  orientation: Signal<NgpOrientation>;\n}\n\nexport const [NgpToolbarStateToken, ngpToolbar, injectToolbarState, provideToolbarState] =\n  createPrimitive(\n    'NgpToolbar',\n    ({ rovingFocusGroup, orientation: _orientation }: NgpToolbarProps) => {\n      const element = injectElementRef();\n      const orientation = controlled(_orientation);\n\n      // Setup host attribute bindings\n      attrBinding(element, 'role', () => 'toolbar');\n      attrBinding(element, 'aria-orientation', () => orientation());\n      dataBinding(element, 'data-orientation', orientation);\n\n      function setOrientation(value: NgpOrientation) {\n        orientation.set(value);\n        rovingFocusGroup.setOrientation(value);\n      }\n\n      return {\n        orientation: deprecatedSetter(orientation, 'setOrientation'),\n        setOrientation,\n      };\n    },\n  );\n","import { Directive, input } from '@angular/core';\nimport { NgpOrientation } from 'ng-primitives/common';\nimport { ngpRovingFocusGroup, provideRovingFocusGroupState } from 'ng-primitives/roving-focus';\nimport { ngpToolbar, provideToolbarState } from './toolbar-state';\n\n@Directive({\n  selector: '[ngpToolbar]',\n  exportAs: 'ngpToolbar',\n  providers: [provideToolbarState(), provideRovingFocusGroupState()],\n})\nexport class NgpToolbar {\n  /**\n   * The orientation of the toolbar.\n   */\n  readonly orientation = input<NgpOrientation>('horizontal', {\n    alias: 'ngpToolbarOrientation',\n  });\n\n  /**\n   * The toolbar state.\n   */\n  protected readonly state = ngpToolbar({\n    rovingFocusGroup: ngpRovingFocusGroup({ orientation: this.orientation }),\n    orientation: this.orientation,\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAsBO,MAAM,CAAC,oBAAoB,EAAE,UAAU,EAAE,kBAAkB,EAAE,mBAAmB,CAAC,GACtF,eAAe,CACb,YAAY,EACZ,CAAC,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,EAAmB,KAAI;AACnE,IAAA,MAAM,OAAO,GAAG,gBAAgB,EAAE;AAClC,IAAA,MAAM,WAAW,GAAG,UAAU,CAAC,YAAY,CAAC;;IAG5C,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;IAC7C,WAAW,CAAC,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,EAAE,CAAC;AAC7D,IAAA,WAAW,CAAC,OAAO,EAAE,kBAAkB,EAAE,WAAW,CAAC;IAErD,SAAS,cAAc,CAAC,KAAqB,EAAA;AAC3C,QAAA,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;AACtB,QAAA,gBAAgB,CAAC,cAAc,CAAC,KAAK,CAAC;IACxC;IAEA,OAAO;AACL,QAAA,WAAW,EAAE,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC;QAC5D,cAAc;KACf;AACH,CAAC;;MCjCQ,UAAU,CAAA;AALvB,IAAA,WAAA,GAAA;AAME;;AAEG;QACM,IAAA,CAAA,WAAW,GAAG,KAAK,CAAiB,YAAY,+CACvD,KAAK,EAAE,uBAAuB,EAAA,CAAA,GAAA,CAD2B;AACzD,gBAAA,KAAK,EAAE,uBAAuB;AAC/B,aAAA,CAAA,CAAA,CAAC;AAEF;;AAEG;QACgB,IAAA,CAAA,KAAK,GAAG,UAAU,CAAC;YACpC,gBAAgB,EAAE,mBAAmB,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;YACxE,WAAW,EAAE,IAAI,CAAC,WAAW;AAC9B,SAAA,CAAC;AACH,IAAA;8GAfY,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAV,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,2NAFV,CAAC,mBAAmB,EAAE,EAAE,4BAA4B,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAEvD,UAAU,EAAA,UAAA,EAAA,CAAA;kBALtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,SAAS,EAAE,CAAC,mBAAmB,EAAE,EAAE,4BAA4B,EAAE,CAAC;AACnE,iBAAA;;;ACTD;;AAEG;;;;"}