@odx/angular 1.0.0-rc.8 → 1.0.0

package/fesm2020/odx-angular-components-rail-navigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-components-rail-navigation.mjs","sources":["../../../../libs/angular/components/rail-navigation/src/lib/components/rail-navigation-item.component.ts","../../../../libs/angular/components/rail-navigation/src/lib/components/rail-navigation-item.component.html","../../../../libs/angular/components/rail-navigation/src/lib/rail-navigation.component.ts","../../../../libs/angular/components/rail-navigation/src/lib/rail-navigation.component.html","../../../../libs/angular/components/rail-navigation/src/lib/rail-navigation.module.ts","../../../../libs/angular/components/rail-navigation/src/odx-angular-components-rail-navigation.ts"],"sourcesContent":["import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { ChangeDetectionStrategy, Component, inject, Input, ViewEncapsulation } from '@angular/core';\nimport { RouterLinkActive } from '@angular/router';\nimport { DisabledController } from '@odx/angular';\nimport { IconComponent } from '@odx/angular/components/icon';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { injectElement, Transform } from '@odx/angular/utils';\n\n@CSSComponent('rail-navigation-item')\n@Component({\n  standalone: true,\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'a[odxRailNavigationItem][iconName], button[odxRailNavigationItem][iconName]',\n  templateUrl: './rail-navigation-item.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IconComponent],\n  providers: [DisabledController.connect()],\n  host: {\n    '[class.is-disabled]': 'isDisabled',\n    '[class.is-selected]': 'isSelected || routerLinkActive?.isActive',\n    '[tabindex]': 'isDisabled ? -1 : 0',\n  },\n})\nexport class RailNavigationItemComponent {\n  public static ngAcceptInputType_isSelected: BooleanInput;\n\n  protected readonly disabledController = DisabledController.inject();\n  protected readonly routerLinkActive = inject(RouterLinkActive, { optional: true });\n\n  public readonly element = injectElement();\n\n  public get isDisabled(): boolean {\n    return !!this.disabledController?.disabled;\n  }\n\n  @Transform(coerceBooleanProperty)\n  @Input()\n  public isSelected = false;\n\n  @Input()\n  public iconName!: string;\n}\n","<odx-icon [name]=\"iconName\" size=\"large\"></odx-icon>\n<span class=\"odx-rail-navigation-item__container\">\n  <ng-content></ng-content>\n</span>\n","import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { injectElement, Transform } from '@odx/angular/utils';\nimport { RailNavigationItemComponent } from './components/rail-navigation-item.component';\n\n@CSSComponent('rail-navigation')\n@Component({\n  standalone: true,\n  selector: 'odx-rail-navigation',\n  templateUrl: 'rail-navigation.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [RailNavigationItemComponent],\n  host: {\n    '[class.is-open]': 'isOpen',\n  },\n})\nexport class RailNavigationComponent {\n  public static ngAcceptInputType_isOpen: BooleanInput;\n\n  public readonly element = injectElement();\n\n  @Transform(coerceBooleanProperty)\n  @Input()\n  public isOpen = true;\n\n  @Output()\n  public isOpenChange = new EventEmitter<boolean>();\n\n  public toggle(): void {\n    this.isOpen = !this.isOpen;\n    this.isOpenChange.emit(this.isOpen);\n  }\n\n  public open(): void {\n    this.isOpen = true;\n    this.isOpenChange.emit(this.isOpen);\n  }\n\n  public close(): void {\n    this.isOpen = false;\n    this.isOpenChange.emit(this.isOpen);\n  }\n}\n","<nav class=\"odx-rail-navigation__content\">\n  <ng-content selector=\"a[odxRailNavigationItem], button[odxRailNavigationItem]\"></ng-content>\n</nav>\n<button odxRailNavigationItem class=\"odx-rail-navigation__expand\" iconName=\"chevron-right\" (click)=\"toggle()\"></button>\n","import { NgModule } from '@angular/core';\nimport { CoreModule } from '@odx/angular';\nimport { RailNavigationItemComponent } from './components/rail-navigation-item.component';\nimport { RailNavigationComponent } from './rail-navigation.component';\n\nconst modules = [RailNavigationComponent, RailNavigationItemComponent];\n@NgModule({\n  imports: modules,\n  exports: [...modules, CoreModule],\n})\nexport class RailNavigationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"odx-angular-components-rail-navigation.mjs","sources":["../../../../libs/angular/components/rail-navigation/src/lib/components/rail-navigation-item.component.ts","../../../../libs/angular/components/rail-navigation/src/lib/components/rail-navigation-item.component.html","../../../../libs/angular/components/rail-navigation/src/lib/rail-navigation.component.ts","../../../../libs/angular/components/rail-navigation/src/lib/rail-navigation.component.html","../../../../libs/angular/components/rail-navigation/src/lib/rail-navigation.module.ts","../../../../libs/angular/components/rail-navigation/src/odx-angular-components-rail-navigation.ts"],"sourcesContent":["import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { ChangeDetectionStrategy, Component, inject, Input, ViewEncapsulation } from '@angular/core';\nimport { RouterLinkActive } from '@angular/router';\nimport { WithDisabledState, WithTabIndex } from '@odx/angular';\nimport { IconComponent } from '@odx/angular/components/icon';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { injectElement, Transform } from '@odx/angular/utils';\n\n@CSSComponent('rail-navigation-item')\n@Component({\n  standalone: true,\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'a[odxRailNavigationItem][iconName], button[odxRailNavigationItem][iconName]',\n  templateUrl: './rail-navigation-item.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IconComponent],\n  hostDirectives: [WithDisabledState, WithTabIndex],\n  host: {\n    '[class.is-selected]': 'isSelected || routerLinkActive?.isActive',\n  },\n})\nexport class RailNavigationItemComponent {\n  public static ngAcceptInputType_isSelected: BooleanInput;\n\n  protected readonly routerLinkActive = inject(RouterLinkActive, { optional: true });\n\n  public readonly element = injectElement();\n\n  @Transform(coerceBooleanProperty)\n  @Input()\n  public isSelected = false;\n\n  @Input()\n  public iconName!: string;\n}\n","<odx-icon [name]=\"iconName\" iconSet=\"core\" size=\"large\"></odx-icon>\n<span class=\"odx-rail-navigation-item__container\">\n  <ng-content></ng-content>\n</span>\n","import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { injectElement, Transform } from '@odx/angular/utils';\nimport { RailNavigationItemComponent } from './components/rail-navigation-item.component';\n\n@CSSComponent('rail-navigation')\n@Component({\n  standalone: true,\n  selector: 'odx-rail-navigation',\n  templateUrl: 'rail-navigation.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [RailNavigationItemComponent],\n  host: {\n    '[class.is-open]': 'isOpen',\n  },\n})\nexport class RailNavigationComponent {\n  public static ngAcceptInputType_isOpen: BooleanInput;\n\n  public readonly element = injectElement();\n\n  @Transform(coerceBooleanProperty)\n  @Input()\n  public isOpen = true;\n\n  @Output()\n  public isOpenChange = new EventEmitter<boolean>();\n\n  public toggle(): void {\n    this.isOpen = !this.isOpen;\n    this.isOpenChange.emit(this.isOpen);\n  }\n\n  public open(): void {\n    this.isOpen = true;\n    this.isOpenChange.emit(this.isOpen);\n  }\n\n  public close(): void {\n    this.isOpen = false;\n    this.isOpenChange.emit(this.isOpen);\n  }\n}\n","<nav class=\"odx-rail-navigation__content\">\n  <ng-content selector=\"a[odxRailNavigationItem], button[odxRailNavigationItem]\"></ng-content>\n</nav>\n<button odxRailNavigationItem class=\"odx-rail-navigation__expand\" iconName=\"chevron-right\" (click)=\"toggle()\"></button>\n","import { NgModule } from '@angular/core';\nimport { CoreModule } from '@odx/angular';\nimport { RailNavigationItemComponent } from './components/rail-navigation-item.component';\nimport { RailNavigationComponent } from './rail-navigation.component';\n\nconst modules = [RailNavigationComponent, RailNavigationItemComponent];\n@NgModule({\n  imports: modules,\n  exports: [...modules, CoreModule],\n})\nexport class RailNavigationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,40 +1,45 @@
 import { __decorate, __metadata } from 'tslib';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostListener, Directive, Pipe, EventEmitter, Output, ContentChild, ContentChildren, ViewChild, NgModule } 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 * as i2 from '@odx/angular';
