@updevs/components 1.0.0-alpha.10 → 1.0.0-alpha.100

package/fesm2022/updevs-components-form-controls-select.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, viewChild, ElementRef, input, computed, inject, Renderer2, NgZone, effect, RendererStyleFlags2, Directive, HostBinding, Output, Component, ViewEncapsulation, Input, NgModule } from '@angular/core';
+import { viewChild, ElementRef, output, input, computed, signal, inject, Renderer2, NgZone, Injector, effect, afterNextRender, RendererStyleFlags2, HostBinding, Directive, model, ViewEncapsulation, Component, EventEmitter, Output, NgModule } from '@angular/core';
 import { DomEventsService, PositioningService, UpdCoreLayoutModule } from '@updevs/sdk/layout';
 import { Tools } from '@updevs/sdk/core';
 import { ColumnSizeHelper } from '@updevs/components';
@@ -53,98 +53,112 @@ class BaseSelectComponent extends BaseControl {
     }
     constructor() {
         super();
-        this.dropdownOpenStatusChange = new EventEmitter();
-        this.componentBox = viewChild('componentBox', { read: ElementRef });
-        this.searchBox = viewChild('searchBox', { read: ElementRef });
-        this.searchBoxChild = viewChild('searchBoxChild', { read: ElementRef });
-        this.list = viewChild('list', { read: ElementRef });
-        /**
-         * Name of the HTML component.
-         */
-        this.name = input();
+        this.componentBox = viewChild('componentBox', { ...(ngDevMode ? { debugName: "componentBox" } : {}), read: ElementRef });
+        this.searchBox = viewChild('searchBox', { ...(ngDevMode ? { debugName: "searchBox" } : {}), read: ElementRef });
+        this.searchBoxChild = viewChild('searchBoxChild', { ...(ngDevMode ? { debugName: "searchBoxChild" } : {}), read: ElementRef });
+        this.list = viewChild('list', { ...(ngDevMode ? { debugName: "list" } : {}), read: ElementRef });
+        this.dropdownOpenStatusChange = output();
         /**
          * Select items.
          * If provided, the select will be considered static.
          */
-        this.items = input();
+        this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
         /**
          * Store used to load/filter the items.
          */
-        this.store = input();
+        this.store = input(...(ngDevMode ? [undefined, { debugName: "store" }] : []));
         /**
          * Observable used to load/filter the items.
          */
-        this.observable = input();
+        this.observable = input(...(ngDevMode ? [undefined, { debugName: "observable" }] : []));
         /**
          * Name of the property in the object that represents the ID/key of the option.
          * **Note:** used only for remote data.
          */
-        this.itemKey = input();
+        this.itemKey = input(...(ngDevMode ? [undefined, { debugName: "itemKey" }] : []));
         /**
          * Name of the property in the object that represents the value/description of the option.
          * **Note:** used only for remote data.
          */
-        this.itemValue = input();
+        this.itemValue = input(...(ngDevMode ? [undefined, { debugName: "itemValue" }] : []));
         /**
          * Maximum height of the dropdown.
          */
-        this.dropdownMaxHeight = input(Defaults.dropdownMaxHeight);
-        this.typeaheadDebounce = input(Defaults.typeaheadDebounce);
-        this.shouldAutoSearch = input(Defaults.shouldAutoSearch);
-        this.shouldCloseOnOutsideClick = input(Defaults.shouldCloseOnOutsideClick);
-        this.layout = input(Defaults.layout);
-        this.labelColSize = input();
-        this.isDisabled = input(false); // TODO: implementar.
-        this.layoutClasses = computed(() => this.layout() === 'horizontal' ? ['col', 'align-self-center'] : []);
+        this.dropdownMaxHeight = input(Defaults.dropdownMaxHeight, ...(ngDevMode ? [{ debugName: "dropdownMaxHeight" }] : []));
+        this.typeaheadDebounce = input(Defaults.typeaheadDebounce, ...(ngDevMode ? [{ debugName: "typeaheadDebounce" }] : []));
+        this.shouldAutoSearch = input(Defaults.shouldAutoSearch, ...(ngDevMode ? [{ debugName: "shouldAutoSearch" }] : []));
+        this.shouldCloseOnOutsideClick = input(Defaults.shouldCloseOnOutsideClick, ...(ngDevMode ? [{ debugName: "shouldCloseOnOutsideClick" }] : []));
+        this.layout = input(Defaults.layout, ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        /**
+         * Value coming from a parent field when the rule `AttachmentTypeEnum.ParentLoad` is active.
+         * `upd-select` can use it to fetch the dependent list.
+         */
+        this.parentValue = input(...(ngDevMode ? [undefined, { debugName: "parentValue" }] : []));
+        this.parentSelectedId = input(...(ngDevMode ? [undefined, { debugName: "parentSelectedId" }] : []));
+        this.parentDependentLoader = input(...(ngDevMode ? [undefined, { debugName: "parentDependentLoader" }] : []));
+        this.getItemById = input(...(ngDevMode ? [undefined, { debugName: "getItemById" }] : []));
+        this.layoutClasses = computed(() => this.layout() === 'horizontal' ? ['col', 'align-self-center'] : [], ...(ngDevMode ? [{ debugName: "layoutClasses" }] : []));
         this.isLoading = false;
-        this.localItems = [];
+        this.localItems = signal([], ...(ngDevMode ? [{ debugName: "localItems" }] : []));
         this.listItems = [];
         this.dropdownClasses = 'select-dropdown-content remove-top-radius';
         this._localBackupItems = [];
-        this.hasExternalList = false;
+        this.hasInternalList = false;
         this._isDropdownOpen = false;
-        this.hostWrapperClasses = computed(() => this.layout() === 'horizontal' ? 'row' : '');
+        this.hostWrapperClasses = computed(() => this.layout() === 'horizontal' ? 'row' : '', ...(ngDevMode ? [{ debugName: "hostWrapperClasses" }] : []));
         this.searchInputSubject = new Subject();
         this.renderer = inject(Renderer2);
         this.ngZone = inject(NgZone);
         this.domEventsService = inject(DomEventsService);
         this.positioningService = inject(PositioningService);
+        this.injector = inject(Injector);
         effect(() => {
             if (!!this.items()) {
                 this._setupLocalItems(this.items());
             }
-        });
+            if (this.parentValue() !== this.previousParentValue) {
+                this.previousParentValue = this.parentValue();
+                this.clearSelection();
+                this.search();
+            }
+        }, { allowSignalWrites: true });
     }
     ngOnInit() {
-        this.hasExternalList = !this.observable() && !this.store();
+        this.hasInternalList = !this.observable() && !this.store() && !this.parentDependentLoader();
         if (this.shouldAutoSearch()) {
-            if (this.hasExternalList) {
+            if (this.hasInternalList) {
                 this._setupLocalItems(this.items());
             }
             else {
-                this.searchRemote();
+                this.searchExternal();
             }
         }
-        if (this.hasExternalList) {
+        if (this.hasInternalList) {
             return;
         }
         const typeaheadSubscription = this.searchInputSubject
             .pipe(tap(value => this._currentTerm = value), debounceTime(this.typeaheadDebounce()))
-            .subscribe(() => this.searchRemote());
+            .subscribe(() => this.searchExternal());
         this.addSubscriptions(typeaheadSubscription);
     }
     openDropdown() {
+        if (this.isDisabled()) {
+            return;
+        }
         this.isDropdownOpen = true;
         if (this.shouldCloseOnOutsideClick()) {
             const outsideClickSub = this.domEventsService.startOutsideClickListener(() => this.ngZone.run(() => this.isDropdownOpen = false), this.list()?.nativeElement, true, this.componentBox()?.nativeElement, this.searchBox()?.nativeElement);
             this.addSubscriptions(outsideClickSub);
         }
-        this.ngZone.runOutsideAngular(() => this.positioningService
-            .computePosition(this.componentBox(), this.list(), { placement: 'bottom' })
-            .subscribe(resp => this.updatePosition(resp)));
+        afterNextRender(() => {
+            this.ngZone.runOutsideAngular(() => this.positioningService
+                .computePosition(this.componentBox(), this.list(), { placement: 'bottom' })
+                .subscribe(resp => this.updatePosition(resp)));
+        }, { injector: this.injector });
     }
     search(term) {
-        if (this.hasExternalList) {
+        if (this.hasInternalList) {
+            this._currentTerm = term;
             this.searchLocal();
         }
         else {
@@ -152,7 +166,8 @@ class BaseSelectComponent extends BaseControl {
         }
     }
     _setupLocalItems(items) {
-        this.localItems = Utils.deepCopy(items);
+        const copiedItems = Utils.deepCopy(items);
+        this.localItems.set(copiedItems);
         this._localBackupItems = Utils.deepCopy(items);
         const tempItems = [];
         for (const item of this._localBackupItems) {
@@ -166,29 +181,41 @@ class BaseSelectComponent extends BaseControl {
     searchLocal() {
         if (!this._currentTerm) {
             this.listItems = Utils.deepCopy(this._localBackupItems.map(li => li.listItem));
-            this.localItems = Utils.deepCopy(this._localBackupItems);
+            this.localItems.set(Utils.deepCopy(this._localBackupItems));
             return;
         }
-        this.ngZone.run(() => {
-            this.listItems = Utils.deepCopy(this._localBackupItems).filter(si => {
-                let hasChildrenInSearch = false;
-                if ((si.children?.length || 0) > 0) {
-                    hasChildrenInSearch = si.children.filter(ci => ci.text.toLowerCase().includes(this._currentTerm.toLowerCase())).length > 0;
-                }
-                return si.text.toLowerCase().includes(this._currentTerm.toLowerCase()) || hasChildrenInSearch;
-            }).map(si => {
-                const bkpItem = this._localBackupItems.find(lbi => lbi.value === si.value);
-                if ((bkpItem?.children?.length || 0) > 0) {
-                    si.children = [...bkpItem.children].filter(ci => ci.text.toLowerCase().includes(this._currentTerm.toLowerCase()));
-                }
-                return this.getListItem(si);
-            });
-        });
+        this.ngZone.run(() => this.listItems = Utils
+            .deepCopy(this._localBackupItems)
+            .filter(si => {
+            let hasChildrenInSearch = false;
+            if ((si.children?.length || 0) > 0) {
+                hasChildrenInSearch = si.children.filter(ci => ci.text.toLowerCase().includes(this._currentTerm.toLowerCase())).length > 0;
+            }
+            return si.text.toLowerCase().includes(this._currentTerm.toLowerCase()) || hasChildrenInSearch;
+        })
+            .map(si => {
+            const bkpItem = this._localBackupItems.find(lbi => lbi.value === si.value);
+            if ((bkpItem?.children?.length || 0) > 0) {
+                si.children = [...bkpItem.children].filter(ci => ci.text.toLowerCase().includes(this._currentTerm.toLowerCase()));
+            }
+            return this.getListItem(si);
+        }));
     }
-    searchRemote() {
+    searchExternal() {
         this.isLoading = true;
         const request = { description: this._currentTerm };
-        const observable = !!this.observable() ? this.observable()(request) : this.store().search(request);
+        const parentLoader = this.parentDependentLoader();
+        const parentId = this.parentSelectedId() ?? this.parentValue();
+        if (!!parentLoader && !!parentId) {
+            parentLoader(parentId, this._currentTerm).subscribe({
+                next: (items) => this._setupLocalItems(items),
+                error: () => this._setupLocalItems([])
+            });
+            return;
+        }
+        const observable = !!this.observable()
+            ? this.observable()(request, this.parentValue())
+            : this.store().search(request, this.parentValue());
         observable.subscribe(r => {
             const items = [];
             r.records.forEach(item => {
@@ -228,80 +255,197 @@ class BaseSelectComponent extends BaseControl {
         this.renderer.setStyle(ddElement, 'left', 0, RendererStyleFlags2.Important);
         this.renderer.setStyle(ddElement, 'width', `${Math.abs(componentBox.width)}px`, RendererStyleFlags2.Important);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.1.0", type: BaseSelectComponent, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, observable: { classPropertyName: "observable", publicName: "observable", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: false, transformFunction: null }, itemValue: { classPropertyName: "itemValue", publicName: "itemValue", isSignal: true, isRequired: false, transformFunction: null }, dropdownMaxHeight: { classPropertyName: "dropdownMaxHeight", publicName: "dropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDebounce: { classPropertyName: "typeaheadDebounce", publicName: "typeaheadDebounce", isSignal: true, isRequired: false, transformFunction: null }, shouldAutoSearch: { classPropertyName: "shouldAutoSearch", publicName: "shouldAutoSearch", isSignal: true, isRequired: false, transformFunction: null }, shouldCloseOnOutsideClick: { classPropertyName: "shouldCloseOnOutsideClick", publicName: "shouldCloseOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, labelColSize: { classPropertyName: "labelColSize", publicName: "labelColSize", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownOpenStatusChange: "dropdownOpenStatusChange" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "componentBox", first: true, predicate: ["componentBox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchBoxChild", first: true, predicate: ["searchBoxChild"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BaseSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.4", type: BaseSelectComponent, isStandalone: false, inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, observable: { classPropertyName: "observable", publicName: "observable", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: false, transformFunction: null }, itemValue: { classPropertyName: "itemValue", publicName: "itemValue", isSignal: true, isRequired: false, transformFunction: null }, dropdownMaxHeight: { classPropertyName: "dropdownMaxHeight", publicName: "dropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDebounce: { classPropertyName: "typeaheadDebounce", publicName: "typeaheadDebounce", isSignal: true, isRequired: false, transformFunction: null }, shouldAutoSearch: { classPropertyName: "shouldAutoSearch", publicName: "shouldAutoSearch", isSignal: true, isRequired: false, transformFunction: null }, shouldCloseOnOutsideClick: { classPropertyName: "shouldCloseOnOutsideClick", publicName: "shouldCloseOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, parentValue: { classPropertyName: "parentValue", publicName: "parentValue", isSignal: true, isRequired: false, transformFunction: null }, parentSelectedId: { classPropertyName: "parentSelectedId", publicName: "parentSelectedId", isSignal: true, isRequired: false, transformFunction: null }, parentDependentLoader: { classPropertyName: "parentDependentLoader", publicName: "parentDependentLoader", isSignal: true, isRequired: false, transformFunction: null }, getItemById: { classPropertyName: "getItemById", publicName: "getItemById", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownOpenStatusChange: "dropdownOpenStatusChange" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "componentBox", first: true, predicate: ["componentBox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchBoxChild", first: true, predicate: ["searchBoxChild"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseSelectComponent, decorators: [{
-            type: Directive
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BaseSelectComponent, decorators: [{
+            type: Directive,
+            args: [{ standalone: false }]
         }], ctorParameters: () => [], propDecorators: { wrapperClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], dropdownOpenStatusChange: [{
-                type: Output
-            }] } });
+            }], componentBox: [{ type: i0.ViewChild, args: ['componentBox', { ...{ read: ElementRef }, isSignal: true }] }], searchBox: [{ type: i0.ViewChild, args: ['searchBox', { ...{ read: ElementRef }, isSignal: true }] }], searchBoxChild: [{ type: i0.ViewChild, args: ['searchBoxChild', { ...{ read: ElementRef }, isSignal: true }] }], list: [{ type: i0.ViewChild, args: ['list', { ...{ read: ElementRef }, isSignal: true }] }], dropdownOpenStatusChange: [{ type: i0.Output, args: ["dropdownOpenStatusChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], observable: [{ type: i0.Input, args: [{ isSignal: true, alias: "observable", required: false }] }], itemKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemKey", required: false }] }], itemValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemValue", required: false }] }], dropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownMaxHeight", required: false }] }], typeaheadDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadDebounce", required: false }] }], shouldAutoSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldAutoSearch", required: false }] }], shouldCloseOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldCloseOnOutsideClick", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], parentValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentValue", required: false }] }], parentSelectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentSelectedId", required: false }] }], parentDependentLoader: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentDependentLoader", required: false }] }], getItemById: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemById", required: false }] }] } });
 
 class SelectComponent extends BaseSelectComponent {
-    set selected(item) {
-        this.currentSelection = item;
+    get canTruncateText() {
+        return this.shouldTruncateSelectedText() === true || this.shouldTruncateSelectedText() === undefined;
     }
     constructor() {
         super();
         /**
          * If true, it'll use the default style of the OS, no search capabilities.
          */
-        this.useSystemStyle = false;
-        this.shouldShowClearButton = true;
-        this.isCompact = false;
+        this.useSystemStyle = input(false, ...(ngDevMode ? [{ debugName: "useSystemStyle" }] : []));
+        this.shouldShowClearButton = input(true, ...(ngDevMode ? [{ debugName: "shouldShowClearButton" }] : []));
+        this.shouldTruncateSelectedText = input(true, ...(ngDevMode ? [{ debugName: "shouldTruncateSelectedText" }] : []));
+        this.isCompact = input(false, ...(ngDevMode ? [{ debugName: "isCompact" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.shouldShowHintWithoutLabel = computed(() => !this.labelText && (!!this.hintText || !!this.hintTemplate()), ...(ngDevMode ? [{ debugName: "shouldShowHintWithoutLabel" }] : []));
         /**
          * Triggered when an item is selected.
          */
-        this.selectedItem = new EventEmitter();
+        this.selectedItem = output();
+        this.isFetchingMissingItem = false;
+        // This effect is the single source of truth for syncing the value with the selection.
+        effect(() => {
+            const val = this.value();
+            const items = this.localItems();
+            const getItemFn = this.getItemById();
+            // eslint-disable-next-line no-null/no-null
+            if (val === undefined || val === null) {
+                this.currentSelection = undefined;
+                return;
+            }
+            // eslint-disable-next-line eqeqeq
+            let item = items.find(i => i.value == val);
+            if (!item) {
+                for (const i of items) {
+                    if ((i.children?.length || 0) > 0) {
+                        // eslint-disable-next-line eqeqeq
+                        item = i.children?.find(c => c.value == val);
+                        if (!!item) {
+                            break;
+                        }
+                    }
+                }
+            }
+            if (!!item) {
+                this.currentSelection = item;
+                this.isFetchingMissingItem = false;
+            }
+            else if (!!getItemFn) {
+                this.fetchMissingItem(val, getItemFn);
+            }
+            else {
+                this.currentSelection = undefined;
+            }
+        });
+        effect(() => {
+            const parentId = this.parentSelectedId();
+            const loader = this.parentDependentLoader();
+            const val = this.value();
+            // eslint-disable-next-line eqeqeq
+            const hasCurrent = val !== undefined && this.localItems().some(i => i.value == val);
+            if (!!parentId && !!loader && !hasCurrent && !this.isFetchingMissingItem) {
+                this.loadDependentData(parentId, loader);
+            }
+            else if (!parentId && !!loader) {
+                this.clearData();
+            }
+        });
     }
     onSelectItem(item) {
         this._currentTerm = item.text;
         this.isDropdownOpen = false;
+        let selectedItem;
         for (const localBackupItem of this._localBackupItems) {
             if ((localBackupItem.children?.length || 0) > 0) {
-                this.currentSelection = localBackupItem.children?.find(c => c.value === item.id);
-                if (!!this.currentSelection) {
+                // eslint-disable-next-line eqeqeq
+                selectedItem = localBackupItem.children?.find(c => c.value == item.id);
+                if (!!selectedItem) {
                     break;
                 }
+                // eslint-disable-next-line eqeqeq
             }
-            else if (localBackupItem.value === item.id) {
-                this.currentSelection = localBackupItem;
+            else if (localBackupItem.value == item.id) {
+                selectedItem = localBackupItem;
                 break;
             }
         }
-        this.selectedItem.emit(this.currentSelection);
+        this.value.set(selectedItem?.value);
+        this.selectedItem.emit(selectedItem);
+        this._updateFormControl(selectedItem?.value, true);
     }
-    onSystemSelect(event) {
-        // eslint-disable-next-line eqeqeq
-        this.currentSelection = this.localItems.find(c => c.value == event.target.value);
-        this.selectedItem.emit(this.currentSelection);
+    search(term) {
+        const parentId = this.parentSelectedId();
+        const loader = this.parentDependentLoader();
+        if (!!parentId && !!loader) {
+            this.loadDependentData(parentId, loader, term);
+        }
+        else {
+            super.search(term);
+        }
     }
-    clearSelection() {
-        this.currentSelection = undefined;
+    clearSelection(isInternalCall = false) {
+        if (this.isDisabled() && !isInternalCall) {
+            return;
+        }
         this._currentTerm = undefined;
-        this.search();
+        this.value.set(undefined);
         this.selectedItem.emit(undefined);
+        this._updateFormControl(undefined, true);
+    }
+    onSystemSelect(event) {
+        // eslint-disable-next-line eqeqeq
+        const selectedItem = this.localItems().find(c => c.value == event.target.value);
+        this.value.set(selectedItem?.value);
+        this.selectedItem.emit(selectedItem);
+        this._updateFormControl(selectedItem?.value, true);
+    }
+    _getValue() {
+        return this.value();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SelectComponent, selector: "upd-select", inputs: { useSystemStyle: "useSystemStyle", shouldShowClearButton: "shouldShowClearButton", isCompact: "isCompact", selected: "selected" }, outputs: { selectedItem: "selectedItem" }, usesInheritance: true, ngImport: i0, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n@if (!useSystemStyle) {\n    <div class=\"dropdown\" [attr.id]=\"name()\" [ngClass]=\"layoutClasses()\">\n        @if (!labelText && (!!hintText || !!hintTemplate())) {\n            <div class=\"row g-2\">\n                <div class=\"col\">\n                    <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n                </div>\n                <div class=\"col-auto align-self-center\">\n                    <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                        [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                        ?\n                    </span>\n                </div>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n        }\n\n        <div #searchBox>\n            <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n                <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                    <ng-template updInputPrepend>\n                        <upd-icon tablerIcon=\"search\"></upd-icon>\n                    </ng-template>\n                </upd-input>\n            </div>\n        </div>\n        <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n            [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n        </upd-list>\n    </div>\n} @else {\n    @if (!labelText && (!!hintText || !!hintTemplate())) {\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n    }\n}\n\n<ng-template #contentTpl>\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @if (!!currentSelection) {\n                <span>{{ currentSelection.text }}</span>\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (!!currentSelection && shouldShowClearButton) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon [model]=\"{tablerIcon:'x'}\"></upd-icon>\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon [model]=\"{tablerIcon:'chevron-down'}\"></upd-icon>\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #contentDefaultStyleTpl>\n    <select class=\"form-select\" [class.compact]=\"isCompact\" [attr.placeholder]=\"placeholder()\" [attr.name]=\"name()\"\n        [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (change)=\"onSystemSelect($event)\">\n        @for (item of localItems; track item) {\n            @if ((item.children?.length || 0) > 0) {\n                <optgroup [label]=\"item.text\">\n                    @for (child of item.children; track child) {\n                        <option [attr.selected]=\"!!currentSelection && child.value === currentSelection.value ? true : undefined\"\n                            [value]=\"child.value\">\n                            {{ child.text }}\n                        </option>\n                    }\n                </optgroup>\n            } @else {\n                <option [attr.selected]=\"!!currentSelection && item.value === currentSelection.value ? true : undefined\"\n                    [value]=\"item.value\">\n                    {{ item.text }}\n                </option>\n            }\n        }\n    </select>\n</ng-template>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:24px}.select-loader-wrapper .select-loader{height:24px;width:24px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "name", "maxLength", "isDisabled", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "isRequired", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout", "labelColSize"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    _updateValue(value) {
+        this.value.set(value);
+    }
+    loadDependentData(parentId, loader, term) {
+        loader(parentId, term).subscribe({
+            next: (items) => {
+                this._setupLocalItems(items);
+                const val = this.value();
+                // eslint-disable-next-line eqeqeq
+                if (val !== undefined && !items.some(i => i.value == val) && !this.getItemById()) {
+                    this.clearSelection(true);
+                }
+            },
+            error: () => {
+                this._setupLocalItems([]);
+                this.clearSelection(true);
+            }
+        });
+    }
+    clearData() {
+        this._setupLocalItems([]);
+        this.clearSelection(true);
+    }
+    fetchMissingItem(id, getItemFn) {
+        this.isFetchingMissingItem = true;
+        getItemFn(id).subscribe({
+            next: (item) => {
+                if (!!item) {
+                    // eslint-disable-next-line eqeqeq
+                    if (this.value() == id) {
+                        this.currentSelection = item;
+                    }
+                    const currentItems = this.localItems();
+                    // eslint-disable-next-line eqeqeq
+                    if (!currentItems.find(i => i.value == item.value)) {
+                        this._setupLocalItems([...currentItems, item]);
+                    }
+                    // eslint-disable-next-line eqeqeq
+                }
+                else if (this.value() == id) {
+                    this.currentSelection = undefined;
+                }
+                this.isFetchingMissingItem = false;
+                this.selectedItem.emit(this.currentSelection);
+            },
+            error: () => {
+                // eslint-disable-next-line eqeqeq
+                if (this.value() == id) {
+                    this.currentSelection = undefined;
+                }
+                this.isFetchingMissingItem = false;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SelectComponent, isStandalone: false, selector: "upd-select", inputs: { useSystemStyle: { classPropertyName: "useSystemStyle", publicName: "useSystemStyle", isSignal: true, isRequired: false, transformFunction: null }, shouldShowClearButton: { classPropertyName: "shouldShowClearButton", publicName: "shouldShowClearButton", isSignal: true, isRequired: false, transformFunction: null }, shouldTruncateSelectedText: { classPropertyName: "shouldTruncateSelectedText", publicName: "shouldTruncateSelectedText", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectedItem: "selectedItem" }, usesInheritance: true, ngImport: i0, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n@if (!useSystemStyle()) {\n    <div class=\"dropdown\" [attr.id]=\"name()\" [ngClass]=\"layoutClasses()\">\n        @if (shouldShowHintWithoutLabel()) {\n            <div class=\"row g-2\">\n                <div class=\"col\">\n                    <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n                </div>\n                <div class=\"col-auto align-self-center\">\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                </div>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n        }\n\n        <div #searchBox>\n            <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n                <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                    <ng-template updInputPrepend>\n                        <upd-icon tablerIcon=\"search\"></upd-icon>\n                    </ng-template>\n                </upd-input>\n            </div>\n        </div>\n        <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n            [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n        </upd-list>\n    </div>\n} @else {\n    @if (shouldShowHintWithoutLabel()) {\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n    }\n}\n\n<ng-template #hintTpl>\n    <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n        ?\n    </span>\n</ng-template>\n\n<ng-template #contentTpl>\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [class.select-cursor-default]=\"!isDisabled()\"\n            [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @if (!!currentSelection) {\n                <span [ngClass]=\"canTruncateText ? 'd-block text-truncate' : ''\">{{ currentSelection.text }}</span>\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (!!currentSelection && shouldShowClearButton()) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\" [class.select-cursor-pointer]=\"!isDisabled()\"\n                    [iconModel]=\"{tablerIcon:'x', tablerIconSize: 16}\">\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\" [class.select-cursor-pointer]=\"!isDisabled()\"\n                    [iconModel]=\"{tablerIcon:'chevron-down', tablerIconSize: 16}\">\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #contentDefaultStyleTpl>\n    <select class=\"form-select\" [class.compact]=\"isCompact()\" [attr.placeholder]=\"placeholder()\" [attr.name]=\"name()\"\n        [class.select-cursor-pointer]=\"!isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\"\n        [class.disabled]=\"isDisabled()\" (change)=\"onSystemSelect($event)\">\n        @for (item of localItems(); track item) {\n            @if ((item.children?.length || 0) > 0) {\n                <optgroup [label]=\"item.text\">\n                    @for (child of item.children; track child) {\n                        <option [attr.selected]=\"!!currentSelection && child.value === currentSelection.value ? true : undefined\"\n                            [value]=\"child.value\">\n                            {{ child.text }}\n                        </option>\n                    }\n                </optgroup>\n            } @else {\n                <option [attr.selected]=\"!!currentSelection && item.value === currentSelection.value ? true : undefined\"\n                    [value]=\"item.value\">\n                    {{ item.text }}\n                </option>\n            }\n        }\n    </select>\n</ng-template>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:16px}.select-loader-wrapper .select-loader{height:16px;width:16px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}.select-cursor-default{cursor:default}.select-cursor-pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-select', encapsulation: ViewEncapsulation.None, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n@if (!useSystemStyle) {\n    <div class=\"dropdown\" [attr.id]=\"name()\" [ngClass]=\"layoutClasses()\">\n        @if (!labelText && (!!hintText || !!hintTemplate())) {\n            <div class=\"row g-2\">\n                <div class=\"col\">\n                    <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n                </div>\n                <div class=\"col-auto align-self-center\">\n                    <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                        [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                        ?\n                    </span>\n                </div>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n        }\n\n        <div #searchBox>\n            <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n                <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                    <ng-template updInputPrepend>\n                        <upd-icon tablerIcon=\"search\"></upd-icon>\n                    </ng-template>\n                </upd-input>\n            </div>\n        </div>\n        <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n            [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n        </upd-list>\n    </div>\n} @else {\n    @if (!labelText && (!!hintText || !!hintTemplate())) {\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n    }\n}\n\n<ng-template #contentTpl>\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @if (!!currentSelection) {\n                <span>{{ currentSelection.text }}</span>\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (!!currentSelection && shouldShowClearButton) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon [model]=\"{tablerIcon:'x'}\"></upd-icon>\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon [model]=\"{tablerIcon:'chevron-down'}\"></upd-icon>\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #contentDefaultStyleTpl>\n    <select class=\"form-select\" [class.compact]=\"isCompact\" [attr.placeholder]=\"placeholder()\" [attr.name]=\"name()\"\n        [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (change)=\"onSystemSelect($event)\">\n        @for (item of localItems; track item) {\n            @if ((item.children?.length || 0) > 0) {\n                <optgroup [label]=\"item.text\">\n                    @for (child of item.children; track child) {\n                        <option [attr.selected]=\"!!currentSelection && child.value === currentSelection.value ? true : undefined\"\n                            [value]=\"child.value\">\n                            {{ child.text }}\n                        </option>\n                    }\n                </optgroup>\n            } @else {\n                <option [attr.selected]=\"!!currentSelection && item.value === currentSelection.value ? true : undefined\"\n                    [value]=\"item.value\">\n                    {{ item.text }}\n                </option>\n            }\n        }\n    </select>\n</ng-template>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:24px}.select-loader-wrapper .select-loader{height:24px;width:24px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { useSystemStyle: [{
-                type: Input
-            }], shouldShowClearButton: [{
-                type: Input
-            }], isCompact: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], selectedItem: [{
-                type: Output
-            }] } });
+            args: [{ standalone: false, selector: 'upd-select', encapsulation: ViewEncapsulation.None, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n@if (!useSystemStyle()) {\n    <div class=\"dropdown\" [attr.id]=\"name()\" [ngClass]=\"layoutClasses()\">\n        @if (shouldShowHintWithoutLabel()) {\n            <div class=\"row g-2\">\n                <div class=\"col\">\n                    <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n                </div>\n                <div class=\"col-auto align-self-center\">\n                    <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n                </div>\n            </div>\n        } @else {\n            <ng-template [ngTemplateOutlet]=\"contentTpl\"></ng-template>\n        }\n\n        <div #searchBox>\n            <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n                <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                    <ng-template updInputPrepend>\n                        <upd-icon tablerIcon=\"search\"></upd-icon>\n                    </ng-template>\n                </upd-input>\n            </div>\n        </div>\n        <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n            [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n        </upd-list>\n    </div>\n} @else {\n    @if (shouldShowHintWithoutLabel()) {\n        <div class=\"row g-2\">\n            <div class=\"col\">\n                <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n            </div>\n            <div class=\"col-auto align-self-center\">\n                <ng-template [ngTemplateOutlet]=\"hintTpl\"></ng-template>\n            </div>\n        </div>\n    } @else {\n        <ng-template [ngTemplateOutlet]=\"contentDefaultStyleTpl\"></ng-template>\n    }\n}\n\n<ng-template #hintTpl>\n    <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\" [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n        ?\n    </span>\n</ng-template>\n\n<ng-template #contentTpl>\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [class.select-cursor-default]=\"!isDisabled()\"\n            [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @if (!!currentSelection) {\n                <span [ngClass]=\"canTruncateText ? 'd-block text-truncate' : ''\">{{ currentSelection.text }}</span>\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (!!currentSelection && shouldShowClearButton()) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\" [class.select-cursor-pointer]=\"!isDisabled()\"\n                    [iconModel]=\"{tablerIcon:'x', tablerIconSize: 16}\">\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\" [class.select-cursor-pointer]=\"!isDisabled()\"\n                    [iconModel]=\"{tablerIcon:'chevron-down', tablerIconSize: 16}\">\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #contentDefaultStyleTpl>\n    <select class=\"form-select\" [class.compact]=\"isCompact()\" [attr.placeholder]=\"placeholder()\" [attr.name]=\"name()\"\n        [class.select-cursor-pointer]=\"!isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\"\n        [class.disabled]=\"isDisabled()\" (change)=\"onSystemSelect($event)\">\n        @for (item of localItems(); track item) {\n            @if ((item.children?.length || 0) > 0) {\n                <optgroup [label]=\"item.text\">\n                    @for (child of item.children; track child) {\n                        <option [attr.selected]=\"!!currentSelection && child.value === currentSelection.value ? true : undefined\"\n                            [value]=\"child.value\">\n                            {{ child.text }}\n                        </option>\n                    }\n                </optgroup>\n            } @else {\n                <option [attr.selected]=\"!!currentSelection && item.value === currentSelection.value ? true : undefined\"\n                    [value]=\"item.value\">\n                    {{ item.text }}\n                </option>\n            }\n        }\n    </select>\n</ng-template>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:16px}.select-loader-wrapper .select-loader{height:16px;width:16px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}.select-cursor-default{cursor:default}.select-cursor-pointer{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { useSystemStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSystemStyle", required: false }] }], shouldShowClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldShowClearButton", required: false }] }], shouldTruncateSelectedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldTruncateSelectedText", required: false }] }], isCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompact", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectedItem: [{ type: i0.Output, args: ["selectedItem"] }] } });
 
 class SelectMultipleComponent extends BaseSelectComponent {
     constructor() {
@@ -316,63 +460,96 @@ class SelectMultipleComponent extends BaseSelectComponent {
          * Triggered when items are selected.
          */
         this.selectedIds = new EventEmitter();
+        /**
+         * An array of primitive values to set the selection programmatically.
+         */
+        this.selectedValues = input(...(ngDevMode ? [undefined, { debugName: "selectedValues" }] : []));
         this.currentSelection = [];
+        effect(() => {
+            const values = this.selectedValues();
+            if (!!values && values.length > 0) {
+                this.currentSelection = this._localBackupItems.filter(item => values.includes(item.value));
+                this.updateActiveItemsOnList();
+            }
+        });
     }
     clearSelection() {
         this.currentSelection = [];
         this._currentTerm = undefined;
         this.updateActiveItemsOnList();
+        this._updateFormControl([], true);
     }
     onSelectItem(item) {
-        const selectedItem = this.currentSelection.find(cs => cs.value === item.id);
+        // eslint-disable-next-line eqeqeq
+        const selectedItem = this.currentSelection.find(cs => cs.value == item.id);
         if (!!selectedItem) {
             this.onRemoveItem(selectedItem);
             return;
         }
         for (const localBackupItem of this._localBackupItems) {
             if ((localBackupItem.children?.length || 0) > 0) {
-                const child = localBackupItem.children?.find(c => c.value === item.id);
+                // eslint-disable-next-line eqeqeq
+                const child = localBackupItem.children?.find(c => c.value == item.id);
                 if (!!child) {
                     this.currentSelection.push(child);
                     break;
                 }
+                // eslint-disable-next-line eqeqeq
             }
-            else if (localBackupItem.value === item.id) {
+            else if (localBackupItem.value == item.id) {
                 this.currentSelection.push(localBackupItem);
                 break;
             }
         }
         this.updateActiveItemsOnList();
+        const currentSelectedIds = this.currentSelection.map(cs => cs.value);
         this.selectedItems.emit(this.currentSelection);
-        this.selectedIds.emit(this.currentSelection.map(cs => cs.value));
+        this.selectedIds.emit(currentSelectedIds);
+        this._updateFormControl(currentSelectedIds, true);
     }
     onRemoveItem(item) {
-        const idx = this.currentSelection.findIndex(cs => cs.value === item.value);
+        // eslint-disable-next-line eqeqeq
+        const idx = this.currentSelection.findIndex(cs => cs.value == item.value);
         this.currentSelection.splice(idx, 1);
         this.updateActiveItemsOnList();
+        this._updateFormControl(this.currentSelection.map(cs => cs.value), true);
+    }
+    _getValue() {
+        return this.currentSelection.map(item => item.value);
+    }
+    _updateValue(value) {
+        if (!Array.isArray(value)) {
+            this.currentSelection = [];
+            return;
+        }
+        this.currentSelection = this._localBackupItems.filter(item => value.includes(item.value));
+        this.updateActiveItemsOnList();
     }
     updateActiveItemsOnList() {
         for (const backupItem of this._localBackupItems) {
-            const selectedItem = this.currentSelection.find(cs => cs.value === backupItem.value);
-            backupItem.listItem.isActive = !!selectedItem;
+            // eslint-disable-next-line eqeqeq
+            const selectedItem = this.currentSelection.find(cs => cs.value == backupItem.value);
+            if (!!backupItem.listItem) {
+                backupItem.listItem.isActive = !!selectedItem;
+            }
         }
         this._setupLocalItems(this._localBackupItems);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SelectMultipleComponent, selector: "upd-select-multiple", outputs: { selectedItems: "selectedItems", selectedIds: "selectedIds" }, usesInheritance: true, ngImport: i0, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n<div class=\"dropdown\" [attr.id]=\"name()\">\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @for (sel of currentSelection; track sel) {\n                <span class=\"badge bg-primary select-multiple-value\">{{ sel.text }}\n                    <upd-button [isIcon]=\"true\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onRemoveItem(sel)\">\n                        <upd-icon tablerIcon=\"x\"></upd-icon>\n                    </upd-button></span>&nbsp;\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (currentSelection.length > 0) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon tablerIcon=\"x\"></upd-icon>\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon tablerIcon=\"chevron-down\"></upd-icon>\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n    <div #searchBox>\n        <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n            <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                <ng-template updInputPrepend>\n                    <upd-icon tablerIcon=\"search\"></upd-icon>\n                </ng-template>\n            </upd-input>\n        </div>\n    </div>\n    <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n        [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n    </upd-list>\n</div>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:24px}.select-loader-wrapper .select-loader{height:24px;width:24px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}.select-multiple-value{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "name", "maxLength", "isDisabled", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "isRequired", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout", "labelColSize"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SelectMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SelectMultipleComponent, isStandalone: false, selector: "upd-select-multiple", inputs: { selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItems: "selectedItems", selectedIds: "selectedIds" }, usesInheritance: true, ngImport: i0, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n<div class=\"dropdown\" [attr.id]=\"name()\">\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @for (sel of currentSelection; track sel) {\n                <span class=\"badge bg-primary select-multiple-value\">{{ sel.text }}\n                    <upd-button [isIcon]=\"true\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onRemoveItem(sel)\">\n                        <upd-icon tablerIcon=\"x\"></upd-icon>\n                    </upd-button></span>&nbsp;\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (currentSelection.length > 0) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon tablerIcon=\"x\"></upd-icon>\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon tablerIcon=\"chevron-down\"></upd-icon>\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n    <div #searchBox>\n        <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n            <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                <ng-template updInputPrepend>\n                    <upd-icon tablerIcon=\"search\"></upd-icon>\n                </ng-template>\n            </upd-input>\n        </div>\n    </div>\n    <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n        [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n    </upd-list>\n</div>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:16px}.select-loader-wrapper .select-loader{height:16px;width:16px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}.select-multiple-value{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "directive", type: i6.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectMultipleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SelectMultipleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-select-multiple', encapsulation: ViewEncapsulation.None, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n<div class=\"dropdown\" [attr.id]=\"name()\">\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @for (sel of currentSelection; track sel) {\n                <span class=\"badge bg-primary select-multiple-value\">{{ sel.text }}\n                    <upd-button [isIcon]=\"true\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onRemoveItem(sel)\">\n                        <upd-icon tablerIcon=\"x\"></upd-icon>\n                    </upd-button></span>&nbsp;\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (currentSelection.length > 0) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon tablerIcon=\"x\"></upd-icon>\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon tablerIcon=\"chevron-down\"></upd-icon>\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n    <div #searchBox>\n        <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n            <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                <ng-template updInputPrepend>\n                    <upd-icon tablerIcon=\"search\"></upd-icon>\n                </ng-template>\n            </upd-input>\n        </div>\n    </div>\n    <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n        [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n    </upd-list>\n</div>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:24px}.select-loader-wrapper .select-loader{height:24px;width:24px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}.select-multiple-value{display:inline-flex;align-items:center}\n"] }]
+            args: [{ standalone: false, selector: 'upd-select-multiple', encapsulation: ViewEncapsulation.None, template: "@if (!!labelText) {\n    @if (!!hintText || !!hintTemplate()) {\n        <div class=\"row g-2\">\n            <div class=\"col-auto\">\n                <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n            </div>\n            <div class=\"col-auto\">\n                <span class=\"form-help\" [updPopover]=\"hintText\" [updPopoverTemplate]=\"hintTemplate()\"\n                    [updPopoverActAsTooltip]=\"hintAsTooltip()\">\n                    ?\n                </span>\n            </div>\n        </div>\n    } @else {\n        <label [ngClass]=\"labelSizeClasses\">{{ labelText }}</label>\n    }\n}\n\n<div class=\"dropdown\" [attr.id]=\"name()\">\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\" [class.disabled]=\"isDisabled()\"\n            [class.pe-none]=\"isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\" (click)=\"openDropdown()\">\n            @for (sel of currentSelection; track sel) {\n                <span class=\"badge bg-primary select-multiple-value\">{{ sel.text }}\n                    <upd-button [isIcon]=\"true\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"onRemoveItem(sel)\">\n                        <upd-icon tablerIcon=\"x\"></upd-icon>\n                    </upd-button></span>&nbsp;\n            }\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            @if (currentSelection.length > 0) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon tablerIcon=\"x\"></upd-icon>\n                </upd-button>\n            }\n            @if (!isLoading) {\n                <upd-button [shouldIgnoreBtnClass]=\"true\" [isDisabled]=\"isDisabled()\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon tablerIcon=\"chevron-down\"></upd-icon>\n                </upd-button>\n            } @else {\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            }\n        </div>\n    </div>\n    <div #searchBox>\n        <div #searchBoxChild [style.visibility]=\"isDropdownOpen ? 'visible' : 'hidden'\" class=\"select-search-box\">\n            <upd-input [placeholder]=\"placeholder()\" [isInputGroupFlat]=\"true\" (valueChange)=\"search($event)\">\n                <ng-template updInputPrepend>\n                    <upd-icon tablerIcon=\"search\"></upd-icon>\n                </ng-template>\n            </upd-input>\n        </div>\n    </div>\n    <upd-list #list [items]=\"listItems\" [maxHeight]=\"dropdownMaxHeight() + 'px'\" (selectedItem)=\"onSelectItem($event)\"\n        [wrapperClasses]=\"dropdownClasses\" [isVisible]=\"isDropdownOpen\" [shouldOverflow]=\"true\" [shouldDisplayItemsCounter]=\"true\">\n    </upd-list>\n</div>\n", styles: [".select-dropdown-content{position:absolute!important;background-color:var(--upd-card-bg);z-index:1;border:var(--upd-card-border-width) solid var(--upd-card-border-color)!important;border-radius:var(--upd-card-border-radius)!important;box-shadow:0 1px 1px #0000002e}.select-dropdown-content-open{display:block!important}.select-loader-wrapper{height:16px}.select-loader-wrapper .select-loader{height:16px;width:16px}.select-search-box{position:absolute;z-index:1;padding:.5rem;margin-top:-1px;background:var(--upd-body-bg);border:var(--upd-border-width) var(--upd-border-style) var(--upd-border-color)}.remove-bottom-radius{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.remove-top-radius{border-top-left-radius:0!important;border-top-right-radius:0!important}.compact{padding:.25rem 2rem .25rem .75rem!important}.select-multiple-value{display:inline-flex;align-items:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectedItems: [{
                 type: Output
             }], selectedIds: [{
                 type: Output
-            }] } });
+            }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }] } });
 
 class UpdSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdSelectModule, declarations: [SelectComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: UpdSelectModule, declarations: [SelectComponent,
             SelectMultipleComponent], imports: [CommonModule,
             UpdCoreLayoutModule,
             UpdListModule,
@@ -382,7 +559,7 @@ class UpdSelectModule {
             UpdPopoverModule,
             TranslocoModule], exports: [SelectComponent,
             SelectMultipleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdSelectModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdSelectModule, imports: [CommonModule,
             UpdCoreLayoutModule,
             UpdListModule,
             UpdInputModule,
@@ -391,7 +568,7 @@ class UpdSelectModule {
             UpdPopoverModule,
             TranslocoModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [