@spartan-ng/brain 0.0.1-alpha.492 → 0.0.1-alpha.494

package/fesm2022/spartan-ng-brain-select.mjs

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, input, booleanAttribute, computed, signal, Directive, DestroyRef, Injector, viewChild, contentChild, contentChildren, effect, afterNextRender, untracked, ChangeDetectionStrategy, Component, TemplateRef, ChangeDetectorRef, PLATFORM_ID, numberAttribute, model, forwardRef, NgModule } from '@angular/core';
-import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
-import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
-import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { Subject, fromEvent, interval, of } from 'rxjs';
-import { takeUntil, switchMap, delay, map } from 'rxjs/operators';
-import * as i1 from '@spartan-ng/brain/label';
-import { BrnLabelDirective } from '@spartan-ng/brain/label';
-import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { InjectionToken, inject, ElementRef, input, booleanAttribute, computed, signal, Directive, DestroyRef, Injector, viewChild, contentChild, contentChildren, effect, afterNextRender, untracked, ChangeDetectionStrategy, Component, numberAttribute, model, forwardRef, TemplateRef, ChangeDetectorRef, PLATFORM_ID, NgModule } from '@angular/core';
 import { CdkListboxModule } from '@angular/cdk/listbox';
-import * as i1$1 from '@angular/cdk/overlay';
+import * as i1 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import { provideExposedSideProviderExisting, provideExposesStateProviderExisting } from '@spartan-ng/brain/core';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
 import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/brain/forms';
+import * as i1$1 from '@spartan-ng/brain/label';
+import { BrnLabel } from '@spartan-ng/brain/label';
+import { Subject, fromEvent, interval, of } from 'rxjs';
+import { takeUntil, switchMap, delay, map } from 'rxjs/operators';
+import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 
 const BrnSelectContentToken = new InjectionToken('BrnSelectContentToken');
 function injectBrnSelectContent() {
@@ -32,7 +32,7 @@ function provideBrnSelect(select) {
 }
 
 let nextId$1 = 0;
-class BrnSelectOptionDirective {
+class BrnSelectOption {
     _select = injectBrnSelect();
     _content = injectBrnSelectContent();
     elementRef = inject(ElementRef);
@@ -79,10 +79,10 @@ class BrnSelectOptionDirective {
         }
         this._content.setActiveOption(this);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: BrnSelectOptionDirective, isStandalone: true, selector: "[brnOption]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "select()", "mouseenter": "activate()" }, properties: { "id": "id()", "attr.aria-selected": "selected()", "attr.aria-disabled": "_disabled()", "attr.dir": "_select.dir()", "attr.data-active": "_active() ? '' : undefined", "attr.data-disabled": "_disabled() ? '' : undefined" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: BrnSelectOption, isStandalone: true, selector: "[brnOption]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "select()", "mouseenter": "activate()" }, properties: { "id": "id()", "attr.aria-selected": "selected()", "attr.aria-disabled": "_disabled()", "attr.dir": "_select.dir()", "attr.data-active": "_active() ? '' : undefined", "attr.data-disabled": "_disabled() ? '' : undefined" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectOption, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnOption]',
@@ -101,9 +101,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
         }] });
 
 const SCROLLBY_PIXELS = 100;
-class BrnSelectScrollUpDirective {
+class BrnSelectScrollUp {
     _el = inject(ElementRef);
-    _selectContent = inject(BrnSelectContentComponent);
+    _selectContent = inject(BrnSelectContent);
     _endReached = new Subject();
     _destroyRef = inject(DestroyRef);
     startEmittingEvents() {
@@ -115,10 +115,10 @@ class BrnSelectScrollUpDirective {
     stopEmittingEvents() {
         this._endReached.next(true);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectScrollUpDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectScrollUpDirective, isStandalone: true, selector: "[brnSelectScrollUp], brn-select-scroll-up, hlm-select-scroll-up:not(noHlm)", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "startEmittingEvents()" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectScrollUp, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectScrollUp, isStandalone: true, selector: "[brnSelectScrollUp], brn-select-scroll-up, hlm-select-scroll-up:not(noHlm)", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "startEmittingEvents()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectScrollUpDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectScrollUp, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectScrollUp], brn-select-scroll-up, hlm-select-scroll-up:not(noHlm)',
@@ -128,9 +128,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     },
                 }]
         }] });
-class BrnSelectScrollDownDirective {
+class BrnSelectScrollDown {
     _el = inject(ElementRef);
-    _selectContent = inject(BrnSelectContentComponent);
+    _selectContent = inject(BrnSelectContent);
     _endReached = new Subject();
     _destroyRef = inject(DestroyRef);
     startEmittingEvents() {
@@ -142,10 +142,10 @@ class BrnSelectScrollDownDirective {
     stopEmittingEvents() {
         this._endReached.next(true);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectScrollDownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectScrollDownDirective, isStandalone: true, selector: "[brnSelectScrollDown], brn-select-scroll-down, hlm-select-scroll-down:not(noHlm)", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "startEmittingEvents()" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectScrollDown, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectScrollDown, isStandalone: true, selector: "[brnSelectScrollDown], brn-select-scroll-down, hlm-select-scroll-down:not(noHlm)", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "startEmittingEvents()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectScrollDownDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectScrollDown, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectScrollDown], brn-select-scroll-down, hlm-select-scroll-down:not(noHlm)',
@@ -155,16 +155,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     },
                 }]
         }] });
-class BrnSelectContentComponent {
+class BrnSelectContent {
     _elementRef = inject(ElementRef);
     _injector = inject(Injector);
     _select = injectBrnSelect();
     _canScrollUp = signal(false);
     _canScrollDown = signal(false);
     _viewport = viewChild.required('viewport');
-    _scrollUpBtn = contentChild(BrnSelectScrollUpDirective);
-    _scrollDownBtn = contentChild(BrnSelectScrollDownDirective);
-    _options = contentChildren(BrnSelectOptionDirective, { descendants: true });
+    _scrollUpBtn = contentChild(BrnSelectScrollUp);
+    _scrollDownBtn = contentChild(BrnSelectScrollDown);
+    _options = contentChildren(BrnSelectOption, { descendants: true });
     /** @internal */
     keyManager = null;
     constructor() {
@@ -239,8 +239,8 @@ class BrnSelectContentComponent {
             this._select.toggleSelect(activeOption.value());
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.8", type: BrnSelectContentComponent, isStandalone: true, selector: "brn-select-content, hlm-select-content:not(noHlm)", host: { attributes: { "role": "listbox", "tabindex": "0", "aria-orientation": "vertical" }, listeners: { "keydown": "keyManager?.onKeydown($event)", "keydown.enter": "selectActiveItem($event)", "keydown.space": "selectActiveItem($event)" }, properties: { "attr.aria-multiselectable": "_select.multiple()", "attr.aria-disabled": "_select.disabled() || _select.formDisabled()", "attr.aria-activedescendant": "keyManager?.activeItem?.id()", "attr.aria-labelledBy": "_select.labelId()", "attr.aria-controlledBy": "_select.id() +'--trigger'", "id": "_select.id() + '--content'", "attr.dir": "_select.dir()" } }, providers: [provideBrnSelectContent(BrnSelectContentComponent)], queries: [{ propertyName: "_scrollUpBtn", first: true, predicate: BrnSelectScrollUpDirective, descendants: true, isSignal: true }, { propertyName: "_scrollDownBtn", first: true, predicate: BrnSelectScrollDownDirective, descendants: true, isSignal: true }, { propertyName: "_options", predicate: BrnSelectOptionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.8", type: BrnSelectContent, isStandalone: true, selector: "brn-select-content, hlm-select-content:not(noHlm)", host: { attributes: { "role": "listbox", "tabindex": "0", "aria-orientation": "vertical" }, listeners: { "keydown": "keyManager?.onKeydown($event)", "keydown.enter": "selectActiveItem($event)", "keydown.space": "selectActiveItem($event)" }, properties: { "attr.aria-multiselectable": "_select.multiple()", "attr.aria-disabled": "_select.disabled() || _select.formDisabled()", "attr.aria-activedescendant": "keyManager?.activeItem?.id()", "attr.aria-labelledBy": "_select.labelId()", "attr.aria-controlledBy": "_select.id() +'--trigger'", "id": "_select.id() + '--content'", "attr.dir": "_select.dir()" } }, providers: [provideBrnSelectContent(BrnSelectContent)], queries: [{ propertyName: "_scrollUpBtn", first: true, predicate: BrnSelectScrollUp, descendants: true, isSignal: true }, { propertyName: "_scrollDownBtn", first: true, predicate: BrnSelectScrollDown, descendants: true, isSignal: true }, { propertyName: "_options", predicate: BrnSelectOption, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ng-template #scrollUp>
 			<ng-content select="hlm-select-scroll-up" />
 			<ng-content select="brnSelectScrollUp" />
@@ -267,9 +267,9 @@ class BrnSelectContentComponent {
 		<ng-container *ngTemplateOutlet="_canScrollDown() && _scrollDownBtn() ? scrollDown : null" />
 	`, isInline: true, styles: [":host{display:flex;box-sizing:border-box;flex-direction:column;outline:none;pointer-events:auto}[data-brn-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}[data-brn-select-viewport]::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectContent, decorators: [{
             type: Component,
-            args: [{ selector: 'brn-select-content, hlm-select-content:not(noHlm)', imports: [NgTemplateOutlet], providers: [provideBrnSelectContent(BrnSelectContentComponent)], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'brn-select-content, hlm-select-content:not(noHlm)', imports: [NgTemplateOutlet], providers: [provideBrnSelectContent(BrnSelectContent)], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'listbox',
                         tabindex: '0',
                         '[attr.aria-multiselectable]': '_select.multiple()',
@@ -311,202 +311,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 	`, styles: [":host{display:flex;box-sizing:border-box;flex-direction:column;outline:none;pointer-events:auto}[data-brn-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}[data-brn-select-viewport]::-webkit-scrollbar{display:none}\n"] }]
         }], ctorParameters: () => [] });
 
-class BrnSelectGroupDirective {
-    labelledBy = signal('');
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectGroupDirective, isStandalone: true, selector: "[brnSelectGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelledBy()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectGroupDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[brnSelectGroup]',
-                    host: {
-                        role: 'group',
-                        '[attr.aria-labelledby]': 'labelledBy()',
-                    },
-                }]
-        }] });
-
-class BrnSelectLabelDirective {
-    _group = inject(BrnSelectGroupDirective, { optional: true });
-    _label = inject(BrnLabelDirective, { host: true });
-    constructor() {
-        this._group?.labelledBy.set(this._label.id());
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectLabelDirective, isStandalone: true, selector: "[brnSelectLabel]", hostDirectives: [{ directive: i1.BrnLabelDirective }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectLabelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[brnSelectLabel]',
-                    hostDirectives: [BrnLabelDirective],
-                }]
-        }], ctorParameters: () => [] });
-
-class BrnSelectPlaceholderDirective {
-    /** @internale */
-    templateRef = inject(TemplateRef);
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectPlaceholderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectPlaceholderDirective, isStandalone: true, selector: "[brnSelectPlaceholder], [hlmSelectPlaceholder]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectPlaceholderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[brnSelectPlaceholder], [hlmSelectPlaceholder]',
-                }]
-        }] });
-
-class BrnSelectTriggerDirective {
-    _elementRef = inject(ElementRef);
-    /** Access the change detector */
-    _changeDetector = inject(ChangeDetectorRef);
-    _select = injectBrnSelect();
-    _ngControl = inject(NgControl, { optional: true });
-    _platform = inject(PLATFORM_ID);
-    _triggerId = computed(() => `${this._select.id()}--trigger`);
-    _contentId = computed(() => `${this._select.id()}--content`);
-    _disabled = computed(() => this._select.disabled() || this._select.formDisabled());
-    _labelledBy = computed(() => {
-        const value = this._select.value();
-        if (Array.isArray(value) && value.length > 0) {
-            return `${this._select.labelId()} ${this._select.id()}--value`;
-        }
-        return this._select.labelId();
-    });
-    _resizeObserver;
-    _statusChangedSubscription;
-    constructor() {
-        this._select.trigger.set(this);
-    }
-    ngOnInit() {
-        if (this._ngControl) {
-            this._statusChangedSubscription = this._ngControl.statusChanges?.subscribe(() => {
-                this._changeDetector.markForCheck();
-            });
-        }
-    }
-    ngAfterViewInit() {
-        this._select.triggerWidth.set(this._elementRef.nativeElement.offsetWidth);
-        // if we are on the client, listen for element resize events
-        if (isPlatformBrowser(this._platform)) {
-            this._resizeObserver = new ResizeObserver(() => this._select.triggerWidth.set(this._elementRef.nativeElement.offsetWidth));
-            this._resizeObserver.observe(this._elementRef.nativeElement);
-        }
-    }
-    ngOnDestroy() {
-        this._resizeObserver?.disconnect();
-        this._statusChangedSubscription?.unsubscribe();
-    }
-    focus() {
-        this._elementRef.nativeElement.focus();
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectTriggerDirective, isStandalone: true, selector: "[brnSelectTrigger]", host: { attributes: { "type": "button", "role": "combobox", "aria-autocomplete": "none" }, listeners: { "keydown.ArrowDown": "_select.show()" }, properties: { "attr.id": "_triggerId()", "disabled": "_disabled()", "attr.aria-expanded": "_select.open()", "attr.aria-controls": "_contentId()", "attr.aria-labelledBy": "_labelledBy()", "attr.dir": "_select.dir()", "class.ng-invalid": "_ngControl?.invalid || null", "class.ng-dirty": "_ngControl?.dirty || null", "class.ng-valid": "_ngControl?.valid || null", "class.ng-touched": "_ngControl?.touched || null", "class.ng-untouched": "_ngControl?.untouched || null", "class.ng-pristine": "_ngControl?.pristine || null" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[brnSelectTrigger]',
-                    host: {
-                        type: 'button',
-                        role: 'combobox',
-                        '[attr.id]': '_triggerId()',
-                        '[disabled]': '_disabled()',
-                        '[attr.aria-expanded]': '_select.open()',
-                        '[attr.aria-controls]': '_contentId()',
-                        '[attr.aria-labelledBy]': '_labelledBy()',
-                        'aria-autocomplete': 'none',
-                        '[attr.dir]': '_select.dir()',
-                        '[class.ng-invalid]': '_ngControl?.invalid || null',
-                        '[class.ng-dirty]': '_ngControl?.dirty || null',
-                        '[class.ng-valid]': '_ngControl?.valid || null',
-                        '[class.ng-touched]': '_ngControl?.touched || null',
-                        '[class.ng-untouched]': '_ngControl?.untouched || null',
-                        '[class.ng-pristine]': '_ngControl?.pristine || null',
-                        '(keydown.ArrowDown)': '_select.show()',
-                    },
-                }]
-        }], ctorParameters: () => [] });
-
-class BrnSelectValueDirective {
-    /** @internale */
-    templateRef = inject(TemplateRef);
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectValueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectValueDirective, isStandalone: true, selector: "[brnSelectValue], [hlmSelectValue]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectValueDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[brnSelectValue], [hlmSelectValue]',
-                }]
-        }] });
-
-class BrnSelectValueComponent {
-    _select = injectBrnSelect();
-    id = computed(() => `${this._select.id()}--value`);
-    placeholder = computed(() => this._select.placeholder());
-    _showPlaceholder = computed(() => this._value() === null || this._value() === undefined || this._value() === '');
-    /** Allow a custom value template */
-    _customValueTemplate = contentChild(BrnSelectValueDirective, { descendants: true });
-    _customPlaceholderTemplate = contentChild(BrnSelectPlaceholderDirective, { descendants: true });
-    _value = computed(() => {
-        const value = this._values();
-        if (value.length === 0) {
-            return null;
-        }
-        // remove any selected values that are not in the options list
-        const existingOptions = value.filter((val) => this._select.options().some((option) => this._select.compareWith()(option.value(), val)));
-        const selectedOption = existingOptions.map((val) => this._select.options().find((option) => this._select.compareWith()(option.value(), val)));
-        if (selectedOption.length === 0) {
-            return null;
-        }
-        const selectedLabels = selectedOption.map((option) => option?.getLabel());
-        if (this._select.dir() === 'rtl') {
-            selectedLabels.reverse();
-        }
-        return this.transformFn()(selectedLabels);
-    });
-    /** Normalize the values as an array */
-    _values = computed(() => Array.isArray(this._select.value()) ? this._select.value() : [this._select.value()]);
-    transformFn = input((values) => (values ?? []).join(', '));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: BrnSelectValueComponent, isStandalone: true, selector: "brn-select-value, hlm-select-value", inputs: { transformFn: { classPropertyName: "transformFn", publicName: "transformFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()", "attr.data-placeholder": "_showPlaceholder() ? \"\" : null" } }, queries: [{ propertyName: "_customValueTemplate", first: true, predicate: BrnSelectValueDirective, descendants: true, isSignal: true }, { propertyName: "_customPlaceholderTemplate", first: true, predicate: BrnSelectPlaceholderDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
-		@if (_showPlaceholder()) {
-			<ng-container [ngTemplateOutlet]="_customPlaceholderTemplate()?.templateRef ?? defaultPlaceholderTemplate" />
-		} @else {
-			<ng-container
-				[ngTemplateOutlet]="_customValueTemplate()?.templateRef ?? defaultValueTemplate"
-				[ngTemplateOutletContext]="{ $implicit: _select.value() }"
-			/>
-		}
-
-		<ng-template #defaultValueTemplate>{{ _value() }}</ng-template>
-		<ng-template #defaultPlaceholderTemplate>{{ placeholder() }}</ng-template>
-	`, isInline: true, styles: [":host{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;white-space:nowrap;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectValueComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'brn-select-value, hlm-select-value', imports: [NgTemplateOutlet], template: `
-		@if (_showPlaceholder()) {
-			<ng-container [ngTemplateOutlet]="_customPlaceholderTemplate()?.templateRef ?? defaultPlaceholderTemplate" />
-		} @else {
-			<ng-container
-				[ngTemplateOutlet]="_customValueTemplate()?.templateRef ?? defaultValueTemplate"
-				[ngTemplateOutletContext]="{ $implicit: _select.value() }"
-			/>
-		}
-
-		<ng-template #defaultValueTemplate>{{ _value() }}</ng-template>
-		<ng-template #defaultPlaceholderTemplate>{{ placeholder() }}</ng-template>
-	`, host: {
-                        '[id]': 'id()',
-                        '[attr.data-placeholder]': '_showPlaceholder() ? "" : null',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;white-space:nowrap;pointer-events:none}\n"] }]
-        }] });
-
 let nextId = 0;
-class BrnSelectComponent {
+class BrnSelect {
     _defaultErrorStateMatcher = inject(ErrorStateMatcher);
     _parentForm = inject(NgForm, { optional: true });
     _injector = inject(Injector);
@@ -529,11 +335,11 @@ class BrnSelectComponent {
     compareWith = input((o1, o2) => o1 === o2);
     formDisabled = signal(false);
     /** Label provided by the consumer. */
-    _selectLabel = contentChild(BrnLabelDirective, { descendants: false });
+    _selectLabel = contentChild(BrnLabel, { descendants: false });
     /** Overlay pane containing the options. */
-    _selectContent = contentChild.required(BrnSelectContentComponent);
+    _selectContent = contentChild.required(BrnSelectContent);
     /** @internal */
-    options = contentChildren(BrnSelectOptionDirective, { descendants: true });
+    options = contentChildren(BrnSelectOption, { descendants: true });
     /** @internal Derive the selected options to filter out the unselected options */
     selectedOptions = computed(() => this.options().filter((option) => option.selected()));
     /** Overlay pane containing the options. */
@@ -677,16 +483,16 @@ class BrnSelectComponent {
         }
         return false;
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: BrnSelectComponent, isStandalone: true, selector: "brn-select, hlm-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", value: "valueChange" }, providers: [
-            provideExposedSideProviderExisting((() => BrnSelectComponent)),
-            provideExposesStateProviderExisting((() => BrnSelectComponent)),
-            provideBrnSelect(BrnSelectComponent),
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: BrnSelect, isStandalone: true, selector: "brn-select, hlm-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", value: "valueChange" }, providers: [
+            provideExposedSideProviderExisting((() => BrnSelect)),
+            provideExposesStateProviderExisting((() => BrnSelect)),
+            provideBrnSelect(BrnSelect),
             {
                 provide: BrnFormFieldControl,
-                useExisting: forwardRef((() => BrnSelectComponent)),
+                useExisting: forwardRef((() => BrnSelect)),
             },
-        ], queries: [{ propertyName: "_selectLabel", first: true, predicate: BrnLabelDirective, isSignal: true }, { propertyName: "_selectContent", first: true, predicate: BrnSelectContentComponent, descendants: true, isSignal: true }, { propertyName: "options", predicate: BrnSelectOptionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "_selectLabel", first: true, predicate: BrnLabel, isSignal: true }, { propertyName: "_selectContent", first: true, predicate: BrnSelectContent, descendants: true, isSignal: true }, { propertyName: "options", predicate: BrnSelectOption, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: `
 		@if (!_selectLabel() && placeholder()) {
 			<label class="hidden" [attr.id]="labelId()">{{ placeholder() }}</label>
 		} @else {
@@ -712,21 +518,21 @@ class BrnSelectComponent {
 		>
 			<ng-content />
 		</ng-template>
-	`, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.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"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, 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"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'brn-select, hlm-select',
                     imports: [OverlayModule, CdkListboxModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
-                        provideExposedSideProviderExisting((() => BrnSelectComponent)),
-                        provideExposesStateProviderExisting((() => BrnSelectComponent)),
-                        provideBrnSelect(BrnSelectComponent),
+                        provideExposedSideProviderExisting((() => BrnSelect)),
+                        provideExposesStateProviderExisting((() => BrnSelect)),
+                        provideBrnSelect(BrnSelect),
                         {
                             provide: BrnFormFieldControl,
-                            useExisting: forwardRef((() => BrnSelectComponent)),
+                            useExisting: forwardRef((() => BrnSelect)),
                         },
                     ],
                     template: `
@@ -759,43 +565,237 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class BrnSelectGroup {
+    labelledBy = signal('');
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectGroup, isStandalone: true, selector: "[brnSelectGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelledBy()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnSelectGroup]',
+                    host: {
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                    },
+                }]
+        }] });
+
+class BrnSelectLabel {
+    _group = inject(BrnSelectGroup, { optional: true });
+    _label = inject(BrnLabel, { host: true });
+    constructor() {
+        this._group?.labelledBy.set(this._label.id());
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectLabel, isStandalone: true, selector: "[brnSelectLabel]", hostDirectives: [{ directive: i1$1.BrnLabel }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnSelectLabel]',
+                    hostDirectives: [BrnLabel],
+                }]
+        }], ctorParameters: () => [] });
+
+class BrnSelectPlaceholder {
+    /** @internale */
+    templateRef = inject(TemplateRef);
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectPlaceholder, isStandalone: true, selector: "[brnSelectPlaceholder], [hlmSelectPlaceholder]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectPlaceholder, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnSelectPlaceholder], [hlmSelectPlaceholder]',
+                }]
+        }] });
+
+class BrnSelectTrigger {
+    _elementRef = inject(ElementRef);
+    /** Access the change detector */
+    _changeDetector = inject(ChangeDetectorRef);
+    _select = injectBrnSelect();
+    _ngControl = inject(NgControl, { optional: true });
+    _platform = inject(PLATFORM_ID);
+    _triggerId = computed(() => `${this._select.id()}--trigger`);
+    _contentId = computed(() => `${this._select.id()}--content`);
+    _disabled = computed(() => this._select.disabled() || this._select.formDisabled());
+    _labelledBy = computed(() => {
+        const value = this._select.value();
+        if (Array.isArray(value) && value.length > 0) {
+            return `${this._select.labelId()} ${this._select.id()}--value`;
+        }
+        return this._select.labelId();
+    });
+    _resizeObserver;
+    _statusChangedSubscription;
+    constructor() {
+        this._select.trigger.set(this);
+    }
+    ngOnInit() {
+        if (this._ngControl) {
+            this._statusChangedSubscription = this._ngControl.statusChanges?.subscribe(() => {
+                this._changeDetector.markForCheck();
+            });
+        }
+    }
+    ngAfterViewInit() {
+        this._select.triggerWidth.set(this._elementRef.nativeElement.offsetWidth);
+        // if we are on the client, listen for element resize events
+        if (isPlatformBrowser(this._platform)) {
+            this._resizeObserver = new ResizeObserver(() => this._select.triggerWidth.set(this._elementRef.nativeElement.offsetWidth));
+            this._resizeObserver.observe(this._elementRef.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        this._resizeObserver?.disconnect();
+        this._statusChangedSubscription?.unsubscribe();
+    }
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectTrigger, isStandalone: true, selector: "[brnSelectTrigger]", host: { attributes: { "type": "button", "role": "combobox", "aria-autocomplete": "none" }, listeners: { "keydown.ArrowDown": "_select.show()" }, properties: { "attr.id": "_triggerId()", "disabled": "_disabled()", "attr.aria-expanded": "_select.open()", "attr.aria-controls": "_contentId()", "attr.aria-labelledBy": "_labelledBy()", "attr.dir": "_select.dir()", "class.ng-invalid": "_ngControl?.invalid || null", "class.ng-dirty": "_ngControl?.dirty || null", "class.ng-valid": "_ngControl?.valid || null", "class.ng-touched": "_ngControl?.touched || null", "class.ng-untouched": "_ngControl?.untouched || null", "class.ng-pristine": "_ngControl?.pristine || null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnSelectTrigger]',
+                    host: {
+                        type: 'button',
+                        role: 'combobox',
+                        '[attr.id]': '_triggerId()',
+                        '[disabled]': '_disabled()',
+                        '[attr.aria-expanded]': '_select.open()',
+                        '[attr.aria-controls]': '_contentId()',
+                        '[attr.aria-labelledBy]': '_labelledBy()',
+                        'aria-autocomplete': 'none',
+                        '[attr.dir]': '_select.dir()',
+                        '[class.ng-invalid]': '_ngControl?.invalid || null',
+                        '[class.ng-dirty]': '_ngControl?.dirty || null',
+                        '[class.ng-valid]': '_ngControl?.valid || null',
+                        '[class.ng-touched]': '_ngControl?.touched || null',
+                        '[class.ng-untouched]': '_ngControl?.untouched || null',
+                        '[class.ng-pristine]': '_ngControl?.pristine || null',
+                        '(keydown.ArrowDown)': '_select.show()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class BrnSelectValueTemplate {
+    /** @internal */
+    templateRef = inject(TemplateRef);
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectValueTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnSelectValueTemplate, isStandalone: true, selector: "[brnSelectValue], [hlmSelectValue]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectValueTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnSelectValue], [hlmSelectValue]',
+                }]
+        }] });
+
+class BrnSelectValue {
+    _select = injectBrnSelect();
+    id = computed(() => `${this._select.id()}--value`);
+    placeholder = computed(() => this._select.placeholder());
+    _showPlaceholder = computed(() => this._value() === null || this._value() === undefined || this._value() === '');
+    /** Allow a custom value template */
+    _customValueTemplate = contentChild(BrnSelectValueTemplate, { descendants: true });
+    _customPlaceholderTemplate = contentChild(BrnSelectPlaceholder, { descendants: true });
+    _value = computed(() => {
+        const value = this._values();
+        if (value.length === 0) {
+            return null;
+        }
+        // remove any selected values that are not in the options list
+        const existingOptions = value.filter((val) => this._select.options().some((option) => this._select.compareWith()(option.value(), val)));
+        const selectedOption = existingOptions.map((val) => this._select.options().find((option) => this._select.compareWith()(option.value(), val)));
+        if (selectedOption.length === 0) {
+            return null;
+        }
+        const selectedLabels = selectedOption.map((option) => option?.getLabel());
+        if (this._select.dir() === 'rtl') {
+            selectedLabels.reverse();
+        }
+        return this.transformFn()(selectedLabels);
+    });
+    /** Normalize the values as an array */
+    _values = computed(() => Array.isArray(this._select.value()) ? this._select.value() : [this._select.value()]);
+    transformFn = input((values) => (values ?? []).join(', '));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectValue, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: BrnSelectValue, isStandalone: true, selector: "brn-select-value, hlm-select-value", inputs: { transformFn: { classPropertyName: "transformFn", publicName: "transformFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()", "attr.data-placeholder": "_showPlaceholder() ? \"\" : null" } }, queries: [{ propertyName: "_customValueTemplate", first: true, predicate: BrnSelectValueTemplate, descendants: true, isSignal: true }, { propertyName: "_customPlaceholderTemplate", first: true, predicate: BrnSelectPlaceholder, descendants: true, isSignal: true }], ngImport: i0, template: `
+		@if (_showPlaceholder()) {
+			<ng-container [ngTemplateOutlet]="_customPlaceholderTemplate()?.templateRef ?? defaultPlaceholderTemplate" />
+		} @else {
+			<ng-container
+				[ngTemplateOutlet]="_customValueTemplate()?.templateRef ?? defaultValueTemplate"
+				[ngTemplateOutletContext]="{ $implicit: _select.value() }"
+			/>
+		}
+
+		<ng-template #defaultValueTemplate>{{ _value() }}</ng-template>
+		<ng-template #defaultPlaceholderTemplate>{{ placeholder() }}</ng-template>
+	`, isInline: true, styles: [":host{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;white-space:nowrap;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectValue, decorators: [{
+            type: Component,
+            args: [{ selector: 'brn-select-value, hlm-select-value', imports: [NgTemplateOutlet], template: `
+		@if (_showPlaceholder()) {
+			<ng-container [ngTemplateOutlet]="_customPlaceholderTemplate()?.templateRef ?? defaultPlaceholderTemplate" />
+		} @else {
+			<ng-container
+				[ngTemplateOutlet]="_customValueTemplate()?.templateRef ?? defaultValueTemplate"
+				[ngTemplateOutletContext]="{ $implicit: _select.value() }"
+			/>
+		}
+
+		<ng-template #defaultValueTemplate>{{ _value() }}</ng-template>
+		<ng-template #defaultPlaceholderTemplate>{{ placeholder() }}</ng-template>
+	`, host: {
+                        '[id]': 'id()',
+                        '[attr.data-placeholder]': '_showPlaceholder() ? "" : null',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;white-space:nowrap;pointer-events:none}\n"] }]
+        }] });
+
 const BrnSelectImports = [
-    BrnSelectComponent,
-    BrnSelectContentComponent,
-    BrnSelectTriggerDirective,
-    BrnSelectOptionDirective,
-    BrnSelectValueComponent,
-    BrnSelectScrollDownDirective,
-    BrnSelectScrollUpDirective,
-    BrnSelectGroupDirective,
-    BrnSelectLabelDirective,
-    BrnSelectValueDirective,
-    BrnSelectPlaceholderDirective,
+    BrnSelect,
+    BrnSelectContent,
+    BrnSelectTrigger,
+    BrnSelectOption,
+    BrnSelectValue,
+    BrnSelectScrollDown,
+    BrnSelectScrollUp,
+    BrnSelectGroup,
+    BrnSelectLabel,
+    BrnSelectValueTemplate,
+    BrnSelectPlaceholder,
 ];
 class BrnSelectModule {
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectModule, imports: [BrnSelectComponent,
-            BrnSelectContentComponent,
-            BrnSelectTriggerDirective,
-            BrnSelectOptionDirective,
-            BrnSelectValueComponent,
-            BrnSelectScrollDownDirective,
-            BrnSelectScrollUpDirective,
-            BrnSelectGroupDirective,
-            BrnSelectLabelDirective,
-            BrnSelectValueDirective,
-            BrnSelectPlaceholderDirective], exports: [BrnSelectComponent,
-            BrnSelectContentComponent,
-            BrnSelectTriggerDirective,
-            BrnSelectOptionDirective,
-            BrnSelectValueComponent,
-            BrnSelectScrollDownDirective,
-            BrnSelectScrollUpDirective,
-            BrnSelectGroupDirective,
-            BrnSelectLabelDirective,
-            BrnSelectValueDirective,
-            BrnSelectPlaceholderDirective] });
-    /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectModule, imports: [BrnSelectComponent] });
+    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectModule, imports: [BrnSelect,
+            BrnSelectContent,
+            BrnSelectTrigger,
+            BrnSelectOption,
+            BrnSelectValue,
+            BrnSelectScrollDown,
+            BrnSelectScrollUp,
+            BrnSelectGroup,
+            BrnSelectLabel,
+            BrnSelectValueTemplate,
+            BrnSelectPlaceholder], exports: [BrnSelect,
+            BrnSelectContent,
+            BrnSelectTrigger,
+            BrnSelectOption,
+            BrnSelectValue,
+            BrnSelectScrollDown,
+            BrnSelectScrollUp,
+            BrnSelectGroup,
+            BrnSelectLabel,
+            BrnSelectValueTemplate,
+            BrnSelectPlaceholder] });
+    /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectModule, imports: [BrnSelect] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnSelectModule, decorators: [{
             type: NgModule,
@@ -809,5 +809,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BrnSelectComponent, BrnSelectContentComponent, BrnSelectGroupDirective, BrnSelectImports, BrnSelectLabelDirective, BrnSelectModule, BrnSelectOptionDirective, BrnSelectPlaceholderDirective, BrnSelectScrollDownDirective, BrnSelectScrollUpDirective, BrnSelectTriggerDirective, BrnSelectValueComponent, BrnSelectValueDirective };
+export { BrnSelect, BrnSelectContent, BrnSelectGroup, BrnSelectImports, BrnSelectLabel, BrnSelectModule, BrnSelectOption, BrnSelectPlaceholder, BrnSelectScrollDown, BrnSelectScrollUp, BrnSelectTrigger, BrnSelectValue, BrnSelectValueTemplate };
 //# sourceMappingURL=spartan-ng-brain-select.mjs.map