@odx/angular 1.0.4 → 2.1.1

package/fesm2020/odx-angular-components-select.mjs

@@ -1,37 +1,33 @@
 import { __decorate, __metadata } from 'tslib';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ChangeDetectorRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostListener, Directive, Pipe, EventEmitter, forwardRef, ContentChildren, ViewChild, Output, ContentChild, NgModule } from '@angular/core';
+import { InjectionToken, inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Directive, HostListener, Pipe, forwardRef, ContentChildren, ContentChild, NgModule } from '@angular/core';
 import * as i2 from '@odx/angular';
-import { DisabledController, detectControllerChanges, CoreModule, ODX_STRINGIFY, ODX_STRING_SEARCH_HANDLER, ODX_IDENTITY_MATCHER, ReadonlyController } from '@odx/angular';
+import { DisabledController, detectControllerChanges, CoreModule, ODX_IDENTITY_MATCHER } from '@odx/angular';
 import { DynamicViewDirective } from '@odx/angular/cdk/dynamic-view';
+import { OptionControl } from '@odx/angular/cdk/option-control';
 import { CheckboxComponent } from '@odx/angular/components/checkbox';
 import { CSSComponent, CSSModifier } from '@odx/angular/internal';
-import { untilDestroyed, injectElement, Transform, Pure, deferFn, isFunction } from '@odx/angular/utils';
+import { Transform, deferFn } from '@odx/angular/utils';
 import * as i1 from '@angular/common';
-import { fromEvent, map, distinctUntilChanged } from 'rxjs';
+import { BaseSearchFieldDirective, BaseSearchFilterPipe, AutocompleteControl } from '@odx/angular/cdk/autocomplete-control';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { CustomFormControl } from '@odx/angular/cdk/custom-form-control';
 import { DropdownDirective } from '@odx/angular/components/dropdown';
 import { IconComponent } from '@odx/angular/components/icon';
 import { LoadingSpinnerModule } from '@odx/angular/components/loading-spinner';
 import { fromQueryList } from '@odx/angular/rxjs';
 
-const SELECT_CONTROL = new InjectionToken('@odx/angular/components/select::SelectControl');
+const SELECT_CONTROL = new InjectionToken('@odx/angular/components/select::SelectComponent');
 
