@anglr/select 15.0.0 → 16.0.0-beta.20260226142137

package/es2022/src/components/select/select.component.js

@@ -1,426 +1,347 @@
-import { Component, ChangeDetectionStrategy, Input, Inject, ChangeDetectorRef, Optional, Type, ContentChildren, QueryList, EventEmitter, forwardRef, resolveForwardRef, ElementRef, Attribute, TemplateRef, ContentChild, ComponentFactoryResolver, ApplicationRef, Injector } from '@angular/core';
-import { nameof, isBoolean, isPresent, isString, renderToBody } from '@jscrpt/common';
-import { extend } from '@jscrpt/common/extend';
-import { BehaviorSubject } from 'rxjs';
-import { NG_SELECT_OPTIONS, KEYBOARD_HANDLER_TYPE, NORMAL_STATE_TYPE, POPUP_TYPE, POSITIONER_TYPE, READONLY_STATE_TYPE, VALUE_HANDLER_TYPE, LIVE_SEARCH_TYPE } from '../../misc/types';
-import { NG_SELECT_PLUGIN_INSTANCES } from './types';
-import { BasicKeyboardHandlerComponent } from '../../plugins/keyboardHandler/components';
-import { KEYBOARD_HANDLER } from '../../plugins/keyboardHandler/types';
-import { NORMAL_STATE } from '../../plugins/normalState/types';
-import { BasicNormalStateComponent } from '../../plugins/normalState/components';
-import { POPUP } from '../../plugins/popup/types';
-import { BasicPopupComponent } from '../../plugins/popup/component';
-import { POSITIONER } from '../../plugins/positioner/types';
-import { DefaultPositionerComponent } from '../../plugins/positioner/components';
-import { READONLY_STATE } from '../../plugins/readonlyState/types';
-import { VALUE_HANDLER } from '../../plugins/valueHandler/types';
-import { BasicValueHandlerComponent } from '../../plugins/valueHandler/components';
-import { LIVE_SEARCH } from '../../plugins/liveSearch/types';
-import { NoLiveSearchComponent } from '../../plugins/liveSearch/components';
-import { OptionComponent } from '../option/option.component';
-import { OptGroupComponent } from '../option/optgroup.component';
-import { PluginBus } from '../../misc/pluginBus/pluginBus';
+import { __decorate, __metadata } from "tslib";
+import { Component, ChangeDetectionStrategy, Input, viewChild, ViewContainerRef, signal, Inject, Optional, resolveForwardRef, effect, forwardRef, Attribute, ElementRef, computed, input, booleanAttribute, DOCUMENT, TemplateRef, contentChild, contentChildren, untracked } from '@angular/core';
+import { getHostElement } from '@anglr/common';
+import { isPresent, renderToBody } from '@jscrpt/common';
+import { deepCopyWithArrayOverride } from '@jscrpt/common/lodash';
+import { INTERACTIONS_TYPE, KEYBOARD_HANDLER_TYPE, LIVE_SEARCH_TYPE, NORMAL_STATE_TYPE, OPTIONS_HANDLER_TYPE, POPUP_TYPE, POSITIONER_TYPE, READONLY_STATE_TYPE, SELECT_OPTIONS, VALUE_HANDLER_TYPE } from '../../misc/tokens';
+import { SelectPluginType } from '../../misc/enums';
+import { SelectBus, SelectPluginInstances } from '../../misc/classes';
+import { BasicPositionerComponent, StaticValueHandler, NoInteractionsComponent, NoLiveSearchComponent, NoOptionsHandler, SimpleKeyboardHandlerComponent, SimpleNormalStateComponent, SimplePopupComponent } from '../../plugins';
+import { CopyOptionsAsSignal } from '../../decorators';
+import { NormalStateTemplate, OptionTemplate } from '../../directives';
 import * as i0 from "@angular/core";
-import * as i1 from "../../misc/pluginBus/pluginBus";
-import * as i2 from "@angular/common";
-import * as i3 from "@anglr/common";
-//TODO - dynamic change of absolute popup
-//TODO - dynamic change of options gatherer destroy called properly ?
+import * as i1 from "../../misc/classes";
+//TODO: optimize options change detection, currently it is based on reference change, but it could be optimized by checking only changed properties, or by using signals for options properties
 /**
- * Default 'NgSelectOptions'
- * @internal
+ * Default 'SelectOptions'
  */
 const defaultOptions = {
-    autoInitialize: true,
     absolute: false,
-    forceValueCheckOnInit: false,
     multiple: false,
     readonly: false,
-    valueComparer: (source, target) => {
-        return source === target;
-    },
-    liveSearchFilter: (query, normalizer = value => value) => {
-        return itm => normalizer(itm.text).indexOf(normalizer(query)) >= 0;
-    },
-    normalizer: value => {
-        if (isString(value)) {
-            return value.toLowerCase();
-        }
-        return value;
-    },
+    containerElement: null,
+    valueExtractor: (option) => option.value,
+    // valueComparer: (source, target) =>
+    // {
+    //     return source === target;
+    // },
+    // liveSearchFilter: (query: string, normalizer: NormalizeFunc = value => value) =>
+    // {
+    //     return itm => normalizer(itm.text).indexOf(normalizer(query)) >= 0;
+    // },
+    // normalizer: value =>
+    // {
+    //     if(isString(value))
+    //     {
+    //         return value.toLowerCase();
+    //     }
+    //     return value;
+    // },
     cssClasses: {},
     plugins: {
-        normalState: {
-            type: forwardRef(() => BasicNormalStateComponent)
+        interactions: {
+            type: forwardRef(() => NoInteractionsComponent),
+        },
+        keyboardHandler: {
+            type: forwardRef(() => SimpleKeyboardHandlerComponent),
         },
         liveSearch: {
-            type: forwardRef(() => NoLiveSearchComponent)
+            type: forwardRef(() => NoLiveSearchComponent),
+        },
+        normalState: {
+            type: forwardRef(() => SimpleNormalStateComponent),
+        },
+        optionsHandler: {
+            type: forwardRef(() => NoOptionsHandler),
         },
         popup: {
-            type: forwardRef(() => BasicPopupComponent)
+            type: forwardRef(() => SimplePopupComponent),
         },
         positioner: {
-            type: forwardRef(() => DefaultPositionerComponent)
-        },
-        keyboardHandler: {
-            type: forwardRef(() => BasicKeyboardHandlerComponent)
+            type: forwardRef(() => BasicPositionerComponent),
         },
         readonlyState: {
-            type: forwardRef(() => BasicNormalStateComponent)
+            type: forwardRef(() => SimpleNormalStateComponent),
         },
         valueHandler: {
-            type: forwardRef(() => BasicValueHandlerComponent)
-        }
-    }
+            type: forwardRef(() => StaticValueHandler),
+        },
+    },
 };
 /**
- * Component that represents NgSelect itself, allows selection of value from options
+ * Component that represents Select itself, allows selection of value from options
  */
