@radix-ng/primitives 0.27.0 → 0.29.0

package/fesm2022/radix-ng-primitives-toggle-group.mjs

@@ -1,68 +1,68 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, booleanAttribute, Directive, Input, EventEmitter, ContentChildren } from '@angular/core';
-import { FocusKeyManager } from '@angular/cdk/a11y';
+import { InjectionToken, inject, input, booleanAttribute, computed, effect, Directive, model, output, signal, forwardRef } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/roving-focus';
+import { RdxRovingFocusItemDirective, RdxRovingFocusGroupDirective } from '@radix-ng/primitives/roving-focus';
+import * as i2 from '@radix-ng/primitives/toggle';
+import { RdxToggleDirective } from '@radix-ng/primitives/toggle';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 const RdxToggleGroupItemToken = new InjectionToken('RdxToggleGroupItemToken');
+function injectToggleGroupItem() {
+    return inject(RdxToggleGroupItemToken);
+}
 
 const RdxToggleGroupToken = new InjectionToken('RdxToggleGroupToken');
 function injectToggleGroup() {
     return inject(RdxToggleGroupToken);
 }
 
+/**
+ * @group Components
+ */
 class RdxToggleGroupItemDirective {
     constructor() {
+        this.rdxToggleDirective = inject(RdxToggleDirective);
+        this.rdxRovingFocusItemDirective = inject(RdxRovingFocusItemDirective);
         /**
          * Access the toggle group.
          * @ignore
          */
-        this.toggleGroup = injectToggleGroup();
-        this.elementRef = inject(ElementRef);
+        this.rootContext = injectToggleGroup();
+        /**
+         * The value of this toggle button.
+         *
+         * @group Props
+         */
+        this.value = input.required();
         /**
          * Whether this toggle button is disabled.
-         * @default false
+         * @defaultValue false
+         * @group Props
          */
-        this.disabled = false;
-    }
-    /**
-     * Whether this toggle button is checked.
-     */
-    get checked() {
-        return this.toggleGroup.isSelected(this.value);
-    }
-    /**
-     * @ignore
-     */
-    ngOnChanges(changes) {
-        if ('disabled' in changes) {
-            // TODO
-        }
-    }
-    /**
-     * @ignore
-     */
-    focus() {
-        this.elementRef.nativeElement.focus();
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.isPressed = computed(() => {
+            return this.rootContext.type() === 'single'
+                ? this.rootContext.value() === this.value()
+                : this.rootContext.value()?.includes(this.value());
+        });
+        this.isDisabled = computed(() => this.rootContext.disabled() || this.disabled());
+        effect(() => {
+            this.rdxToggleDirective.pressed.set(!!this.isPressed());
+            this.rdxToggleDirective.disabledModel.set(this.isDisabled());
+            this.rdxRovingFocusItemDirective.active = !!this.isPressed();
+        });
     }
     /**
      * @ignore
      */
     toggle() {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
-        this.toggleGroup.toggle(this.value);
-    }
-    /**
-     * Ensure the disabled state is propagated to the roving focus item.
-     * @internal
-     * @ignore
-     */
-    updateDisabled() {
-        // TODO
+        this.rootContext.toggle(this.value());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.5", type: RdxToggleGroupItemDirective, isStandalone: true, selector: "[rdxToggleGroupItem]", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, host: { attributes: { "role": "radio" }, listeners: { "click": "toggle()", "focus": "focus()" }, properties: { "attr.aria-checked": "checked", "attr.aria-disabled": "disabled || toggleGroup.disabled", "attr.aria-pressed": "undefined", "attr.data-disabled": "disabled || toggleGroup.disabled", "attr.data-state": "checked ? \"on\" : \"off\"", "attr.data-orientation": "toggleGroup.orientation" } }, providers: [{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }], exportAs: ["rdxToggleGroupItem"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: RdxToggleGroupItemDirective, isStandalone: true, selector: "[rdxToggleGroupItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggle()" } }, providers: [{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }], exportAs: ["rdxToggleGroupItem"], hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective, inputs: ["focusable", "focusable", "active", "active", "allowShiftKey", "allowShiftKey"] }, { directive: i2.RdxToggleDirective, inputs: ["pressed", "pressed", "disabled", "disabled"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupItemDirective, decorators: [{
             type: Directive,
@@ -71,117 +71,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                     exportAs: 'rdxToggleGroupItem',
                     standalone: true,
                     providers: [{ provide: RdxToggleGroupItemToken, useExisting: RdxToggleGroupItemDirective }],
+                    hostDirectives: [
+                        {
+                            directive: RdxRovingFocusItemDirective,
+                            inputs: ['focusable', 'active', 'allowShiftKey']
+                        },
+                        {
+                            directive: RdxToggleDirective,
+                            inputs: ['pressed', 'disabled']
+                        }
+                    ],
                     host: {
-                        role: 'radio',
-                        '[attr.aria-checked]': 'checked',
-                        '[attr.aria-disabled]': 'disabled || toggleGroup.disabled',
-                        '[attr.aria-pressed]': 'undefined',
-                        '[attr.data-disabled]': 'disabled || toggleGroup.disabled',
-                        '[attr.data-state]': 'checked ? "on" : "off"',
-                        '[attr.data-orientation]': 'toggleGroup.orientation',
-                        '(click)': 'toggle()',
-                        '(focus)': 'focus()'
+                        '(click)': 'toggle()'
                     }
                 }]
-        }], propDecorators: { value: [{
-                type: Input,
-                args: [{ required: true }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-class RdxToggleGroupMultipleDirective {
+let nextId$1 = 0;
+class RdxToggleGroupWithoutFocusDirective {
     constructor() {
         /**
-         * The selected toggle button.
+         * @ignore
          */
-        this.value = [];
+        this.id = `rdx-toggle-group-${nextId$1++}`;
         /**
-         * The orientation of the toggle group.
-         * @default 'horizontal'
+         * @group Props
          */
-        this.orientation = 'horizontal';
+        this.value = model(undefined);
         /**
-         * Whether the toggle group is disabled.
-         * @default false
+         * @group Props
          */
-        this.disabled = false;
+        this.type = input('single');
         /**
-         * Whether the toggle group roving focus should wrap.
-         * @default true
+         * Whether the toggle group is disabled.
+         * @defaultValue false
+         * @group Props
          */
-        this.wrap = true;
+        this.disabled = input(false, { transform: booleanAttribute });
         /**
          * Event emitted when the selected toggle button changes.
+         * @group Emits
          */
-        this.valueChange = new EventEmitter();
-    }
-    /**
-     * @ignore
-     */
-    ngOnChanges(changes) {
-        if ('disabled' in changes) {
-            this.buttons?.forEach((button) => button.updateDisabled());
-        }
-    }
-    /**
-     * @ignore
-     */
-    ngAfterContentInit() {
-        if (this.disabled) {
-            this.buttons?.forEach((button) => button.updateDisabled());
-        }
-        if (this.buttons) {
-            this.keyManager = new FocusKeyManager(this.buttons).withWrap();
-        }
-    }
-    onFocusIn() {
-        if (!this.keyManager.activeItem) {
-            this.keyManager.setFirstItemActive();
-        }
-    }
-    handleKeydown(event) {
-        switch (event.key) {
-            case 'ArrowRight':
-            case 'ArrowDown':
-                this.keyManager.setNextItemActive();
-                event.preventDefault();
-                break;
-            case 'ArrowLeft':
-            case 'ArrowUp':
-                this.keyManager.setPreviousItemActive();
-                event.preventDefault();
-                break;
-            case 'Home':
-                this.keyManager.setFirstItemActive();
-                event.preventDefault();
-                break;
-            case 'End':
-                this.keyManager.setLastItemActive();
-                event.preventDefault();
-                break;
-            case 'Enter':
-            case ' ':
-                // eslint-disable-next-line no-case-declarations
-                const activeItem = this.keyManager.activeItem;
-                if (activeItem) {
-                    activeItem.toggle();
-                }
-                event.preventDefault();
-                break;
-            default:
-                break;
-        }
-    }
-    /**
-     * Determine if a value is selected.
-     * @param value The value to check.
-     * @returns Whether the value is selected.
-     * @ignore
-     */
-    isSelected(value) {
-        return this.value.includes(value);
+        this.onValueChange = output();
+        this.accessorDisabled = signal(false);
     }
     /**
      * Toggle a value.
@@ -189,12 +121,21 @@ class RdxToggleGroupMultipleDirective {
      * @ignore
      */
     toggle(value) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
-        this.value = this.value.includes(value) ? this.value.filter((v) => v !== value) : [...this.value, value];
-        this.valueChange.emit(this.value);
-        this.onChange?.(this.value);
+        if (this.type() === 'single') {
+            this.value.set(value);
+        }
+        else {
+            this.value.set(((currentValue) => currentValue && Array.isArray(currentValue)
+                ? currentValue.includes(value)
+                    ? currentValue.filter((v) => v !== value) // delete
+                    : [...currentValue, value] // update
+                : [value])(this.value()));
+        }
+        this.onValueChange.emit(this.value());
+        this.onChange?.(this.value());
     }
     /**
      * Select a value from Angular forms.
@@ -202,7 +143,7 @@ class RdxToggleGroupMultipleDirective {
      * @ignore
      */
     writeValue(value) {
-        this.value = value;
+        this.value.set(value);
     }
     /**
      * Register a callback to be called when the value changes.
@@ -226,161 +167,96 @@ class RdxToggleGroupMultipleDirective {
      * @ignore
      */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.buttons?.forEach((button) => button.updateDisabled());
+        this.accessorDisabled.set(isDisabled);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupMultipleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.5", type: RdxToggleGroupMultipleDirective, isStandalone: true, selector: "[rdxToggleGroupMultiple]", inputs: { value: "value", orientation: "orientation", disabled: ["disabled", "disabled", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], valueChange: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "keydown": "handleKeydown($event)", "focusin": "onFocusIn()", "focusout": "onTouched?.()" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
-            { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultipleDirective },
-            { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultipleDirective, multi: true }
-        ], queries: [{ propertyName: "buttons", predicate: RdxToggleGroupItemToken }], exportAs: ["rdxToggleGroupMultiple"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupWithoutFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: RdxToggleGroupWithoutFocusDirective, isStandalone: true, selector: "[rdxToggleGroupWithoutFocus]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()" } }, providers: [
+            { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupWithoutFocusDirective },
+            { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupWithoutFocusDirective, multi: true }
+        ], exportAs: ["rdxToggleGroupWithoutFocus"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupMultipleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupWithoutFocusDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxToggleGroupMultiple]',
-                    exportAs: 'rdxToggleGroupMultiple',
+                    selector: '[rdxToggleGroupWithoutFocus]',
+                    exportAs: 'rdxToggleGroupWithoutFocus',
                     standalone: true,
                     providers: [
-                        { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupMultipleDirective },
-                        { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupMultipleDirective, multi: true }
+                        { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupWithoutFocusDirective },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupWithoutFocusDirective, multi: true }
                     ],
                     host: {
                         role: 'group',
-                        '[attr.data-orientation]': 'orientation',
-                        '(keydown)': 'handleKeydown($event)',
-                        '(focusin)': 'onFocusIn()',
                         '(focusout)': 'onTouched?.()'
                     }
                 }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], wrap: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], valueChange: [{
-                type: Input
-            }], buttons: [{
-                type: ContentChildren,
-                args: [RdxToggleGroupItemToken]
-            }] } });
+        }] });
 