-let OptionComponent = class OptionComponent {
+let SelectOptionComponent = class SelectOptionComponent extends OptionControl {
     get disabled() {
         return !!this.disabledController?.disabled;
     }
     constructor() {
+        super();
         this.disabledController = DisabledController.inject();
-        this.takeUntilDestroyed = untilDestroyed();
-        this.cdr = inject(ChangeDetectorRef);
         this.selectControl = inject(SELECT_CONTROL);
-        this.isActive = false;
-        this.element = injectElement();
         this.isSelected = false;
-        this.value = null;
         this.notFoundMessage = false;
         if (!this.selectControl.multiple) {
             detectControllerChanges(this.selectControl)
@@ -44,9 +40,6 @@ let OptionComponent = class OptionComponent {
     ngOnInit() {
         this.isSelected = this.selectControl.isOptionSelected(this);
     }
-    getLabel() {
-        return this.element.nativeElement.textContent ?? '';
-    }
     setActiveStyles() {
         if (this.disabled)
             return;
@@ -58,70 +51,48 @@ let OptionComponent = class OptionComponent {
             this.selectControl.selectOption(this);
         }
     }
-    setInactiveStyles() {
-        this.isActive = false;
-    }
     switchCheckbox() {
         if (this.selectControl.multiple) {
             this.isSelected = !this.isSelected;
             this.cdr.markForCheck();
         }
     }
-    select(event) {
-        event.stopPropagation();
-        event.preventDefault();
+    selectOption() {
         this.selectControl.selectOption(this);
     }
 };
-OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: OptionComponent, isStandalone: true, selector: "odx-option", inputs: { value: "value", notFoundMessage: "notFoundMessage" }, host: { attributes: { "role": "option" }, listeners: { "click": "select($event)" }, properties: { "attr.aria-selected": "isSelected", "attr.aria-disabled": "disabled || null", "class.is-disabled": "disabled", "class.is-selected": "isSelected", "class.is-active": "isActive" } }, providers: [DisabledController.connect()], ngImport: i0, template: "<odx-checkbox [checked]=\"isSelected\" *ngIf=\"selectControl.multiple && !notFoundMessage; else single\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</odx-checkbox>\n\n<ng-template #single>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "odx-checkbox", inputs: ["indeterminate"], outputs: ["indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectOptionComponent, isStandalone: true, selector: "odx-select-option, odx-option", inputs: { notFoundMessage: "notFoundMessage" }, host: { properties: { "attr.aria-disabled": "disabled || null", "class.is-disabled": "disabled" } }, providers: [DisabledController.connect()], usesInheritance: true, ngImport: i0, template: "<odx-checkbox [checked]=\"isSelected\" *ngIf=\"selectControl.multiple && !notFoundMessage; else single\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</odx-checkbox>\n\n<ng-template #single>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckboxComponent, selector: "odx-checkbox", inputs: ["indeterminate"], outputs: ["indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     Transform(coerceBooleanProperty),
     __metadata("design:type", Object)
-], OptionComponent.prototype, "notFoundMessage", void 0);
-OptionComponent = __decorate([
-    CSSComponent('option'),
+], SelectOptionComponent.prototype, "notFoundMessage", void 0);
+SelectOptionComponent = __decorate([
+    CSSComponent('select-option'),
     __metadata("design:paramtypes", [])
-], OptionComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: OptionComponent, decorators: [{
+], SelectOptionComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectOptionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'odx-option', imports: [CoreModule, DynamicViewDirective, CheckboxComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DisabledController.connect()], host: {
-                        '[attr.aria-selected]': 'isSelected',
+            args: [{ standalone: true, selector: 'odx-select-option, odx-option', imports: [CoreModule, DynamicViewDirective, CheckboxComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DisabledController.connect()], host: {
                         '[attr.aria-disabled]': 'disabled || null',
                         '[class.is-disabled]': 'disabled',
-                        '[class.is-selected]': 'isSelected',
-                        '[class.is-active]': 'isActive',
-                        role: 'option',
                     }, template: "<odx-checkbox [checked]=\"isSelected\" *ngIf=\"selectControl.multiple && !notFoundMessage; else single\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</odx-checkbox>\n\n<ng-template #single>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { notFoundMessage: [{
                 type: Input
-            }], notFoundMessage: [{
-                type: Input
-            }], select: [{
-                type: HostListener,
-                args: ['click', ['$event']]
             }] } });
 
-let SelectSearchFieldDirective = class SelectSearchFieldDirective {
+let SelectSearchFieldDirective = class SelectSearchFieldDirective extends BaseSearchFieldDirective {
     constructor() {
-        this.takeUntilDestroyed = untilDestroyed();
-        this.element = injectElement();
+        super(...arguments);
         // eslint-disable-next-line @angular-eslint/no-input-rename
         this.notFoundContent = null;
-        this.valueChange$ = fromEvent(this.element.nativeElement, 'input').pipe(map(() => this.getValue()), distinctUntilChanged(), this.takeUntilDestroyed());
-    }
-    reset() {
-        this.element.nativeElement.value = '';
-    }
-    focus() {
-        this.element.nativeElement.focus();
     }
-    getValue() {
-        return this.element.nativeElement.value;
+    handleDelete() {
+        this.reset();
     }
 };
-SelectSearchFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectSearchFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-SelectSearchFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SelectSearchFieldDirective, isStandalone: true, selector: "input[odxSelectSearchField]", inputs: { notFoundContent: ["odxSelectSearchField", "notFoundContent"] }, host: { listeners: { "keydown.delete": "reset()" }, properties: { "class.odx-form-field-control": "true" } }, ngImport: i0 });
+SelectSearchFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectSearchFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+SelectSearchFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SelectSearchFieldDirective, isStandalone: true, selector: "input[odxSelectSearchField]", inputs: { notFoundContent: ["odxSelectSearchField", "notFoundContent"] }, host: { listeners: { "keydown.delete": "handleDelete()" } }, usesInheritance: true, ngImport: i0 });
 SelectSearchFieldDirective = __decorate([
     CSSComponent('select__search')
 ], SelectSearchFieldDirective);
@@ -130,54 +101,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             args: [{
                     standalone: true,
                     selector: 'input[odxSelectSearchField]',
-                    host: {
-                        '[class.odx-form-field-control]': 'true',
-                    },
                 }]
         }], propDecorators: { notFoundContent: [{
                 type: Input,
                 args: ['odxSelectSearchField']
-            }], reset: [{
+            }], handleDelete: [{
                 type: HostListener,
                 args: ['keydown.delete']
             }] } });
 
