@updevs/components 1.0.0-alpha.6 → 1.0.0-alpha.60

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

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, inject, Renderer2, NgZone, RendererStyleFlags2, ElementRef, Directive, HostBinding, ViewChild, Input, Output, Component, ViewEncapsulation, NgModule } from '@angular/core';
-import { BaseComponent, DomEventsService, PositioningService, UpdCoreLayoutModule } from '@updevs/sdk/layout';
+import { viewChild, ElementRef, output, input, computed, inject, Renderer2, NgZone, Injector, effect, afterNextRender, RendererStyleFlags2, HostBinding, Directive, EventEmitter, Output, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { DomEventsService, PositioningService, UpdCoreLayoutModule } from '@updevs/sdk/layout';
 import { Tools } from '@updevs/sdk/core';
-import { SearchRequestModel } from '@updevs/sdk/stores';
+import { ColumnSizeHelper } from '@updevs/components';
+import { BaseControl } from '@updevs/components/form-controls/abstractions';
 import { Subject, tap, debounceTime } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -14,81 +15,144 @@ import * as i4 from '@updevs/icons';
 import { UpdIconsModule } from '@updevs/icons';
 import * as i5 from '@updevs/components/button';
 import { UpdButtonModule } from '@updevs/components/button';
-import { TranslocoModule } from '@ngneat/transloco';
+import * as i6 from '@updevs/components/popover';
+import { UpdPopoverModule } from '@updevs/components/popover';
+import { TranslocoModule } from '@jsverse/transloco';
+
+class Defaults {
+    static { this.dropdownMaxHeight = 300; }
+    static { this.typeaheadDebounce = 200; }
+    static { this.shouldAutoSearch = true; }
+    static { this.shouldCloseOnOutsideClick = true; }
+    static { this.layout = 'vertical'; }
+}
 
 var Utils = Tools.Utils;
-class BaseSelectComponent extends BaseComponent {
+class BaseSelectComponent extends BaseControl {
+    get wrapperClasses() {
+        return this.hostWrapperClasses();
+    }
+    get isDropdownOpen() {
+        return this._isDropdownOpen;
+    }
+    set isDropdownOpen(value) {
+        this._isDropdownOpen = value;
+        this.dropdownOpenStatusChange.emit(value);
+        if (value) {
+            this.dropdownClasses += ' select-dropdown-content-open';
+        }
+        else {
+            this.dropdownClasses = this.dropdownClasses.replace(' select-dropdown-content-open', '');
+        }
+    }
+    get labelSizeClasses() {
+        if (this.layout() !== 'horizontal') {
+            return 'form-label';
+        }
+        return ColumnSizeHelper.getClasses('col-form-label', ColumnSizeHelper.getSizeClasses(this.labelColSize(), 3));
+    }
     constructor() {
-        super(...arguments);
-        this.wrapperClasses = '';
+        super();
+        this.componentBox = viewChild('componentBox', { read: ElementRef });
+        this.searchBox = viewChild('searchBox', { read: ElementRef });
+        this.searchBoxChild = viewChild('searchBoxChild', { read: ElementRef });
+        this.list = viewChild('list', { read: ElementRef });
+        this.dropdownOpenStatusChange = output();
         /**
-         * Placeholder.
+         * Select items.
+         * If provided, the select will be considered static.
          */
-        this.placeholder = '';
+        this.items = input();
+        /**
+         * Store used to load/filter the items.
+         */
+        this.store = input();
+        /**
+         * Observable used to load/filter the items.
+         */
+        this.observable = input();
+        /**
+         * Name of the property in the object that represents the ID/key of the option.
+         * **Note:** used only for remote data.
+         */
+        this.itemKey = input();
+        /**
+         * Name of the property in the object that represents the value/description of the option.
+         * **Note:** used only for remote data.
+         */
+        this.itemValue = input();
         /**
          * Maximum height of the dropdown.
          */
-        this.dropdownMaxHeight = 300;
-        this.typeaheadDebounce = 200;
-        this.shouldAutoSearch = true;
-        this.shouldCloseOnOutsideClick = true;
-        this.dropdownOpenStatusChange = new EventEmitter();
+        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);
+        /**
+         * 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();
+        this.layoutClasses = computed(() => this.layout() === 'horizontal' ? ['col', 'align-self-center'] : []);
         this.isLoading = false;
         this.localItems = [];
         this.listItems = [];
         this.dropdownClasses = 'select-dropdown-content remove-top-radius';
         this._localBackupItems = [];
-        this.isStaticList = false;
+        this.hasExternalList = false;
         this._isDropdownOpen = false;
+        this.hostWrapperClasses = computed(() => this.layout() === 'horizontal' ? 'row' : '');
         this.searchInputSubject = new Subject();
         this.renderer = inject(Renderer2);
         this.ngZone = inject(NgZone);
         this.domEventsService = inject(DomEventsService);
         this.positioningService = inject(PositioningService);
-    }
-    get isDropdownOpen() {
-        return this._isDropdownOpen;
-    }
-    set isDropdownOpen(value) {
-        this._isDropdownOpen = value;
-        this.dropdownOpenStatusChange.emit(value);
-        if (value) {
-            this.dropdownClasses += ' select-dropdown-content-open';
-        }
-        else {
-            this.dropdownClasses = this.dropdownClasses.replace(' select-dropdown-content-open', '');
-        }
+        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();
+            }
+        });
     }
     ngOnInit() {
-        this.isStaticList = (this.items?.length || 0) > 0;
-        if (this.shouldAutoSearch) {
-            if (this.isStaticList) {
-                this._setupLocalItems(this.items);
+        this.hasExternalList = !this.observable() && !this.store();
+        if (this.shouldAutoSearch()) {
+            if (this.hasExternalList) {
+                this._setupLocalItems(this.items());
             }
             else {
                 this.searchRemote();
             }
         }
-        if (this.isStaticList) {
+        if (this.hasExternalList) {
             return;
         }
         const typeaheadSubscription = this.searchInputSubject
-            .pipe(tap(value => this._currentTerm = value), debounceTime(this.typeaheadDebounce))
+            .pipe(tap(value => this._currentTerm = value), debounceTime(this.typeaheadDebounce()))
             .subscribe(() => this.searchRemote());
         this.addSubscriptions(typeaheadSubscription);
     }
     openDropdown() {
         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);
+        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.isStaticList) {
+        if (this.hasExternalList) {
+            this._currentTerm = term;
             this.searchLocal();
         }
         else {
@@ -100,7 +164,7 @@ class BaseSelectComponent extends BaseComponent {
         this._localBackupItems = Utils.deepCopy(items);
         const tempItems = [];
         for (const item of this._localBackupItems) {
-            let listItem = this.getListItem(item);
+            const listItem = this.getListItem(item);
             item.listItem = Object.assign(listItem, {});
             tempItems.push(listItem);
         }
@@ -131,14 +195,16 @@ class BaseSelectComponent extends BaseComponent {
     }
     searchRemote() {
         this.isLoading = true;
-        const request = new SearchRequestModel({ description: this._currentTerm });
-        const observable = !!this.observable ? this.observable(request) : this.store.search(request);
+        const request = { description: this._currentTerm };
+        const observable = !!this.observable()
+            ? this.observable()(request, this.parentValue())
+            : this.store().search(request, this.parentValue());
         observable.subscribe(r => {
             const items = [];
             r.records.forEach(item => {
                 items.push({
-                    value: item[this.itemKey],
-                    text: item[this.itemValue],
+                    value: item[this.itemKey()],
+                    text: item[this.itemValue()],
                     objectData: item
                 });
             });
@@ -164,67 +230,40 @@ class BaseSelectComponent extends BaseComponent {
         return listItem;
     }
     updatePosition(result) {
-        const componentBox = this.componentBox.nativeElement.getBoundingClientRect();
-        const searchBoxChildElement = this.searchBoxChild?.nativeElement;
-        const ddElement = this.list.nativeElement;
+        const componentBox = this.componentBox().nativeElement.getBoundingClientRect();
+        const searchBoxChildElement = this.searchBoxChild()?.nativeElement;
+        const ddElement = this.list().nativeElement;
         this.renderer.setStyle(searchBoxChildElement, 'width', `${Math.abs(componentBox.width)}px`, RendererStyleFlags2.Important);
         this.renderer.setStyle(ddElement, 'top', `${result.y + searchBoxChildElement.scrollHeight}px`, RendererStyleFlags2.Important);
         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: "16.2.11", ngImport: i0, type: BaseSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: BaseSelectComponent, inputs: { items: "items", store: "store", observable: "observable", itemKey: "itemKey", itemValue: "itemValue", label: "label", placeholder: "placeholder", dropdownMaxHeight: "dropdownMaxHeight", typeaheadDebounce: "typeaheadDebounce", shouldAutoSearch: "shouldAutoSearch", shouldCloseOnOutsideClick: "shouldCloseOnOutsideClick" }, outputs: { dropdownOpenStatusChange: "dropdownOpenStatusChange" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "componentBox", first: true, predicate: ["componentBox"], descendants: true, read: ElementRef }, { propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true, read: ElementRef }, { propertyName: "searchBoxChild", first: true, predicate: ["searchBoxChild"], descendants: true, read: ElementRef }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0 }); }
+    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: { 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 } }, 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: "16.2.11", ngImport: i0, type: BaseSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseSelectComponent, decorators: [{
             type: Directive
-        }], propDecorators: { wrapperClasses: [{
+        }], ctorParameters: () => [], propDecorators: { wrapperClasses: [{
                 type: HostBinding,
                 args: ['class']
-            }], componentBox: [{
-                type: ViewChild,
-                args: ['componentBox', { read: ElementRef }]
-            }], searchBox: [{
-                type: ViewChild,
-                args: ['searchBox', { read: ElementRef }]
-            }], searchBoxChild: [{
-                type: ViewChild,
-                args: ['searchBoxChild', { read: ElementRef }]
-            }], list: [{
-                type: ViewChild,
-                args: ['list', { read: ElementRef }]
-            }], items: [{
-                type: Input
-            }], store: [{
-                type: Input
-            }], observable: [{
-                type: Input
-            }], itemKey: [{
-                type: Input
-            }], itemValue: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], dropdownMaxHeight: [{
-                type: Input
-            }], typeaheadDebounce: [{
-                type: Input
-            }], shouldAutoSearch: [{
-                type: Input
-            }], shouldCloseOnOutsideClick: [{
-                type: Input
-            }], dropdownOpenStatusChange: [{
-                type: Output
             }] } });
 
 class SelectComponent extends BaseSelectComponent {
+    set selected(item) {
+        this.currentSelection = item;
+    }
+    get canTruncateText() {
+        return this.shouldTruncateSelectedText === true || this.shouldTruncateSelectedText === undefined;
+    }
     constructor() {
-        super(...arguments);
+        super();
         /**
          * If true, it'll use the default style of the OS, no search capabilities.
          */
         this.useSystemStyle = false;
+        this.shouldShowClearButton = true;
+        this.shouldTruncateSelectedText = true;
+        this.isCompact = false;
         /**
          * Triggered when an item is selected.
          */
@@ -247,18 +286,31 @@ class SelectComponent extends BaseSelectComponent {
         }
         this.selectedItem.emit(this.currentSelection);
     }
+    onSystemSelect(event) {
+        // eslint-disable-next-line eqeqeq
+        this.currentSelection = this.localItems.find(c => c.value == event.target.value);
+        this.selectedItem.emit(this.currentSelection);
+    }
     clearSelection() {
         this.currentSelection = undefined;
         this._currentTerm = undefined;
-        this.search();
+        this.selectedItem.emit(undefined);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: SelectComponent, selector: "upd-select", inputs: { useSystemStyle: "useSystemStyle" }, outputs: { selectedItem: "selectedItem" }, usesInheritance: true, ngImport: i0, template: "<label *ngIf=\"!!label\" class=\"form-label\">{{label}}</label>\n\n<ng-container *ngIf=\"!useSystemStyle; else defaultOsTpl\">\n    <div class=\"dropdown\">\n        <div #componentBox class=\"input-group input-group-flat\">\n            <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n                <span *ngIf=\"!!currentSelection\">{{currentSelection.text}}</span>\n            </div>\n            <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n                <upd-button *ngIf=\"!!currentSelection\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon [model]=\"{heroIcon:'x-mark', heroIconType: 'outline', heroIconSize:'small'}\"></upd-icon>\n                </upd-button>\n                <upd-button *ngIf=\"!isLoading; else loadingIcon\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon [model]=\"{heroIcon:'chevron-down', heroIconType: 'outline', heroIconSize:'small'}\"></upd-icon>\n                </upd-button>\n                <ng-template #loadingIcon>\n                    <div class=\"select-loader-wrapper\">\n                        <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                    </div>\n                </ng-template>\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\" (click)=\"openDropdown()\" (valueChange)=\"search($event)\">\n                    <ng-template updInputPrepend>\n                        <upd-icon [model]=\"{heroIcon:'magnifying-glass'}\"></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</ng-container>\n\n<ng-template #defaultOsTpl>\n    <select class=\"form-select\" [attr.placeholder]=\"placeholder\">\n        <ng-container *ngFor=\"let item of localItems\">\n            <ng-container *ngIf=\"(item.children?.length || 0) > 0; else defaultTpl\">\n                <optgroup [label]=\"item.text\">\n                    <option *ngFor=\"let child of item.children\" [value]=\"child.value\">{{child.text}}</option>\n                </optgroup>\n            </ng-container>\n            <ng-template #defaultTpl>\n                <option [value]=\"item.value\">{{item.text}}</option>\n            </ng-template>\n        </ng-container>\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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight", "noRecordsFoundKey", "itemFoundKey", "itemsFoundKey"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "placeholder", "label", "mask", "maskConfig", "hint", "hintTemplate", "hintAsTooltip", "value", "size", "customClasses", "wrapperClasses", "name", "maxLength", "isDisabled", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "isRequired", "loaderPosition", "prependIconModel", "appendIconModel", "validationStatus", "isValidationStatusLight", "invalidStatusText"], outputs: ["valueChange"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "removeDefaultClasses", "customClasses", "tablerIcon", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["text", "model", "colorStyle", "brandColorStyle", "customClasses", "isActive", "isDisabled", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "shouldIgnoreBtnClass"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    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", shouldTruncateSelectedText: "shouldTruncateSelectedText", 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()\" [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                    <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\" [class.select-cursor-pointer]=\"!isDisabled()\">\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        [class.select-cursor-pointer]=\"!isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\"\n        (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}.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"], 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: "16.2.11", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-select', encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"!!label\" class=\"form-label\">{{label}}</label>\n\n<ng-container *ngIf=\"!useSystemStyle; else defaultOsTpl\">\n    <div class=\"dropdown\">\n        <div #componentBox class=\"input-group input-group-flat\">\n            <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n                <span *ngIf=\"!!currentSelection\">{{currentSelection.text}}</span>\n            </div>\n            <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n                <upd-button *ngIf=\"!!currentSelection\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"clearSelection()\"\n                    customClasses=\"link-secondary\">\n                    <upd-icon [model]=\"{heroIcon:'x-mark', heroIconType: 'outline', heroIconSize:'small'}\"></upd-icon>\n                </upd-button>\n                <upd-button *ngIf=\"!isLoading; else loadingIcon\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"openDropdown()\"\n                    customClasses=\"link-secondary ms-2\">\n                    <upd-icon [model]=\"{heroIcon:'chevron-down', heroIconType: 'outline', heroIconSize:'small'}\"></upd-icon>\n                </upd-button>\n                <ng-template #loadingIcon>\n                    <div class=\"select-loader-wrapper\">\n                        <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                    </div>\n                </ng-template>\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\" (click)=\"openDropdown()\" (valueChange)=\"search($event)\">\n                    <ng-template updInputPrepend>\n                        <upd-icon [model]=\"{heroIcon:'magnifying-glass'}\"></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</ng-container>\n\n<ng-template #defaultOsTpl>\n    <select class=\"form-select\" [attr.placeholder]=\"placeholder\">\n        <ng-container *ngFor=\"let item of localItems\">\n            <ng-container *ngIf=\"(item.children?.length || 0) > 0; else defaultTpl\">\n                <optgroup [label]=\"item.text\">\n                    <option *ngFor=\"let child of item.children\" [value]=\"child.value\">{{child.text}}</option>\n                </optgroup>\n            </ng-container>\n            <ng-template #defaultTpl>\n                <option [value]=\"item.value\">{{item.text}}</option>\n            </ng-template>\n        </ng-container>\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}\n"] }]
-        }], propDecorators: { useSystemStyle: [{
+            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()\" [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                    <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\" [class.select-cursor-pointer]=\"!isDisabled()\">\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        [class.select-cursor-pointer]=\"!isDisabled()\" [attr.disabled]=\"isDisabled() ? 'disabled' : undefined\"\n        (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}.select-cursor-default{cursor:default}.select-cursor-pointer{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { useSystemStyle: [{
+                type: Input
+            }], shouldShowClearButton: [{
+                type: Input
+            }], shouldTruncateSelectedText: [{
+                type: Input
+            }], isCompact: [{
+                type: Input
+            }], selected: [{
                 type: Input
             }], selectedItem: [{
                 type: Output
@@ -266,12 +318,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
 
 class SelectMultipleComponent extends BaseSelectComponent {
     constructor() {
-        super(...arguments);
+        super();
         /**
-         * Triggered when an item is selected.
+         * Returns the selected items.
+         * Triggered when items are selected.
          */
         this.selectedItems = new EventEmitter();
+        /**
+         * Returns the selected Ids.
+         * Triggered when items are selected.
+         */
+        this.selectedIds = new EventEmitter();
+        /**
+         * An array of primitive values to set the selection programmatically.
+         */
+        this.selectedValues = input();
         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 = [];
@@ -299,6 +368,7 @@ class SelectMultipleComponent extends BaseSelectComponent {
         }
         this.updateActiveItemsOnList();
         this.selectedItems.emit(this.currentSelection);
+        this.selectedIds.emit(this.currentSelection.map(cs => cs.value));
     }
     onRemoveItem(item) {
         const idx = this.currentSelection.findIndex(cs => cs.value === item.value);
@@ -308,40 +378,46 @@ class SelectMultipleComponent extends BaseSelectComponent {
     updateActiveItemsOnList() {
         for (const backupItem of this._localBackupItems) {
             const selectedItem = this.currentSelection.find(cs => cs.value === backupItem.value);
-            backupItem.listItem.isActive = !!selectedItem;
+            if (!!backupItem.listItem) {
+                backupItem.listItem.isActive = !!selectedItem;
+            }
         }
         this._setupLocalItems(this._localBackupItems);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: SelectMultipleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: SelectMultipleComponent, selector: "upd-select-multiple", outputs: { selectedItems: "selectedItems" }, usesInheritance: true, ngImport: i0, template: "<label *ngIf=\"!!label\" class=\"form-label\">{{label}}</label>\n\n<div class=\"dropdown\">\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            <ng-container *ngFor=\"let sel of currentSelection\">\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            </ng-container>\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            <upd-button *ngIf=\"currentSelection.length > 0\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"clearSelection()\"\n                customClasses=\"link-secondary\">\n                <upd-icon [model]=\"{heroIcon:'x-mark', heroIconType: 'outline', heroIconSize:'small'}\"></upd-icon>\n            </upd-button>\n            <upd-button *ngIf=\"!isLoading; else loadingIcon\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"openDropdown()\"\n                customClasses=\"link-secondary ms-2\">\n                <upd-icon [model]=\"{heroIcon:'chevron-down', heroIconType: 'outline', heroIconSize:'small'}\"></upd-icon>\n            </upd-button>\n            <ng-template #loadingIcon>\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            </ng-template>\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\" (click)=\"openDropdown()\" (valueChange)=\"search($event)\">\n                <ng-template updInputPrepend>\n                    <upd-icon [model]=\"{heroIcon:'magnifying-glass'}\"></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}.select-multiple-value{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ListComponent, selector: "upd-list", inputs: ["items", "shouldOverflow", "isFlush", "isVisible", "isHoverable", "shouldDisplayItemsCounter", "wrapperClasses", "maxHeight", "noRecordsFoundKey", "itemFoundKey", "itemsFoundKey"], outputs: ["checkboxChanged", "selectedItem"] }, { kind: "component", type: i3.InputComponent, selector: "upd-input", inputs: ["type", "placeholder", "label", "mask", "maskConfig", "hint", "hintTemplate", "hintAsTooltip", "value", "size", "customClasses", "wrapperClasses", "name", "maxLength", "isDisabled", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "isRequired", "loaderPosition", "prependIconModel", "appendIconModel", "validationStatus", "isValidationStatusLight", "invalidStatusText"], outputs: ["valueChange"] }, { kind: "directive", type: i3.InputPrependDirective, selector: "ng-template[updInputPrepend]" }, { kind: "component", type: i4.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "removeDefaultClasses", "customClasses", "tablerIcon", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i5.ButtonComponent, selector: "upd-button", inputs: ["text", "model", "colorStyle", "brandColorStyle", "customClasses", "isActive", "isDisabled", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "shouldIgnoreBtnClass"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    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", 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: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", "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"], 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: "16.2.11", ngImport: i0, type: SelectMultipleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SelectMultipleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-select-multiple', encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"!!label\" class=\"form-label\">{{label}}</label>\n\n<div class=\"dropdown\">\n    <div #componentBox class=\"input-group input-group-flat\">\n        <div class=\"form-control\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            <ng-container *ngFor=\"let sel of currentSelection\">\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            </ng-container>\n        </div>\n        <div class=\"input-group-text\" [class.remove-bottom-radius]=\"isDropdownOpen\">\n            <upd-button *ngIf=\"currentSelection.length > 0\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"clearSelection()\"\n                customClasses=\"link-secondary\">\n                <upd-icon [model]=\"{heroIcon:'x-mark', heroIconType: 'outline', heroIconSize:'small'}\"></upd-icon>\n            </upd-button>\n            <upd-button *ngIf=\"!isLoading; else loadingIcon\" [shouldIgnoreBtnClass]=\"true\" (clicked)=\"openDropdown()\"\n                customClasses=\"link-secondary ms-2\">\n                <upd-icon [model]=\"{heroIcon:'chevron-down', heroIconType: 'outline', heroIconSize:'small'}\"></upd-icon>\n            </upd-button>\n            <ng-template #loadingIcon>\n                <div class=\"select-loader-wrapper\">\n                    <div class=\"spinner-border spinner-border-sm text-muted select-loader\" role=\"status\"></div>\n                </div>\n            </ng-template>\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\" (click)=\"openDropdown()\" (valueChange)=\"search($event)\">\n                <ng-template updInputPrepend>\n                    <upd-icon [model]=\"{heroIcon:'magnifying-glass'}\"></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}.select-multiple-value{display:inline-flex;align-items:center}\n"] }]
-        }], propDecorators: { selectedItems: [{
+            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"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedItems: [{
+                type: Output
+            }], selectedIds: [{
                 type: Output
             }] } });
 
 class UpdSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UpdSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.11", ngImport: i0, type: UpdSelectModule, declarations: [SelectComponent,
+    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,
             SelectMultipleComponent], imports: [CommonModule,
             UpdCoreLayoutModule,
             UpdListModule,
             UpdInputModule,
             UpdIconsModule,
             UpdButtonModule,
+            UpdPopoverModule,
             TranslocoModule], exports: [SelectComponent,
             SelectMultipleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UpdSelectModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdSelectModule, imports: [CommonModule,
             UpdCoreLayoutModule,
             UpdListModule,
             UpdInputModule,
             UpdIconsModule,
             UpdButtonModule,
+            UpdPopoverModule,
             TranslocoModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UpdSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -351,6 +427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
                         UpdInputModule,
                         UpdIconsModule,
                         UpdButtonModule,
+                        UpdPopoverModule,
                         TranslocoModule
                     ],
                     declarations: [
@@ -368,5 +445,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SelectComponent, SelectMultipleComponent, UpdSelectModule };
+export { Defaults, SelectComponent, SelectMultipleComponent, UpdSelectModule };
 //# sourceMappingURL=updevs-components-form-controls-select.mjs.map