@spartan-ng/brain 0.0.1-alpha.411 → 0.0.1-alpha.413

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

@@ -1,279 +1,100 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, PLATFORM_ID, computed, Directive, signal, Injectable, effect, input, booleanAttribute, DestroyRef, viewChild, contentChild, contentChildren, Component, ChangeDetectionStrategy, ChangeDetectorRef, output, NgModule } from '@angular/core';
-import * as i1 from '@angular/cdk/listbox';
-import { CdkOption, CdkListbox, CdkListboxModule } from '@angular/cdk/listbox';
-import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
-import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
-import { Subject, fromEvent, interval, of, combineLatest } from 'rxjs';
-import { skip, takeUntil, map, switchMap, delay } from 'rxjs/operators';
-import * as i1$1 from '@spartan-ng/brain/label';
+import { InjectionToken, inject, ElementRef, input, booleanAttribute, computed, signal, Directive, DestroyRef, Injector, viewChild, contentChild, contentChildren, effect, afterNextRender, untracked, Component, ChangeDetectionStrategy, TemplateRef, PLATFORM_ID, numberAttribute, model, 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 * as i1$2 from '@angular/cdk/overlay';
+import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { CdkListboxModule } from '@angular/cdk/listbox';
+import * as i1$1 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import { provideExposedSideProviderExisting, provideExposesStateProviderExisting } from '@spartan-ng/brain/core';
 import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
 import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/brain/forms';
 
-class BrnSelectTriggerDirective {
-    _el = inject(ElementRef);
-    _selectService = inject(BrnSelectService);
-    _ngControl = inject(NgControl, { optional: true });
-    _platform = inject(PLATFORM_ID);
-    isExpanded = this._selectService.isExpanded;
-    selectTriggerId = computed(() => `${this._selectService.id()}--trigger`);
-    selectContentId = computed(() => `${this._selectService.id()}--content`);
-    selectDisable = computed(() => this._selectService.disabled());
-    selectTriggerLabelledBy = computed(() => {
-        if (this._selectService.value() && this._selectService.value().length > 0) {
-            return `${this._selectService.labelId()} ${this._selectService.id()}--value`;
-        }
-        return this._selectService.labelId();
-    });
-    _resizeObserver;
-    constructor() {
-        if (!this._selectService)
-            return;
-        this._selectService._setSelectTrigger(this);
-    }
-    ngAfterViewInit() {
-        this._selectService.setTriggerWidth(this._el.nativeElement.offsetWidth);
-        // if we are on the client, listen for element resize events
-        if (isPlatformBrowser(this._platform)) {
-            this._resizeObserver = new ResizeObserver(() => this._selectService.setTriggerWidth(this._el.nativeElement.offsetWidth));
-            this._resizeObserver.observe(this._el.nativeElement);
-        }
-    }
-    ngOnDestroy() {
-        this._resizeObserver?.disconnect();
-    }
-    focus() {
-        this._el.nativeElement.focus();
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: BrnSelectTriggerDirective, isStandalone: true, selector: "[brnSelectTrigger]", host: { attributes: { "role": "combobox", "aria-autocomplete": "none", "type": "button" }, properties: { "attr.id": "selectTriggerId()", "disabled": "selectDisable()", "attr.aria-expanded": "isExpanded()", "attr.aria-controls": "selectContentId() + ''", "attr.aria-labelledBy": "selectTriggerLabelledBy()", "attr.dir": "_selectService.dir()", "class.ng-invalid": "this._ngControl?.invalid || null", "class.ng-dirty": "this._ngControl?.dirty || null", "class.ng-valid": "this._ngControl?.valid || null", "class.ng-touched": "this._ngControl?.touched || null", "class.ng-untouched": "this._ngControl?.untouched || null", "class.ng-pristine": "this._ngControl?.pristine || null" } }, ngImport: i0 });
+const BrnSelectContentToken = new InjectionToken('BrnSelectContentToken');
+function injectBrnSelectContent() {
+    return inject(BrnSelectContentToken);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[brnSelectTrigger]',
-                    standalone: true,
-                    host: {
-                        role: 'combobox',
-                        '[attr.id]': 'selectTriggerId()',
-                        '[disabled]': 'selectDisable()',
-                        '[attr.aria-expanded]': 'isExpanded()',
-                        '[attr.aria-controls]': "selectContentId() + ''",
-                        '[attr.aria-labelledBy]': 'selectTriggerLabelledBy()',
-                        'aria-autocomplete': 'none',
-                        '[attr.dir]': '_selectService.dir()',
-                        '[class.ng-invalid]': 'this._ngControl?.invalid || null',
-                        '[class.ng-dirty]': 'this._ngControl?.dirty || null',
-                        '[class.ng-valid]': 'this._ngControl?.valid || null',
-                        '[class.ng-touched]': 'this._ngControl?.touched || null',
-                        '[class.ng-untouched]': 'this._ngControl?.untouched || null',
-                        '[class.ng-pristine]': 'this._ngControl?.pristine || null',
-                        type: 'button',
-                    },
-                }]
-        }], ctorParameters: () => [] });
-class BrnSelectService {
-    state = signal({
-        id: '',
-        labelId: '',
-        panelId: '',
-        isExpanded: false,
-        placeholder: signal(''),
-        multiple: signal(false),
-        disabled: signal(false),
-        disabledBySetDisabled: signal(false),
-        dir: signal('ltr'),
-        selectedOptions: [],
-        possibleOptions: [],
-        value: '',
-        triggerWidth: 0,
-    });
-    id = computed(() => this.state().id);
-    labelId = computed(() => this.state().labelId);
-    panelId = computed(() => this.state().panelId);
-    placeholder = computed(() => this.state().placeholder());
-    disabled = computed(() => this.state().disabled() || this.state().disabledBySetDisabled());
-    isExpanded = computed(() => this.state().isExpanded);
-    multiple = computed(() => this.state().multiple());
-    dir = computed(() => this.state().dir());
-    selectedOptions = computed(() => this.state().selectedOptions);
-    value = computed(() => this.state().value);
-    triggerWidth = computed(() => this.state().triggerWidth);
-    possibleOptions = computed(() => this.state().possibleOptions);
-    _multiple$ = toObservable(this.multiple);
-    listBoxValueChangeEvent$ = new Subject();
-    _selectTrigger;
-    get selectTrigger() {
-        return this._selectTrigger;
-    }
-    constructor() {
-        this.listBoxValueChangeEvent$.pipe(takeUntilDestroyed()).subscribe((listBoxChange) => {
-            const updatedSelections = this.multiple() ? this.getUpdatedOptions(listBoxChange) : [listBoxChange.option];
-            const value = this.multiple() ? listBoxChange.value : listBoxChange.value[0];
-            this.state.update((state) => ({
-                ...state,
-                selectedOptions: [...updatedSelections],
-                value: value,
-            }));
-        });
-        // We need to skip the first value because we don't want to deselect all options when the component is initialized with a preselected value e.g. by the form control
-        this._multiple$.pipe(skip(1), takeUntilDestroyed()).subscribe((multiple) => {
-            if (!multiple && this.value().length > 1) {
-                this.deselectAllOptions();
-            }
-        });
-    }
-    setTriggerWidth(triggerWidth) {
-        this.state.update((s) => ({ ...s, triggerWidth }));
-    }
-    getUpdatedOptions(latestListboxChange) {
-        const isNewSelection = latestListboxChange.value.findIndex((value) => value === latestListboxChange.option?.value);
-        if (isNewSelection === -1) {
-            const removedOptionIndex = this.selectedOptions().findIndex((option) => latestListboxChange.option === option);
-            const options = this.selectedOptions();
-            options.splice(removedOptionIndex, 1);
-            return options;
-        }
-        return [...this.selectedOptions(), latestListboxChange.option];
-    }
-    deselectAllOptions() {
-        this.state.update((state) => ({
-            ...state,
-            selectedOptions: [],
-            value: [],
-        }));
-    }
-    // Needed due to https://github.com/angular/angular/issues/20810
-    _setSelectTrigger(trigger) {
-        this._selectTrigger = trigger;
-    }
-    setInitialSelectedOptions(value) {
-        this.selectOptionByValue(value);
-        this.state.update((state) => ({
-            ...state,
-            value: value,
-            initialSelectedOptions: this.selectedOptions(),
-            selectedOptions: this.selectedOptions(),
-        }));
-    }
-    /**
-     * Sync the updated options with "possibleOptions" in the select service
-     */
-    updatePossibleOptions(options) {
-        this.state.update((state) => ({
-            ...state,
-            possibleOptions: options,
-        }));
-    }
-    selectOptionByValue(value) {
-        const options = this.possibleOptions();
-        if (value === null || value === undefined) {
-            const nullOrUndefinedOption = options.find((o) => o && o.value === value);
-            if (!nullOrUndefinedOption) {
-                this.state.update((state) => ({
-                    ...state,
-                    selectedOptions: [],
-                    value: this.multiple() ? [] : '',
-                }));
-                return;
-            }
-        }
-        if (this.multiple()) {
-            const selectedOptions = options.filter((option) => {
-                if (Array.isArray(value)) {
-                    return value.includes(option?.value);
-                }
-                return value === option?.value;
-            });
-            this.state.update((state) => ({
-                ...state,
-                selectedOptions,
-                value: value,
-            }));
-        }
-        else {
-            const selectedOption = options.find((option) => option?.value === value);
-            if (!selectedOption) {
-                return;
-            }
-            this.state.update((state) => ({
-                ...state,
-                selectedOptions: [selectedOption],
-                value: selectedOption.value,
-            }));
-        }
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectService });
+function provideBrnSelectContent(select) {
+    return { provide: BrnSelectContentToken, useExisting: select };
+}
+
+const BrnSelectToken = new InjectionToken('BrnSelectToken');
+function injectBrnSelect() {
+    return inject(BrnSelectToken);
+}
+function provideBrnSelect(select) {
+    return { provide: BrnSelectToken, useExisting: select };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
 
+let nextId$1 = 0;
 class BrnSelectOptionDirective {
-    _cdkSelectOption = inject(CdkOption, { host: true });
-    _selectService = inject(BrnSelectService);
-    _focused = signal(false);
+    _select = injectBrnSelect();
+    _content = injectBrnSelectContent();
     elementRef = inject(ElementRef);
-    selected = computed(() => {
-        if (Array.isArray(this._selectService.value())) {
-            const itemFound = this._selectService.value().find((val) => val === this._cdkSelectOption.value);
-            return !!itemFound;
-        }
-        return this._cdkSelectOption.value === this._selectService.value();
+    id = input(`brn-option-${nextId$1++}`);
+    value = input();
+    // we use "_disabled" here because disabled is already defined in the Highlightable interface
+    _disabled = input(false, {
+        alias: 'disabled',
+        transform: booleanAttribute,
     });
-    focused = computed(() => this._focused());
+    get disabled() {
+        return this._disabled();
+    }
+    selected = computed(() => this.value() !== undefined && this._select.isSelected(this.value()));
+    _active = signal(false);
     checkedState = computed(() => (this.selected() ? 'checked' : 'unchecked'));
-    dir = computed(() => this._selectService.dir());
-    constructor() {
-        effect(() => {
-            this._cdkSelectOption.value = this.value();
-        });
-        effect(() => {
-            this._cdkSelectOption.disabled = this.disabledSignal();
-        });
+    dir = this._select.dir;
+    select() {
+        if (this._disabled()) {
+            return;
+        }
+        this._select.selectOption(this.value());
     }
-    ngAfterContentChecked() {
-        this._cdkSelectOption.value = this.value();
+    /** Get the label for this element which is required by the FocusableOption interface. */
+    getLabel() {
+        return this.elementRef.nativeElement.textContent?.trim() ?? '';
     }
-    value = input(null);
-    // we use "disabledSignal" here because disabled is already defined in the FocusableOption interface
-    disabledSignal = input(false, {
-        alias: 'disabled',
-        transform: booleanAttribute,
-    });
-    hover() {
-        this.focus();
+    setActiveStyles() {
+        this._active.set(true);
+        // scroll the option into view if it is not visible
+        this.elementRef.nativeElement.scrollIntoView({ block: 'nearest' });
     }
-    focus() {
-        this._cdkSelectOption.focus();
-        this._focused.set(true);
+    setInactiveStyles() {
+        this._active.set(false);
     }
-    blur() {
-        this._focused.set(false);
+    activate() {
+        if (this._disabled()) {
+            return;
+        }
+        this._content.setActiveOption(this);
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", type: BrnSelectOptionDirective, isStandalone: true, selector: "[brnOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledSignal: { classPropertyName: "disabledSignal", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "hover()", "blur": "blur()" }, properties: { "attr.dir": "_selectService.dir()", "attr.data-disabled": "disabledSignal() ? '' : undefined" } }, hostDirectives: [{ directive: i1.CdkOption }], ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.5", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnOption]',
                     standalone: true,
-                    hostDirectives: [CdkOption],
                     host: {
-                        '(mouseenter)': 'hover()',
-                        '(blur)': 'blur()',
-                        '[attr.dir]': '_selectService.dir()',
-                        '[attr.data-disabled]': "disabledSignal() ? '' : undefined",
+                        role: 'option',
+                        '[id]': 'id()',
+                        '[attr.aria-selected]': 'selected()',
+                        '[attr.aria-disabled]': '_disabled()',
+                        '(click)': 'select()',
+                        '[attr.dir]': '_select.dir()',
+                        '[attr.data-active]': "_active() ? '' : undefined",
+                        '[attr.data-disabled]': "_disabled() ? '' : undefined",
+                        '(mouseenter)': 'activate()',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 const SCROLLBY_PIXELS = 100;
 class BrnSelectScrollUpDirective {
@@ -333,51 +154,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }] });
 class BrnSelectContentComponent {
-    _el = inject(ElementRef);
-    _cdkListbox = inject(CdkListbox, { host: true });
-    _destroyRef = inject(DestroyRef);
-    _selectService = inject(BrnSelectService);
-    labelledBy = this._selectService.labelId;
-    id = this._selectService.id;
+    _elementRef = inject(ElementRef);
+    _injector = inject(Injector);
+    _select = injectBrnSelect();
     canScrollUp = signal(false);
     canScrollDown = signal(false);
-    initialSelectedOptions$ = toObservable(this._selectService.selectedOptions);
     viewport = viewChild.required('viewport');
     scrollUpBtn = contentChild(BrnSelectScrollUpDirective);
     scrollDownBtn = contentChild(BrnSelectScrollDownDirective);
     _options = contentChildren(BrnSelectOptionDirective, { descendants: true });
+    /** @internal */
+    keyManager = null;
     constructor() {
-        this._cdkListbox.valueChange
-            .asObservable()
-            .pipe(takeUntilDestroyed())
-            .subscribe((val) => this._selectService.listBoxValueChangeEvent$.next(val));
         effect(() => {
-            this._cdkListbox.multiple = this._selectService.multiple();
-            this._selectService.isExpanded() && setTimeout(() => this.updateArrowDisplay());
+            this._select.open() && afterNextRender(() => this.updateArrowDisplay(), { injector: this._injector });
         });
     }
-    ngAfterViewInit() {
-        this.setInitiallySelectedOptions();
-    }
-    setInitiallySelectedOptions() {
-        this.initialSelectedOptions$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((selectedOptions) => {
-            // Reapplying cdkLibstbox multiple because seems this is running before effect that
-            // updates cdklistbox, reapplying multiple true so we can set the multiple initial options
-            if (this._selectService.multiple()) {
-                this._cdkListbox.multiple = true;
+    ngAfterContentInit() {
+        this.keyManager = new ActiveDescendantKeyManager(this._options, this._injector)
+            .withHomeAndEnd()
+            .withVerticalOrientation()
+            .withTypeAhead()
+            .withAllowedModifierKeys(['shiftKey'])
+            .withWrap()
+            .skipPredicate((option) => option._disabled());
+        effect(() => {
+            // any time the select is opened, we need to focus the first selected option or the first option
+            const open = this._select.open();
+            const options = this._options();
+            if (!open || !options.length) {
+                return;
             }
-            for (const cdkOption of this._selectService.possibleOptions()) {
-                if (selectedOptions.includes(cdkOption)) {
-                    cdkOption?.select();
+            untracked(() => {
+                const selectedOption = options.find((option) => option.selected());
+                if (selectedOption) {
+                    this.keyManager?.setActiveItem(selectedOption);
                 }
                 else {
-                    cdkOption?.deselect();
+                    this.keyManager?.setFirstItemActive();
                 }
-            }
-            for (const cdkOption of selectedOptions) {
-                cdkOption?.select();
-            }
-        });
+            });
+        }, { injector: this._injector });
     }
     updateArrowDisplay() {
         const { scrollTop, scrollHeight, clientHeight } = this.viewport().nativeElement;
@@ -389,7 +206,7 @@ class BrnSelectContentComponent {
         this.updateArrowDisplay();
     }
     focusList() {
-        this._cdkListbox.focus();
+        this._elementRef.nativeElement.focus();
     }
     moveFocusUp() {
         this.viewport().nativeElement.scrollBy({ top: -SCROLLBY_PIXELS, behavior: 'smooth' });
@@ -399,15 +216,29 @@ class BrnSelectContentComponent {
     }
     moveFocusDown() {
         this.viewport().nativeElement.scrollBy({ top: SCROLLBY_PIXELS, behavior: 'smooth' });
-        const viewportSize = this._el.nativeElement.scrollHeight;
+        const viewportSize = this._elementRef.nativeElement.scrollHeight;
         const viewportScrollPosition = this.viewport().nativeElement.scrollTop;
         if (viewportSize + viewportScrollPosition + SCROLLBY_PIXELS >
             this.viewport().nativeElement.scrollHeight + SCROLLBY_PIXELS / 2) {
             this.scrollDownBtn()?.stopEmittingEvents();
         }
     }
+    setActiveOption(option) {
+        const index = this._options().findIndex((o) => o === option);
+        if (index === -1) {
+            return;
+        }
+        this.keyManager?.setActiveItem(index);
+    }
+    selectActiveItem(event) {
+        event.preventDefault();
+        const activeOption = this.keyManager?.activeItem;
+        if (activeOption) {
+            this._select.selectOption(activeOption.value());
+        }
+    }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.5", type: BrnSelectContentComponent, isStandalone: true, selector: "brn-select-content, hlm-select-content:not(noHlm)", host: { properties: { "attr.aria-labelledBy": "labelledBy()", "attr.aria-controlledBy": "id() +'--trigger'", "id": "id() + '--content'", "attr.dir": "_selectService.dir()" } }, 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 }], hostDirectives: [{ directive: i1.CdkListbox }], ngImport: i0, template: `
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.5", 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: `
 		<ng-template #scrollUp>
 			<ng-content select="hlm-select-scroll-up" />
 			<ng-content select="brnSelectScrollUp" />
@@ -436,11 +267,20 @@ class BrnSelectContentComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'brn-select-content, hlm-select-content:not(noHlm)', standalone: true, imports: [BrnSelectScrollUpDirective, BrnSelectScrollDownDirective, NgTemplateOutlet], hostDirectives: [CdkListbox], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.aria-labelledBy]': 'labelledBy()',
-                        '[attr.aria-controlledBy]': "id() +'--trigger'",
-                        '[id]': "id() + '--content'",
-                        '[attr.dir]': '_selectService.dir()',
+            args: [{ standalone: true, selector: 'brn-select-content, hlm-select-content:not(noHlm)', imports: [NgTemplateOutlet], providers: [provideBrnSelectContent(BrnSelectContentComponent)], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        role: 'listbox',
+                        tabindex: '0',
+                        '[attr.aria-multiselectable]': '_select.multiple()',
+                        '[attr.aria-disabled]': '_select.disabled() || _select._formDisabled()',
+                        'aria-orientation': 'vertical',
+                        '[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()',
+                        '(keydown)': 'keyManager?.onKeydown($event)',
+                        '(keydown.enter)': 'selectActiveItem($event)',
+                        '(keydown.space)': 'selectActiveItem($event)',
                     }, template: `
 		<ng-template #scrollUp>
 			<ng-content select="hlm-select-scroll-up" />
@@ -493,7 +333,7 @@ class BrnSelectLabelDirective {
         this._group?.labelledBy.set(this._label.id());
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: BrnSelectLabelDirective, isStandalone: true, selector: "[brnSelectLabel]", hostDirectives: [{ directive: i1$1.BrnLabelDirective }], ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: BrnSelectLabelDirective, isStandalone: true, selector: "[brnSelectLabel]", hostDirectives: [{ directive: i1.BrnLabelDirective }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectLabelDirective, decorators: [{
             type: Directive,
@@ -504,71 +344,195 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class BrnSelectValueComponent {
-    _selectService = inject(BrnSelectService);
-    id = computed(() => `${this._selectService.id()}--value`);
-    placeholder = computed(() => this._selectService.placeholder());
-    value = null;
-    transformFn = input((values) => (values ?? []).join(', '));
+class BrnSelectPlaceholderDirective {
+    /** @internale */
+    templateRef = inject(TemplateRef);
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectPlaceholderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: BrnSelectPlaceholderDirective, isStandalone: true, selector: "[brnSelectPlaceholder], [hlmSelectPlaceholder]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectPlaceholderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[brnSelectPlaceholder], [hlmSelectPlaceholder]',
+                }]
+        }] });
+
+class BrnSelectTriggerDirective {
+    _elementRef = inject(ElementRef);
+    _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;
     constructor() {
-        const cdr = inject(ChangeDetectorRef);
-        // In certain cases (when using a computed signal for value) where the value of the select and the options are
-        // changed dynamically, the template does not update until the next frame. To work around this we can use a simple
-        // string variable in the template and manually trigger change detection when we update it.
-        toObservable(this._selectService.selectedOptions)
-            .pipe(takeUntilDestroyed())
-            .subscribe((value) => {
-            if (value.length === 0) {
-                this.value = null;
-                cdr.detectChanges();
-                return;
-            }
-            const selectedLabels = value.map((selectedOption) => selectedOption?.getLabel());
-            if (this._selectService.dir() === 'rtl') {
-                selectedLabels.reverse();
-            }
-            const result = this.transformFn()(selectedLabels);
-            this.value = result;
-            cdr.detectChanges();
-        });
+        this._select.trigger.set(this);
+    }
+    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();
+    }
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", 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: "18.2.5", ngImport: i0, type: BrnSelectTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnSelectTrigger]',
+                    standalone: true,
+                    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: "18.2.5", ngImport: i0, type: BrnSelectValueDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: BrnSelectValueDirective, isStandalone: true, selector: "[brnSelectValue], [hlmSelectValue]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectValueDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    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) => option.value() === val));
+        const selectedOption = existingOptions.map((val) => this._select.options().find((option) => 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: "18.2.5", ngImport: i0, type: BrnSelectValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.5", 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()" } }, ngImport: i0, template: `
-		{{ value || placeholder() }}
-	`, isInline: true, styles: [":host{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;white-space:nowrap;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", 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()" } }, 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: "18.2.5", ngImport: i0, type: BrnSelectValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'brn-select-value, hlm-select-value', template: `
-		{{ value || placeholder() }}
+            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()',
                     }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;white-space:nowrap;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [] });
+        }] });
 
 let nextId = 0;
 class BrnSelectComponent {
-    _selectService = inject(BrnSelectService);
-    triggerWidth = this._selectService.triggerWidth;
-    multiple = input(false);
+    _defaultErrorStateMatcher = inject(ErrorStateMatcher);
+    _parentForm = inject(NgForm, { optional: true });
+    _injector = inject(Injector);
+    _parentFormGroup = inject(FormGroupDirective, { optional: true });
+    ngControl = inject(NgControl, { optional: true, self: true });
+    id = input(`brn-select-${nextId++}`);
+    multiple = input(false, {
+        transform: booleanAttribute,
+    });
     placeholder = input('');
-    disabled = input(false);
+    disabled = input(false, {
+        transform: booleanAttribute,
+    });
     dir = input('ltr');
-    _disabledFromSetDisabledState = signal(false);
+    closeDelay = input(100, {
+        transform: numberAttribute,
+    });
+    open = model(false);
+    value = model();
+    compareWith = input((o1, o2) => o1 === o2);
+    _formDisabled = signal(false);
+    /** Label provided by the consumer. */
     selectLabel = contentChild(BrnLabelDirective, { descendants: false });
     /** Overlay pane containing the options. */
     selectContent = contentChild.required(BrnSelectContentComponent);
-    options = contentChildren(CdkOption, { descendants: true });
-    options$ = toObservable(this.options);
-    optionsAndIndex$ = this.options$.pipe(map((options, index) => [options, index]));
+    /** @internal */
+    options = contentChildren(BrnSelectOptionDirective, { 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. */
-    _overlayDir = viewChild(CdkConnectedOverlay);
-    closeDelay = input(100);
-    isExpanded = this._selectService.isExpanded;
-    _delayedExpanded = toSignal(toObservable(this.isExpanded).pipe(switchMap((expanded) => (!expanded ? of(expanded).pipe(delay(this.closeDelay())) : of(expanded))), takeUntilDestroyed()), { initialValue: false });
-    state = computed(() => (this.isExpanded() ? 'open' : 'closed'));
-    openedChange = output();
-    valueChange = output();
+    _overlayDir = viewChild.required(CdkConnectedOverlay);
+    trigger = signal(null);
+    triggerWidth = signal(0);
+    _delayedExpanded = toSignal(toObservable(this.open).pipe(switchMap((expanded) => (!expanded ? of(expanded).pipe(delay(this.closeDelay())) : of(expanded))), takeUntilDestroyed()), { initialValue: false });
+    state = computed(() => (this.open() ? 'open' : 'closed'));
     _positionChanges$ = new Subject();
     side = toSignal(this._positionChanges$.pipe(map((change) => 
     // todo: better translation or adjusting hlm to take that into account
@@ -577,14 +541,11 @@ class BrnSelectComponent {
             ? 'left'
             : 'right'
         : change.connectionPair.originY)), { initialValue: 'bottom' });
-    backupLabelId = computed(() => this._selectService.labelId());
-    labelProvided = signal(false);
-    ngControl = inject(NgControl, { optional: true, self: true });
+    labelId = computed(() => this.selectLabel()?.id ?? `${this.id()}--label`);
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onChange = () => { };
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onTouched = () => { };
-    _shouldEmitValueChange = signal(false);
     /*
      * This position config ensures that the top "start" corner of the overlay
      * is aligned with with the top "start" of the origin by default (overlapping
@@ -618,113 +579,41 @@ class BrnSelectComponent {
         },
     ];
     errorStateTracker;
-    _defaultErrorStateMatcher = inject(ErrorStateMatcher);
-    _parentForm = inject(NgForm, { optional: true });
-    _parentFormGroup = inject(FormGroupDirective, { optional: true });
     errorState = computed(() => this.errorStateTracker.errorState());
-    writeValue$ = new Subject();
     constructor() {
-        this._selectService.state.update((state) => ({
-            ...state,
-            multiple: this.multiple,
-            placeholder: this.placeholder,
-            disabled: this.disabled,
-            disabledBySetDisabled: this._disabledFromSetDisabledState,
-            dir: this.dir,
-        }));
-        this.handleOptionChanges();
-        this.handleInitialOptionSelect();
-        this._selectService.state.update((state) => ({
-            ...state,
-            id: `brn-select-${nextId++}`,
-        }));
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }
-        // Watch for Listbox Selection Changes to trigger Collapse and Value Change
-        this._selectService.listBoxValueChangeEvent$.pipe(takeUntilDestroyed()).subscribe(() => {
-            if (!this.multiple()) {
-                this.close();
-            }
-            // we set shouldEmitValueChange to true because we want to propagate the value change
-            // as a result of user interaction
-            this._shouldEmitValueChange.set(true);
-        });
-        /**
-         * Listening to value changes in order to trigger forms api on change
-         * ShouldEmitValueChange simply ensures we only propagate value change when a user makes a selection
-         * we don't propagate changes made from outside the component (ex. patch value or initial value from form control)
-         */
-        toObservable(this._selectService.value).subscribe((value) => {
-            if (this._shouldEmitValueChange()) {
-                this._onChange((value ?? null));
-                this.valueChange.emit((value ?? null));
-            }
-            this._shouldEmitValueChange.set(true);
-        });
         this.errorStateTracker = new ErrorStateTracker(this._defaultErrorStateMatcher, this.ngControl, this._parentFormGroup, this._parentForm);
     }
-    ngAfterContentInit() {
-        // Check if Label Directive Provided and pass to service
-        const label = this.selectLabel();
-        if (label) {
-            this.labelProvided.set(true);
-            this._selectService.state.update((state) => ({
-                ...state,
-                labelId: label.id(),
-            }));
-        }
-        else if (this.placeholder()) {
-            this._selectService.state.update((state) => ({
-                ...state,
-                labelId: `${state.id}--label`,
-            }));
-        }
-    }
     ngDoCheck() {
         this.errorStateTracker.updateErrorState();
     }
     toggle() {
-        if (this.isExpanded()) {
-            this.close();
+        if (this.open()) {
+            this.hide();
         }
         else {
-            this.open();
+            this.show();
         }
     }
-    open() {
-        if (!this._canOpen())
+    show() {
+        if (this.open() || this.disabled() || this._formDisabled() || this.options()?.length == 0) {
             return;
-        this._selectService.state.update((state) => ({
-            ...state,
-            isExpanded: true,
-        }));
-        this.openedChange.emit(true);
-        this._moveFocusToCDKList();
-    }
-    close() {
-        if (!this.isExpanded())
-            return;
-        if (this._selectService.selectTrigger) {
-            this._selectService.selectTrigger.focus();
         }
-        this.openedChange.emit(false);
-        this._selectService.state.update((state) => ({
-            ...state,
-            isExpanded: false,
-        }));
-        this._onTouched();
-    }
-    _canOpen() {
-        return !this.isExpanded() && !this.disabled() && this.options()?.length > 0;
+        this.open.set(true);
+        afterNextRender(() => this.selectContent().focusList(), { injector: this._injector });
     }
-    _moveFocusToCDKList() {
-        setTimeout(() => {
-            this.selectContent()?.focusList();
-        });
+    hide() {
+        if (!this.open())
+            return;
+        this.open.set(false);
+        this._onTouched();
+        // restore focus to the trigger
+        this.trigger()?.focus();
     }
     writeValue(value) {
-        this.writeValue$.next(value);
+        this.value.set(value);
     }
     registerOnChange(fn) {
         this._onChange = fn;
@@ -733,80 +622,65 @@ class BrnSelectComponent {
         this._onTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this._disabledFromSetDisabledState.set(isDisabled);
+        this._formDisabled.set(isDisabled);
     }
-    /**
-     * Once writeValue is called and options are available we can handle setting the initial options
-     * @private
-     */
-    handleInitialOptionSelect() {
-        // Write value cannot be handled until options are available, so we wait until both are available with a combineLatest
-        combineLatest([this.writeValue$, this.options$])
-            .pipe(map((values, index) => [...values, index]), takeUntilDestroyed())
-            .subscribe(([value, _, index]) => {
-            this._shouldEmitValueChange.set(false);
-            this._selectService.setInitialSelectedOptions(value);
-            // the first time this observable emits a value we are simply setting the initial state
-            // this change should not count as changing the state of the select, so we need to mark as pristine
-            if (index === 0) {
-                this.ngControl?.control?.markAsPristine();
-            }
-        });
+    selectOption(value) {
+        // if this is a multiple select we need to add the value to the array
+        if (this.multiple()) {
+            const currentValue = this.value();
+            const newValue = currentValue ? [...currentValue, value] : [value];
+            this.value.set(newValue);
+        }
+        else {
+            this.value.set(value);
+        }
+        this._onChange?.(this.value());
+        // if this is single select close the dropdown
+        if (!this.multiple()) {
+            this.hide();
+        }
     }
-    /**
-     * When options change, our current selected options may become invalid
-     * Here we will automatically update our current selected options so that they are always inline with the possibleOptions
-     * @private
-     */
-    handleOptionChanges() {
-        this.optionsAndIndex$.pipe(takeUntilDestroyed()).subscribe(([options, index]) => {
-            if (index > 0) {
-                this.handleInvalidOptions(options);
-            }
-            this._selectService.updatePossibleOptions(options);
-        });
+    deselectOption(value) {
+        if (this.multiple()) {
+            const currentValue = this.value();
+            const newValue = currentValue.filter((val) => val !== value);
+            this.value.set(newValue);
+        }
+        else {
+            this.value.set(null);
+        }
+        this._onChange?.(this.value());
     }
-    /**
-     * Check that our "selectedOptions" are still valid when "possibleOptions" is about to be updated
-     */
-    handleInvalidOptions(options) {
-        const selectedOptions = this._selectService.selectedOptions();
-        const availableOptionSet = new Set(options);
-        if (this._selectService.multiple()) {
-            const filteredOptions = selectedOptions.filter((o) => availableOptionSet.has(o));
-            if (selectedOptions.length !== filteredOptions.length) {
-                const value = filteredOptions.map((o) => o?.value ?? '');
-                this._selectService.state.update((state) => ({
-                    ...state,
-                    selectedOptions: filteredOptions,
-                    value: value,
-                }));
-            }
+    toggleSelect(value) {
+        if (this.isSelected(value)) {
+            this.deselectOption(value);
         }
         else {
-            const selectedOption = selectedOptions[0] ?? null;
-            if (selectedOption !== null && !availableOptionSet.has(selectedOption)) {
-                this._selectService.state.update((state) => ({
-                    ...state,
-                    selectedOptions: [],
-                    value: '',
-                }));
-            }
+            this.selectOption(value);
+        }
+    }
+    isSelected(value) {
+        const selection = this.value();
+        if (Array.isArray(selection)) {
+            return selection.some((val) => this.compareWith()(val, value));
         }
+        else if (value !== undefined) {
+            return this.compareWith()(selection, value);
+        }
+        return false;
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: BrnSelectComponent, isStandalone: true, selector: "brn-select, hlm-select", inputs: { 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 } }, outputs: { openedChange: "openedChange", valueChange: "valueChange" }, providers: [
-            BrnSelectService,
-            CdkListbox,
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", 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),
             {
                 provide: BrnFormFieldControl,
                 useExisting: BrnSelectComponent,
             },
-        ], queries: [{ propertyName: "selectLabel", first: true, predicate: BrnLabelDirective, isSignal: true }, { propertyName: "selectContent", first: true, predicate: BrnSelectContentComponent, descendants: true, isSignal: true }, { propertyName: "options", predicate: CdkOption, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: `
-		@if (!labelProvided() && placeholder()) {
-			<label class="hidden" [attr.id]="backupLabelId()">{{ placeholder() }}</label>
+        ], 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: `
+		@if (!selectLabel() && placeholder()) {
+			<label class="hidden" [attr.id]="labelId()">{{ placeholder() }}</label>
 		} @else {
 			<ng-content select="label[hlmLabel],label[brnLabel]" />
 		}
@@ -814,6 +688,7 @@ class BrnSelectComponent {
 		<div cdk-overlay-origin (click)="toggle()" #trigger="cdkOverlayOrigin">
 			<ng-content select="hlm-select-trigger,[brnSelectTrigger]" />
 		</div>
+
 		<ng-template
 			cdk-connected-overlay
 			cdkConnectedOverlayLockPosition
@@ -823,13 +698,13 @@ class BrnSelectComponent {
 			[cdkConnectedOverlayOpen]="_delayedExpanded()"
 			[cdkConnectedOverlayPositions]="_positions"
 			[cdkConnectedOverlayWidth]="triggerWidth() > 0 ? triggerWidth() : 'auto'"
-			(backdropClick)="close()"
-			(detach)="close()"
+			(backdropClick)="hide()"
+			(detach)="hide()"
 			(positionChange)="_positionChanges$.next($event)"
 		>
 			<ng-content />
 		</ng-template>
-	`, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.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$2.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$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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectComponent, decorators: [{
             type: Component,
@@ -839,18 +714,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                     imports: [OverlayModule, CdkListboxModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
-                        BrnSelectService,
-                        CdkListbox,
                         provideExposedSideProviderExisting((() => BrnSelectComponent)),
                         provideExposesStateProviderExisting((() => BrnSelectComponent)),
+                        provideBrnSelect(BrnSelectComponent),
                         {
                             provide: BrnFormFieldControl,
                             useExisting: BrnSelectComponent,
                         },
                     ],
                     template: `
-		@if (!labelProvided() && placeholder()) {
-			<label class="hidden" [attr.id]="backupLabelId()">{{ placeholder() }}</label>
+		@if (!selectLabel() && placeholder()) {
+			<label class="hidden" [attr.id]="labelId()">{{ placeholder() }}</label>
 		} @else {
 			<ng-content select="label[hlmLabel],label[brnLabel]" />
 		}
@@ -858,6 +732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
 		<div cdk-overlay-origin (click)="toggle()" #trigger="cdkOverlayOrigin">
 			<ng-content select="hlm-select-trigger,[brnSelectTrigger]" />
 		</div>
+
 		<ng-template
 			cdk-connected-overlay
 			cdkConnectedOverlayLockPosition
@@ -867,8 +742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
 			[cdkConnectedOverlayOpen]="_delayedExpanded()"
 			[cdkConnectedOverlayPositions]="_positions"
 			[cdkConnectedOverlayWidth]="triggerWidth() > 0 ? triggerWidth() : 'auto'"
-			(backdropClick)="close()"
-			(detach)="close()"
+			(backdropClick)="hide()"
+			(detach)="hide()"
 			(positionChange)="_positionChanges$.next($event)"
 		>
 			<ng-content />
@@ -887,6 +762,8 @@ const BrnSelectImports = [
     BrnSelectScrollUpDirective,
     BrnSelectGroupDirective,
     BrnSelectLabelDirective,
+    BrnSelectValueDirective,
+    BrnSelectPlaceholderDirective,
 ];
 class BrnSelectModule {
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -898,7 +775,9 @@ class BrnSelectModule {
             BrnSelectScrollDownDirective,
             BrnSelectScrollUpDirective,
             BrnSelectGroupDirective,
-            BrnSelectLabelDirective], exports: [BrnSelectComponent,
+            BrnSelectLabelDirective,
+            BrnSelectValueDirective,
+            BrnSelectPlaceholderDirective], exports: [BrnSelectComponent,
             BrnSelectContentComponent,
             BrnSelectTriggerDirective,
             BrnSelectOptionDirective,
@@ -906,7 +785,9 @@ class BrnSelectModule {
             BrnSelectScrollDownDirective,
             BrnSelectScrollUpDirective,
             BrnSelectGroupDirective,
-            BrnSelectLabelDirective] });
+            BrnSelectLabelDirective,
+            BrnSelectValueDirective,
+            BrnSelectPlaceholderDirective] });
     /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectModule, imports: [BrnSelectComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectModule, decorators: [{
@@ -921,5 +802,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BrnSelectComponent, BrnSelectContentComponent, BrnSelectGroupDirective, BrnSelectImports, BrnSelectLabelDirective, BrnSelectModule, BrnSelectOptionDirective, BrnSelectScrollDownDirective, BrnSelectScrollUpDirective, BrnSelectService, BrnSelectTriggerDirective, BrnSelectValueComponent };
+export { BrnSelectComponent, BrnSelectContentComponent, BrnSelectGroupDirective, BrnSelectImports, BrnSelectLabelDirective, BrnSelectModule, BrnSelectOptionDirective, BrnSelectPlaceholderDirective, BrnSelectScrollDownDirective, BrnSelectScrollUpDirective, BrnSelectTriggerDirective, BrnSelectValueComponent, BrnSelectValueDirective };
 //# sourceMappingURL=spartan-ng-brain-select.mjs.map