@radix-ng/primitives 0.16.0 → 0.17.0

package/fesm2022/radix-ng-primitives-radio.mjs

@@ -42,10 +42,10 @@ class RdxRadioItemDirective {
     _onBlur() {
         this.radioGroup.onTouched?.();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: RdxRadioItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.10", type: RdxRadioItemDirective, isStandalone: true, selector: "[rdxRadioItem]", inputs: { id: "id", value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, host: { attributes: { "type": "button", "role": "radio" }, listeners: { "click": "_onClick()", "blur": "_onBlur()" }, properties: { "attr.id": "id", "attr.aria-checked": "checked", "attr.data-disabled": "disabled ? \"\" : null", "attr.data-state": "checked ? \"checked\" : \"unchecked\"", "attr.tabindex": "tabIndex" } }, providers: [{ provide: RdxRadioItemToken, useExisting: RdxRadioItemDirective }], exportAs: ["rdxRadioItem"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxRadioItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.11", type: RdxRadioItemDirective, isStandalone: true, selector: "[rdxRadioItem]", inputs: { id: "id", value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, host: { attributes: { "type": "button", "role": "radio" }, listeners: { "click": "_onClick()", "blur": "_onBlur()" }, properties: { "attr.id": "id", "attr.aria-checked": "checked", "attr.data-disabled": "disabled ? \"\" : null", "attr.data-state": "checked ? \"checked\" : \"unchecked\"", "attr.tabindex": "tabIndex" } }, providers: [{ provide: RdxRadioItemToken, useExisting: RdxRadioItemDirective }], exportAs: ["rdxRadioItem"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: RdxRadioItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxRadioItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxRadioItem]',
@@ -218,13 +218,13 @@ class RdxRadioGroupDirective {
             this.radioItems.first.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: RdxRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.10", type: RdxRadioGroupDirective, isStandalone: true, selector: "[rdxRadioRoot]", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], dir: "dir", defaultValue: "defaultValue" }, outputs: { onValueChange: "onValueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusin($event)" }, properties: { "attr.aria-orientation": "_orientation", "attr.data-disabled": "disabled ? \"\" : null", "attr.tabindex": "-1", "attr.dir": "dir" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.11", type: RdxRadioGroupDirective, isStandalone: true, selector: "[rdxRadioRoot]", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], dir: "dir", defaultValue: "defaultValue" }, outputs: { onValueChange: "onValueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusin($event)" }, properties: { "attr.aria-orientation": "_orientation", "attr.data-disabled": "disabled ? \"\" : null", "attr.tabindex": "-1", "attr.dir": "dir" } }, providers: [
             { provide: RDX_RADIO_GROUP, useExisting: RdxRadioGroupDirective },
             { provide: NG_VALUE_ACCESSOR, useExisting: RdxRadioGroupDirective, multi: true }
         ], queries: [{ propertyName: "radioItems", predicate: RdxRadioItemDirective, descendants: true }], exportAs: ["rdxRadioRoot"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: RdxRadioGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxRadioGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxRadioRoot]',