-class SelectSearchFilterPipe {
+class SelectSearchFilterPipe extends BaseSearchFilterPipe {
     constructor() {
-        this.searchController = inject(SELECT_CONTROL, { optional: true });
-        this.stringify = inject(ODX_STRINGIFY);
-        this.stringSearchHandler = inject(ODX_STRING_SEARCH_HANDLER);
+        super(...arguments);
+        this.hostController = inject(SELECT_CONTROL, { optional: true });
     }
     get searchField() {
-        return this.searchController?.searchField;
+        return this.hostController?.searchField;
     }
-    transform(items, searchHandler) {
-        if (this.searchField) {
-            return this.filter(items, this.searchField.getValue(), searchHandler);
-        }
-        return items;
+    queryHandler(query) {
+        return query?.trim();
     }
-    filter(items, query, searchHandler) {
-        if (!items) {
-            return null;
-        }
-        query = query.trim();
-        if (query === '') {
-            return items;
-        }
-        const search = searchHandler ?? this.stringSearchHandler;
-        const stringify = this.searchController?.stringify ?? this.stringify;
-        return items.filter((item) => search(stringify(item), query));
+    get searchBy() {
+        return this.hostController?.stringify ?? this.stringify;
     }
 }
-SelectSearchFilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectSearchFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SelectSearchFilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectSearchFilterPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe });
 SelectSearchFilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SelectSearchFilterPipe, isStandalone: true, name: "odxSelectSearchFilter", pure: false });
-__decorate([
-    Pure,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, String, Function]),
-    __metadata("design:returntype", Object)
-], SelectSearchFilterPipe.prototype, "filter", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectSearchFilterPipe, decorators: [{
             type: Pipe,
             args: [{
@@ -185,46 +134,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     name: 'odxSelectSearchFilter',
                     standalone: true,
                 }]
-        }], propDecorators: { filter: [] } });
+        }] });
 
 var SelectComponent_1;