+let nextId = 0;
+/**
+ * @group Components
+ */
 class RdxToggleGroupDirective {
     constructor() {
         /**
-         * The selected toggle button.
+         * @ignore
          */
-        this.value = null;
+        this.id = `rdx-toggle-group-${nextId++}`;
         /**
-         * The orientation of the toggle group.
-         * @default 'horizontal'
+         * @group Props
          */
-        this.orientation = 'horizontal';
+        this.value = model(undefined);
         /**
-         * Whether the toggle group is disabled.
-         * @default false
+         * @group Props
          */
-        this.disabled = false;
+        this.type = input('single');
         /**
-         * Whether the toggle group roving focus should wrap.
-         * @default true
+         * Whether the toggle group is disabled.
+         * @defaultValue false
+         * @group Props
          */
-        this.wrap = true;
+        this.disabled = input(false, { transform: booleanAttribute });
         /**
          * Event emitted when the selected toggle button changes.
+         * @group Emits
          */
-        this.valueChange = new EventEmitter();
-    }
-    ngOnChanges(changes) {
-        if ('disabled' in changes) {
-            this.buttons?.forEach((button) => button.updateDisabled());
-        }
-    }
-    ngAfterContentInit() {
-        if (this.disabled) {
-            this.buttons?.forEach((button) => button.updateDisabled());
-        }
-        if (this.buttons) {
-            this.keyManager = new FocusKeyManager(this.buttons).withWrap();
-        }
-    }
-    onFocusIn() {
-        if (!this.keyManager.activeItem) {
-            this.keyManager.setFirstItemActive();
-        }
-    }
-    handleKeydown(event) {
-        switch (event.key) {
-            case 'ArrowRight':
-            case 'ArrowDown':
-                this.keyManager.setNextItemActive();
-                event.preventDefault();
-                break;
-            case 'ArrowLeft':
-            case 'ArrowUp':
-                this.keyManager.setPreviousItemActive();
-                event.preventDefault();
-                break;
-            case 'Home':
-                this.keyManager.setFirstItemActive();
-                event.preventDefault();
-                break;
-            case 'End':
-                this.keyManager.setLastItemActive();
-                event.preventDefault();
-                break;
-            case 'Enter':
-            case ' ':
-                // eslint-disable-next-line no-case-declarations
-                const activeItem = this.keyManager.activeItem;
-                if (activeItem) {
-                    activeItem.toggle();
-                }
-                event.preventDefault();
-                break;
-            default:
-                break;
-        }
-    }
-    /**
-     * Determine if a value is selected.
-     * @param value The value to check.
-     * @returns Whether the value is selected.
-     * @internal
-     */
-    isSelected(value) {
-        return this.value === value;
+        this.onValueChange = output();
+        this.accessorDisabled = signal(false);
     }
     /**
      * Toggle a value.
      * @param value The value to toggle.
-     * @internal
+     * @ignore
      */
     toggle(value) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
-        this.value = this.value === value ? null : value;
-        this.valueChange.emit(this.value);
-        this.onChange?.(this.value);
+        if (this.type() === 'single') {
+            this.value.set(value);
+        }
+        else {
+            this.value.set(((currentValue) => currentValue && Array.isArray(currentValue)
+                ? currentValue.includes(value)
+                    ? currentValue.filter((v) => v !== value) // delete
+                    : [...currentValue, value] // update
+                : [value])(this.value()));
+        }
+        this.onValueChange.emit(this.value());
+        this.onChange?.(this.value());
     }
     /**
      * Select a value from Angular forms.
      * @param value The value to select.
-     * @internal
+     * @ignore
      */
     writeValue(value) {
-        this.value = value;
+        this.value.set(value);
     }
     /**
      * Register a callback to be called when the value changes.
      * @param fn The callback to register.
-     * @internal
+     * @ignore
      */
     registerOnChange(fn) {
         this.onChange = fn;
@@ -388,7 +264,7 @@ class RdxToggleGroupDirective {
     /**
      * Register a callback to be called when the toggle group is touched.
      * @param fn The callback to register.
-     * @internal
+     * @ignore
      */
     registerOnTouched(fn) {
         this.onTouched = fn;
@@ -396,56 +272,37 @@ class RdxToggleGroupDirective {
     /**
      * Set the disabled state of the toggle group.
      * @param isDisabled Whether the toggle group is disabled.
-     * @internal
+     * @ignore
      */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.buttons?.forEach((button) => button.updateDisabled());
+        this.accessorDisabled.set(isDisabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.5", type: RdxToggleGroupDirective, isStandalone: true, selector: "[rdxToggleGroup]", inputs: { value: "value", orientation: "orientation", disabled: ["disabled", "disabled", booleanAttribute], wrap: ["wrap", "wrap", booleanAttribute], valueChange: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()", "focusin": "onFocusIn()", "keydown": "handleKeydown($event)" }, properties: { "attr.data-orientation": "orientation" } }, providers: [
-            { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
-            { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
-        ], queries: [{ propertyName: "buttons", predicate: RdxToggleGroupItemToken }], exportAs: ["rdxToggleGroup"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: RdxToggleGroupDirective, isStandalone: true, selector: "[rdxToggleGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onValueChange: "onValueChange" }, host: { attributes: { "role": "group" }, listeners: { "focusout": "onTouched?.()" } }, providers: [
+            { provide: RdxToggleGroupToken, useExisting: forwardRef(() => RdxToggleGroupDirective) },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RdxToggleGroupDirective), multi: true }
+        ], exportAs: ["rdxToggleGroup"], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective, inputs: ["dir", "dir", "orientation", "orientation", "loop", "loop"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxToggleGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxToggleGroup]',
                     exportAs: 'rdxToggleGroup',
-                    standalone: true,
                     providers: [
-                        { provide: RdxToggleGroupToken, useExisting: RdxToggleGroupDirective },
-                        { provide: NG_VALUE_ACCESSOR, useExisting: RdxToggleGroupDirective, multi: true }
+                        { provide: RdxToggleGroupToken, useExisting: forwardRef(() => RdxToggleGroupDirective) },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RdxToggleGroupDirective), multi: true }
                     ],
+                    hostDirectives: [{ directive: RdxRovingFocusGroupDirective, inputs: ['dir', 'orientation', 'loop'] }],
                     host: {
                         role: 'group',
-                        '[attr.data-orientation]': 'orientation',
-                        '(focusout)': 'onTouched?.()',
-                        '(focusin)': 'onFocusIn()',
-                        '(keydown)': 'handleKeydown($event)'
+                        '(focusout)': 'onTouched?.()'
                     }
                 }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], orientation: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], wrap: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], valueChange: [{
-                type: Input
-            }], buttons: [{
-                type: ContentChildren,
-                args: [RdxToggleGroupItemToken]
-            }] } });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { RdxToggleGroupDirective, RdxToggleGroupItemDirective, RdxToggleGroupItemToken, RdxToggleGroupMultipleDirective, RdxToggleGroupToken, injectToggleGroup };
+export { RdxToggleGroupDirective, RdxToggleGroupItemDirective, RdxToggleGroupItemToken, RdxToggleGroupToken, RdxToggleGroupWithoutFocusDirective, injectToggleGroup, injectToggleGroupItem };
 //# sourceMappingURL=radix-ng-primitives-toggle-group.mjs.map