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

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

@@ -0,0 +1,600 @@
+import * as i0 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';
+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';
+import * as i2 from '@updevs/components/list';
+import { UpdListModule } from '@updevs/components/list';
+import * as i3 from '@updevs/components/form-controls/input';
+import { UpdInputModule } from '@updevs/components/form-controls/input';
+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 * 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 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();
+        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(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
+        /**
+         * Store used to load/filter the items.
+         */
+        this.store = input(...(ngDevMode ? [undefined, { debugName: "store" }] : []));
+        /**
+         * Observable used to load/filter the items.
+         */
+        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(...(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(...(ngDevMode ? [undefined, { debugName: "itemValue" }] : []));
+        /**
+         * Maximum height of the dropdown.
+         */
+        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 = signal([], ...(ngDevMode ? [{ debugName: "localItems" }] : []));
+        this.listItems = [];
+        this.dropdownClasses = 'select-dropdown-content remove-top-radius';
+        this._localBackupItems = [];
+        this.hasInternalList = false;
+        this._isDropdownOpen = false;
+        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.hasInternalList = !this.observable() && !this.store() && !this.parentDependentLoader();
+        if (this.shouldAutoSearch()) {
+            if (this.hasInternalList) {
+                this._setupLocalItems(this.items());
+            }
+            else {
+                this.searchExternal();
+            }
+        }
+        if (this.hasInternalList) {
+            return;
+        }
+        const typeaheadSubscription = this.searchInputSubject
+            .pipe(tap(value => this._currentTerm = value), debounceTime(this.typeaheadDebounce()))
+            .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);
+        }
+        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.hasInternalList) {
+            this._currentTerm = term;
+            this.searchLocal();
+        }
+        else {
+            this.searchInputSubject.next(term || '');
+        }
+    }
+    _setupLocalItems(items) {
+        const copiedItems = Utils.deepCopy(items);
+        this.localItems.set(copiedItems);
+        this._localBackupItems = Utils.deepCopy(items);
+        const tempItems = [];
+        for (const item of this._localBackupItems) {
+            const listItem = this.getListItem(item);
+            item.listItem = Object.assign(listItem, {});
+            tempItems.push(listItem);
+        }
+        this.listItems = [...tempItems];
+        this.isLoading = false;
+    }
+    searchLocal() {
+        if (!this._currentTerm) {
+            this.listItems = Utils.deepCopy(this._localBackupItems.map(li => li.listItem));
+            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);
+        }));
+    }
+    searchExternal() {
+        this.isLoading = true;
+        const request = { description: this._currentTerm };
+        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 => {
+                items.push({
+                    value: item[this.itemKey()],
+                    text: item[this.itemValue()],
+                    objectData: item
+                });
+            });
+            this._setupLocalItems(items);
+        });
+    }
+    getListItem(item) {
+        let listItem;
+        if (!!item.listItem) {
+            listItem = item.listItem;
+            listItem.id = item.value;
+            listItem.text = item.text;
+        }
+        else {
+            listItem = {
+                id: item.value,
+                text: item.text
+            };
+        }
+        if ((item.children?.length || 0) > 0) {
+            listItem.children = [...item.children].map(c => this.getListItem(c));
+        }
+        return listItem;
+    }
+    updatePosition(result) {
+        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: "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: "21.1.4", ngImport: i0, type: BaseSelectComponent, decorators: [{
+            type: Directive,
+            args: [{ standalone: false }]
+        }], ctorParameters: () => [], propDecorators: { wrapperClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], 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 {
+    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 = 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 = 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) {
+                // 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) {
+                selectedItem = localBackupItem;
+                break;
+            }
+        }
+        this.value.set(selectedItem?.value);
+        this.selectedItem.emit(selectedItem);
+        this._updateFormControl(selectedItem?.value, true);
+    }
+    search(term) {
+        const parentId = this.parentSelectedId();
+        const loader = this.parentDependentLoader();
+        if (!!parentId && !!loader) {
+            this.loadDependentData(parentId, loader, term);
+        }
+        else {
+            super.search(term);
+        }
+    }
+    clearSelection(isInternalCall = false) {
+        if (this.isDisabled() && !isInternalCall) {
+            return;
+        }
+        this._currentTerm = undefined;
+        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();
+    }
+    _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: "21.1.4", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            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() {
+        super();
+        /**
+         * 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(...(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) {
+        // 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) {
+                // 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) {
+                this.currentSelection.push(localBackupItem);
+                break;
+            }
+        }
+        this.updateActiveItemsOnList();
+        const currentSelectedIds = this.currentSelection.map(cs => cs.value);
+        this.selectedItems.emit(this.currentSelection);
+        this.selectedIds.emit(currentSelectedIds);
+        this._updateFormControl(currentSelectedIds, true);
+    }
+    onRemoveItem(item) {
+        // 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) {
+            // 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: "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: "21.1.4", ngImport: i0, type: SelectMultipleComponent, decorators: [{
+            type: Component,
+            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: "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,
+            UpdInputModule,
+            UpdIconsModule,
+            UpdButtonModule,
+            UpdPopoverModule,
+            TranslocoModule], exports: [SelectComponent,
+            SelectMultipleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdSelectModule, imports: [CommonModule,
+            UpdCoreLayoutModule,
+            UpdListModule,
+            UpdInputModule,
+            UpdIconsModule,
+            UpdButtonModule,
+            UpdPopoverModule,
+            TranslocoModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        UpdCoreLayoutModule,
+                        UpdListModule,
+                        UpdInputModule,
+                        UpdIconsModule,
+                        UpdButtonModule,
+                        UpdPopoverModule,
+                        TranslocoModule
+                    ],
+                    declarations: [
+                        SelectComponent,
+                        SelectMultipleComponent
+                    ],
+                    exports: [
+                        SelectComponent,
+                        SelectMultipleComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Defaults, SelectComponent, SelectMultipleComponent, UpdSelectModule };
+//# sourceMappingURL=updevs-components-form-controls-select.mjs.map