-let SelectComponent = SelectComponent_1 = class SelectComponent extends CustomFormControl {
-    get hasOptions() {
-        return !!this.options && this.options.length > 0;
-    }
-    get isOpen() {
-        return !!this.dropdown?.isOpen;
-    }
-    get selectedOptionContent() {
-        return this.selectedOption ? this.selectedOptionTemplate ?? this.selectedOptionText : null;
-    }
+let SelectComponent = SelectComponent_1 = class SelectComponent extends AutocompleteControl {
     constructor() {
-        super(null);
-        this.changeDetector = inject(ChangeDetectorRef);
+        super(...arguments);
         this.searchFieldEnabled = false;
-        this.smoothScrollEnabled = false;
         this.selectedOption = null;
         this.selectedOptionText = null;
-        this.element = injectElement();
         this.placeholder = '';
-        this.isLoading = false;
         this.multiple = false;
         this.selectedOptionTemplate = null;
         this.identityMatcher = inject(ODX_IDENTITY_MATCHER);
-        this.change = new EventEmitter();
-        detectControllerChanges(this).subscribe();
+    }
+    get selectedOptionContent() {
+        return this.selectedOption ? this.selectedOptionTemplate ?? this.selectedOptionText : null;
     }
     ngAfterViewInit() {
         if (!this.options)
             return;
-        this.keyManager = new ActiveDescendantKeyManager(this.options).withHomeAndEnd().skipPredicate((item) => item.disabled);
-        fromQueryList(this.options).subscribe(() => {
-            this.updateSelectedOption();
-            if (this.isOpen) {
-                deferFn(() => this.activateSelectedOption());
-            }
-        });
-        this.searchField?.valueChange$.subscribe(() => this.triggerControllerChange());
+        this.initKeyManager(this.options);
+        this.handleQueryListOption(this.options);
+        this.handleSearchFieldChanges();
     }
     registerOnChange(fn) {
         super.registerOnChange((value) => {
@@ -234,7 +166,7 @@ let SelectComponent = SelectComponent_1 = class SelectComponent extends CustomFo
     }
     selectOption(option) {
         if (option && !option.disabled) {
-            this.change.emit();
+            this.optionSelected.emit();
             option.switchCheckbox();
             const value = this.multiple
                 ? this.options
@@ -244,7 +176,7 @@ let SelectComponent = SelectComponent_1 = class SelectComponent extends CustomFo
                 : option.value;
             this.updateValue(value ?? null);
         }
-        !this.multiple && this.dropdown?.close();
+        !this.multiple && this.closeDropdown();
     }
     isOptionSelected(option) {
         if (option && !option.disabled) {
@@ -255,13 +187,23 @@ let SelectComponent = SelectComponent_1 = class SelectComponent extends CustomFo
         }
         return false;
     }
-    scrollOptionIntoView({ element }) {
-        const behavior = this.smoothScrollEnabled ? 'smooth' : undefined;
-        if (isFunction(element.nativeElement.scrollIntoView)) {
-            element.nativeElement.scrollIntoView({ block: 'center', behavior });
-        }
+    initKeyManager(options) {
+        this.keyManager = new ActiveDescendantKeyManager(options).withHomeAndEnd().skipPredicate((item) => item.disabled);
+    }
+    handleQueryListOption(options) {
+        fromQueryList(options)
+            .pipe(this.takeUntilDestroyed())
+            .subscribe(() => {
+            this.updateSelectedOption();
+            if (this.isOpen) {
+                deferFn(() => this.activateSelectedOption());
+            }
+        });
     }
-    openDropdown(event) {
+    handleSearchFieldChanges() {
+        this.searchField?.valueChange$.pipe(this.takeUntilDestroyed()).subscribe(() => this.triggerControllerChange());
+    }
+    handleControllerEvent(event) {
         if (this.isLoading || this.readonlyController?.readonly)
             return;
         if (this.isOpen && this.hasOptions) {
@@ -274,12 +216,6 @@ let SelectComponent = SelectComponent_1 = class SelectComponent extends CustomFo
         }
         this.keyManager?.onKeydown(event);
     }
-    handleFocusOut(event) {
-        if (this.isOpen) {
-            event.stopImmediatePropagation();
-        }
-        this.onTouched();
-    }
     activateSelectedOption() {
         let activeIndex = this.options?.toArray().findIndex((option) => option.isSelected && !option.disabled);
         if (!activeIndex || activeIndex === -1) {
@@ -304,12 +240,6 @@ let SelectComponent = SelectComponent_1 = class SelectComponent extends CustomFo
     onDropdownClosed() {
         this.searchField?.reset();
     }
-    disableSmoothScroll() {
-        this.smoothScrollEnabled = false;
-    }
-    enableSmoothScroll() {
-        this.smoothScrollEnabled = true;
-    }
     updateSelectedOption() {
         const options = this.options?.toArray();
         this.selectedOption = options?.find((option) => option.isSelected) ?? null;
@@ -331,83 +261,60 @@ let SelectComponent = SelectComponent_1 = class SelectComponent extends CustomFo
         this.changeDetector.detectChanges();
     }
 };
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectComponent, isStandalone: true, selector: "odx-select", inputs: { placeholder: "placeholder", isLoading: "isLoading", multiple: "multiple", selectedOptionTemplate: "selectedOptionTemplate", stringify: "stringify", identityMatcher: "identityMatcher" }, outputs: { change: "change" }, host: { listeners: { "click": "openDropdown($event)", "keydown": "openDropdown($event)", "focusout": "handleFocusOut($event)" }, properties: { "attr.aria-disabled": "isDisabled || null", "class.is-open": "isOpen", "tabindex": "searchFieldEnabled || isDisabled ? -1 : 0", "attr.aria-multiselectable": "multiple" } }, providers: [
-        DisabledController.connect(),
-        ReadonlyController.connect(),
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectComponent, isStandalone: true, selector: "odx-select", inputs: { placeholder: "placeholder", multiple: "multiple", selectedOptionTemplate: "selectedOptionTemplate", identityMatcher: "identityMatcher" }, host: { listeners: { "click": "handleControllerEvent($event)", "keydown": "handleControllerEvent($event)" }, properties: { "tabindex": "searchFieldEnabled || isDisabled ? -1 : 0", "attr.aria-multiselectable": "multiple" } }, providers: [
         {
             provide: SELECT_CONTROL,
             useExisting: forwardRef(() => SelectComponent_1),
         },
-    ], queries: [{ propertyName: "searchField", first: true, predicate: SelectSearchFieldDirective, descendants: true }, { propertyName: "options", predicate: OptionComponent, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: DropdownDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  aria-haspopup=\"listbox\"\n  class=\"odx-select__trigger\"\n  [odxDropdown]=\"dropdownContent\"\n  [odxDropdownDisabled]=\"isDisabled || isReadonly\"\n  [odxDropdownOptions]=\"{ matchReferenceWidth: true, offset: 4, outerPadding: 10, position: 'bottom-start' }\"\n  [odxDropdownReferenceElement]=\"element.nativeElement\"\n  [odxDropdownShowLoader]=\"isLoading\"\n  (odxDropdownBeforeOpen)=\"onDropdownOpen()\"\n  (odxDropdownBeforeClose)=\"onDropdownClose()\"\n  (odxDropdownAfterClose)=\"onDropdownClosed()\"\n  (odxDropdownAfterOpen)=\"enableSmoothScroll()\"\n>\n  <ng-template [ngIf]=\"!searchFieldEnabled\" [ngIfElse]=\"searchFieldTemplate\">\n    <div class=\"odx-select__value\" *ngIf=\"selectedOptionContent; else placeholderTemplate\">\n      <ng-template [odxDynamicView]=\"selectedOptionContent\" [odxDynamicViewContext]=\"{ $implicit: value }\"></ng-template>\n    </div>\n  </ng-template>\n  <ng-template #placeholderTemplate>\n    <div class=\"odx-select__placeholder\">\n      {{ placeholder }}\n    </div>\n  </ng-template>\n  <ng-template #searchFieldTemplate>\n    <ng-content select=\"[odxSelectSearchField]\"></ng-content>\n  </ng-template>\n  <odx-icon class=\"odx-select__indicator\" name=\"chevron-down\" iconSet=\"core\"></odx-icon>\n</div>\n<ng-template #dropdownContent>\n  <div class=\"odx-select-dropdown\" role=\"listbox\">\n    <ng-template [ngIf]=\"hasOptions\" [ngIfElse]=\"noOptionsTemplate\">\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #noOptionsTemplate>\n      <odx-option disabled notFoundMessage>\n        <ng-template [odxDynamicView]=\"searchField?.notFoundContent\"></ng-template>\n      </odx-option>\n    </ng-template>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: DropdownDirective, selector: "[odxDropdown]", inputs: ["odxDropdown", "odxDropdownDisabled", "odxDropdownShowLoader", "odxDropdownOptions", "odxDropdownReferenceElement", "odxDropdownTriggerElement", "odxDropdownHost", "odxDropdownOpenTrigger", "odxDropdownCloseTrigger"], outputs: ["odxDropdownBeforeOpen", "odxDropdownAfterOpen", "odxDropdownBeforeClose", "odxDropdownAfterClose"], exportAs: ["odxDropdown"] }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet"] }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }, { kind: "component", type: OptionComponent, selector: "odx-option", inputs: ["value", "notFoundMessage"] }, { kind: "ngmodule", type: LoadingSpinnerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-__decorate([
-    Transform(coerceBooleanProperty),
-    __metadata("design:type", Object)
-], SelectComponent.prototype, "isLoading", void 0);
+    ], queries: [{ propertyName: "searchField", first: true, predicate: SelectSearchFieldDirective, descendants: true }, { propertyName: "options", predicate: SelectOptionComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  aria-haspopup=\"listbox\"\n  class=\"odx-select__trigger\"\n  [odxDropdown]=\"dropdownContent\"\n  [odxDropdownDisabled]=\"isDisabled || isReadonly\"\n  [odxDropdownOptions]=\"{ matchReferenceWidth: true, offset: 4, outerPadding: 10, position: 'bottom-start' }\"\n  [odxDropdownReferenceElement]=\"element.nativeElement\"\n  [odxDropdownShowLoader]=\"isLoading\"\n  (odxDropdownBeforeOpen)=\"onDropdownOpen()\"\n  (odxDropdownBeforeClose)=\"onDropdownClose()\"\n  (odxDropdownAfterClose)=\"onDropdownClosed()\"\n  (odxDropdownAfterOpen)=\"enableSmoothScroll()\"\n>\n  <ng-template [ngIf]=\"!searchFieldEnabled\" [ngIfElse]=\"searchFieldTemplate\">\n    <div class=\"odx-select__value\" *ngIf=\"selectedOptionContent; else placeholderTemplate\">\n      <ng-template [odxDynamicView]=\"selectedOptionContent\" [odxDynamicViewContext]=\"{ $implicit: value }\"></ng-template>\n    </div>\n  </ng-template>\n  <ng-template #placeholderTemplate>\n    <div class=\"odx-select__placeholder\">\n      {{ placeholder }}\n    </div>\n  </ng-template>\n  <ng-template #searchFieldTemplate>\n    <ng-content select=\"[odxSelectSearchField]\"></ng-content>\n  </ng-template>\n  <odx-icon class=\"odx-select__indicator\" name=\"chevron-down\" iconSet=\"core\"></odx-icon>\n</div>\n<ng-template #dropdownContent>\n  <div class=\"odx-dropdown__option-list\" role=\"listbox\">\n    <ng-template [ngIf]=\"hasOptions\" [ngIfElse]=\"noOptionsTemplate\">\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #noOptionsTemplate>\n      <odx-select-option disabled notFoundMessage>\n        <ng-template [odxDynamicView]=\"searchField?.notFoundContent\"></ng-template>\n      </odx-select-option>\n    </ng-template>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DisabledController, selector: "[disabled]", inputs: ["disabled"] }, { kind: "directive", type: DropdownDirective, selector: "[odxDropdown]", inputs: ["odxDropdown", "odxDropdownDisabled", "odxDropdownShowLoader", "odxDropdownClickOutsideActive", "odxDropdownOptions", "odxDropdownReferenceElement", "odxDropdownTriggerElement", "odxDropdownHost", "odxDropdownOpenTrigger", "odxDropdownCloseTrigger"], outputs: ["odxDropdownBeforeOpen", "odxDropdownAfterOpen", "odxDropdownBeforeClose", "odxDropdownAfterClose"], exportAs: ["odxDropdown"] }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet"] }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }, { kind: "component", type: SelectOptionComponent, selector: "odx-select-option, odx-option", inputs: ["notFoundMessage"] }, { kind: "ngmodule", type: LoadingSpinnerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     CSSModifier(),
     Transform(coerceBooleanProperty),
     __metadata("design:type", Object)
 ], SelectComponent.prototype, "multiple", void 0);
 SelectComponent = SelectComponent_1 = __decorate([
-    CSSComponent('select'),
-    __metadata("design:paramtypes", [])
+    CSSComponent('select')
 ], SelectComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'odx-select', imports: [CoreModule, DropdownDirective, IconComponent, DynamicViewDirective, OptionComponent, LoadingSpinnerModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        DisabledController.connect(),
-                        ReadonlyController.connect(),
+            args: [{ standalone: true, selector: 'odx-select', imports: [CoreModule, DropdownDirective, IconComponent, DynamicViewDirective, SelectOptionComponent, LoadingSpinnerModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: SELECT_CONTROL,
                             useExisting: forwardRef(() => SelectComponent),
                         },
                     ], host: {
-                        '[attr.aria-disabled]': 'isDisabled || null',
-                        '[class.is-open]': 'isOpen',
                         '[tabindex]': 'searchFieldEnabled || isDisabled ? -1 : 0',
                         '[attr.aria-multiselectable]': 'multiple',
-                    }, template: "<div\n  aria-haspopup=\"listbox\"\n  class=\"odx-select__trigger\"\n  [odxDropdown]=\"dropdownContent\"\n  [odxDropdownDisabled]=\"isDisabled || isReadonly\"\n  [odxDropdownOptions]=\"{ matchReferenceWidth: true, offset: 4, outerPadding: 10, position: 'bottom-start' }\"\n  [odxDropdownReferenceElement]=\"element.nativeElement\"\n  [odxDropdownShowLoader]=\"isLoading\"\n  (odxDropdownBeforeOpen)=\"onDropdownOpen()\"\n  (odxDropdownBeforeClose)=\"onDropdownClose()\"\n  (odxDropdownAfterClose)=\"onDropdownClosed()\"\n  (odxDropdownAfterOpen)=\"enableSmoothScroll()\"\n>\n  <ng-template [ngIf]=\"!searchFieldEnabled\" [ngIfElse]=\"searchFieldTemplate\">\n    <div class=\"odx-select__value\" *ngIf=\"selectedOptionContent; else placeholderTemplate\">\n      <ng-template [odxDynamicView]=\"selectedOptionContent\" [odxDynamicViewContext]=\"{ $implicit: value }\"></ng-template>\n    </div>\n  </ng-template>\n  <ng-template #placeholderTemplate>\n    <div class=\"odx-select__placeholder\">\n      {{ placeholder }}\n    </div>\n  </ng-template>\n  <ng-template #searchFieldTemplate>\n    <ng-content select=\"[odxSelectSearchField]\"></ng-content>\n  </ng-template>\n  <odx-icon class=\"odx-select__indicator\" name=\"chevron-down\" iconSet=\"core\"></odx-icon>\n</div>\n<ng-template #dropdownContent>\n  <div class=\"odx-select-dropdown\" role=\"listbox\">\n    <ng-template [ngIf]=\"hasOptions\" [ngIfElse]=\"noOptionsTemplate\">\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #noOptionsTemplate>\n      <odx-option disabled notFoundMessage>\n        <ng-template [odxDynamicView]=\"searchField?.notFoundContent\"></ng-template>\n      </odx-option>\n    </ng-template>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { options: [{
+                    }, template: "<div\n  aria-haspopup=\"listbox\"\n  class=\"odx-select__trigger\"\n  [odxDropdown]=\"dropdownContent\"\n  [odxDropdownDisabled]=\"isDisabled || isReadonly\"\n  [odxDropdownOptions]=\"{ matchReferenceWidth: true, offset: 4, outerPadding: 10, position: 'bottom-start' }\"\n  [odxDropdownReferenceElement]=\"element.nativeElement\"\n  [odxDropdownShowLoader]=\"isLoading\"\n  (odxDropdownBeforeOpen)=\"onDropdownOpen()\"\n  (odxDropdownBeforeClose)=\"onDropdownClose()\"\n  (odxDropdownAfterClose)=\"onDropdownClosed()\"\n  (odxDropdownAfterOpen)=\"enableSmoothScroll()\"\n>\n  <ng-template [ngIf]=\"!searchFieldEnabled\" [ngIfElse]=\"searchFieldTemplate\">\n    <div class=\"odx-select__value\" *ngIf=\"selectedOptionContent; else placeholderTemplate\">\n      <ng-template [odxDynamicView]=\"selectedOptionContent\" [odxDynamicViewContext]=\"{ $implicit: value }\"></ng-template>\n    </div>\n  </ng-template>\n  <ng-template #placeholderTemplate>\n    <div class=\"odx-select__placeholder\">\n      {{ placeholder }}\n    </div>\n  </ng-template>\n  <ng-template #searchFieldTemplate>\n    <ng-content select=\"[odxSelectSearchField]\"></ng-content>\n  </ng-template>\n  <odx-icon class=\"odx-select__indicator\" name=\"chevron-down\" iconSet=\"core\"></odx-icon>\n</div>\n<ng-template #dropdownContent>\n  <div class=\"odx-dropdown__option-list\" role=\"listbox\">\n    <ng-template [ngIf]=\"hasOptions\" [ngIfElse]=\"noOptionsTemplate\">\n      <ng-content></ng-content>\n    </ng-template>\n    <ng-template #noOptionsTemplate>\n      <odx-select-option disabled notFoundMessage>\n        <ng-template [odxDynamicView]=\"searchField?.notFoundContent\"></ng-template>\n      </odx-select-option>\n    </ng-template>\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { options: [{
                 type: ContentChildren,
-                args: [OptionComponent, { descendants: true, emitDistinctChangesOnly: true }]
-            }], dropdown: [{
-                type: ViewChild,
-                args: [DropdownDirective]
+                args: [SelectOptionComponent, { descendants: true, emitDistinctChangesOnly: true }]
+            }], searchField: [{
+                type: ContentChild,
+                args: [SelectSearchFieldDirective]
             }], placeholder: [{
                 type: Input
-            }], isLoading: [{
-                type: Input
             }], multiple: [{
                 type: Input
             }], selectedOptionTemplate: [{
                 type: Input
-            }], stringify: [{
-                type: Input
             }], identityMatcher: [{
                 type: Input
-            }], change: [{
-                type: Output
-            }], searchField: [{
-                type: ContentChild,
-                args: [SelectSearchFieldDirective]
-            }], openDropdown: [{
+            }], handleControllerEvent: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }, {
                 type: HostListener,
                 args: ['keydown', ['$event']]
-            }], handleFocusOut: [{
-                type: HostListener,
-                args: ['focusout', ['$event']]
             }] } });
 