-import { DisabledController, ReadonlyController, detectControllerChanges, CoreModule, ODX_STRINGIFY, ODX_STRING_SEARCH_HANDLER, ODX_IDENTITY_MATCHER } from '@odx/angular';
+import { DisabledController, detectControllerChanges, CoreModule, ODX_STRINGIFY, ODX_STRING_SEARCH_HANDLER, ODX_IDENTITY_MATCHER, ReadonlyController } from '@odx/angular';
 import { DynamicViewDirective } from '@odx/angular/cdk/dynamic-view';
-import { CSSComponent } from '@odx/angular/internal';
-import { untilDestroyed, injectElement, Pure, deferFn, Transform } from '@odx/angular/utils';
-import { skip, fromEvent, map, distinctUntilChanged, filter } from 'rxjs';
+import { CheckboxComponent } from '@odx/angular/components/checkbox';
+import { CSSComponent, CSSModifier } from '@odx/angular/internal';
+import { untilDestroyed, injectElement, Transform, Pure, deferFn } from '@odx/angular/utils';
+import * as i1 from '@angular/common';
+import { fromEvent, map, distinctUntilChanged } from 'rxjs';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 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 * as i1 from '@angular/common';
+import { fromQueryList } from '@odx/angular/rxjs';
 
 const SELECT_CONTROL = new InjectionToken('@odx/angular/components/select::SelectControl');
 
 let OptionComponent = class OptionComponent {
+    get disabled() {
+        return !!this.disabledController?.disabled;
+    }
     constructor() {
         this.disabledController = DisabledController.inject();
-        this.readonlyController = ReadonlyController.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;
-        detectControllerChanges(this.selectControl)
-            .pipe(skip(1), this.takeUntilDestroyed())
-            .subscribe(() => {
-            this.isSelected = this.selectControl.isOptionSelected(this);
-        });
-    }
-    get disabled() {
-        return !!this.disabledController?.disabled || !!this.readonlyController?.readonly;
+        this.notFoundMessage = false;
+        if (!this.selectControl.multiple) {
+            detectControllerChanges(this.selectControl)
+                .pipe(this.takeUntilDestroyed())
+                .subscribe(() => {
+                this.isSelected = this.selectControl.isOptionSelected(this);
+            });
+        }
     }
     ngOnInit() {
         this.isSelected = this.selectControl.isOptionSelected(this);
@@ -56,30 +61,42 @@ let OptionComponent = class OptionComponent {
     setInactiveStyles() {
         this.isActive = false;
     }
+    switchCheckbox() {
+        if (this.selectControl.multiple) {
+            this.isSelected = !this.isSelected;
+            this.cdr.markForCheck();
+        }
+    }
     select(event) {
-        event.preventDefault();
         event.stopPropagation();
+        event.preventDefault();
         this.selectControl.selectOption(this);
     }
 };
-OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: OptionComponent, isStandalone: true, selector: "odx-option", inputs: { value: "value" }, host: { attributes: { "role": "option" }, listeners: { "click": "select($event)" }, properties: { "attr.aria-selected": "isSelected", "attr.aria-disabled": "disabled || null", "class.is-selected": "isSelected", "class.is-active": "isActive", "class.is-disabled": "disabled" } }, providers: [DisabledController.connect(), ReadonlyController.connect()], ngImport: i0, template: "<ng-content></ng-content>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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 });
+__decorate([
+    Transform(coerceBooleanProperty),
+    __metadata("design:type", Object)
+], OptionComponent.prototype, "notFoundMessage", void 0);
 OptionComponent = __decorate([
     CSSComponent('option'),
     __metadata("design:paramtypes", [])
 ], OptionComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: OptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'odx-option', imports: [CoreModule, DynamicViewDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DisabledController.connect(), ReadonlyController.connect()], host: {
+            args: [{ standalone: true, selector: 'odx-option', imports: [CoreModule, DynamicViewDirective, CheckboxComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DisabledController.connect()], host: {
                         '[attr.aria-selected]': 'isSelected',
                         '[attr.aria-disabled]': 'disabled || null',
+                        '[class.is-disabled]': 'disabled',
                         '[class.is-selected]': 'isSelected',
                         '[class.is-active]': 'isActive',
-                        '[class.is-disabled]': 'disabled',
                         role: 'option',
-                    }, template: "<ng-content></ng-content>\n" }]
+                    }, 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: [{
                 type: Input
+            }], notFoundMessage: [{
+                type: Input
             }], select: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -103,12 +120,12 @@ let SelectSearchFieldDirective = class SelectSearchFieldDirective {
         return this.element.nativeElement.value;
     }
 };
-SelectSearchFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectSearchFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-SelectSearchFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", 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.8", ngImport: i0, type: SelectSearchFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SelectSearchFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", 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 = __decorate([
     CSSComponent('select__search')
 ], SelectSearchFieldDirective);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectSearchFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SelectSearchFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -153,15 +170,15 @@ class SelectSearchFilterPipe {
         return items.filter((item) => search(stringify(item), query));
     }
 }
-SelectSearchFilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectSearchFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SelectSearchFilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SelectSearchFilterPipe, isStandalone: true, name: "odxSelectSearchFilter", pure: false });
+SelectSearchFilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SelectSearchFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SelectSearchFilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.8", 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: "14.2.12", ngImport: i0, type: SelectSearchFilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SelectSearchFilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     pure: false,
@@ -172,8 +189,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 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;
+    }
     constructor() {
         super(null);
+        this.changeDetector = inject(ChangeDetectorRef);
         this.searchFieldEnabled = false;
         this.smoothScrollEnabled = false;
         this.selectedOption = null;
@@ -181,27 +208,21 @@ let SelectComponent = SelectComponent_1 = class SelectComponent extends CustomFo
         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 hasOptions() {
-        return !!this.options && this.options.length > 0;
-    }
-    get isOpen() {
-        return !!this.dropdown?.isOpen;
-    }
-    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);
-        this.options.changes.pipe(filter(() => this.isOpen)).subscribe(() => {
-            deferFn(() => this.activateSelectedOption());
-            this.triggerControllerChange();
+        fromQueryList(this.options).subscribe(() => {
+            this.updateSelectedOption();
+            if (this.isOpen) {
+                deferFn(() => this.activateSelectedOption());
+            }
         });
         this.searchField?.valueChange$.subscribe(() => this.triggerControllerChange());
     }
@@ -213,12 +234,23 @@ let SelectComponent = SelectComponent_1 = class SelectComponent extends CustomFo
     }
     selectOption(option) {
         if (option && !option.disabled) {
-            this.updateValue(option.value ?? null);
+            this.change.emit();
+            option.switchCheckbox();
+            const value = this.multiple
+                ? this.options
+                    ?.toArray()
+                    .filter(({ isSelected }) => isSelected)
+                    .map(({ value }) => value)
+                : option.value;
+            this.updateValue(value ?? null);
         }
-        this.dropdown?.close();
+        !this.multiple && this.dropdown?.close();
     }
     isOptionSelected(option) {
         if (option && !option.disabled) {
+            if (this.multiple && Array.isArray(this.value)) {
+                return this.value.includes(option.value);
+            }
             return this.identityMatcher(option.value, this.value);
         }
         return false;
@@ -228,7 +260,7 @@ let SelectComponent = SelectComponent_1 = class SelectComponent extends CustomFo
         element.nativeElement.scrollIntoView({ block: 'center', behavior });
     }
     openDropdown(event) {
-        if (this.isLoading)
+        if (this.isLoading || this.readonlyController?.readonly)
             return;
         if (this.isOpen && this.hasOptions) {
             if (event.key === 'Enter' || event.key === 'Tab') {
@@ -240,6 +272,12 @@ 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) {
@@ -250,12 +288,12 @@ let SelectComponent = SelectComponent_1 = class SelectComponent extends CustomFo
     onDropdownOpen() {
         this.activateSelectedOption();
         if (!this.searchFieldEnabled) {
-            this.searchFieldEnabled = !!this.searchField;
-            deferFn(() => this.searchField?.focus());
+            deferFn(() => this.focusSelectSearchField());
         }
     }
     onDropdownClose() {
         this.disableSmoothScroll();
+        this.element.nativeElement.blur();
         if (this.searchFieldEnabled) {
             this.searchFieldEnabled = false;
             this.element.nativeElement?.focus();
@@ -271,50 +309,75 @@ let SelectComponent = SelectComponent_1 = class SelectComponent extends CustomFo
         this.smoothScrollEnabled = true;
     }
     updateSelectedOption() {
-        this.selectedOption = this.options?.toArray()?.find((option) => option.isSelected) ?? null;
-        if (this.selectedOption) {
-            this.selectedOptionText = this.stringify?.(this.selectedOption?.value) ?? this.selectedOption.getLabel();
-        }
-        else {
-            this.selectedOptionText = null;
+        const options = this.options?.toArray();
+        this.selectedOption = options?.find((option) => option.isSelected) ?? null;
+        if (this.multiple) {
+            this.selectedOptionText =
+                options
+                    ?.filter(({ isSelected }) => isSelected)
+                    .map((option) => this.stringify?.(option.value) ?? option.getLabel())
+                    .join(', ') ?? null;
+            this.changeDetector.detectChanges();
+            return;
         }
+        this.selectedOptionText = this.selectedOption ? this.stringify?.(this.selectedOption?.value) ?? this.selectedOption.getLabel() : null;
+        this.changeDetector.detectChanges();
+    }
+    focusSelectSearchField() {
+        this.searchFieldEnabled = !!this.searchField;
+        deferFn(() => this.searchField?.focus());
+        this.changeDetector.detectChanges();
     }
 };
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SelectComponent, isStandalone: true, selector: "odx-select", inputs: { placeholder: "placeholder", isLoading: "isLoading", selectedOptionTemplate: "selectedOptionTemplate", stringify: "stringify", identityMatcher: "identityMatcher" }, outputs: { change: "change" }, host: { listeners: { "click": "openDropdown($event)", "keydown": "openDropdown($event)" }, properties: { "attr.aria-disabled": "isDisabled || null", "class.is-open": "isOpen", "tabindex": "searchFieldEnabled ? -1 : 0" } }, providers: [
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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(),
         {
             provide: SELECT_CONTROL,
-            useExisting: SelectComponent_1,
+            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 }\"\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\"></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>\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"] }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }, { kind: "component", type: OptionComponent, selector: "odx-option", inputs: ["value"] }, { kind: "ngmodule", type: LoadingSpinnerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], 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);
+__decorate([
+    CSSModifier(),
+    Transform(coerceBooleanProperty),
+    __metadata("design:type", Object)
+], SelectComponent.prototype, "multiple", void 0);
 SelectComponent = SelectComponent_1 = __decorate([
     CSSComponent('select'),
     __metadata("design:paramtypes", [])
 ], SelectComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", 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(),
                         {
                             provide: SELECT_CONTROL,
-                            useExisting: SelectComponent,
+                            useExisting: forwardRef(() => SelectComponent),
                         },
                     ], host: {
                         '[attr.aria-disabled]': 'isDisabled || null',
                         '[class.is-open]': 'isOpen',
-                        '[tabindex]': 'searchFieldEnabled ? -1 : 0',
-                    }, template: "<div\n  aria-haspopup=\"listbox\"\n  class=\"odx-select__trigger\"\n  [odxDropdown]=\"dropdownContent\"\n  [odxDropdownDisabled]=\"isDisabled || isReadonly\"\n  [odxDropdownOptions]=\"{ matchReferenceWidth: true, offset: 4 }\"\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\"></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>\n        <ng-template [odxDynamicView]=\"searchField?.notFoundContent\"></ng-template>\n      </odx-option>\n    </ng-template>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
+                        '[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: [{
+                type: ContentChildren,
+                args: [OptionComponent, { descendants: true, emitDistinctChangesOnly: true }]
+            }], dropdown: [{
+                type: ViewChild,
+                args: [DropdownDirective]
+            }], placeholder: [{
                 type: Input
             }], isLoading: [{
                 type: Input
+            }], multiple: [{
+                type: Input
             }], selectedOptionTemplate: [{
                 type: Input
             }], stringify: [{
@@ -326,27 +389,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }], searchField: [{
                 type: ContentChild,
                 args: [SelectSearchFieldDirective]
-            }], options: [{
-                type: ContentChildren,
-                args: [OptionComponent, { descendants: true, emitDistinctChangesOnly: true }]
-            }], dropdown: [{
-                type: ViewChild,
-                args: [DropdownDirective]
             }], openDropdown: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }, {
                 type: HostListener,
                 args: ['keydown', ['$event']]
+            }], handleFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
             }] } });
 
 const modules = [SelectComponent, SelectSearchFieldDirective, SelectSearchFilterPipe, OptionComponent];
 class SelectModule {
 }
-SelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SelectModule, imports: [SelectComponent, SelectSearchFieldDirective, SelectSearchFilterPipe, OptionComponent], exports: [CoreModule, SelectComponent, SelectSearchFieldDirective, SelectSearchFilterPipe, OptionComponent] });
-SelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectModule, imports: [SelectComponent, OptionComponent, CoreModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SelectModule, decorators: [{
+SelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", 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.8", ngImport: i0, type: SelectModule, imports: [SelectComponent, OptionComponent, CoreModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: modules,