@ngbase/adk 0.1.0

package/fesm2022/ngbase-adk-select.mjs

@@ -0,0 +1,599 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, booleanAttribute, output, signal, linkedSignal, Directive, contentChildren, viewChild, TemplateRef, model, computed, effect, untracked, contentChild, Component, ChangeDetectionStrategy, forwardRef } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import * as i1 from '@ngbase/adk/a11y';
+import { AccessibleItem, Autofocus, AccessibleGroup } from '@ngbase/adk/a11y';
+import { uniqueId, filterFunction, provideValueAccessor } from '@ngbase/adk/utils';
+import { Directionality } from '@ngbase/adk/bidi';
+import { ngbPopoverPortal } from '@ngbase/adk/popover';
+import { Subject } from 'rxjs';
+import * as i2 from '@ngbase/adk/form-field';
+import { InputBase } from '@ngbase/adk/form-field';
+
+class NgbOption {
+    constructor() {
+        this.allyItem = inject(AccessibleItem);
+        this.el = inject(ElementRef);
+        // inputs
+        this.value = input();
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.ayId = input();
+        // outputs
+        this.onSelectionChange = output();
+        this.multiple = signal(false);
+        this.checked = signal(false);
+        this.active = signal(false);
+        this._ayId = linkedSignal({ source: this.ayId, computation: id => id || '' });
+        this.allyItem._ayId = this._ayId;
+        this.allyItem._disabled = this.disabled;
+    }
+    selectOption() { }
+    setAyId(id) {
+        this._ayId.set(id);
+    }
+    label() {
+        return this.el.nativeElement.textContent || '';
+    }
+    focus() {
+        this.el.nativeElement.scrollIntoView({ block: 'nearest' });
+        this.el.nativeElement.classList.add('bg-muted-background');
+    }
+    unselect() {
+        this.el.nativeElement.classList.remove('bg-muted-background');
+    }
+    getValue() {
+        return this.value() || this.label();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NgbOption, isStandalone: true, selector: "[ngbOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ayId: { classPropertyName: "ayId", publicName: "ayId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, host: { attributes: { "role": "option", "tabindex": "-1" }, listeners: { "click": "selectOption()" } }, hostDirectives: [{ directive: i1.AccessibleItem }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbOption]',
+                    hostDirectives: [AccessibleItem],
+                    host: {
+                        role: 'option',
+                        tabindex: '-1',
+                        '(click)': 'selectOption()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class NgbSelectTarget {
+    constructor() {
+        this.target = signal(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbSelectTarget, isStandalone: true, selector: "[ngbSelectTarget]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectTarget, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbSelectTarget]',
+                }]
+        }] });
+class SelectBase {
+    constructor(isSelect) {
+        this.isSelect = isSelect;
+        // Dependencies
+        this.el = inject(ElementRef);
+        this.dir = inject(Directionality);
+        this.target = inject(NgbSelectTarget, { optional: true });
+        this.list = contentChildren(NgbOption, { descendants: true });
+        this.popover = ngbPopoverPortal();
+        this.optionsTemplate = viewChild('optionsTemplate', { read: TemplateRef });
+        this.container = viewChild('container', { read: ElementRef });
+        this.optionsGroup = viewChild('optionsGroup', { read: ElementRef });
+        // inputs
+        this.options = input([]);
+        this.value = model('');
+        this.multiple = input(false, { transform: booleanAttribute });
+        this.placeholder = input(' ');
+        this.disabled = model(false);
+        this.size = input('free');
+        this.opened = output();
+        this.closed = output();
+        // state
+        this.sideOffset = 0;
+        this.panelOpen = signal(false);
+        this.values = signal([]);
+        this.status = signal('closed');
+        this.previousValue = '';
+        this.events = new Subject();
+        this.ayId = uniqueId();
+        this.cValue = computed(() => {
+            if (!this.isSelect && this.status() === 'opened') {
+                return this.previousValue;
+            }
+            const multiple = this.multiple();
+            const options = this.list();
+            const filtered = this.values(); // .filter(x => x !== undefined && x !== null && x !== '');
+            const values = filtered.length
+                ? options.reduce((acc, option) => {
+                    if (filtered.includes(option.getValue())) {
+                        acc.push(option.label());
+                    }
+                    return acc;
+                }, [])
+                : [];
+            // if the value is greater than 1, then take the first value and add a plus sign with the length of the remaining values
+            if (multiple && values.length > 1) {
+                this.previousValue = `${values[0]} (+${values.length - 1})`;
+            }
+            else {
+                this.previousValue = values[0] || '';
+            }
+            return this.previousValue;
+        });
+        // used to determine whether the select is with in a popup
+        this.withInPopup = false;
+        this.clickHandler = (e) => {
+            // if the click is in the options group, then do not close the popover
+            if (!this.optionsGroup()?.nativeElement.contains(e.target)) {
+                this.close();
+            }
+        };
+        this.focusOut = () => {
+            // settimeout is required to wait for withInPopup to be set by the popover
+            requestAnimationFrame(() => {
+                // if the focus is not in the popup, then close the popover
+                if (!this.withInPopup)
+                    this.close();
+            });
+        };
+        effect(() => {
+            const options = this.list();
+            options.forEach(option => {
+                option.setAyId(this.ayId);
+                option.multiple.set(this.multiple());
+                option.selectOption = () => {
+                    untracked(() => {
+                        this.setValue([option.getValue()]);
+                        option.checked.set(!option.checked());
+                        option.onSelectionChange.emit(option.getValue());
+                        if (!this.multiple()) {
+                            this.close();
+                        }
+                    });
+                };
+            });
+            untracked(() => {
+                if (this.status() === 'opening') {
+                    this.open();
+                }
+            });
+        });
+        effect(() => {
+            const values = this.values();
+            const options = this.list();
+            // console.log('values', this.values());
+            options.forEach(option => {
+                option.checked.set(values.includes(option.getValue()));
+            });
+        });
+        // valueRef is required to destroy the effect when formControl is registered
+        // so that it does not override the form value
+        this.valueRef = effect(() => this.updateValues(this.value()));
+    }
+    open() {
+        // if the status is opened, return
+        if (this.status() === 'opened')
+            return;
+        // if the options are empty, return
+        if (this.list().length === 0 && this.options().length === 0) {
+            this.status.set('opening');
+            return;
+        }
+        const el = this.target?.target() || this.container()?.nativeElement || this.el.nativeElement;
+        const { diaRef, events } = this.popover.open(this.optionsTemplate(), {
+            target: el,
+            position: this.dir.isRtl() ? 'br' : 'bl',
+            backdrop: this.isSelect,
+            width: this.size(),
+            maxHeight: '400px',
+            ayId: this.ayId,
+            focusTrap: false,
+            sideOffset: this.sideOffset,
+            afterFocusEl: this.container()?.nativeElement || this.el.nativeElement,
+        });
+        this.withInPopup = false;
+        events.subscribe(e => {
+            this.withInPopup = e.type !== 'mouseleave';
+        });
+        if (!this.isSelect) {
+            diaRef.events.subscribe(() => {
+                document.addEventListener('click', this.clickHandler);
+                this.events.next('open');
+            });
+        }
+        else {
+            this.events.next('open');
+        }
+        // listen for close from backdrop click
+        diaRef.afterClosed.subscribe(() => {
+            this.afterClose();
+        });
+        this.popClose = () => {
+            diaRef.close();
+        };
+        this.afterOpen();
+    }
+    popValue() {
+        const values = this.values();
+        const value = values[values.length - 1];
+        if (value) {
+            this.setValue([value]);
+        }
+    }
+    close() {
+        this.popClose?.();
+        this.popClose = undefined;
+    }
+    afterOpen() {
+        this.status.set('opened');
+        this.opened.emit(true);
+        this.panelOpen.set(true);
+        // listen for focus out to close the popover
+        // this.el.nativeElement.addEventListener('focusout', this.focusOut);
+    }
+    afterClose() {
+        this.closed.emit(true);
+        this.panelOpen.set(false);
+        this.status.set('closed');
+        this.events.next('close');
+        // stop listening for focus out
+        // this.el.nativeElement.removeEventListener('focusout', this.focusOut);
+        // stop listening for click
+        document.removeEventListener('click', this.clickHandler);
+    }
+    setValue(values, skip = false) {
+        let localValue = this.values();
+        let setValue;
+        if (this.multiple()) {
+            values.forEach(v => {
+                const index = localValue.indexOf(v);
+                if (index > -1) {
+                    localValue = localValue.filter((_, i) => i !== index);
+                }
+                else {
+                    localValue = [...localValue, v];
+                }
+            });
+            setValue = localValue;
+        }
+        else {
+            localValue = values;
+            setValue = values[0];
+            this.close();
+        }
+        // console.log('setValue', localValue, this.values());
+        this.values.set(localValue);
+        if (!skip) {
+            this.onChange?.(setValue);
+            this.onTouched?.();
+            this.value.set(setValue);
+        }
+    }
+    removeValue(value) {
+        // let values = this.values();
+        // const index = values.indexOf(value);
+        // if (index > -1) {
+        //   values = values.filter((_, i) => i === index);
+        this.setValue([value]);
+        // }
+    }
+    writeValue(value) {
+        this.updateValues(value);
+    }
+    updateValues(value) {
+        this.values.set(Array.isArray(value) ? value : [value]);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+        this.valueRef.destroy();
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    ngOnDestroy() {
+        this.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SelectBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.0", type: SelectBase, isStandalone: true, inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", opened: "opened", closed: "closed" }, queries: [{ propertyName: "list", predicate: NgbOption, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionsTemplate", first: true, predicate: ["optionsTemplate"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "optionsGroup", first: true, predicate: ["optionsGroup"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SelectBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined }] });
+
+class NgbSelectInput {
+    constructor() {
+        // Dependencies
+        this.el = inject(ElementRef);
+        this.select = inject(NgbSelect, { optional: true });
+        this.inputBase = inject(InputBase);
+        // Inputs
+        this.placeholder = input('Search here');
+        this.options = input([]);
+        this.filterFn = input();
+        // State
+        this.filteredOptions = computed(() => {
+            const fn = this.filterFn();
+            const options = this.options();
+            const search = this.inputBase.value();
+            const values = search ? options.filter(v => fn(search, v, options)) : options;
+            return values;
+        });
+        this.select?.events.subscribe(event => {
+            if (event === 'open') {
+                this.inputBase.value.set('');
+                this.el.nativeElement.focus();
+            }
+        });
+    }
+    updateSearch(value) {
+        this.inputBase.value.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NgbSelectInput, isStandalone: true, selector: "[ngbSelectInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "placeholder": "placeholder()", "tabindex": "0" } }, exportAs: ["ngbSelectInput"], hostDirectives: [{ directive: i1.Autofocus }, { directive: i2.InputBase, inputs: ["value", "value"], outputs: ["valueChange", "valueChange"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbSelectInput]',
+                    exportAs: 'ngbSelectInput',
+                    hostDirectives: [
+                        Autofocus,
+                        { directive: InputBase, inputs: ['value'], outputs: ['valueChange'] },
+                    ],
+                    host: {
+                        '[placeholder]': 'placeholder()',
+                        '[tabindex]': '0',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+class NgbSelectTrigger {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbSelectTrigger, isStandalone: true, selector: "[ngbSelectTrigger]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbSelectTrigger]',
+                }]
+        }] });
+
+class NgbSelectOption {
+    constructor() {
+        this.template = inject((TemplateRef));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbSelectOption, isStandalone: true, selector: "[ngbSelectOption]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbSelectOption]',
+                }]
+        }] });
+class SelectValue {
+    constructor() {
+        this.select = inject((NgbSelect));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: SelectValue, isStandalone: true, selector: "[ngbSelectValue]", host: { attributes: { "type": "button", "role": "combobox", "tabindex": "-1" }, properties: { "disabled": "select.disabled()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: SelectValue, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbSelectValue]',
+                    host: {
+                        type: 'button',
+                        role: 'combobox',
+                        tabindex: '-1',
+                        '[disabled]': 'select.disabled()',
+                    },
+                }]
+        }] });
+class NgbSelectOptionGroup {
+    constructor() {
+        this.group = inject(AccessibleGroup);
+        this.select = inject((SelectBase));
+        this.group._isPopup.set(true);
+        this.group._loop.set(false);
+        this.group._ayId.set(this.select.ayId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: NgbSelectOptionGroup, isStandalone: true, selector: "[ngbSelectOptionGroup]", hostDirectives: [{ directive: i1.AccessibleGroup }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelectOptionGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbSelectOptionGroup]',
+                    hostDirectives: [AccessibleGroup],
+                }]
+        }], ctorParameters: () => [] });
+class NgbSelect extends SelectBase {
+    constructor() {
+        super(true);
+        this.search = model('');
+        this.optionTemplate = contentChild((NgbSelectOption));
+        this.defaultFilter = (option) => option;
+        this.optionsFilter = filterFunction(this.options, { filter: this.defaultFilter });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NgbSelect, isStandalone: true, selector: "[ngbSelect]", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "searchChange" }, host: { attributes: { "role": "listbox", "type": "button" }, listeners: { "click": "open()", "keydown.arrowdown": "open()", "keydown.arrowup": "open()", "keydown.enter": "open()", "keydown.space": "open()" }, properties: { "tabindex": "disabled() ? -1 : 0" } }, providers: [_provide(NgbSelect)], queries: [{ propertyName: "optionTemplate", first: true, predicate: (NgbSelectOption), descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <button
+      ngbSelectValue
+      class="flex min-h-b5 w-full items-center justify-between gap-b whitespace-nowrap outline-none"
+      [class.opacity-50]="disabled()"
+    >
+      <!-- Prefix template -->
+      <ng-content select=".select-prefix" />
+
+      <span class="truncate" [class.text-muted]="!cValue()">
+        <ng-content select="[ngbSelectTrigger]">
+          {{ cValue() || placeholder() }}
+        </ng-content>
+      </span>
+    </button>
+
+    <!-- Options template -->
+    <ng-template #optionsTemplate>
+      <div class="flex flex-col overflow-hidden">
+        <ng-content select="[ngbSelectInput]">
+          @if (options().length) {
+            <input ngbSelectInput placeholder="Search options" [(value)]="optionsFilter.search" />
+          }
+        </ng-content>
+        <div #optionsGroup ngbSelectOptionGroup class="overflow-auto p-b">
+          <div class="h-full" role="listbox" aria-label="Suggestions">
+            <ng-content>
+              @for (option of optionsFilter.filteredList(); track option; let i = $index) {
+                <div ngbOption [value]="option" [ayId]="ayId">
+                  @if (optionTemplate(); as ot) {
+                    <ng-template
+                      [ngTemplateOutlet]="ot.template"
+                      [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+                    />
+                  } @else {
+                    {{ option }}
+                  }
+                </div>
+              }
+            </ng-content>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgbSelectInput), selector: "[ngbSelectInput]", inputs: ["placeholder", "options", "filterFn"], exportAs: ["ngbSelectInput"] }, { kind: "directive", type: i0.forwardRef(() => NgbOption), selector: "[ngbOption]", inputs: ["value", "disabled", "ayId"], outputs: ["onSelectionChange"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => SelectValue), selector: "[ngbSelectValue]" }, { kind: "directive", type: i0.forwardRef(() => NgbSelectOptionGroup), selector: "[ngbSelectOptionGroup]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbSelect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ngbSelect]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [_provide(NgbSelect)],
+                    imports: [
+                        AccessibleGroup,
+                        FormsModule,
+                        AccessibleItem,
+                        forwardRef(() => NgbSelectInput),
+                        NgbOption,
+                        NgTemplateOutlet,
+                        SelectValue,
+                        NgbSelectOptionGroup,
+                    ],
+                    host: {
+                        role: 'listbox',
+                        type: 'button',
+                        '(click)': 'open()',
+                        '(keydown.arrowdown)': 'open()',
+                        '(keydown.arrowup)': 'open()',
+                        '(keydown.enter)': 'open()',
+                        '(keydown.space)': 'open()',
+                        '[tabindex]': 'disabled() ? -1 : 0',
+                    },
+                    template: `
+    <button
+      ngbSelectValue
+      class="flex min-h-b5 w-full items-center justify-between gap-b whitespace-nowrap outline-none"
+      [class.opacity-50]="disabled()"
+    >
+      <!-- Prefix template -->
+      <ng-content select=".select-prefix" />
+
+      <span class="truncate" [class.text-muted]="!cValue()">
+        <ng-content select="[ngbSelectTrigger]">
+          {{ cValue() || placeholder() }}
+        </ng-content>
+      </span>
+    </button>
+
+    <!-- Options template -->
+    <ng-template #optionsTemplate>
+      <div class="flex flex-col overflow-hidden">
+        <ng-content select="[ngbSelectInput]">
+          @if (options().length) {
+            <input ngbSelectInput placeholder="Search options" [(value)]="optionsFilter.search" />
+          }
+        </ng-content>
+        <div #optionsGroup ngbSelectOptionGroup class="overflow-auto p-b">
+          <div class="h-full" role="listbox" aria-label="Suggestions">
+            <ng-content>
+              @for (option of optionsFilter.filteredList(); track option; let i = $index) {
+                <div ngbOption [value]="option" [ayId]="ayId">
+                  @if (optionTemplate(); as ot) {
+                    <ng-template
+                      [ngTemplateOutlet]="ot.template"
+                      [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+                    />
+                  } @else {
+                    {{ option }}
+                  }
+                </div>
+              }
+            </ng-content>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+function _provide(select) {
+    return [{ provide: SelectBase, useExisting: select }, provideValueAccessor(select)];
+}
+function provideSelect(select) {
+    const deps = [_provide(select), { provide: NgbSelect, useExisting: select }];
+    return deps;
+}
+
+class NgbOptionGroup {
+    constructor() {
+        this.label = input.required();
+        this.disabled = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.0", type: NgbOptionGroup, isStandalone: true, selector: "[ngbOptionGroup]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<div>{{ label() }}</div>
+    <ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbOptionGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ngbOptionGroup]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<div>{{ label() }}</div>
+    <ng-content />`,
+                }]
+        }] });
+
+class ListSelection extends SelectBase {
+    constructor() {
+        super(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ListSelection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: ListSelection, isStandalone: true, selector: "[ngbListSelection]", providers: [provideValueAccessor(ListSelection)], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: ListSelection, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbListSelection]',
+                    providers: [provideValueAccessor(ListSelection)],
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of select
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ListSelection, NgbOption, NgbOptionGroup, NgbSelect, NgbSelectInput, NgbSelectOption, NgbSelectOptionGroup, NgbSelectTarget, NgbSelectTrigger, SelectBase, SelectValue, provideSelect };
+//# sourceMappingURL=ngbase-adk-select.mjs.map