-const modules = [SelectComponent, SelectSearchFieldDirective, SelectSearchFilterPipe, OptionComponent];
+const modules = [SelectComponent, SelectSearchFieldDirective, SelectSearchFilterPipe, SelectOptionComponent];
 class SelectModule {
 }
 SelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SelectModule, imports: [SelectComponent, SelectSearchFieldDirective, SelectSearchFilterPipe, OptionComponent], exports: [CoreModule, SelectComponent, SelectSearchFieldDirective, SelectSearchFilterPipe, OptionComponent] });
-SelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectModule, imports: [SelectComponent, OptionComponent, CoreModule] });
+SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SelectModule, imports: [SelectComponent, SelectSearchFieldDirective, SelectSearchFilterPipe, SelectOptionComponent], exports: [CoreModule, SelectComponent, SelectSearchFieldDirective, SelectSearchFilterPipe, SelectOptionComponent] });
+SelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectModule, imports: [SelectComponent, SelectOptionComponent, CoreModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectModule, decorators: [{
             type: NgModule,
             args: [{
@@ -420,5 +327,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { OptionComponent, SELECT_CONTROL, SelectComponent, SelectModule, SelectSearchFieldDirective, SelectSearchFilterPipe };
+export { SELECT_CONTROL, SelectComponent, SelectModule, SelectOptionComponent, SelectSearchFieldDirective, SelectSearchFilterPipe };
 //# sourceMappingURL=odx-angular-components-select.mjs.map