@@ -265,10 +265,10 @@ class RdxRadioIndicatorDirective {
         this.radioGroup = inject(RDX_RADIO_GROUP);
         this.radioItem = inject(RdxRadioItemDirective);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: RdxRadioIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: RdxRadioIndicatorDirective, isStandalone: true, selector: "[rdxRadioIndicator]", host: { properties: { "attr.data-state": "radioItem.checked ? \"checked\" : \"unchecked\"", "attr.data-disabled": "radioItem.disabled ? \"\" : null" } }, exportAs: ["rdxRadioIndicator"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxRadioIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxRadioIndicatorDirective, isStandalone: true, selector: "[rdxRadioIndicator]", host: { properties: { "attr.data-state": "radioItem.checked ? \"checked\" : \"unchecked\"", "attr.data-disabled": "radioItem.disabled ? \"\" : null" } }, exportAs: ["rdxRadioIndicator"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: RdxRadioIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxRadioIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxRadioIndicator]',

package/fesm2022/radix-ng-primitives-select.mjs

@@ -0,0 +1,576 @@
+import * as i0 from '@angular/core';
+import { inject, Component, Input, ElementRef, Directive, ContentChild, ChangeDetectorRef, DestroyRef, NgZone, EventEmitter, booleanAttribute, ContentChildren, ViewChild, Output, NgModule } from '@angular/core';
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { Subscription, defer, merge, take, switchMap, delay, Subject, startWith, pairwise } from 'rxjs';
+import { ENTER, SPACE } from '@angular/cdk/keycodes';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i1 from '@angular/cdk/overlay';
+import { Overlay, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+
+class RdxSelectValueDirective {
+    constructor() {
+        this.select = inject(RdxSelectComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectValueDirective, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: RdxSelectValueDirective, isStandalone: true, selector: "[rdxSelectValue]", inputs: { placeholder: "placeholder" }, exportAs: ["rdxSelectValue"], ngImport: i0, template: `
+        {{ select.selectionModel.isEmpty() ? placeholder : select.selected }}
+    `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectValueDirective, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[rdxSelectValue]',
+                    standalone: true,
+                    exportAs: 'rdxSelectValue',
+                    template: `
+        {{ select.selectionModel.isEmpty() ? placeholder : select.selected }}
+    `
+                }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }] } });
+
+class RdxSelectTriggerDirective {
+    constructor() {
+        this.nativeElement = inject(ElementRef).nativeElement;
+        this.select = inject(RdxSelectComponent);
+    }
+    focus() {
+        this.nativeElement.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxSelectTriggerDirective, isStandalone: true, selector: "[rdxSelectTrigger]", host: { properties: { "attr.type": "\"button\"", "attr.role": "\"combobox\"", "attr.aria-autocomplete": "\"none\"", "attr.dir": "select.dir", "attr.aria-expanded": "select.open", "attr.aria-required": "select.required", "attr.disabled": "select.disabled ? \"\" : null", "attr.data-disabled": "select.disabled ? \"\" : null", "attr.data-state": "select.open ? 'open': 'closed'", "attr.data-placeholder": "value.placeholder || null" } }, queries: [{ propertyName: "value", first: true, predicate: RdxSelectValueDirective, descendants: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectTrigger]',
+                    standalone: true,
+                    host: {
+                        '[attr.type]': '"button"',
+                        '[attr.role]': '"combobox"',
+                        '[attr.aria-autocomplete]': '"none"',
+                        '[attr.dir]': 'select.dir',
+                        '[attr.aria-expanded]': 'select.open',
+                        '[attr.aria-required]': 'select.required',
+                        '[attr.disabled]': 'select.disabled ? "" : null',
+                        '[attr.data-disabled]': 'select.disabled ? "" : null',
+                        '[attr.data-state]': "select.open ? 'open': 'closed'",
+                        '[attr.data-placeholder]': 'value.placeholder || null'
+                    }
+                }]
+        }], propDecorators: { value: [{
+                type: ContentChild,
+                args: [RdxSelectValueDirective]
+            }] } });
+
+let nextId$1 = 0;
+class RdxSelectComponent {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.elementRef = inject(ElementRef);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
+        this.ngZone = inject(NgZone);
+        /**
+         * This position config ensures that the top "start" corner of the overlay
+         * is aligned with the top "start" of the origin by default (overlapping
+         * the trigger completely). If the panel cannot fit below the trigger, it
+         * will fall back to a position above the trigger.
+         */
+        this.positions = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top'
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom'
+            }
+        ];
+        this.closeSubscription = Subscription.EMPTY;
+        /**
+         * @ignore
+         */
+        this.dir = inject(Directionality, { optional: true });
+        /**
+         * @ignore
+         */
+        this.id = `rdx-select-${nextId$1++}`;
+        this.onValueChange = new EventEmitter();
+        this.onOpenChange = new EventEmitter();
+        this.optionSelectionChanges = defer(() => {
+            if (this.content.options) {
+                return merge(...this.content.options.map((option) => option.onSelectionChange));
+            }
+            return this.ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionSelectionChanges));
+        });
+    }
+    /**
+     * The controlled value of the item to expand
+     */
+    set value(value) {
+        if (this._value !== value) {
+            this._value = value;
+            this.selectValue(value);
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    get value() {
+        return this._value ?? this.defaultValue;
+    }
+    get selected() {
+        return this.selectionModel.selected[0].viewValue || null;
+    }
+    ngOnInit() {
+        this.selectionModel = new SelectionModel();
+        this.selectionModel.changed.subscribe((changes) => {
+            if (changes.added.length) {
+                this.onValueChange.emit(this.selectionModel.selected[0].value);
+            }
+            if (changes.removed.length) {
+                changes.removed.forEach((item) => (item.selected = false));
+            }
+        });
+    }
+    ngAfterContentInit() {
+        this.selectDefaultValue();
+        this.optionSelectionChanges.subscribe((event) => {
+            this.selectionModel.clear();
+            this.selectionModel.select(event.source);
+            this.close();
+            this.trigger.focus();
+        });
+        this.content.keyManager.tabOut.subscribe(() => {
+            if (this.open)
+                this.close();
+        });
+        if (this.defaultOpen) {
+            this.openPanel();
+        }
+    }
+    /**
+     * Callback that is invoked when the overlay panel has been attached.
+     */
+    onAttached() {
+        this.closeSubscription = this.closingActions()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .pipe(delay(0))
+            .subscribe(() => this.close());
+    }
+    onDetach() {
+        this.close();
+        this.closeSubscription.unsubscribe();
+    }
+    /** Toggles the overlay panel open or closed. */
+    toggle() {
+        if (this.open) {
+            this.close();
+        }
+        else {
+            this.openPanel();
+        }
+    }
+    openPanel() {
+        this.open = true;
+        this.onOpenChange.emit(this.open);
+    }
+    close() {
+        this.open = false;
+        this.onOpenChange.emit(this.open);
+    }
+    updateActiveItem(item) {
+        this.content.keyManager.updateActiveItem(item);
+    }
+    selectDefaultValue() {
+        if (!this.defaultValue)
+            return;
+        this.selectValue(this.defaultValue);
+    }
+    selectValue(value) {
+        const option = this.content?.options.find((option) => option.value === value);
+        if (option) {
+            option.selected = true;
+            option.highlighted = true;
+            this.selectionModel.select(option);
+            this.updateActiveItem(option);
+        }
+    }
+    closingActions() {
+        return merge(this.overlayDir.overlayRef.outsidePointerEvents(), this.overlayDir.overlayRef.detachments());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.11", type: RdxSelectComponent, isStandalone: true, selector: "[rdxSelect]", inputs: { defaultValue: "defaultValue", name: "name", defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onValueChange: "onValueChange", onOpenChange: "onOpenChange" }, host: { listeners: { "click": "toggle()", "keydown": "content.keyManager.onKeydown($event)" } }, queries: [{ propertyName: "trigger", first: true, predicate: RdxSelectTriggerDirective, descendants: true }, { propertyName: "content", first: true, predicate: RdxSelectContentDirective, descendants: true }, { propertyName: "items", predicate: RdxSelectItemDirective, descendants: true }], viewQueries: [{ propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: `
+        <ng-content select="[rdxSelectTrigger]" />
+
+        <ng-template
+            [cdkConnectedOverlayOpen]="open"
+            [cdkConnectedOverlayOrigin]="elementRef"
+            [cdkConnectedOverlayPositions]="positions"
+            [cdkConnectedOverlayScrollStrategy]="overlay.scrollStrategies.reposition()"
+            (attach)="onAttached()"
+            (backdropClick)="close()"
+            (detach)="onDetach()"
+            cdkConnectedOverlay
+        >
+            <ng-content select="[rdxSelectContent]" />
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: '[rdxSelect]',
+                    template: `
+        <ng-content select="[rdxSelectTrigger]" />
+
+        <ng-template
+            [cdkConnectedOverlayOpen]="open"
+            [cdkConnectedOverlayOrigin]="elementRef"
+            [cdkConnectedOverlayPositions]="positions"
+            [cdkConnectedOverlayScrollStrategy]="overlay.scrollStrategies.reposition()"
+            (attach)="onAttached()"
+            (backdropClick)="close()"
+            (detach)="onDetach()"
+            cdkConnectedOverlay
+        >
+            <ng-content select="[rdxSelectContent]" />
+        </ng-template>
+    `,
+                    host: {
+                        '(click)': 'toggle()',
+                        '(keydown)': 'content.keyManager.onKeydown($event)'
+                    },
+                    imports: [
+                        OverlayModule
+                    ]
+                }]
+        }], propDecorators: { trigger: [{
+                type: ContentChild,
+                args: [RdxSelectTriggerDirective]
+            }], content: [{
+                type: ContentChild,
+                args: [RdxSelectContentDirective]
+            }], items: [{
+                type: ContentChildren,
+                args: [RdxSelectItemDirective, { descendants: true }]
+            }], overlayDir: [{
+                type: ViewChild,
+                args: [CdkConnectedOverlay, { static: false }]
+            }], defaultValue: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], defaultOpen: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], open: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }], onValueChange: [{
+                type: Output
+            }], onOpenChange: [{
+                type: Output
+            }] } });
+
+let nextId = 0;
+class RdxSelectItemChange {
+    constructor(source) {
+        this.source = source;
+    }
+}
+class RdxSelectItemDirective {
+    get dataState() {
+        return this.selected ? 'checked' : 'unchecked';
+    }
+    set value(value) {
+        this._value = value;
+    }
+    get value() {
+        return this._value || this.id;
+    }
+    /** Whether the SelectItem is disabled. */
+    set disabled(value) {
+        this._disabled = value;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    get viewValue() {
+        return this.textValue ?? this.nativeElement.textContent;
+    }
+    constructor() {
+        this.select = inject(RdxSelectComponent);
+        this.content = inject(RdxSelectContentDirective);
+        this.onSelectionChange = new EventEmitter();
+        this.nativeElement = inject(ElementRef).nativeElement;
+        this.highlighted = false;
+        /**
+         * The unique SelectItem id.
+         * @ignore
+         */
+        this.id = `rdx-select-item-${nextId++}`;
+        this.textValue = null;
+        this.content.highlighted.pipe(takeUntilDestroyed()).subscribe((value) => {
+            if (value !== this) {
+                this.highlighted = false;
+            }
+        });
+    }
+    /** Gets the label to be used when determining whether the option should be focused. */
+    getLabel() {
+        return this.viewValue;
+    }
+    /**
+     * `Selects the option while indicating the selection came from the user. Used to
+     * determine if the select's view -> model callback should be invoked.`
+     */
+    selectViaInteraction() {
+        if (!this.disabled) {
+            this.selected = true;
+            this.onSelectionChange.emit(new RdxSelectItemChange(this));
+        }
+    }
+    handleKeydown(event) {
+        if (event.keyCode === ENTER || event.keyCode === SPACE) {
+            this.selectViaInteraction();
+            // Prevent the page from scrolling down and form submits.
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    setActiveStyles() {
+        this.highlighted = true;
+        this.nativeElement.focus({ preventScroll: true });
+    }
+    setInactiveStyles() {
+        this.highlighted = false;
+    }
+    onPointerMove() {
+        if (!this.highlighted) {
+            this.nativeElement.focus({ preventScroll: true });
+            this.select.updateActiveItem(this);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.11", type: RdxSelectItemDirective, isStandalone: true, selector: "[rdxSelectItem]", inputs: { value: "value", textValue: "textValue", disabled: ["disabled", "disabled", booleanAttribute] }, host: { listeners: { "focus": "content.highlighted.next(this)", "click": "selectViaInteraction()", "keydown": "handleKeydown($event)", "pointermove": "onPointerMove()" }, properties: { "attr.role": "\"option\"", "attr.data-state": "dataState", "attr.aria-selected": "selected", "attr.data-disabled": "disabled || null", "attr.data-highlighted": "highlighted || null", "attr.tabindex": "-1" } }, exportAs: ["rdxSelectItem"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectItem]',
+                    standalone: true,
+                    exportAs: 'rdxSelectItem',
+                    host: {
+                        '[attr.role]': '"option"',
+                        '[attr.data-state]': 'dataState',
+                        '[attr.aria-selected]': 'selected',
+                        '[attr.data-disabled]': 'disabled || null',
+                        '[attr.data-highlighted]': 'highlighted || null',
+                        '[attr.tabindex]': '-1',
+                        '(focus)': 'content.highlighted.next(this)',
+                        '(click)': 'selectViaInteraction()',
+                        '(keydown)': 'handleKeydown($event)',
+                        '(pointermove)': 'onPointerMove()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{
+                type: Input
+            }], textValue: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class RdxSelectContentDirective {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.dir = inject(Directionality, { optional: true });
+        this.select = inject(RdxSelectComponent);
+        this.highlighted = new Subject();
+        this.highlighted.pipe(startWith(null), pairwise()).subscribe(([prev, item]) => {
+            if (prev) {
+                prev.highlighted = false;
+            }
+            if (item) {
+                item.highlighted = true;
+            }
+        });
+    }
+    initKeyManager() {
+        return new ActiveDescendantKeyManager(this.options)
+            .withTypeAhead()
+            .withVerticalOrientation()
+            .withHorizontalOrientation(this.dir?.value ?? 'ltr');
+    }
+    ngAfterContentInit() {
+        this.keyManager = this.initKeyManager();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxSelectContentDirective, isStandalone: true, selector: "[rdxSelectContent]", host: { listeners: { "keydown": "keyManager.onKeydown($event)" }, properties: { "attr.role": "\"listbox\"", "attr.data-state": "select.open ? 'open': 'closed'", "attr.data-side": "true", "attr.data-align": "true" } }, queries: [{ propertyName: "options", predicate: RdxSelectItemDirective, descendants: true }], exportAs: ["rdxSelectContent"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectContent]',
+                    standalone: true,
+                    exportAs: 'rdxSelectContent',
+                    host: {
+                        '[attr.role]': '"listbox"',
+                        '[attr.data-state]': "select.open ? 'open': 'closed'",
+                        '[attr.data-side]': 'true',
+                        '[attr.data-align]': 'true',
+                        '(keydown)': 'keyManager.onKeydown($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { options: [{
+                type: ContentChildren,
+                args: [RdxSelectItemDirective, { descendants: true }]
+            }] } });
+
+class RdxSelectGroupDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxSelectGroupDirective, isStandalone: true, selector: "[rdxSelectGroup]", host: { properties: { "attr.role": "\"group\"" } }, exportAs: ["rdxSelectGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectGroup]',
+                    standalone: true,
+                    exportAs: 'rdxSelectGroup',
+                    host: {
+                        '[attr.role]': '"group"'
+                    }
+                }]
+        }] });
+
+class RdxSelectIconDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxSelectIconDirective, isStandalone: true, selector: "[rdxSelectIcon]", host: { properties: { "attr.aria-hidden": "true" } }, exportAs: ["rdxSelectIcon"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectIcon]',
+                    standalone: true,
+                    exportAs: 'rdxSelectIcon',
+                    host: {
+                        '[attr.aria-hidden]': 'true'
+                    }
+                }]
+        }] });
+
+class RdxSelectItemIndicatorDirective {
+    constructor() {
+        this.item = inject(RdxSelectItemDirective);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectItemIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxSelectItemIndicatorDirective, isStandalone: true, selector: "[rdxSelectItemIndicator]", host: { properties: { "attr.aria-hidden": "true", "style.display": "item.selected ? \"\" : \"none\"" } }, exportAs: ["rdxSelectItemIndicator"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectItemIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectItemIndicator]',
+                    standalone: true,
+                    exportAs: 'rdxSelectItemIndicator',
+                    host: {
+                        '[attr.aria-hidden]': 'true',
+                        '[style.display]': 'item.selected ? "" : "none"'
+                    }
+                }]
+        }] });
+
+class RdxSelectLabelDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxSelectLabelDirective, isStandalone: true, selector: "[rdxSelectLabel]", exportAs: ["rdxSelectLabel"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectLabel]',
+                    standalone: true,
+                    exportAs: 'rdxSelectLabel'
+                }]
+        }] });
+
+class RdxSelectSeparatorDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxSelectSeparatorDirective, isStandalone: true, selector: "[rdxSelectSeparator]", host: { properties: { "attr.aria-hidden": "true" } }, exportAs: ["rdxSelectSeparator"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectSeparatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSelectSeparator]',
+                    standalone: true,
+                    exportAs: 'rdxSelectSeparator',
+                    host: {
+                        '[attr.aria-hidden]': 'true'
+                    }
+                }]
+        }] });
+
+const _imports = [
+    RdxSelectContentDirective,
+    RdxSelectGroupDirective,
+    RdxSelectItemDirective,
+    RdxSelectItemIndicatorDirective,
+    RdxSelectLabelDirective,
+    RdxSelectComponent,
+    RdxSelectSeparatorDirective,
+    RdxSelectTriggerDirective,
+    RdxSelectValueDirective,
+    RdxSelectIconDirective
+];
+class RdxSelectModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectModule, imports: [RdxSelectContentDirective,
+            RdxSelectGroupDirective,
+            RdxSelectItemDirective,
+            RdxSelectItemIndicatorDirective,
+            RdxSelectLabelDirective,
+            RdxSelectComponent,
+            RdxSelectSeparatorDirective,
+            RdxSelectTriggerDirective,
+            RdxSelectValueDirective,
+            RdxSelectIconDirective], exports: [RdxSelectContentDirective,
+            RdxSelectGroupDirective,
+            RdxSelectItemDirective,
+            RdxSelectItemIndicatorDirective,
+            RdxSelectLabelDirective,
+            RdxSelectComponent,
+            RdxSelectSeparatorDirective,
+            RdxSelectTriggerDirective,
+            RdxSelectValueDirective,
+            RdxSelectIconDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectModule, imports: [RdxSelectComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [..._imports],
+                    exports: [..._imports]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxSelectComponent, RdxSelectContentDirective, RdxSelectGroupDirective, RdxSelectIconDirective, RdxSelectItemChange, RdxSelectItemDirective, RdxSelectItemIndicatorDirective, RdxSelectLabelDirective, RdxSelectModule, RdxSelectSeparatorDirective, RdxSelectTriggerDirective, RdxSelectValueDirective };
+//# sourceMappingURL=radix-ng-primitives-select.mjs.map