-export class NgSelectComponent {
-    //######################### public properties - inputs #########################
-    /**
-     * Gets or sets NgSelect options
-     */
-    get selectOptions() {
-        return this._selectOptions;
-    }
-    set selectOptions(options) {
-        this._selectOptions = extend(true, this._selectOptions, options);
-        this._pluginBus.selectOptions = this._selectOptions;
-    }
-    //######################### public properties - implementation of NgSelect #########################
+export class Select {
+    //######################### public properties - implementation of SelectApi #########################
     /**
-     * Occurs every time when NgSelect is initialized or reinitialized, if value is false NgSelect was not initialized yet
+     * @inheritdoc
      */
     get initialized() {
-        return this._initializedSubject.asObservable();
-    }
-    //######################### public properties - implementation of OptionsGatherer #########################
-    /**
-     * Array of provided options for select
-     */
-    get options() {
-        return this.optionsChildren.toArray();
+        return this.initializedSignal.asReadonly();
     }
     /**
-     * Occurs when array of provided options has changed
+     * @inheritdoc
      */
-    get optionsChange() {
-        return this._optionsChange;
-    }
-    /**
-     * Array of visible, displayed options for select
-     */
-    get availableOptions() {
-        return this._availableOptions;
-    }
-    /**
-     * Occurs when array of visible, displayed options has changed
-     */
-    get availableOptionsChange() {
-        return this._availableOptionsChange;
+    get events() {
+        return this.bus;
     }
     //######################### constructors #########################
-    constructor(_changeDetector, _element, _componentFactoryResolver, _appRef, _injector, _pluginBus, _pluginInstances, options, normalStateType, keyboardHandlerType, popupType, positionerType, readonlyStateType, valueHandlerType, liveSearchType, readonly, disabled, multiple) {
-        this._changeDetector = _changeDetector;
-        this._element = _element;
-        this._componentFactoryResolver = _componentFactoryResolver;
-        this._appRef = _appRef;
-        this._injector = _injector;
-        this._pluginBus = _pluginBus;
-        this._pluginInstances = _pluginInstances;
+    constructor(pluginInstances, bus, element, document, multiple, normalStateType, keyboardHandlerType, popupType, positionerType, readonlyStateType, valueHandlerType, liveSearchType, interactionsType, optionsHandlerType, options) {
+        this.pluginInstances = pluginInstances;
+        this.bus = bus;
+        /**
+         * Object storing current used plugin type
+         */
+        this.pluginTypes = {
+            Interactions: null,
+            KeyboardHandler: null,
+            LiveSearch: null,
+            NormalState: null,
+            OptionsHandler: null,
+            Popup: null,
+            Positioner: null,
+            ReadonlyState: null,
+            ValueHandler: null,
+        };
+        /**
+         * Signal that holds init state of live search plugin
+         */
+        this.liveSearchInit = signal(false, ...(ngDevMode ? [{ debugName: "liveSearchInit" }] : []));
+        /**
+         * Signal that holds init state of interactions plugin
+         */
+        this.interactionsInit = signal(false, ...(ngDevMode ? [{ debugName: "interactionsInit" }] : []));
         /**
-         * Subject used for indication that NgSelect was initialized
+         * Signal that holds init state of options handler plugin
          */
-        this._initializedSubject = new BehaviorSubject(false);
+        this.optionsHandlerInit = signal(false, ...(ngDevMode ? [{ debugName: "optionsHandlerInit" }] : []));
         /**
-         * Occurs when array of provided options has changed
+         * Signal that holds init state of positioner plugin
          */
-        this._optionsChange = new EventEmitter();
+        this.positionerInit = signal(false, ...(ngDevMode ? [{ debugName: "positionerInit" }] : []));
         /**
-         * Occurs when array of visible, displayed options has changed
+         * Signal that holds init state of keyboard plugin
          */
-        this._availableOptionsChange = new EventEmitter();
+        this.keyboardInit = signal(false, ...(ngDevMode ? [{ debugName: "keyboardInit" }] : []));
         /**
-         * Array of available options to be displayed
+         * Signal that holds init state of value handler plugin
          */
-        this._availableOptions = [];
+        this.valueHandlerInit = signal(false, ...(ngDevMode ? [{ debugName: "valueHandlerInit" }] : []));
         /**
-         * Gets current state of initialization
+         * Signal that holds init state of readonly state plugin
          */
-        this.isInitialized = false;
-        //at least on of following is present (value is not important)
-        const readonlyDefault = isPresent(readonly) || isPresent(disabled);
+        this.readonlyStateInit = signal(false, ...(ngDevMode ? [{ debugName: "readonlyStateInit" }] : []));
+        /**
+         * Signal that holds init state of normal state plugin
+         */
+        this.normalStateInit = signal(false, ...(ngDevMode ? [{ debugName: "normalStateInit" }] : []));
+        /**
+         * Signal that holds init state of popup plugin
+         */
+        this.popupInit = signal(false, ...(ngDevMode ? [{ debugName: "popupInit" }] : []));
+        /**
+         * Initialization state of all plugin init options
+         */
+        this.optionsInit = computed(() => ({ initialized: this.normalStateInit() &&
+                this.keyboardInit() &&
+                this.popupInit() &&
+                this.positionerInit() &&
+                this.readonlyStateInit() &&
+                this.valueHandlerInit() &&
+                this.liveSearchInit() &&
+                this.interactionsInit() &&
+                this.optionsHandlerInit() }), ...(ngDevMode ? [{ debugName: "optionsInit" }] : []));
+        /**
+         * Information whether is select initialized or not, changes when Select is initialized or reinitialized, if value is false Select was not initialized yet
+         */
+        this.initializedSignal = signal(false, ...(ngDevMode ? [{ debugName: "initializedSignal" }] : []));
+        //######################### protected properties - children #########################
+        /**
+         * Container used for rendering live search plugin
+         */
+        this.liveSearchContainer = viewChild.required('liveSearch', { read: ViewContainerRef });
+        /**
+         * Container used for rendering interactions plugin
+         */
+        this.interactionsContainer = viewChild.required('interactions', { read: ViewContainerRef });
+        /**
+         * Container used for rendering options handler plugin
+         */
+        this.optionsHandlerContainer = viewChild.required('optionsHandler', { read: ViewContainerRef });
+        /**
+         * Container used for rendering positioner plugin
+         */
+        this.positionerContainer = viewChild.required('positioner', { read: ViewContainerRef });
+        /**
+         * Container used for rendering keyboard handler plugin
+         */
+        this.keyboardHandlerContainer = viewChild.required('keyboardHandler', { read: ViewContainerRef });
+        /**
+         * Container used for rendering value handler plugin
+         */
+        this.valueHandlerContainer = viewChild.required('valueHandler', { read: ViewContainerRef });
+        /**
+         * Container used for rendering readonly state plugin
+         */
+        this.readonlyStateContainer = viewChild.required('readonlyState', { read: ViewContainerRef });
+        /**
+         * Container used for rendering normal state plugin
+         */
+        this.normalStateContainer = viewChild.required('normalState', { read: ViewContainerRef });
+        /**
+         * Container used for rendering popup plugin
+         */
+        this.popupContainer = viewChild.required('popup', { read: ViewContainerRef });
+        /**
+         * Indication whether should be Select disabled or not
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+        /**
+         * Indication whether should be Select readonly or not
+         */
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+        //######################### public properties - implementation of TemplateGatherer #########################
+        /**
+         * @inheritdoc
+         */
+        this.normalStateTemplate = contentChild(NormalStateTemplate, { ...(ngDevMode ? { debugName: "normalStateTemplate" } : {}), read: TemplateRef });
+        /**
+         * @inheritdoc
+         */
+        this.optionTemplate = contentChild(OptionTemplate, { ...(ngDevMode ? { debugName: "optionTemplate" } : {}), read: TemplateRef });
+        //######################### public properties - implementation of OptionsGatherer #########################
+        /**
+         * Array of all available options for select
+         */
+        this.availableOptions = contentChildren(Option, ...(ngDevMode ? [{ debugName: "availableOptions" }] : []));
+        //is present (value is not important)
         const multipleDefault = isPresent(multiple);
-        const opts = extend(true, {}, options);
-        if (!opts.plugins) {
-            opts.plugins = {};
-        }
+        const opts = deepCopyWithArrayOverride({}, options);
+        opts.plugins ??= {};
         if (keyboardHandlerType) {
-            if (!opts.plugins.keyboardHandler) {
-                opts.plugins.keyboardHandler = {};
-            }
+            opts.plugins.keyboardHandler ??= {};
             opts.plugins.keyboardHandler.type = keyboardHandlerType;
         }
         if (normalStateType) {
-            if (!opts.plugins.normalState) {
-                opts.plugins.normalState = {};
-            }
+            opts.plugins.normalState ??= {};
             opts.plugins.normalState.type = normalStateType;
         }
         if (popupType) {
-            if (!opts.plugins.popup) {
-                opts.plugins.popup = {};
-            }
+            opts.plugins.popup ??= {};
             opts.plugins.popup.type = popupType;
         }
         if (positionerType) {
-            if (!opts.plugins.positioner) {
-                opts.plugins.positioner = {};
-            }
+            opts.plugins.positioner ??= {};
             opts.plugins.positioner.type = positionerType;
         }
         if (readonlyStateType) {
-            if (!opts.plugins.readonlyState) {
-                opts.plugins.readonlyState = {};
-            }
+            opts.plugins.readonlyState ??= {};
             opts.plugins.readonlyState.type = readonlyStateType;
         }
         if (valueHandlerType) {
-            if (!opts.plugins.valueHandler) {
-                opts.plugins.valueHandler = {};
-            }
+            opts.plugins.valueHandler ??= {};
             opts.plugins.valueHandler.type = valueHandlerType;
         }
         if (liveSearchType) {
-            if (!opts.plugins.liveSearch) {
-                opts.plugins.liveSearch = {};
-            }
+            opts.plugins.liveSearch ??= {};
             opts.plugins.liveSearch.type = liveSearchType;
         }
-        this._selectOptions = extend(true, {
+        if (interactionsType) {
+            opts.plugins.interactions ??= {};
+            opts.plugins.interactions.type = interactionsType;
+        }
+        if (optionsHandlerType) {
+            opts.plugins.optionsHandler ??= {};
+            opts.plugins.optionsHandler.type = optionsHandlerType;
+        }
+        this.selectOptions = deepCopyWithArrayOverride({
             optionsGatherer: this,
             templateGatherer: this,
         }, defaultOptions, {
-            readonly: readonlyDefault,
-            multiple: multipleDefault
+            multiple: multipleDefault,
         }, opts);
-        this._pluginBus.selectElement = this._element;
-        this._pluginBus.selectOptions = this._selectOptions;
-    }
-    //######################### public methods - implementation of OnChanges #########################
-    /**
-     * Called when input value changes
-     */
-    ngOnChanges(changes) {
-        const updateReadonly = (state, firstChange) => {
-            //update options
-            this.selectOptions.readonly = state;
-            if (!firstChange) {
-                this.initOptions();
-                this.initialize();
+        bus.selectElement.set(element);
+        bus.selectOptions = computed(() => this.selectOptions, ...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
+        //dynamic update of readonly state in options
+        effect(() => {
+            this.selectOptions =
+                {
+                    readonly: this.readonly() || this.disabled(),
+                };
+        });
+        //create and initialize options for static plugins
+        effect(async () => {
+            const selectOptions = this.selectOptions;
+            const liveSearchContainer = this.liveSearchContainer();
+            const interactionsContainer = this.interactionsContainer();
+            const optionsHandlerContainer = this.optionsHandlerContainer();
+            const positionerContainer = this.positionerContainer();
+            const keyboardHandlerContainer = this.keyboardHandlerContainer();
+            const valueHandlerContainer = this.valueHandlerContainer();
+            await this.createPlugin(selectOptions.plugins?.liveSearch, SelectPluginType.LiveSearch, liveSearchContainer, this.liveSearchInit);
+            await this.createPlugin(selectOptions.plugins?.interactions, SelectPluginType.Interactions, interactionsContainer, this.interactionsInit);
+            await this.createPlugin(selectOptions.plugins?.optionsHandler, SelectPluginType.OptionsHandler, optionsHandlerContainer, this.optionsHandlerInit);
+            await this.createPlugin(selectOptions.plugins?.positioner, SelectPluginType.Positioner, positionerContainer, this.positionerInit);
+            await this.createPlugin(selectOptions.plugins?.keyboardHandler, SelectPluginType.KeyboardHandler, keyboardHandlerContainer, this.keyboardInit);
+            await this.createPlugin(selectOptions.plugins?.valueHandler, SelectPluginType.ValueHandler, valueHandlerContainer, this.valueHandlerInit);
+        });
+        //create and initialize options for state plugins (normal and readonly)
+        effect(() => {
+            const readonlyStateContainer = this.readonlyStateContainer();
+            const normalStateContainer = this.normalStateContainer();
+            const selectOptions = this.selectOptions;
+            if (selectOptions.readonly) {
+                this.destroyPlugin(SelectPluginType.NormalState, normalStateContainer, this.normalStateInit);
+                this.normalStateInit.set(true);
+                this.createPlugin(this.selectOptions.plugins?.readonlyState, SelectPluginType.ReadonlyState, readonlyStateContainer, this.readonlyStateInit);
+            }
+            else {
+                this.destroyPlugin(SelectPluginType.ReadonlyState, readonlyStateContainer, this.readonlyStateInit);
+                this.readonlyStateInit.set(true);
+                this.createPlugin(this.selectOptions.plugins?.normalState, SelectPluginType.NormalState, normalStateContainer, this.normalStateInit);
             }
-        };
-        if (nameof('disabled') in changes && isBoolean(this.disabled)) {
-            updateReadonly(this.disabled, changes[nameof('disabled')].firstChange);
-        }
-        if (nameof('readonly') in changes && isBoolean(this.readonly)) {
-            updateReadonly(this.readonly, changes[nameof('readonly')].firstChange);
-        }
-    }
-    //######################### public methods - implementation of OnInit #########################
-    /**
-     * Initialize component
-     */
-    ngOnInit() {
-        this.initOptions();
-    }
-    //######################### public methods - implementation of AfterViewInit #########################
-    /**
-     * Called when view was initialized
-     */
-    ngAfterViewInit() {
-        this._availableOptions = this.options;
-        this.optionsChildren.changes.subscribe(() => {
-            this._availableOptions = this.options;
-            this._optionsChange.emit();
-            this._availableOptionsChange.emit();
         });
-        if (this._selectOptions.autoInitialize) {
-            this.initialize();
-        }
-    }
-    //######################### public methods - implementation of OnDestroy #########################
-    /**
-     * Called when component is destroyed
-     */
-    ngOnDestroy() {
-        this._searchValueChangeSubscription?.unsubscribe();
-        this._searchValueChangeSubscription = null;
-        this.selectOptions.optionsGatherer?.destroyGatherer();
-        this._destroyAbsolutePopup();
-    }
-    //######################### public methods - implementation of OptionsGatherer #########################
-    /**
-     * Initialize gatherer during initialization phase
-     */
-    initializeGatherer() {
-        const liveSearch = this._pluginInstances[LIVE_SEARCH];
-        if (this._liveSearch && this._liveSearch != liveSearch) {
-            this._searchValueChangeSubscription.unsubscribe();
-            this._searchValueChangeSubscription = null;
-            this._liveSearch = null;
-        }
-        if (!this._liveSearch) {
-            this._liveSearch = liveSearch;
-            this._searchValueChangeSubscription = this._liveSearch.searchValueChange.subscribe(() => {
-                if (!this._liveSearch.searchValue) {
-                    this._availableOptions = this.options;
-                    this._availableOptionsChange.emit();
-                    return;
-                }
-                this._availableOptions = this.options.filter(this.selectOptions.liveSearchFilter(this._liveSearch.searchValue, this.selectOptions.normalizer));
-                this._availableOptionsChange.emit();
-            });
-        }
-    }
-    /**
-     * Called when gatherer needs to be destroyed
-     */
-    destroyGatherer() {
-    }
-    //######################### public methods - template bindings #########################
-    /**
-     * Sets normal state component
-     * @param normalState - Created normal state that is rendered
-     * @internal
-     */
-    setNormalStateComponent(normalState) {
-        this._registerNewPlugin(normalState, NORMAL_STATE, 'normalState');
-    }
-    /**
-     * Sets keyboard handler component
-     * @param keyboardHandler - Created keyboard handler that is rendered
-     * @internal
-     */
-    setKeyboardHandlerComponent(keyboardHandler) {
-        this._registerNewPlugin(keyboardHandler, KEYBOARD_HANDLER, 'keyboardHandler');
-    }
-    /**
-     * Sets popup component
-     * @param popup - Created popup that is rendered
-     * @internal
-     */
-    setPopupComponent(popup) {
-        this._registerNewPlugin(popup, POPUP, 'popup');
-    }
-    /**
-     * Sets positioner component
-     * @param positioner - Created positioner that is rendered
-     * @internal
-     */
-    setPositionerComponent(positioner) {
-        this._registerNewPlugin(positioner, POSITIONER, 'positioner');
-    }
-    /**
-     * Sets readonly state component
-     * @param readonlyState - Created readonly state that is rendered
-     * @internal
-     */
-    setReadonlyStateComponent(readonlyState) {
-        this._registerNewPlugin(readonlyState, READONLY_STATE, 'readonlyState');
-        this._pluginInstances[NORMAL_STATE] = this._pluginInstances[READONLY_STATE];
-    }
-    /**
-     * Sets value handler component
-     * @param valueHandler - Created value handler that is rendered
-     * @internal
-     */
-    setValueHandlerComponent(valueHandler) {
-        this._registerNewPlugin(valueHandler, VALUE_HANDLER, 'valueHandler');
-    }
-    /**
-     * Sets live search component
-     * @param liveSearch - Created live search that is rendered
-     * @internal
-     */
-    setLiveSearchComponent(liveSearch) {
-        this._registerNewPlugin(liveSearch, LIVE_SEARCH, 'liveSearch');
-    }
-    //######################### public methods #########################
-    /**
-     * Initialize component, automatically called once if not blocked by options
-     */
-    initialize() {
-        const liveSearchPlugin = this._pluginInstances[LIVE_SEARCH];
-        this.liveSearchElement = [[liveSearchPlugin.liveSearchElement]];
-        if (this.selectOptions.absolute) {
-            this._appendPopupToBody(this._selectOptions.plugins.popup.type);
-        }
-        this._changeDetector.detectChanges();
-        this.selectOptions.optionsGatherer.initializeGatherer();
-        this._pluginInstances[LIVE_SEARCH].initialize();
-        this._pluginInstances[KEYBOARD_HANDLER].initialize();
-        this._pluginInstances[VALUE_HANDLER].initialize();
-        this._pluginInstances[NORMAL_STATE]?.initialize();
-        this._pluginInstances[READONLY_STATE]?.initialize();
-        this._pluginInstances[POPUP].initialize();
-        this._pluginInstances[POSITIONER].initialize();
-        this.isInitialized = true;
-        this._initializedSubject.next(true);
-    }
-    /**
-     * Initialize options, automaticaly called during init phase, but can be used to reinitialize NgSelectOptions
-     */
-    initOptions() {
-        this.selectOptions.optionsGatherer.ngSelectPlugins = this._pluginInstances;
-        this.selectOptions.optionsGatherer.pluginBus = this._pluginBus;
-        this.selectOptions.optionsGatherer.select = this;
-        const initOptionsPlugin = (pluginKey, pluginName) => {
-            if (this._selectOptions.plugins[pluginName]) {
-                this._selectOptions.plugins[pluginName].type = resolveForwardRef(this._selectOptions.plugins[pluginName].type);
-                if (this._pluginInstances[pluginKey]) {
-                    if (this._selectOptions.plugins && this._selectOptions.plugins[pluginName] && this._selectOptions.plugins[pluginName].options) {
-                        this._pluginInstances[pluginKey].options = this._selectOptions.plugins[pluginName].options;
-                    }
-                    this._pluginInstances[pluginKey].initOptions();
+        //create and initialize options for popup plugin, allows absolute positioning
+        effect(() => {
+            const selectOptions = this.selectOptions;
+            const popupContainer = this.popupContainer();
+            this.destroyPlugin(SelectPluginType.Popup, popupContainer, this.popupInit);
+            this.createPlugin(this.selectOptions.plugins?.popup, SelectPluginType.Popup, this.popupContainer(), this.popupInit);
+            if (selectOptions.absolute && this.popupComponentRef) {
+                const element = getHostElement(this.popupComponentRef);
+                if (!element) {
+                    throw new Error('Could not get element of popup component');
                 }
+                renderToBody(document, element, selectOptions.containerElement);
             }
-        };
-        if (this._selectOptions.plugins) {
-            initOptionsPlugin(NORMAL_STATE, 'normalState');
-            initOptionsPlugin(KEYBOARD_HANDLER, 'keyboardHandler');
-            initOptionsPlugin(POPUP, 'popup');
-            initOptionsPlugin(POSITIONER, 'positioner');
-            initOptionsPlugin(READONLY_STATE, 'readonlyState');
-            initOptionsPlugin(VALUE_HANDLER, 'valueHandler');
-            initOptionsPlugin(LIVE_SEARCH, 'liveSearch');
-        }
-    }
-    /**
-     * Explicitly runs invalidation of content (change detection)
-     */
-    invalidateVisuals() {
-        this._changeDetector.detectChanges();
-    }
-    /**
-     * Gets instance of plugin by its id
-     * @param pluginId - Id of plugin, use constants
-     */
-    getPlugin(pluginId) {
-        return this._pluginInstances[pluginId];
+        });
+        //initialize plugins when all options are initialized
+        effect(() => {
+            if (this.optionsInit().initialized) {
+                untracked(() => {
+                    this.pluginInstances.OptionsHandler.initialize();
+                    this.pluginInstances.LiveSearch.initialize();
+                    this.pluginInstances.KeyboardHandler.initialize();
+                    this.pluginInstances.ValueHandler.initialize();
+                    this.pluginInstances.normalState()?.initialize();
+                    this.pluginInstances.readonlyState()?.initialize();
+                    this.pluginInstances.Popup.initialize();
+                    this.pluginInstances.Positioner.initialize();
+                    this.pluginInstances.Interactions.initialize();
+                });
+                this.initializedSignal.set(true);
+            }
+        });
     }
+    //######################### public methods #########################
     /**
-     * Subscribes for event
-     * @param eventName - Name of event that should be listened to
-     * @param handler - Function used for handling event
+     * @inheritdoc
      */
-    listenTo(eventName, handler) {
-        return this._pluginBus[eventName].subscribe(handler);
+    getPlugin(pluginType) {
+        return this.pluginInstances[pluginType];
     }
     /**
-     * Executes actions on NgSelect
-     * @param actions - Array of actions that are executed over NgSelect
+     * @inheritdoc
      */
     execute(...actions) {
         if (!actions) {
@@ -429,109 +350,104 @@ export class NgSelectComponent {
         actions.forEach(action => action(this));
     }
     /**
-     * Executes function on NgSelect and returns result
-     * @param func - Function that is executed and its result is returned
+     * @inheritdoc
      */
     executeAndReturn(func) {
         if (!func) {
-            return null;
+            throw new Error('Function is required');
         }
         return func(this);
     }
-    //######################### protected methods #########################
+    // //######################### protected methods #########################
     /**
-     * Appends popup component directly to body, allows absolute positioning over page body
-     * @param component - Popup component type to be appended
+     * Creates plugin
+     * @param pluginDescription - Information about plugin that should be created
+     * @param pluginType - Key of plugin used for pluginInstances
+     * @param pluginViewContainer - Container where should be plugin created
+     * @param initOptions - Signal that hold information about init options state for this plugin
      */
-    _appendPopupToBody(component) {
-        //do not reinitialize if already exists and nothing has changed
-        if (this._absolutePopupType == component && this.liveSearchElement[0][0] == this._absolutePopupElement) {
+    async createPlugin(pluginDescription, pluginType, pluginViewContainer, initOptions) {
+        if (!pluginDescription?.type) {
+            this.destroyPlugin(pluginType, pluginViewContainer, initOptions);
             return;
         }
-        // 0. Destroyes absolute popup if it exists
-        this._destroyAbsolutePopup();
-        if (!component) {
-            return;
+        const type = resolveForwardRef(pluginDescription.type);
+        let newInstance = false;
+        //new type provided
+        if (type != this.pluginTypes[pluginType]) {
+            initOptions.set(false);
+            this.pluginTypes[pluginType] = type;
+            pluginViewContainer.clear();
+            const component = pluginViewContainer.createComponent(type);
+            component.changeDetectorRef.detectChanges();
+            this.pluginInstances[pluginType] = component.instance;
+            newInstance = true;
+            if (pluginType == SelectPluginType.Popup) {
+                this.popupComponentRef = component;
+            }
+        }
+        //only call when new instance of plugin was created
+        if (newInstance) {
+            pluginDescription.instanceCallback?.(this.pluginInstances[pluginType]);
+        }
+        //options are available, set them
+        if (pluginDescription.options) {
+            initOptions.set(false);
+            this.pluginInstances[pluginType].options = pluginDescription.options;
         }
-        this._absolutePopupType = component;
-        this._absolutePopupElement = this.liveSearchElement[0][0];
-        // 1. Create a component reference from the component
-        this._absolutePopup = this._componentFactoryResolver
-            .resolveComponentFactory(component)
-            .create(this._injector, this.liveSearchElement);
-        // 2. Attach component to the appRef so that it's inside the ng component tree
-        this._appRef.attachView(this._absolutePopup.hostView);
-        // 3. Get DOM element from component
-        const domElem = this._absolutePopup.hostView
-            .rootNodes[0];
-        // 4. Append DOM element to the body
-        renderToBody(document, domElem, this._selectOptions.containerElement);
-        this.setPopupComponent(this._absolutePopup.instance);
+        await this.initOption(pluginType, initOptions);
     }
     /**
-     * Destroyes absolute popup if it exists
+     * Init options for single plugin
+     * @param pluginType - Type of plugin to be initialized
+     * @param initOptions - Init options signal for this plugin
      */
-    _destroyAbsolutePopup() {
-        if (this._absolutePopup) {
-            this._appRef.detachView(this._absolutePopup.hostView);
-            this._absolutePopup.destroy();
-            this._absolutePopup = null;
-            this._absolutePopupType = null;
-            this._absolutePopupElement = null;
-        }
+    async initOption(pluginType, initOptions) {
+        await this.pluginInstances[pluginType].initOptions();
+        initOptions.set(true);
     }
     /**
-     * Registers newly created plugin
-     * @param plugin - Plugin to be registered
-     * @param pluginKey - Key of plugin used for pluginInstances
-     * @param pluginName - Name property for plugin from options
+     * Destroys plugin
+     * @param pluginType - Plugin type to be destroyed
+     * @param plugiViewContainer - Container which will be emptied
+     * @param initOptions - Signal that hold information about init options state for this plugin
      */
-    _registerNewPlugin(plugin, pluginKey, pluginName) {
-        if (!plugin) {
-            this._pluginInstances[pluginKey] = null;
-            return;
-        }
-        this._pluginInstances[pluginKey] = plugin;
-        if (this._selectOptions.plugins && this._selectOptions.plugins[pluginName] && this._selectOptions.plugins[pluginName].options) {
-            plugin.options = this._selectOptions.plugins[pluginName].options;
-        }
-        plugin.initOptions();
-        if (this._selectOptions.plugins && this._selectOptions.plugins[pluginName] && this._selectOptions.plugins[pluginName].instanceCallback) {
-            this._selectOptions.plugins[pluginName].instanceCallback(plugin);
+    destroyPlugin(pluginType, pluginViewContainer, initOptions) {
+        if (pluginType == SelectPluginType.Popup) {
+            this.popupComponentRef = null;
         }
+        pluginViewContainer.clear();
+        initOptions.set(false);
+        this.pluginTypes[pluginType] = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i1.PluginBus }, { token: NG_SELECT_PLUGIN_INSTANCES }, { token: NG_SELECT_OPTIONS, optional: true }, { token: NORMAL_STATE_TYPE, optional: true }, { token: KEYBOARD_HANDLER_TYPE, optional: true }, { token: POPUP_TYPE, optional: true }, { token: POSITIONER_TYPE, optional: true }, { token: READONLY_STATE_TYPE, optional: true }, { token: VALUE_HANDLER_TYPE, optional: true }, { token: LIVE_SEARCH_TYPE, optional: true }, { token: 'readonly', attribute: true }, { token: 'disabled', attribute: true }, { token: 'multiple', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: NgSelectComponent, isStandalone: false, selector: "ng-select", inputs: { selectOptions: "selectOptions", disabled: "disabled", readonly: "readonly" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: Select, deps: [{ token: i1.SelectPluginInstances }, { token: i1.SelectBus }, { token: i0.ElementRef }, { token: DOCUMENT }, { token: 'multiple', attribute: true }, { token: NORMAL_STATE_TYPE, optional: true }, { token: KEYBOARD_HANDLER_TYPE, optional: true }, { token: POPUP_TYPE, optional: true }, { token: POSITIONER_TYPE, optional: true }, { token: READONLY_STATE_TYPE, optional: true }, { token: VALUE_HANDLER_TYPE, optional: true }, { token: LIVE_SEARCH_TYPE, optional: true }, { token: INTERACTIONS_TYPE, optional: true }, { token: OPTIONS_HANDLER_TYPE, optional: true }, { token: SELECT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: Select, isStandalone: true, selector: "ng-select", inputs: { selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
-                provide: NG_SELECT_PLUGIN_INSTANCES,
-                useFactory: () => { return {}; }
+                provide: SelectPluginInstances,
+                useFactory: () => new SelectPluginInstances(),
             },
-            {
-                provide: PluginBus,
-                useClass: PluginBus
-            }
-        ], queries: [{ propertyName: "normalStateTemplate", first: true, predicate: ["normalStateTemplate"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "optionsChildren", predicate: OptionComponent }, { propertyName: "optGroupsChildren", predicate: OptGroupComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.liveSearch?.type\" (ngComponentOutletExCreated)=\"setLiveSearchComponent($event)\"></ng-template>\r\n<ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.positioner?.type\" (ngComponentOutletExCreated)=\"setPositionerComponent($event)\"></ng-template>\r\n<ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.keyboardHandler?.type\" (ngComponentOutletExCreated)=\"setKeyboardHandlerComponent($event)\"></ng-template>\r\n<ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.valueHandler?.type\" (ngComponentOutletExCreated)=\"setValueHandlerComponent($event)\"></ng-template>\r\n\r\n<div>\r\n    <ng-template [ngIf]=\"!selectOptions?.readonly\">\r\n        <ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.normalState?.type\" (ngComponentOutletExCreated)=\"setNormalStateComponent($event)\" [ngComponentOutletExContent]=\"liveSearchElement\"></ng-template>\r\n    </ng-template>\r\n\r\n    <ng-template [ngIf]=\"selectOptions?.readonly\">\r\n        <ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.readonlyState?.type\" (ngComponentOutletExCreated)=\"setReadonlyStateComponent($event)\"></ng-template>\r\n    </ng-template>\r\n\r\n    <ng-template [ngIf]=\"!selectOptions?.absolute\">\r\n        <ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.popup?.type\" (ngComponentOutletExCreated)=\"setPopupComponent($event)\" [ngComponentOutletExContent]=\"liveSearchElement\"></ng-template>\r\n    </ng-template>\r\n</div>", styles: [":host\n        {\n            display: block;\n            position: relative;\n        }"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgComponentOutletEx, selector: "[ngComponentOutletEx]", inputs: ["ngComponentOutletEx", "ngComponentOutletExInjector", "ngComponentOutletExContent"], outputs: ["ngComponentOutletExCreated"], exportAs: ["ngComponentOutletEx"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            SelectBus,
+        ], queries: [{ propertyName: "normalStateTemplate", first: true, predicate: NormalStateTemplate, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "optionTemplate", first: true, predicate: OptionTemplate, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "availableOptions", predicate: Option, isSignal: true }], viewQueries: [{ propertyName: "liveSearchContainer", first: true, predicate: ["liveSearch"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "interactionsContainer", first: true, predicate: ["interactions"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "optionsHandlerContainer", first: true, predicate: ["optionsHandler"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "positionerContainer", first: true, predicate: ["positioner"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "keyboardHandlerContainer", first: true, predicate: ["keyboardHandler"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "valueHandlerContainer", first: true, predicate: ["valueHandler"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "readonlyStateContainer", first: true, predicate: ["readonlyState"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "normalStateContainer", first: true, predicate: ["normalState"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "popupContainer", first: true, predicate: ["popup"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<ng-container #liveSearch />\r\n<ng-container #interactions />\r\n<ng-container #optionsHandler />\r\n<ng-container #positioner />\r\n<ng-container #keyboardHandler />\r\n<ng-container #valueHandler />\r\n\r\n<div>\r\n    <ng-container #readonlyState />\r\n    <ng-container #normalState />\r\n    <ng-container #popup />\r\n</div>\r\n", styles: [":host\n{\n    display: block;\n    position: relative;\n}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: NgSelectComponent, decorators: [{
+__decorate([
+    CopyOptionsAsSignal(),
+    __metadata("design:type", Object)
+], Select.prototype, "selectOptions", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: Select, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-select', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'ng-select', providers: [
                         {
-                            provide: NG_SELECT_PLUGIN_INSTANCES,
-                            useFactory: () => { return {}; }
+                            provide: SelectPluginInstances,
+                            useFactory: () => new SelectPluginInstances(),
                         },
-                        {
-                            provide: PluginBus,
-                            useClass: PluginBus
-                        }
-                    ], template: "<ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.liveSearch?.type\" (ngComponentOutletExCreated)=\"setLiveSearchComponent($event)\"></ng-template>\r\n<ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.positioner?.type\" (ngComponentOutletExCreated)=\"setPositionerComponent($event)\"></ng-template>\r\n<ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.keyboardHandler?.type\" (ngComponentOutletExCreated)=\"setKeyboardHandlerComponent($event)\"></ng-template>\r\n<ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.valueHandler?.type\" (ngComponentOutletExCreated)=\"setValueHandlerComponent($event)\"></ng-template>\r\n\r\n<div>\r\n    <ng-template [ngIf]=\"!selectOptions?.readonly\">\r\n        <ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.normalState?.type\" (ngComponentOutletExCreated)=\"setNormalStateComponent($event)\" [ngComponentOutletExContent]=\"liveSearchElement\"></ng-template>\r\n    </ng-template>\r\n\r\n    <ng-template [ngIf]=\"selectOptions?.readonly\">\r\n        <ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.readonlyState?.type\" (ngComponentOutletExCreated)=\"setReadonlyStateComponent($event)\"></ng-template>\r\n    </ng-template>\r\n\r\n    <ng-template [ngIf]=\"!selectOptions?.absolute\">\r\n        <ng-template [ngComponentOutletEx]=\"selectOptions?.plugins?.popup?.type\" (ngComponentOutletExCreated)=\"setPopupComponent($event)\" [ngComponentOutletExContent]=\"liveSearchElement\"></ng-template>\r\n    </ng-template>\r\n</div>", styles: [":host\n        {\n            display: block;\n            position: relative;\n        }"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i1.PluginBus }, { type: undefined, decorators: [{
+                        SelectBus,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #liveSearch />\r\n<ng-container #interactions />\r\n<ng-container #optionsHandler />\r\n<ng-container #positioner />\r\n<ng-container #keyboardHandler />\r\n<ng-container #valueHandler />\r\n\r\n<div>\r\n    <ng-container #readonlyState />\r\n    <ng-container #normalState />\r\n    <ng-container #popup />\r\n</div>\r\n", styles: [":host\n{\n    display: block;\n    position: relative;\n}\n"] }]
+        }], ctorParameters: () => [{ type: i1.SelectPluginInstances }, { type: i1.SelectBus }, { type: i0.ElementRef }, { type: HTMLDocument, decorators: [{
                     type: Inject,
-                    args: [NG_SELECT_PLUGIN_INSTANCES]
+                    args: [DOCUMENT]
                 }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [NG_SELECT_OPTIONS]
-                }, {
-                    type: Optional
+                    type: Attribute,
+                    args: ['multiple']
                 }] }, { type: i0.Type, decorators: [{
                     type: Inject,
                     args: [NORMAL_STATE_TYPE]
@@ -567,32 +483,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     args: [LIVE_SEARCH_TYPE]
                 }, {
                     type: Optional
+                }] }, { type: i0.Type, decorators: [{
+                    type: Inject,
+                    args: [INTERACTIONS_TYPE]
+                }, {
+                    type: Optional
+                }] }, { type: i0.Type, decorators: [{
+                    type: Inject,
+                    args: [OPTIONS_HANDLER_TYPE]
+                }, {
+                    type: Optional
                 }] }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['readonly']
-                }] }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['disabled']
-                }] }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['multiple']
-                }] }], propDecorators: { selectOptions: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
+                    type: Inject,
+                    args: [SELECT_OPTIONS]
+                }, {
+                    type: Optional
+                }] }], propDecorators: { liveSearchContainer: [{ type: i0.ViewChild, args: ['liveSearch', { ...{ read: ViewContainerRef }, isSignal: true }] }], interactionsContainer: [{ type: i0.ViewChild, args: ['interactions', { ...{ read: ViewContainerRef }, isSignal: true }] }], optionsHandlerContainer: [{ type: i0.ViewChild, args: ['optionsHandler', { ...{ read: ViewContainerRef }, isSignal: true }] }], positionerContainer: [{ type: i0.ViewChild, args: ['positioner', { ...{ read: ViewContainerRef }, isSignal: true }] }], keyboardHandlerContainer: [{ type: i0.ViewChild, args: ['keyboardHandler', { ...{ read: ViewContainerRef }, isSignal: true }] }], valueHandlerContainer: [{ type: i0.ViewChild, args: ['valueHandler', { ...{ read: ViewContainerRef }, isSignal: true }] }], readonlyStateContainer: [{ type: i0.ViewChild, args: ['readonlyState', { ...{ read: ViewContainerRef }, isSignal: true }] }], normalStateContainer: [{ type: i0.ViewChild, args: ['normalState', { ...{ read: ViewContainerRef }, isSignal: true }] }], popupContainer: [{ type: i0.ViewChild, args: ['popup', { ...{ read: ViewContainerRef }, isSignal: true }] }], selectOptions: [{
                 type: Input
-            }], normalStateTemplate: [{
-                type: ContentChild,
-                args: ['normalStateTemplate']
-            }], optionTemplate: [{
-                type: ContentChild,
-                args: ['optionTemplate']
-            }], optionsChildren: [{
-                type: ContentChildren,
-                args: [OptionComponent]
-            }], optGroupsChildren: [{
-                type: ContentChildren,
-                args: [OptGroupComponent]
-            }] } });
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], normalStateTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NormalStateTemplate), { ...{ read: TemplateRef }, isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OptionTemplate), { ...{ read: TemplateRef }, isSignal: true }] }], availableOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Option), { isSignal: true }] }] } });
 //# sourceMappingURL=select.component.js.map