@spartan-ng/brain 0.0.1-alpha.373 → 0.0.1-alpha.379

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

@@ -0,0 +1,928 @@
+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, skip, fromEvent, interval, takeUntil, map, switchMap, of, delay, combineLatest } from 'rxjs';
+import * as i1$1 from '@spartan-ng/brain/label';
+import { BrnLabelDirective } from '@spartan-ng/brain/label';
+import * as i1$2 from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import { BrnFormFieldControl } from '@spartan-ng/brain/form-field';
+import { ErrorStateMatcher, ErrorStateTracker } from '@spartan-ng/brain/forms';
+import { provideExposedSideProviderExisting, provideExposesStateProviderExisting } from '@spartan-ng/ui-core';
+
+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 });
+}
+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(),
+        }));
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class BrnSelectOptionDirective {
+    _cdkSelectOption = inject(CdkOption, { host: true });
+    _selectService = inject(BrnSelectService);
+    _focused = signal(false);
+    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();
+    });
+    focused = computed(() => this._focused());
+    checkedState = computed(() => (this.selected() ? 'checked' : 'unchecked'));
+    dir = computed(() => this._selectService.dir());
+    constructor() {
+        effect(() => {
+            this._cdkSelectOption.value = this.value();
+        });
+        effect(() => {
+            this._cdkSelectOption.disabled = this.disabledSignal();
+        });
+    }
+    ngAfterContentChecked() {
+        this._cdkSelectOption.value = this.value();
+    }
+    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();
+    }
+    focus() {
+        this._cdkSelectOption.focus();
+        this._focused.set(true);
+    }
+    blur() {
+        this._focused.set(false);
+    }
+    /** @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 });
+}
+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",
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+const SCROLLBY_PIXELS = 100;
+class BrnSelectScrollUpDirective {
+    _el = inject(ElementRef);
+    _selectContent = inject(BrnSelectContentComponent);
+    _endReached = new Subject();
+    _destroyRef = inject(DestroyRef);
+    startEmittingEvents() {
+        const mouseLeave$ = fromEvent(this._el.nativeElement, 'mouseleave');
+        interval(100)
+            .pipe(takeUntil(mouseLeave$), takeUntil(this._endReached), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this._selectContent.moveFocusUp());
+    }
+    stopEmittingEvents() {
+        this._endReached.next(true);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectScrollUpDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectScrollUpDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnSelectScrollUp], brn-select-scroll-up, hlm-select-scroll-up:not(noHlm)',
+                    standalone: true,
+                    host: {
+                        'aria-hidden': 'true',
+                        '(mouseenter)': 'startEmittingEvents()',
+                    },
+                }]
+        }] });
+class BrnSelectScrollDownDirective {
+    _el = inject(ElementRef);
+    _selectContent = inject(BrnSelectContentComponent);
+    _endReached = new Subject();
+    _destroyRef = inject(DestroyRef);
+    startEmittingEvents() {
+        const mouseLeave$ = fromEvent(this._el.nativeElement, 'mouseleave');
+        interval(100)
+            .pipe(takeUntil(mouseLeave$), takeUntil(this._endReached), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this._selectContent.moveFocusDown());
+    }
+    stopEmittingEvents() {
+        this._endReached.next(true);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectScrollDownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectScrollDownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnSelectScrollDown], brn-select-scroll-down, hlm-select-scroll-down:not(noHlm)',
+                    standalone: true,
+                    host: {
+                        'aria-hidden': 'true',
+                        '(mouseenter)': 'startEmittingEvents()',
+                    },
+                }]
+        }] });
+class BrnSelectContentComponent {
+    _el = inject(ElementRef);
+    _cdkListbox = inject(CdkListbox, { host: true });
+    _destroyRef = inject(DestroyRef);
+    _selectService = inject(BrnSelectService);
+    labelledBy = this._selectService.labelId;
+    id = this._selectService.id;
+    canScrollUp = signal(false);
+    canScrollDown = signal(false);
+    initialSelectedOptions$ = toObservable(this._selectService.selectedOptions);
+    viewport = viewChild.required('viewport');
+    scrollUpBtn = contentChild.required(BrnSelectScrollUpDirective);
+    scrollDownBtn = contentChild.required(BrnSelectScrollDownDirective);
+    _options = contentChildren(BrnSelectOptionDirective, { descendants: true });
+    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());
+        });
+    }
+    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;
+            }
+            for (const cdkOption of this._selectService.possibleOptions()) {
+                if (selectedOptions.includes(cdkOption)) {
+                    cdkOption?.select();
+                }
+                else {
+                    cdkOption?.deselect();
+                }
+            }
+            for (const cdkOption of selectedOptions) {
+                cdkOption?.select();
+            }
+        });
+    }
+    updateArrowDisplay() {
+        const { scrollTop, scrollHeight, clientHeight } = this.viewport().nativeElement;
+        this.canScrollUp.set(scrollTop > 0);
+        const maxScroll = scrollHeight - clientHeight;
+        this.canScrollDown.set(Math.ceil(scrollTop) < maxScroll);
+    }
+    handleScroll() {
+        this.updateArrowDisplay();
+    }
+    focusList() {
+        this._cdkListbox.focus();
+    }
+    moveFocusUp() {
+        this.viewport().nativeElement.scrollBy({ top: -SCROLLBY_PIXELS, behavior: 'smooth' });
+        if (this.viewport().nativeElement.scrollTop === 0) {
+            this.scrollUpBtn().stopEmittingEvents();
+        }
+    }
+    moveFocusDown() {
+        this.viewport().nativeElement.scrollBy({ top: SCROLLBY_PIXELS, behavior: 'smooth' });
+        const viewportSize = this._el.nativeElement.scrollHeight;
+        const viewportScrollPosition = this.viewport().nativeElement.scrollTop;
+        if (viewportSize + viewportScrollPosition + SCROLLBY_PIXELS >
+            this.viewport().nativeElement.scrollHeight + SCROLLBY_PIXELS / 2) {
+            this.scrollDownBtn().stopEmittingEvents();
+        }
+    }
+    /** @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: `
+		<ng-template #scrollUp>
+			<ng-content select="hlm-select-scroll-up" />
+			<ng-content select="brnSelectScrollUp" />
+		</ng-template>
+		<ng-container *ngTemplateOutlet="canScrollUp() && scrollUpBtn() ? scrollUp : null" />
+		<div
+			data-brn-select-viewport
+			#viewport
+			(scroll)="handleScroll()"
+			style="flex: 1 1 0%;
+			position: relative;
+			width:100%;
+			overflow:auto;
+			min-height: 36px;
+      padding-bottom: 2px;
+      margin-bottom: -2px;"
+		>
+			<ng-content />
+		</div>
+		<ng-template #scrollDown>
+			<ng-content select="brnSelectScrollDown" />
+			<ng-content select="hlm-select-scroll-down" />
+		</ng-template>
+		<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: "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()',
+                    }, template: `
+		<ng-template #scrollUp>
+			<ng-content select="hlm-select-scroll-up" />
+			<ng-content select="brnSelectScrollUp" />
+		</ng-template>
+		<ng-container *ngTemplateOutlet="canScrollUp() && scrollUpBtn() ? scrollUp : null" />
+		<div
+			data-brn-select-viewport
+			#viewport
+			(scroll)="handleScroll()"
+			style="flex: 1 1 0%;
+			position: relative;
+			width:100%;
+			overflow:auto;
+			min-height: 36px;
+      padding-bottom: 2px;
+      margin-bottom: -2px;"
+		>
+			<ng-content />
+		</div>
+		<ng-template #scrollDown>
+			<ng-content select="brnSelectScrollDown" />
+			<ng-content select="hlm-select-scroll-down" />
+		</ng-template>
+		<ng-container *ngTemplateOutlet="canScrollDown() && scrollDownBtn() ? scrollDown : null" />
+	`, 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: "18.2.5", ngImport: i0, type: BrnSelectGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.5", type: BrnSelectGroupDirective, isStandalone: true, selector: "[brnSelectGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelledBy()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnSelectGroup]',
+                    standalone: true,
+                    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: "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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnSelectLabel]',
+                    hostDirectives: [BrnLabelDirective],
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+class BrnSelectValueComponent {
+    _selectService = inject(BrnSelectService);
+    id = computed(() => `${this._selectService.id()}--value`);
+    placeholder = computed(() => this._selectService.placeholder());
+    value = null;
+    transformFn = input((values) => (values ?? []).join(', '));
+    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();
+        });
+    }
+    /** @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 });
+}
+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() }}
+	`, 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);
+    placeholder = input('');
+    disabled = input(false);
+    dir = input('ltr');
+    _disabledFromSetDisabledState = signal(false);
+    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]));
+    /** Overlay pane containing the options. */
+    _overlayDir = viewChild(CdkConnectedOverlay);
+    openedChange = output();
+    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'));
+    _positionChanges$ = new Subject();
+    side = toSignal(this._positionChanges$.pipe(map((change) => 
+    // todo: better translation or adjusting hlm to take that into account
+    change.connectionPair.originY === 'center'
+        ? change.connectionPair.originX === 'start'
+            ? 'left'
+            : 'right'
+        : change.connectionPair.originY)), { initialValue: 'bottom' });
+    backupLabelId = computed(() => this._selectService.labelId());
+    labelProvided = signal(false);
+    ngControl = inject(NgControl, { optional: true, self: true });
+    // 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
+     * the trigger completely). If the panel cannot fit below the trigger, it
+     * will fall back to a position above the trigger.
+     */
+    _positions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+        },
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+        },
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+        },
+    ];
+    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._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();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (!this._canOpen())
+            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;
+    }
+    _moveFocusToCDKList() {
+        setTimeout(() => {
+            this.selectContent()?.focusList();
+        });
+    }
+    writeValue(value) {
+        this.writeValue$.next(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabledFromSetDisabledState.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();
+            }
+        });
+    }
+    /**
+     * 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.updatePossibleOptions(options);
+        });
+    }
+    /**
+     * 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));
+            // only update if there was an actual change
+            if (selectedOptions.length !== filteredOptions.length) {
+                // update should result in a value change since we are deselecting a value
+                this._shouldEmitValueChange.set(true);
+                const value = filteredOptions.map((o) => o?.value ?? '');
+                this._selectService.state.update((state) => ({
+                    ...state,
+                    selectedOptions: filteredOptions,
+                    value: value,
+                }));
+                this._onChange((value ?? null));
+            }
+        }
+        else {
+            const selectedOption = selectedOptions[0] ?? null;
+            if (selectedOption !== null && !availableOptionSet.has(selectedOption)) {
+                this._shouldEmitValueChange.set(true);
+                this._selectService.state.update((state) => ({
+                    ...state,
+                    selectedOptions: [],
+                    value: '',
+                }));
+                this._onChange('');
+            }
+        }
+    }
+    /**
+     * Sync the updated options with "possibleOptions" in the select service
+     */
+    updatePossibleOptions(options) {
+        this._selectService.state.update((state) => ({
+            ...state,
+            possibleOptions: options,
+        }));
+    }
+    /** @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" }, providers: [
+            BrnSelectService,
+            CdkListbox,
+            provideExposedSideProviderExisting((() => BrnSelectComponent)),
+            provideExposesStateProviderExisting((() => 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>
+		} @else {
+			<ng-content select="label[hlmLabel],label[brnLabel]" />
+		}
+
+		<div cdk-overlay-origin (click)="toggle()" #trigger="cdkOverlayOrigin">
+			<ng-content select="hlm-select-trigger,[brnSelectTrigger]" />
+		</div>
+		<ng-template
+			cdk-connected-overlay
+			cdkConnectedOverlayLockPosition
+			cdkConnectedOverlayHasBackdrop
+			cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+			[cdkConnectedOverlayOrigin]="trigger"
+			[cdkConnectedOverlayOpen]="_delayedExpanded()"
+			[cdkConnectedOverlayPositions]="_positions"
+			[cdkConnectedOverlayWidth]="triggerWidth() > 0 ? triggerWidth() : 'auto'"
+			(backdropClick)="close()"
+			(detach)="close()"
+			(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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'brn-select, hlm-select',
+                    standalone: true,
+                    imports: [OverlayModule, CdkListboxModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        BrnSelectService,
+                        CdkListbox,
+                        provideExposedSideProviderExisting((() => BrnSelectComponent)),
+                        provideExposesStateProviderExisting((() => BrnSelectComponent)),
+                        {
+                            provide: BrnFormFieldControl,
+                            useExisting: BrnSelectComponent,
+                        },
+                    ],
+                    template: `
+		@if (!labelProvided() && placeholder()) {
+			<label class="hidden" [attr.id]="backupLabelId()">{{ placeholder() }}</label>
+		} @else {
+			<ng-content select="label[hlmLabel],label[brnLabel]" />
+		}
+
+		<div cdk-overlay-origin (click)="toggle()" #trigger="cdkOverlayOrigin">
+			<ng-content select="hlm-select-trigger,[brnSelectTrigger]" />
+		</div>
+		<ng-template
+			cdk-connected-overlay
+			cdkConnectedOverlayLockPosition
+			cdkConnectedOverlayHasBackdrop
+			cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+			[cdkConnectedOverlayOrigin]="trigger"
+			[cdkConnectedOverlayOpen]="_delayedExpanded()"
+			[cdkConnectedOverlayPositions]="_positions"
+			[cdkConnectedOverlayWidth]="triggerWidth() > 0 ? triggerWidth() : 'auto'"
+			(backdropClick)="close()"
+			(detach)="close()"
+			(positionChange)="_positionChanges$.next($event)"
+		>
+			<ng-content />
+		</ng-template>
+	`,
+                }]
+        }], ctorParameters: () => [] });
+
+const BrnSelectImports = [
+    BrnSelectComponent,
+    BrnSelectContentComponent,
+    BrnSelectTriggerDirective,
+    BrnSelectOptionDirective,
+    BrnSelectValueComponent,
+    BrnSelectScrollDownDirective,
+    BrnSelectScrollUpDirective,
+    BrnSelectGroupDirective,
+    BrnSelectLabelDirective,
+];
+class BrnSelectModule {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: BrnSelectModule, imports: [BrnSelectComponent,
+            BrnSelectContentComponent,
+            BrnSelectTriggerDirective,
+            BrnSelectOptionDirective,
+            BrnSelectValueComponent,
+            BrnSelectScrollDownDirective,
+            BrnSelectScrollUpDirective,
+            BrnSelectGroupDirective,
+            BrnSelectLabelDirective], exports: [BrnSelectComponent,
+            BrnSelectContentComponent,
+            BrnSelectTriggerDirective,
+            BrnSelectOptionDirective,
+            BrnSelectValueComponent,
+            BrnSelectScrollDownDirective,
+            BrnSelectScrollUpDirective,
+            BrnSelectGroupDirective,
+            BrnSelectLabelDirective] });
+    /** @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: [{
+            type: NgModule,
+            args: [{
+                    imports: [...BrnSelectImports],
+                    exports: [...BrnSelectImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BrnSelectComponent, BrnSelectContentComponent, BrnSelectGroupDirective, BrnSelectImports, BrnSelectLabelDirective, BrnSelectModule, BrnSelectOptionDirective, BrnSelectScrollDownDirective, BrnSelectScrollUpDirective, BrnSelectService, BrnSelectTriggerDirective, BrnSelectValueComponent };
+//# sourceMappingURL=spartan-ng-brain-select.mjs.map