@ngneers/controls 0.0.1-pre1 → 0.0.1-pre2

package/fesm2022/ngneers-controls-select.mjs

@@ -1,155 +1,365 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { viewChild, contentChild, input, computed, Component, linkedSignal, signal } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { ValueControlBase, templateTypesFn, transformToNgnItems, mapToItems, filterOptions, GetElementRef, NgnTemplate, valueControlBaseProvider } from '@ngneers/controls/api';
-import { FormField } from '@ngneers/controls/form-field';
-import { Icon } from '@ngneers/controls/icon';
-import { ListBox } from '@ngneers/controls/list-box';
-import { Popover } from '@ngneers/controls/popover';
-import { TextField } from '@ngneers/controls/text-field';
-import { asyncComputed } from '@ngneers/controls/utils';
+import { viewChild, contentChild, input, computed, Directive, inject, booleanAttribute, linkedSignal, signal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { mapToItems } from '@ngneers/controls/api';
+import { templateTypesFn, NgnTemplate } from '@ngneers/controls/api/ng';
+import { ValueControlBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { I18n } from '@ngneers/controls/i18n';
+import { NgnIcon } from '@ngneers/controls/icon';
+import { NgnInput } from '@ngneers/controls/input';
+import { NgnInputField } from '@ngneers/controls/input-field';
+import { NgnItemView } from '@ngneers/controls/item-view';
+import { NgnListBox } from '@ngneers/controls/list-box';
+import { NgnPopover } from '@ngneers/controls/popover';
+import { deepMerge, maybeCallback, NgnError } from '@ngneers/controls/utils';
+import { selectControlTemplate } from '@ngneers/controls-themes/templates/select';
 
 class SelectTemplates extends ValueControlBase {
     // Item template
     _defaultItemTemplate = viewChild.required('defaultItemTemplate');
-    _userItemTemplate = contentChild('item');
-    templateItem = input(null);
-    itemTemplate = computed(() => this._userItemTemplate() ?? this.templateItem() ?? this._defaultItemTemplate());
+    _userItemTemplate = contentChild('item', ...(ngDevMode ? [{ debugName: "_userItemTemplate" }] : []));
+    /**
+     * Set a custom template for an item of the select control.
+     * Can also be set using an `<ng-template>` element with `#item` template reference variable.
+     */
+    templateItem = input(null, ...(ngDevMode ? [{ debugName: "templateItem" }] : []));
+    itemTemplate = computed(() => this._userItemTemplate() ?? this.templateItem() ?? this._defaultItemTemplate(), ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
     // Selected item template
     _defaultSelectedItemTemplate = viewChild.required('defaultSelectedItemTemplate');
-    _userSelectedItemTemplate = contentChild('selectedItem');
-    templateSelectedItem = input(null);
+    _userSelectedItemTemplate = contentChild('selectedItem', ...(ngDevMode ? [{ debugName: "_userSelectedItemTemplate" }] : []));
+    /**
+     * Set a custom template for the selected item of the select control.
+     * Can also be set using an `<ng-template>` element with `#selectedItem` template reference variable.
+     */
+    templateSelectedItem = input(null, ...(ngDevMode ? [{ debugName: "templateSelectedItem" }] : []));
     selectedItemTemplate = computed(() => this._userSelectedItemTemplate() ??
         this.templateSelectedItem() ??
-        this._defaultSelectedItemTemplate());
+        this._defaultSelectedItemTemplate(), ...(ngDevMode ? [{ debugName: "selectedItemTemplate" }] : []));
+    // Selected items template
+    _defaultSelectedItemsTemplate = viewChild.required('defaultSelectedItemsTemplate');
+    _userSelectedItemsTemplate = contentChild('selectedItems', ...(ngDevMode ? [{ debugName: "_userSelectedItemsTemplate" }] : []));
+    /**
+     * Set a custom template for the selected items of the select control if {@link multiple} is `true`.
+     * Can also be set using an `<ng-template>` element with `#selectedItems` template reference variable.
+     */
+    templateSelectedItems = input(null, ...(ngDevMode ? [{ debugName: "templateSelectedItems" }] : []));
+    selectedItemsTemplate = computed(() => this._userSelectedItemsTemplate() ??
+        this.templateSelectedItems() ??
+        this._defaultSelectedItemsTemplate(), ...(ngDevMode ? [{ debugName: "selectedItemsTemplate" }] : []));
     // Group template
     _defaultGroupTemplate = viewChild.required('defaultGroupTemplate');
-    _userGroupTemplate = contentChild('group');
-    templateGroup = input(null);
-    groupTemplate = computed(() => this._userGroupTemplate() ?? this.templateGroup() ?? this._defaultGroupTemplate());
+    _userGroupTemplate = contentChild('group', ...(ngDevMode ? [{ debugName: "_userGroupTemplate" }] : []));
+    /**
+     * Set a custom template for a group in the select control.
+     * Can also be set using an `<ng-template>` element with `#group` template reference variable.
+     */
+    templateGroup = input(null, ...(ngDevMode ? [{ debugName: "templateGroup" }] : []));
+    groupTemplate = computed(() => this._userGroupTemplate() ?? this.templateGroup() ?? this._defaultGroupTemplate(), ...(ngDevMode ? [{ debugName: "groupTemplate" }] : []));
+    // No items template
+    _userNoItemsTemplate = contentChild('noItems', ...(ngDevMode ? [{ debugName: "_userNoItemsTemplate" }] : []));
+    /**
+     * Set a custom template for the no items state of the select control.
+     * Can also be set using an `<ng-template>` element with `#noItems` template reference variable.
+     */
+    templateNoItems = input(null, ...(ngDevMode ? [{ debugName: "templateNoItems" }] : []));
+    noItemsTemplate = computed(() => this._userNoItemsTemplate() ?? this.templateNoItems(), ...(ngDevMode ? [{ debugName: "noItemsTemplate" }] : []));
     /**
      * Types for the dialog templates.
      */
     templateTypes = templateTypesFn();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SelectTemplates, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", type: SelectTemplates, isStandalone: true, selector: "ng-component", inputs: { templateItem: { classPropertyName: "templateItem", publicName: "templateItem", isSignal: true, isRequired: false, transformFunction: null }, templateSelectedItem: { classPropertyName: "templateSelectedItem", publicName: "templateSelectedItem", isSignal: true, isRequired: false, transformFunction: null }, templateGroup: { classPropertyName: "templateGroup", publicName: "templateGroup", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userItemTemplate", first: true, predicate: ["item"], descendants: true, isSignal: true }, { propertyName: "_userSelectedItemTemplate", first: true, predicate: ["selectedItem"], descendants: true, isSignal: true }, { propertyName: "_userGroupTemplate", first: true, predicate: ["group"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_defaultItemTemplate", first: true, predicate: ["defaultItemTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultSelectedItemTemplate", first: true, predicate: ["defaultSelectedItemTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultGroupTemplate", first: true, predicate: ["defaultGroupTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: SelectTemplates, isStandalone: true, inputs: { templateItem: { classPropertyName: "templateItem", publicName: "templateItem", isSignal: true, isRequired: false, transformFunction: null }, templateSelectedItem: { classPropertyName: "templateSelectedItem", publicName: "templateSelectedItem", isSignal: true, isRequired: false, transformFunction: null }, templateSelectedItems: { classPropertyName: "templateSelectedItems", publicName: "templateSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, templateGroup: { classPropertyName: "templateGroup", publicName: "templateGroup", isSignal: true, isRequired: false, transformFunction: null }, templateNoItems: { classPropertyName: "templateNoItems", publicName: "templateNoItems", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userItemTemplate", first: true, predicate: ["item"], descendants: true, isSignal: true }, { propertyName: "_userSelectedItemTemplate", first: true, predicate: ["selectedItem"], descendants: true, isSignal: true }, { propertyName: "_userSelectedItemsTemplate", first: true, predicate: ["selectedItems"], descendants: true, isSignal: true }, { propertyName: "_userGroupTemplate", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "_userNoItemsTemplate", first: true, predicate: ["noItems"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_defaultItemTemplate", first: true, predicate: ["defaultItemTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultSelectedItemTemplate", first: true, predicate: ["defaultSelectedItemTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultSelectedItemsTemplate", first: true, predicate: ["defaultSelectedItemsTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultGroupTemplate", first: true, predicate: ["defaultGroupTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SelectTemplates, decorators: [{
-            type: Component,
-            args: [{
-                    imports: [],
-                    template: '',
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SelectTemplates, decorators: [{
+            type: Directive
+        }], propDecorators: { _defaultItemTemplate: [{ type: i0.ViewChild, args: ['defaultItemTemplate', { isSignal: true }] }], _userItemTemplate: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], templateItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateItem", required: false }] }], _defaultSelectedItemTemplate: [{ type: i0.ViewChild, args: ['defaultSelectedItemTemplate', { isSignal: true }] }], _userSelectedItemTemplate: [{ type: i0.ContentChild, args: ['selectedItem', { isSignal: true }] }], templateSelectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateSelectedItem", required: false }] }], _defaultSelectedItemsTemplate: [{ type: i0.ViewChild, args: ['defaultSelectedItemsTemplate', { isSignal: true }] }], _userSelectedItemsTemplate: [{ type: i0.ContentChild, args: ['selectedItems', { isSignal: true }] }], templateSelectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateSelectedItems", required: false }] }], _defaultGroupTemplate: [{ type: i0.ViewChild, args: ['defaultGroupTemplate', { isSignal: true }] }], _userGroupTemplate: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], templateGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateGroup", required: false }] }], _userNoItemsTemplate: [{ type: i0.ContentChild, args: ['noItems', { isSignal: true }] }], templateNoItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateNoItems", required: false }] }] } });
 
-class Select extends SelectTemplates {
-    _popover = viewChild.required(Popover);
-    popoverOptions = input({});
-    appliedPopoverOptions = computed(() => ({
-        ...this.popoverOptions(),
+/**
+ * @category control
+ */
+class NgnSelect extends SelectTemplates {
+    theme = this.injectThemeTemplate(selectControlTemplate, 'root');
+    i18n = inject(I18n).translations;
+    _popover = viewChild.required(NgnPopover);
+    _customEditableInput = contentChild(NgnInput, ...(ngDevMode ? [{ debugName: "_customEditableInput" }] : []));
+    _customEditableSub;
+    /**
+     * Options for the popover.
+     */
+    popoverOptions = input({}, ...(ngDevMode ? [{ debugName: "popoverOptions" }] : []));
+    appliedPopoverOptions = computed(() => deepMerge({
         sizeConstraints: {
             width: 1,
             maxWidth: 1,
-            ...this.popoverOptions().sizeConstraints,
+            minHeight: '250px',
+            maxHeight: '700px',
         },
-    }));
-    options = input([]);
-    fields = input();
-    filter = input();
-    filterText = input();
-    filterIcon = input();
-    virtual = input(false);
-    itemHeight = input();
-    _listbox = viewChild(ListBox);
-    filterTextInternal = linkedSignal(this.filterText);
-    currentHighlightedValue = signal(null);
-    _options = computed(() => {
-        const fields = this.fields();
-        const options = this.options();
-        if (!fields) {
-            return options;
-        }
-        return transformToNgnItems(options, fields);
-    });
-    _flatOptions = computed(() => mapToItems(this._options()));
-    _appliedFilterOptions = computed(() => {
-        const filter = this.filter();
-        if (!filter) {
-            return null;
+    }, this.popoverOptions()), ...(ngDevMode ? [{ debugName: "appliedPopoverOptions" }] : []));
+    /**
+     * The available options to choose from. They can either be
+     * * A list of {@link NgnItem} objects
+     * * A list of plain objects. You'll have to provide a {@link fields} input to specify how to map the plain objects to {@link NgnItem} objects.
+     */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /**
+     * Accepts a boolean value that determines whether the filter is enabled.
+     * Alternatively, you can provide `SelectFilterOptions` to customize the filter behavior.
+     * @default `false`
+     */
+    filter = input(false, ...(ngDevMode ? [{ debugName: "filter" }] : []));
+    /**
+     * Manually set the filter text.
+     */
+    filterText = input(null, ...(ngDevMode ? [{ debugName: "filterText" }] : []));
+    /**
+     * The icon to display in the filter input.
+     */
+    filterIcon = input(...(ngDevMode ? [undefined, { debugName: "filterIcon" }] : []));
+    /**
+     * The icon to display in the dropdown.
+     */
+    dropdownIcon = input(...(ngDevMode ? [undefined, { debugName: "dropdownIcon" }] : []));
+    /**
+     * Whether the select is virtualized.
+     * @default `false`
+     */
+    virtual = input(false, { ...(ngDevMode ? { debugName: "virtual" } : {}), transform: booleanAttribute });
+    /**
+     * When {@link virtual} is enabled, this property defines the height of each item in the list.
+     */
+    itemHeight = input(...(ngDevMode ? [undefined, { debugName: "itemHeight" }] : []));
+    /**
+     * Enable this to allow the user to type in a value that is not in the list.
+     * When enabled, the value of the control becomes the label of a selected item or the typed value.
+     *
+     * Cannot be used with
+     * * {@link multiple} selection
+     * * {@link filter} without also setting {@link editableAutoFilter} to `false`
+     *
+     * @default `false`
+     */
+    editable = input(...(ngDevMode ? [undefined, { debugName: "editable" }] : []));
+    /**
+     * Whether to automatically filter the options based on the user's input in the {@link editable} input.
+     * @default `true`
+     */
+    editableAutoFilter = input(true, { ...(ngDevMode ? { debugName: "editableAutoFilter" } : {}), transform: booleanAttribute });
+    /**
+     * Enable this to allow the user to select multiple values.
+     * When enabled, the value of the control becomes an array of selected items.
+     *
+     * This is only applicable when {@link editable} is `false`.
+     * @default `false`
+     */
+    multiple = input(...(ngDevMode ? [undefined, { debugName: "multiple" }] : []));
+    /**
+     * Whether to scroll to the selected item when the dropdown is opened.
+     * @default `true`
+     */
+    scrollToSelectedItemOnOpen = input(true, ...(ngDevMode ? [{ debugName: "scrollToSelectedItemOnOpen" }] : []));
+    /**
+     * Tabindex for the select control.
+     * @default `0`
+     */
+    tabindex = input(0, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    /**
+     * Whether to use a checkbox to indicate selection state.
+     *
+     * This option is true per default when {@link multiple} is `true`.
+     * @default multiple()
+     */
+    checkbox = input(...(ngDevMode ? [undefined, { debugName: "checkbox" }] : []));
+    maybeCallback = maybeCallback;
+    _listbox = viewChild(NgnListBox, ...(ngDevMode ? [{ debugName: "_listbox" }] : []));
+    _userChangedEditableInput = false;
+    filterTextInternal = linkedSignal(this.filterText, ...(ngDevMode ? [{ debugName: "filterTextInternal" }] : []));
+    currentHighlightedValue = signal(null, ...(ngDevMode ? [{ debugName: "currentHighlightedValue" }] : []));
+    valueStr = computed(() => {
+        const v = this.value();
+        return typeof v === 'string' ? v : null;
+    }, ...(ngDevMode ? [{ debugName: "valueStr" }] : []));
+    valueArray = computed(() => {
+        const v = this.value();
+        return Array.isArray(v) ? v : v ? [v] : [];
+    }, ...(ngDevMode ? [{ debugName: "valueArray" }] : []));
+    appliedFilter = computed(() => this.filter() || this.editable() || false, ...(ngDevMode ? [{ debugName: "appliedFilter" }] : []));
+    _flatOptions = computed(() => mapToItems(this.options()), ...(ngDevMode ? [{ debugName: "_flatOptions" }] : []));
+    selectedItems = computed(() => {
+        if (this.editable()) {
+            return [this._flatOptions().find(option => option.label === this.value())];
         }
-        const providedFilterArgs = typeof filter === 'boolean' ? {} : filter;
-        const options = {
-            filterFieldsCallback: item => item.label,
-            fieldItems: 'items',
-            splitWords: true,
-            caseSensitive: false,
-            clearFilterOnClose: true,
-            filterFn: 'contains',
-            ...providedFilterArgs,
-        };
-        return options;
-    });
-    // Replace with resource API when previous value persists
-    filteredOptions = asyncComputed(async () => {
-        const filter = this._appliedFilterOptions();
-        const filterText = this.filterTextInternal();
-        if (!filter || !filterText) {
-            return this._options();
+        else {
+            return this.valueArray().map(value => this._flatOptions().find(option => option.value === value));
         }
-        return await filterOptions(this._options(), filterText, filter);
-    }, []);
-    filterIsExecuting = this.filteredOptions.isRunning;
-    selectedItem = computed(() => this._flatOptions().find(option => option.value === this.value()));
+    }, ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    selectedItemsValues = computed(() => this.selectedItems().map(item => item?.value), ...(ngDevMode ? [{ debugName: "selectedItemsValues" }] : []));
+    constructor() {
+        super();
+        effect(() => {
+            if (this.editable() && this.multiple()) {
+                throw new NgnError('select', 'Editable and multiple selection cannot be used together');
+            }
+            if (this.editable() && this.filter()) {
+                throw new NgnError('select', 'Editable and filtering cannot be used together');
+            }
+        });
+        effect(() => {
+            this._customEditableSub?.unsubscribe();
+            const editable = this.editable();
+            const customEditableInput = this._customEditableInput();
+            if (!editable || !customEditableInput) {
+                return;
+            }
+            this._customEditableSub = customEditableInput.value.subscribe(value => {
+                this.onEditableChange(value);
+            });
+            // Set ARIA attributes for accessibility
+            customEditableInput.element.nativeElement.setAttribute('aria-autocomplete', 'list');
+            customEditableInput.element.nativeElement.setAttribute('aria-expanded', `${this._popover().open()}`);
+            customEditableInput.element.nativeElement.setAttribute('aria-haspopup', 'listbox');
+            customEditableInput.element.nativeElement.setAttribute('aria-controls', `${this.inputId()}_listbox`);
+        });
+        effect(() => {
+            if (!this.editable()) {
+                return;
+            }
+            const valueSig = this._customEditableInput()?.value;
+            if (valueSig) {
+                valueSig.set(this.value() || '');
+            }
+        });
+        effect(() => {
+            if (!this.editable()) {
+                return;
+            }
+            const hasOptions = !!this._listbox()?.displayedItems().length;
+            if (!this._userChangedEditableInput) {
+                return;
+            }
+            this._userChangedEditableInput = false;
+            if (hasOptions) {
+                this.show();
+            }
+            else {
+                this.hide();
+            }
+        });
+    }
     onKeyDown(event) {
         this._listbox()?.onKeyDown(event);
         // if event is not handled by the listbox, we can handle it here
         if (!event.defaultPrevented) {
-            if (event.key === 'Enter' || event.key === ' ') {
+            if (event.key === 'Enter') {
+                if (this.readonly() || this.disabled()) {
+                    return;
+                }
                 this._popover().toggle();
                 event.stopPropagation();
                 event.preventDefault();
             }
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                if (this.readonly() || this.disabled()) {
+                    return;
+                }
+                const currentIndex = this.options().findIndex(option => option.value === this.value());
+                let newIndex = event.key === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
+                if (newIndex < 0) {
+                    newIndex = 0;
+                }
+                if (newIndex >= this.options().length) {
+                    newIndex = this.options().length - 1;
+                }
+                const newValue = this.options()[newIndex]?.value;
+                if (newValue !== undefined) {
+                    this.onSelect(newValue);
+                }
+            }
         }
     }
     onPopoverClosed() {
+        this.potentiallyBlurred();
         this.currentHighlightedValue.set(null);
-        if (this._appliedFilterOptions()?.clearFilterOnClose) {
-            this.filterTextInternal.set('');
+        const filter = this.filter();
+        if (filter === true || (typeof filter === 'object' && filter.clearFilterOnClose)) {
+            if (!this.editable()) {
+                this.filterTextInternal.set('');
+            }
         }
     }
     onSelect(value) {
-        if (this.value() !== value) {
-            this.value.set(value);
-            this.onChange(value);
+        if (this.editable()) {
+            const item = this._flatOptions().find(option => option.value === value);
+            if (item) {
+                this.value.set(maybeCallback(item.label));
+            }
+        }
+        else {
+            const v = value;
+            if (this.value() !== v) {
+                this.value.set(v);
+            }
+        }
+    }
+    onItemClicked() {
+        if (!this.multiple()) {
+            this.hide();
+        }
+    }
+    /**
+     * Shows the select dropdown.
+     */
+    show() {
+        if (this.disabled() || this.readonly()) {
+            return;
         }
-        this.close();
+        this._popover().show();
+    }
+    /**
+     * Hides the select dropdown.
+     */
+    hide() {
+        this._popover().hide();
     }
-    close() {
-        this._popover().close();
+    onEditableChange(value) {
+        if (this.editable()) {
+            this.value.set(maybeCallback(value));
+            this._userChangedEditableInput = true;
+            if (this.editableAutoFilter()) {
+                this.filterTextInternal.set(value);
+            }
+        }
+    }
+    potentiallyBlurred() {
+        setTimeout(() => {
+            if (this.element.nativeElement.contains(document.activeElement) || this._popover().open()) {
+                return;
+            }
+            this.touched.set(true);
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Select, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: Select, isStandalone: true, selector: "ngn-select", inputs: { popoverOptions: { classPropertyName: "popoverOptions", publicName: "popoverOptions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null }, filterIcon: { classPropertyName: "filterIcon", publicName: "filterIcon", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null } }, providers: [valueControlBaseProvider(Select)], viewQueries: [{ propertyName: "_popover", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "_listbox", first: true, predicate: ListBox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ngn-form-field\r\n  (click)=\"popover.open()\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  ngnElementRef\r\n  #field=\"ngnElementRef\"\r\n  [label]=\"label()\"\r\n  [inputId]=\"inputId()\"\r\n>\r\n  <div class=\"ngn-select-trigger\" tabindex=\"0\">\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"selectedItemTemplate()\"\r\n      [ngTemplateOutletContext]=\"{\r\n        $implicit: selectedItem(),\r\n      }\"\r\n    ></ng-template>\r\n  </div>\r\n</ngn-form-field>\r\n<ngn-popover\r\n  #popover\r\n  class=\"ngn-select-popover\"\r\n  [options]=\"appliedPopoverOptions()\"\r\n  [anchor]=\"field.nativeElement\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  (closed)=\"onPopoverClosed()\"\r\n  ngnElementRef\r\n  #popoverElement=\"ngnElementRef\"\r\n>\r\n  <ng-template #lazy>\r\n    @if (filter()) {\r\n      <ngn-form-field>\r\n        <ngn-text-field\r\n          [ngModel]=\"filterTextInternal()\"\r\n          (ngModelChange)=\"filterTextInternal.set($event)\"\r\n        />\r\n        <ngn-icon defaultIcon=\"fa-solid fa-magnifying-glass\" [icon]=\"filterIcon()\" />\r\n        @if (filterIsExecuting()) {\r\n          <!-- TODO: replace with spinner -->\r\n          <ngn-icon defaultIcon=\"fa-solid fa-spinner fa-spin\" />\r\n        }\r\n      </ngn-form-field>\r\n    }\r\n    <ngn-list-box\r\n      [highlightable]=\"false\"\r\n      [selectable]=\"true\"\r\n      [items]=\"filteredOptions()\"\r\n      [itemHeight]=\"itemHeight()\"\r\n      [virtual]=\"virtual()\"\r\n      [templateItem]=\"itemTemplate()\"\r\n      [templateGroup]=\"groupTemplate()\"\r\n      [fields]=\"{\r\n        groupItems: 'items',\r\n        value: 'value',\r\n        label: 'label',\r\n        testId: 'testId',\r\n      }\"\r\n      [ngModel]=\"selectedItem()?.value\"\r\n      (ngModelChange)=\"onSelect($event)\"\r\n    />\r\n  </ng-template>\r\n</ngn-popover>\r\n\r\n<ng-template #defaultItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  <span [attr.data-testid]=\"item?.testId\">{{ item?.label }}&ZeroWidthSpace;</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultGroupTemplate [ngnTemplate]=\"templateTypes.item\" let-group>\r\n  <span [attr.data-testid]=\"group?.testId\">{{ group?.label }}&ZeroWidthSpace;</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  <span [attr.data-testid]=\"item?.testId\">{{ item?.label }}&ZeroWidthSpace;</span>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: FormField, selector: "ngn-form-field", inputs: ["label", "inputId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListBox, selector: "ngn-list-box", inputs: ["items", "fields", "selectable", "highlightable", "virtual", "itemHeight"] }, { kind: "component", type: TextField, selector: "ngn-text-field" }, { kind: "component", type: Popover, selector: "ngn-popover", inputs: ["anchor", "options"], outputs: ["opened", "closed"] }, { kind: "directive", type: GetElementRef, selector: "[ngnElementRef]", exportAs: ["ngnElementRef"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "component", type: Icon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnSelect, isStandalone: true, selector: "ngn-select", inputs: { popoverOptions: { classPropertyName: "popoverOptions", publicName: "popoverOptions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterText: { classPropertyName: "filterText", publicName: "filterText", isSignal: true, isRequired: false, transformFunction: null }, filterIcon: { classPropertyName: "filterIcon", publicName: "filterIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownIcon: { classPropertyName: "dropdownIcon", publicName: "dropdownIcon", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, editableAutoFilter: { classPropertyName: "editableAutoFilter", publicName: "editableAutoFilter", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, scrollToSelectedItemOnOpen: { classPropertyName: "scrollToSelectedItemOnOpen", publicName: "scrollToSelectedItemOnOpen", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: block;" }, providers: [provideSelf(NgnSelect)], queries: [{ propertyName: "_customEditableInput", first: true, predicate: NgnInput, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_popover", first: true, predicate: NgnPopover, descendants: true, isSignal: true }, { propertyName: "_listbox", first: true, predicate: NgnListBox, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ngn-input-field\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"{\r\n    input: true,\r\n    'input-editable': editable(),\r\n  }\"\r\n  (click)=\"show()\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  #field\r\n  [label]=\"label()\"\r\n  [labelledBy]=\"labelledBy()\"\r\n  [inputId]=\"inputId()\"\r\n  [invalid]=\"invalid()\"\r\n  [readonly]=\"readonly()\"\r\n  [disabled]=\"disabled()\"\r\n  [tabindex]=\"editable() || disabled() ? -1 : tabindex()\"\r\n  (focusout)=\"potentiallyBlurred()\"\r\n>\r\n  @if (editable()) {\r\n    <ng-content select=\"[ngnInput]\">\r\n      <input\r\n        ngnInput\r\n        autocomplete=\"list\"\r\n        [aria-expanded]=\"popover.open()\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-controls]=\"inputId() + '_listbox'\"\r\n        [id]=\"inputId()\"\r\n        [value]=\"valueStr() || ''\"\r\n        (valueChange)=\"onEditableChange($event)\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n      />\r\n    </ng-content>\r\n  } @else {\r\n    <div\r\n      role=\"combobox\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'combobox'\"\r\n      [aria-expanded]=\"popover.open()\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.aria-controls]=\"inputId() + '_listbox'\"\r\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n      [attr.aria-readonly]=\"readonly() ? 'true' : null\"\r\n      [attr.disabled]=\"disabled() ? '' : null\"\r\n      [id]=\"inputId()\"\r\n    >\r\n      @if (multiple()) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"selectedItemsTemplate()\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: selectedItems(),\r\n          }\"\r\n        />\r\n      } @else {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"selectedItemTemplate()\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: selectedItems()[0],\r\n          }\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"dropdownIcon()\" defaultIcon=\"chevron_down\" />\r\n</ngn-input-field>\r\n<ngn-popover\r\n  #popover\r\n  [options]=\"appliedPopoverOptions()\"\r\n  [anchor]=\"field.element.nativeElement\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  (closed)=\"onPopoverClosed()\"\r\n  [id]=\"inputId() + '_popover'\"\r\n  [hasShrinkableContent]=\"true\"\r\n>\r\n  <ng-template #lazy>\r\n    <div [ptInt]=\"this\" [ptClass]=\"'popover-content'\">\r\n      @if (filter()) {\r\n        <ngn-input-field [ptInt]=\"this\" [ptClass]=\"'filter'\">\r\n          <input\r\n            ngnInput\r\n            [value]=\"filterTextInternal()\"\r\n            (valueChange)=\"filterTextInternal.set($event)\"\r\n          />\r\n          <ngn-icon\r\n            [ptInt]=\"this\"\r\n            [ptClass]=\"'filter-icon'\"\r\n            defaultIcon=\"magnifying_glass\"\r\n            [icon]=\"filterIcon()\"\r\n          />\r\n        </ngn-input-field>\r\n      }\r\n      <ngn-list-box\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"{\r\n          'list-box': true,\r\n        }\"\r\n        style=\"height: 100%; min-height: 0\"\r\n        [focussable]=\"false\"\r\n        [selectable]=\"true\"\r\n        [filter]=\"appliedFilter()\"\r\n        [filterText]=\"filterTextInternal()\"\r\n        [items]=\"options()\"\r\n        [itemHeight]=\"itemHeight()\"\r\n        [virtual]=\"virtual()\"\r\n        [templateItem]=\"itemTemplate()\"\r\n        [templateGroup]=\"groupTemplate()\"\r\n        [multiple]=\"multiple()\"\r\n        [value]=\"multiple() ? selectedItemsValues() : selectedItemsValues()[0]\"\r\n        [scrollToSelectedItemOnInit]=\"scrollToSelectedItemOnOpen()\"\r\n        (valueChange)=\"onSelect($event)\"\r\n        (itemClicked)=\"onItemClicked()\"\r\n        [inputId]=\"inputId() + '_listbox'\"\r\n        [templateEmpty]=\"noItemsTemplate()\"\r\n        [checkbox]=\"checkbox()\"\r\n      />\r\n    </div>\r\n  </ng-template>\r\n</ngn-popover>\r\n\r\n<ng-template #defaultItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  <span [attr.data-testid]=\"item?.testId\">\r\n    @let label = item?.label;\r\n    @if (label) {\r\n      <span [attr.data-testid]=\"item?.testId\">{{ maybeCallback(label) }}</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #defaultGroupTemplate [ngnTemplate]=\"templateTypes.item\" let-group>\r\n  <span [attr.data-testid]=\"group?.testId\">\r\n    @let label = group?.label;\r\n    @if (label) {\r\n      <span [attr.data-testid]=\"group?.testId\">{{ maybeCallback(label) }}</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  @let label = item?.label;\r\n  @if (label) {\r\n    <span [attr.data-testid]=\"item?.testId\">{{ maybeCallback(label) }}</span>\r\n  } @else {\r\n    <span [attr.data-testid]=\"item?.testId\">&ZeroWidthSpace;</span>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemsTemplate [ngnTemplate]=\"templateTypes.selectedItems\" let-items>\r\n  <ngn-item-view\r\n    #itemView\r\n    [items]=\"items\"\r\n    [idField]=\"'value'\"\r\n    [separator]=\"true\"\r\n    style=\"margin-right: 8px\"\r\n  >\r\n    <ng-template #item let-item [ngnTemplate]=\"itemView.templateTypes.item\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"selectedItemTemplate(); context: { $implicit: item }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </ngn-item-view>\r\n  @if (items.length < 1) {\r\n    &ZeroWidthSpace;\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnInputField, selector: "ngn-input-field", inputs: ["label", "labelledBy", "labelKind", "inputId", "showClearButton", "iconClearButton", "tabindex", "invalid", "readonly", "disabled"] }, { kind: "component", type: NgnListBox, selector: "ngn-list-box", inputs: ["items", "scrollToSelectedItemOnInit", "selectable", "selectOnHover", "focussable", "virtual", "itemHeight", "multiple", "checkbox", "filter", "filterText"], outputs: ["itemClicked"] }, { kind: "component", type: NgnPopover, selector: "ngn-popover", inputs: ["open", "anchor", "options", "hasShrinkableContent", "closeBy"], outputs: ["closed", "closing", "openChange"] }, { kind: "directive", type: NgnInput, selector: "input[ngnInput], textarea[ngnInput]", inputs: ["invalid", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "component", type: NgnItemView, selector: "ngn-item-view", inputs: ["idField", "items", "separator", "iconItemSeparator", "overflowStrategy", "overflowStrategyFreezeCount", "overflowStrategyIndex", "sameWidthItems"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Select, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'ngn-select', imports: [
-                        FormField,
-                        FormsModule,
-                        ListBox,
-                        TextField,
-                        Popover,
-                        GetElementRef,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-select', imports: [
+                        NgnPt,
+                        NgnInputField,
+                        NgnListBox,
+                        NgnPopover,
+                        NgnInput,
                         NgTemplateOutlet,
                         NgnTemplate,
-                        Icon,
-                    ], providers: [valueControlBaseProvider(Select)], template: "<ngn-form-field\r\n  (click)=\"popover.open()\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  ngnElementRef\r\n  #field=\"ngnElementRef\"\r\n  [label]=\"label()\"\r\n  [inputId]=\"inputId()\"\r\n>\r\n  <div class=\"ngn-select-trigger\" tabindex=\"0\">\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"selectedItemTemplate()\"\r\n      [ngTemplateOutletContext]=\"{\r\n        $implicit: selectedItem(),\r\n      }\"\r\n    ></ng-template>\r\n  </div>\r\n</ngn-form-field>\r\n<ngn-popover\r\n  #popover\r\n  class=\"ngn-select-popover\"\r\n  [options]=\"appliedPopoverOptions()\"\r\n  [anchor]=\"field.nativeElement\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  (closed)=\"onPopoverClosed()\"\r\n  ngnElementRef\r\n  #popoverElement=\"ngnElementRef\"\r\n>\r\n  <ng-template #lazy>\r\n    @if (filter()) {\r\n      <ngn-form-field>\r\n        <ngn-text-field\r\n          [ngModel]=\"filterTextInternal()\"\r\n          (ngModelChange)=\"filterTextInternal.set($event)\"\r\n        />\r\n        <ngn-icon defaultIcon=\"fa-solid fa-magnifying-glass\" [icon]=\"filterIcon()\" />\r\n        @if (filterIsExecuting()) {\r\n          <!-- TODO: replace with spinner -->\r\n          <ngn-icon defaultIcon=\"fa-solid fa-spinner fa-spin\" />\r\n        }\r\n      </ngn-form-field>\r\n    }\r\n    <ngn-list-box\r\n      [highlightable]=\"false\"\r\n      [selectable]=\"true\"\r\n      [items]=\"filteredOptions()\"\r\n      [itemHeight]=\"itemHeight()\"\r\n      [virtual]=\"virtual()\"\r\n      [templateItem]=\"itemTemplate()\"\r\n      [templateGroup]=\"groupTemplate()\"\r\n      [fields]=\"{\r\n        groupItems: 'items',\r\n        value: 'value',\r\n        label: 'label',\r\n        testId: 'testId',\r\n      }\"\r\n      [ngModel]=\"selectedItem()?.value\"\r\n      (ngModelChange)=\"onSelect($event)\"\r\n    />\r\n  </ng-template>\r\n</ngn-popover>\r\n\r\n<ng-template #defaultItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  <span [attr.data-testid]=\"item?.testId\">{{ item?.label }}&ZeroWidthSpace;</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultGroupTemplate [ngnTemplate]=\"templateTypes.item\" let-group>\r\n  <span [attr.data-testid]=\"group?.testId\">{{ group?.label }}&ZeroWidthSpace;</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  <span [attr.data-testid]=\"item?.testId\">{{ item?.label }}&ZeroWidthSpace;</span>\r\n</ng-template>\r\n" }]
-        }] });
+                        NgnItemView,
+                        NgnIcon,
+                    ], providers: [provideSelf(NgnSelect)], host: {
+                        style: 'display: block;',
+                    }, template: "<ngn-input-field\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"{\r\n    input: true,\r\n    'input-editable': editable(),\r\n  }\"\r\n  (click)=\"show()\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  #field\r\n  [label]=\"label()\"\r\n  [labelledBy]=\"labelledBy()\"\r\n  [inputId]=\"inputId()\"\r\n  [invalid]=\"invalid()\"\r\n  [readonly]=\"readonly()\"\r\n  [disabled]=\"disabled()\"\r\n  [tabindex]=\"editable() || disabled() ? -1 : tabindex()\"\r\n  (focusout)=\"potentiallyBlurred()\"\r\n>\r\n  @if (editable()) {\r\n    <ng-content select=\"[ngnInput]\">\r\n      <input\r\n        ngnInput\r\n        autocomplete=\"list\"\r\n        [aria-expanded]=\"popover.open()\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-controls]=\"inputId() + '_listbox'\"\r\n        [id]=\"inputId()\"\r\n        [value]=\"valueStr() || ''\"\r\n        (valueChange)=\"onEditableChange($event)\"\r\n        [readOnly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n      />\r\n    </ng-content>\r\n  } @else {\r\n    <div\r\n      role=\"combobox\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'combobox'\"\r\n      [aria-expanded]=\"popover.open()\"\r\n      aria-haspopup=\"listbox\"\r\n      [attr.aria-controls]=\"inputId() + '_listbox'\"\r\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n      [attr.aria-readonly]=\"readonly() ? 'true' : null\"\r\n      [attr.disabled]=\"disabled() ? '' : null\"\r\n      [id]=\"inputId()\"\r\n    >\r\n      @if (multiple()) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"selectedItemsTemplate()\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: selectedItems(),\r\n          }\"\r\n        />\r\n      } @else {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"selectedItemTemplate()\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: selectedItems()[0],\r\n          }\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"dropdownIcon()\" defaultIcon=\"chevron_down\" />\r\n</ngn-input-field>\r\n<ngn-popover\r\n  #popover\r\n  [options]=\"appliedPopoverOptions()\"\r\n  [anchor]=\"field.element.nativeElement\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n  (closed)=\"onPopoverClosed()\"\r\n  [id]=\"inputId() + '_popover'\"\r\n  [hasShrinkableContent]=\"true\"\r\n>\r\n  <ng-template #lazy>\r\n    <div [ptInt]=\"this\" [ptClass]=\"'popover-content'\">\r\n      @if (filter()) {\r\n        <ngn-input-field [ptInt]=\"this\" [ptClass]=\"'filter'\">\r\n          <input\r\n            ngnInput\r\n            [value]=\"filterTextInternal()\"\r\n            (valueChange)=\"filterTextInternal.set($event)\"\r\n          />\r\n          <ngn-icon\r\n            [ptInt]=\"this\"\r\n            [ptClass]=\"'filter-icon'\"\r\n            defaultIcon=\"magnifying_glass\"\r\n            [icon]=\"filterIcon()\"\r\n          />\r\n        </ngn-input-field>\r\n      }\r\n      <ngn-list-box\r\n        [ptInt]=\"this\"\r\n        [ptClass]=\"{\r\n          'list-box': true,\r\n        }\"\r\n        style=\"height: 100%; min-height: 0\"\r\n        [focussable]=\"false\"\r\n        [selectable]=\"true\"\r\n        [filter]=\"appliedFilter()\"\r\n        [filterText]=\"filterTextInternal()\"\r\n        [items]=\"options()\"\r\n        [itemHeight]=\"itemHeight()\"\r\n        [virtual]=\"virtual()\"\r\n        [templateItem]=\"itemTemplate()\"\r\n        [templateGroup]=\"groupTemplate()\"\r\n        [multiple]=\"multiple()\"\r\n        [value]=\"multiple() ? selectedItemsValues() : selectedItemsValues()[0]\"\r\n        [scrollToSelectedItemOnInit]=\"scrollToSelectedItemOnOpen()\"\r\n        (valueChange)=\"onSelect($event)\"\r\n        (itemClicked)=\"onItemClicked()\"\r\n        [inputId]=\"inputId() + '_listbox'\"\r\n        [templateEmpty]=\"noItemsTemplate()\"\r\n        [checkbox]=\"checkbox()\"\r\n      />\r\n    </div>\r\n  </ng-template>\r\n</ngn-popover>\r\n\r\n<ng-template #defaultItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  <span [attr.data-testid]=\"item?.testId\">\r\n    @let label = item?.label;\r\n    @if (label) {\r\n      <span [attr.data-testid]=\"item?.testId\">{{ maybeCallback(label) }}</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #defaultGroupTemplate [ngnTemplate]=\"templateTypes.item\" let-group>\r\n  <span [attr.data-testid]=\"group?.testId\">\r\n    @let label = group?.label;\r\n    @if (label) {\r\n      <span [attr.data-testid]=\"group?.testId\">{{ maybeCallback(label) }}</span>\r\n    }\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  @let label = item?.label;\r\n  @if (label) {\r\n    <span [attr.data-testid]=\"item?.testId\">{{ maybeCallback(label) }}</span>\r\n  } @else {\r\n    <span [attr.data-testid]=\"item?.testId\">&ZeroWidthSpace;</span>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemsTemplate [ngnTemplate]=\"templateTypes.selectedItems\" let-items>\r\n  <ngn-item-view\r\n    #itemView\r\n    [items]=\"items\"\r\n    [idField]=\"'value'\"\r\n    [separator]=\"true\"\r\n    style=\"margin-right: 8px\"\r\n  >\r\n    <ng-template #item let-item [ngnTemplate]=\"itemView.templateTypes.item\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"selectedItemTemplate(); context: { $implicit: item }\"\r\n      ></ng-container>\r\n    </ng-template>\r\n  </ngn-item-view>\r\n  @if (items.length < 1) {\r\n    &ZeroWidthSpace;\r\n  }\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { _popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnPopover), { isSignal: true }] }], _customEditableInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgnInput), { isSignal: true }] }], popoverOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverOptions", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterText", required: false }] }], filterIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterIcon", required: false }] }], dropdownIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownIcon", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], editableAutoFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "editableAutoFilter", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], scrollToSelectedItemOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollToSelectedItemOnOpen", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], checkbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkbox", required: false }] }], _listbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnListBox), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Select };
+export { NgnSelect };
 //# sourceMappingURL=ngneers-controls-select.mjs.map