ng-hub-ui-forms 22.40.0 → 22.41.0

package/README.md

@@ -38,6 +38,7 @@ This library is part of the **ng-hub-ui** ecosystem:
 - [**ng-hub-ui-portal**](https://www.npmjs.com/package/ng-hub-ui-portal)
 - [**ng-hub-ui-skeleton**](https://www.npmjs.com/package/ng-hub-ui-skeleton)
 - [**ng-hub-ui-sortable**](https://www.npmjs.com/package/ng-hub-ui-sortable)
+- [**ng-hub-ui-spreadsheet**](https://www.npmjs.com/package/ng-hub-ui-spreadsheet)
 - [**ng-hub-ui-stepper**](https://www.npmjs.com/package/ng-hub-ui-stepper)
 - [**ng-hub-ui-utils**](https://www.npmjs.com/package/ng-hub-ui-utils)
 

package/fesm2022/ng-hub-ui-forms.mjs

@@ -6823,6 +6823,33 @@ class HubSelectComponent extends HubFieldControl {
      * one sync away from disappearing. See {@link placeholder}.
      */
     _ngSelectConfig = inject(NgSelectConfig);
+    /**
+     * The engine behind the field, kept only so the list can be worked from outside.
+     *
+     * A select that something else opens — a grid cell that turns into an editor, a row that turns
+     * into a form — is created after the reader's click has already been spent, so there is no
+     * gesture left for it to answer. Without a way in, reaching the field takes one click and
+     * seeing the list takes another.
+     */
+    _engine = viewChild(NgSelectComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_engine" }] : /* istanbul ignore next */ []));
+    /**
+     * Honours {@link autoOpen} once, after the first render.
+     *
+     * Not an effect: the intent is a one-off at birth, and an effect would re-open the list every
+     * time the flag or the items changed underneath the reader.
+     */
+    _openOnArrival = afterNextRender(() => {
+        const term = this.initialSearchTerm();
+        // Before opening: the list then comes up already narrowed, instead of showing everything
+        // for a frame and then jumping.
+        if (term && this.searchable()) {
+            this.search(term);
+        }
+        if (this.autoOpen()) {
+            this.open();
+        }
+    });
     _labelTypes = HubLabelTypes;
     _selectFormats = HubSelectFormats;
     _value = signal(null, /* @ts-ignore */
@@ -7014,6 +7041,25 @@ class HubSelectComponent extends HubFieldControl {
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Whether the control is read-only. */
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Opens the list as soon as the field appears.
+     *
+     * For a field that something else has already opened for the reader: a spreadsheet cell that
+     * becomes an editor, a row that becomes a form. The click that got them there has been spent by
+     * the time the field exists, so without this reaching the field costs one click and seeing the
+     * list costs another. A field with nothing to offer opens all the same and says so, which is
+     * what it would do had the reader opened it by hand.
+     */
+    autoOpen = input(false, { ...(ngDevMode ? { debugName: "autoOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * A search term the field starts with.
+     *
+     * For the same case as {@link autoOpen}, one keystroke earlier: the character that opened the
+     * field belongs in its search box, or the reader has to type it a second time. Applied once,
+     * on arrival, and only when the field is searchable.
+     */
+    initialSearchTerm = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialSearchTerm" }] : /* istanbul ignore next */ []));
     /**
      * Text shown when no items match. Left undefined so the engine falls back to the app's
      * `NgSelectConfig`, which is where a translated build sets it once for every select.
@@ -7274,8 +7320,45 @@ class HubSelectComponent extends HubFieldControl {
         }
         return value ? [value] : [];
     }
+    /**
+     * Opens the list.
+     *
+     * Refused while the field is disabled, while it is already open, and while there is nothing to
+     * choose from, so calling it the moment the field appears is safe whatever state it is in.
+     */
+    open() {
+        this._engine()?.open();
+    }
+    /** Closes the list, keeping whatever was chosen. */
+    close() {
+        this._engine()?.close();
+    }
+    /** Puts the keyboard in the field without opening the list. */
+    focus() {
+        this._engine()?.focus();
+    }
+    /**
+     * Narrows the list by a term, as typing into the search box would.
+     *
+     * @param term - What to search for; an empty string clears the search.
+     */
+    search(term) {
+        const engine = this._engine();
+        if (!engine) {
+            return;
+        }
+        engine.filter(term);
+        // The box shows what it is filtering by. Its value is bound to the term, but that binding
+        // is refreshed on the engine's own schedule, and a term that arrives from outside can land
+        // after the refresh has been and gone — leaving a list narrowed by a word the reader
+        // cannot see, and a next keystroke that replaces it instead of continuing it.
+        const input = engine.searchInput()?.nativeElement;
+        if (input) {
+            input.value = term;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubSelectComponent, isStandalone: true, selector: "hub-select", inputs: { prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnAdd: { classPropertyName: "clearSearchOnAdd", publicName: "clearSearchOnAdd", isSignal: true, isRequired: false, transformFunction: null }, fixedPlaceholder: { classPropertyName: "fixedPlaceholder", publicName: "fixedPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, addTag: { classPropertyName: "addTag", publicName: "addTag", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", change: "change", onFocus: "onFocus", onBlur: "onBlur", onOpen: "onOpen", onClose: "onClose", onClear: "onClear", onSearch: "onSearch", onAdd: "onAdd", onRemove: "onRemove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { properties: { "class": "classlist()", "class.hub-select-host": "true" } }, queries: [{ propertyName: "_hubOptionTpl", first: true, predicate: HubSelectOptionDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngOptionTpl", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubOptgroupTpl", first: true, predicate: HubSelectOptgroupDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngOptgroupTpl", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLabelTpl", first: true, predicate: HubSelectLabelDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLabelTpl", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubMultiLabelTpl", first: true, predicate: HubSelectMultiLabelDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngMultiLabelTpl", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubHeaderTpl", first: true, predicate: HubSelectHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngHeaderTpl", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubFooterTpl", first: true, predicate: HubSelectFooterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngFooterTpl", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubNotFoundTpl", first: true, predicate: HubSelectNotFoundDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngNotFoundTpl", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubTypeToSearchTpl", first: true, predicate: HubSelectTypeToSearchDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngTypeToSearchTpl", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLoadingTextTpl", first: true, predicate: HubSelectLoadingTextDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLoadingTextTpl", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLoadingSpinnerTpl", first: true, predicate: HubSelectLoadingSpinnerDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLoadingSpinnerTpl", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubTagTpl", first: true, predicate: HubSelectTagDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngTagTpl", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubClearButtonTpl", first: true, predicate: HubSelectClearButtonDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngClearButtonTpl", first: true, predicate: NgClearButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_legacySuffixTpl", first: true, predicate: HubSelectSuffixDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_genericAppendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-select\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if ((label() || required()) && !showsFloatingLabel()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if ((label() || required()) && !showsFloatingLabel()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<!-- [disabled] is claimed by the NgModel below (alias of its isDisabled input), not by\n\t\t\t\t     ng-select \u2014 the engine's own `disabled` is a computed fed by setDisabledState.\n\t\t\t\t     Dropping [ngModel] here would silently un-wire the disabled state.\n\n\t\t\t\t     It is declared standalone because it is: the value this field holds travels\n\t\t\t\t     through the ControlValueAccessor on the host, and this inner binding only\n\t\t\t\t     drives the engine. Left undeclared, Angular saw an ngModel under a form it\n\t\t\t\t     cannot reach across the component boundary and warned (NG01354) once per\n\t\t\t\t     control \u2014 eight lines of console for an eight-field dialog. -->\n\t\t\t\t<!--\n\t\t\t\t\tThe control and its attached action are one field: the group is what makes\n\t\t\t\t\tthem share a line and a border, so a select with a button beside it does not\n\t\t\t\t\tread as two unrelated things that happen to be adjacent.\n\t\t\t\t-->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__group\"\n\t\t\t\t\t[class.hub-select__group--floating]=\"showsFloatingLabel()\"\n\t\t\t\t\t[class.hub-select__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t\t\t[class.hub-select__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t[class.hub-select__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t>\n\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--prepend\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe floating label hangs off a zero-width anchor placed exactly where the\n\t\t\t\t\t\tcontrol starts, not off the group. A group can open with an addon or an\n\t\t\t\t\t\tattached button, and a label pinned to the group's own leading edge would\n\t\t\t\t\t\tprint on top of it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t\t<span class=\"hub-select__label-anchor\">\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-select__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t<ng-select\n\t\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t\t[searchFn]=\"$any(searchFn())\"\n\t\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t\t[clearSearchOnAdd]=\"$any(clearSearchOnAdd())\"\n\t\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[placeholder]=\"placeholder() ?? _ngSelectConfig.placeholder\"\n\t\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t(change)=\"change.emit($event)\"\n\t\t\t\t\t\t(focus)=\"handleControlFocus($event)\"\n\t\t\t\t\t\t(blur)=\"handleControlBlur($event)\"\n\t\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-option-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-optgroup-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_typeToSearchTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-typetosearch-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingTextTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingSpinnerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingspinner-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_tagTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_clearButtonTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-clearbutton-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</ng-select>\n\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--append\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe action goes last, after any append addon, mirroring where hub-input puts\n\t\t\t\t\t\tits password toggle: addons label the field, the action acts on it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--append\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__group{display:flex;align-items:stretch;min-width:0}.hub-select__group>.hub-select__control,.hub-select__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-select__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-select-padding-x, var(--hub-input-padding-x));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-select-border-width, var(--hub-input-border-width)) solid var(--hub-select-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));font-size:var(--hub-select-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-select__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-select__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-select-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-select__attached.hub-select__attached>*{padding-block:0;padding-inline:var(--hub-select-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-select-min-height, auto);border:var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-select__attached.hub-select__attached>*:hover,.hub-select__attached.hub-select__attached>*:focus-visible{z-index:1}.hub-select__attached.hub-select__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-select__attached.hub-select__attached--prepend>*{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-select__attached.hub-select__attached--append>*{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached>hub-input,.hub-select__attached.hub-select__attached>hub-select,.hub-select__attached.hub-select__attached>hub-textarea,.hub-select__attached.hub-select__attached>hub-datepicker,.hub-select__attached.hub-select__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--prepend>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__attached.hub-select__attached--append>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--append>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached--append>hub-input:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-textarea:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-select__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-select__attached)>button,:where(.hub-select__attached)>a,:where(.hub-select__attached)>[role=button],:where(.hub-select__attached)>[role=link],:where(.hub-select__attached)>[tabindex]{background:var(--hub-select-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-select-group-action-color, var(--hub-input-group-action-color))}.hub-select__group--has-prepend .hub-select__control,.hub-select__group--has-prepend .hub-field__control,.hub-select__group--has-prepend .hub-select__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group--has-append .hub-select__control,.hub-select__group--has-append .hub-field__control,.hub-select__group--has-append .hub-select__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group>.hub-select__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-select__group>.hub-select__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-inline-start:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-inline-start:var(--hub-select-padding-x);padding-inline-end:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-inline-start:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{order:0;padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{order:var(--hub-select-value-remove-order, 1);padding:.1rem .4rem;cursor:pointer}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon:hover{opacity:.7}.hub-select__control.ng-select.ng-select-multiple .ng-input{padding-block:0 .2rem;padding-inline:.25rem 0}.hub-select__control.ng-select .ng-arrow-wrapper{padding-inline:var(--hub-select-arrow-gap)}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:var(--hub-select-arrow-size) var(--hub-select-arrow-size) calc(var(--hub-select-arrow-size) / 2);border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-width:0 var(--hub-select-arrow-size) var(--hub-select-arrow-size);border-color:transparent transparent var(--hub-select-arrow-color)}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.hub-select__group--floating .hub-select__label-anchor{position:relative;z-index:1002;flex:0 0 0;width:0;align-self:stretch}.hub-select__group--floating .hub-select__label--floating{font-size:var(--hub-select-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-select-padding-x);margin:0;color:var(--hub-select-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);white-space:nowrap;pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-select__group--floating .hub-select__label--floating{transform-origin:100% 0}.hub-select__group--floating .hub-select__label--floating{transition:color .1s ease-in-out,transform .1s ease-in-out}.hub-select__group--floating .hub-select__control.ng-select .ng-select-container,.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container{height:auto;min-height:calc(var(--hub-select-min-height) + var(--hub-field-floating-inset))}.hub-select__group--floating .hub-select__control.ng-select .ng-value-container{padding-block-start:var(--hub-field-floating-inset)}.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:calc(50% + var(--hub-field-floating-inset) / 2)}.hub-select__group--floating:not(.hub-select__group--raised) .ng-placeholder{visibility:hidden}.hub-select__group--floating.hub-select__group--raised .hub-select__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));color:var(--hub-field-floating-raised-color)}.ng-dropdown-panel{background:var(--hub-select-dropdown-bg);border:var(--hub-select-border-width) solid var(--hub-select-dropdown-border-color);border-radius:var(--hub-select-dropdown-border-radius);box-shadow:var(--hub-select-dropdown-box-shadow)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-option-color);background:transparent}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--hub-select-option-marked-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:var(--hub-select-option-selected-color);background:var(--hub-select-option-selected-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{opacity:var(--hub-form-disabled-opacity)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{margin-inline-end:.25em}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-optgroup-color);font-weight:var(--hub-ref-font-weight-medium, 500)}.hub-select__control .ng-dropdown-panel,.ng-dropdown-panel.hub-select__control{z-index:var(--hub-select-dropdown-zindex, var(--hub-select-dropdown-z-index))}.hub-select__buttons{display:inline-flex;flex-wrap:wrap}.hub-select__buttons--vertical{flex-direction:column;align-items:stretch}.hub-select__button{position:relative;padding:var(--hub-select-button-padding-y) var(--hub-select-button-padding-x);color:var(--hub-select-button-color);background:var(--hub-select-button-bg);border:var(--hub-select-border-width) solid var(--hub-select-button-border-color);border-radius:0;font-size:var(--hub-select-font-size);cursor:pointer;transition:var(--hub-form-transition)}.hub-select__button:not(:first-child){margin-inline-start:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-inline-start:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubSelectComponent, isStandalone: true, selector: "hub-select", inputs: { prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, clearSearchOnAdd: { classPropertyName: "clearSearchOnAdd", publicName: "clearSearchOnAdd", isSignal: true, isRequired: false, transformFunction: null }, fixedPlaceholder: { classPropertyName: "fixedPlaceholder", publicName: "fixedPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoOpen: { classPropertyName: "autoOpen", publicName: "autoOpen", isSignal: true, isRequired: false, transformFunction: null }, initialSearchTerm: { classPropertyName: "initialSearchTerm", publicName: "initialSearchTerm", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, addTag: { classPropertyName: "addTag", publicName: "addTag", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", change: "change", onFocus: "onFocus", onBlur: "onBlur", onOpen: "onOpen", onClose: "onClose", onClear: "onClear", onSearch: "onSearch", onAdd: "onAdd", onRemove: "onRemove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { properties: { "class": "classlist()", "class.hub-select-host": "true" } }, queries: [{ propertyName: "_hubOptionTpl", first: true, predicate: HubSelectOptionDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngOptionTpl", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubOptgroupTpl", first: true, predicate: HubSelectOptgroupDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngOptgroupTpl", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLabelTpl", first: true, predicate: HubSelectLabelDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLabelTpl", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubMultiLabelTpl", first: true, predicate: HubSelectMultiLabelDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngMultiLabelTpl", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubHeaderTpl", first: true, predicate: HubSelectHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngHeaderTpl", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubFooterTpl", first: true, predicate: HubSelectFooterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngFooterTpl", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubNotFoundTpl", first: true, predicate: HubSelectNotFoundDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngNotFoundTpl", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubTypeToSearchTpl", first: true, predicate: HubSelectTypeToSearchDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngTypeToSearchTpl", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLoadingTextTpl", first: true, predicate: HubSelectLoadingTextDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLoadingTextTpl", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLoadingSpinnerTpl", first: true, predicate: HubSelectLoadingSpinnerDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLoadingSpinnerTpl", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubTagTpl", first: true, predicate: HubSelectTagDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngTagTpl", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubClearButtonTpl", first: true, predicate: HubSelectClearButtonDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngClearButtonTpl", first: true, predicate: NgClearButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_legacySuffixTpl", first: true, predicate: HubSelectSuffixDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_genericAppendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "_engine", first: true, predicate: NgSelectComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-select\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if ((label() || required()) && !showsFloatingLabel()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if ((label() || required()) && !showsFloatingLabel()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<!-- [disabled] is claimed by the NgModel below (alias of its isDisabled input), not by\n\t\t\t\t     ng-select \u2014 the engine's own `disabled` is a computed fed by setDisabledState.\n\t\t\t\t     Dropping [ngModel] here would silently un-wire the disabled state.\n\n\t\t\t\t     It is declared standalone because it is: the value this field holds travels\n\t\t\t\t     through the ControlValueAccessor on the host, and this inner binding only\n\t\t\t\t     drives the engine. Left undeclared, Angular saw an ngModel under a form it\n\t\t\t\t     cannot reach across the component boundary and warned (NG01354) once per\n\t\t\t\t     control \u2014 eight lines of console for an eight-field dialog. -->\n\t\t\t\t<!--\n\t\t\t\t\tThe control and its attached action are one field: the group is what makes\n\t\t\t\t\tthem share a line and a border, so a select with a button beside it does not\n\t\t\t\t\tread as two unrelated things that happen to be adjacent.\n\t\t\t\t-->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__group\"\n\t\t\t\t\t[class.hub-select__group--floating]=\"showsFloatingLabel()\"\n\t\t\t\t\t[class.hub-select__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t\t\t[class.hub-select__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t[class.hub-select__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t>\n\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--prepend\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe floating label hangs off a zero-width anchor placed exactly where the\n\t\t\t\t\t\tcontrol starts, not off the group. A group can open with an addon or an\n\t\t\t\t\t\tattached button, and a label pinned to the group's own leading edge would\n\t\t\t\t\t\tprint on top of it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t\t<span class=\"hub-select__label-anchor\">\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-select__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t<ng-select\n\t\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t\t[searchFn]=\"$any(searchFn())\"\n\t\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t\t[clearSearchOnAdd]=\"$any(clearSearchOnAdd())\"\n\t\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[placeholder]=\"placeholder() ?? _ngSelectConfig.placeholder\"\n\t\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t(change)=\"change.emit($event)\"\n\t\t\t\t\t\t(focus)=\"handleControlFocus($event)\"\n\t\t\t\t\t\t(blur)=\"handleControlBlur($event)\"\n\t\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-option-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-optgroup-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_typeToSearchTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-typetosearch-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingTextTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingSpinnerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingspinner-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_tagTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_clearButtonTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-clearbutton-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</ng-select>\n\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--append\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe action goes last, after any append addon, mirroring where hub-input puts\n\t\t\t\t\t\tits password toggle: addons label the field, the action acts on it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--append\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__group{display:flex;align-items:stretch;min-width:0}.hub-select__group>.hub-select__control,.hub-select__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-select__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-select-padding-x, var(--hub-input-padding-x));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-select-border-width, var(--hub-input-border-width)) solid var(--hub-select-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));font-size:var(--hub-select-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-select__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-select__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-select-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-select__attached.hub-select__attached>*{padding-block:0;padding-inline:var(--hub-select-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-select-min-height, auto);border:var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-select__attached.hub-select__attached>*:hover,.hub-select__attached.hub-select__attached>*:focus-visible{z-index:1}.hub-select__attached.hub-select__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-select__attached.hub-select__attached--prepend>*{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-select__attached.hub-select__attached--append>*{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached>hub-input,.hub-select__attached.hub-select__attached>hub-select,.hub-select__attached.hub-select__attached>hub-textarea,.hub-select__attached.hub-select__attached>hub-datepicker,.hub-select__attached.hub-select__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--prepend>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__attached.hub-select__attached--append>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--append>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached--append>hub-input:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-textarea:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-select__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-select__attached)>button,:where(.hub-select__attached)>a,:where(.hub-select__attached)>[role=button],:where(.hub-select__attached)>[role=link],:where(.hub-select__attached)>[tabindex]{background:var(--hub-select-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-select-group-action-color, var(--hub-input-group-action-color))}.hub-select__group--has-prepend .hub-select__control,.hub-select__group--has-prepend .hub-field__control,.hub-select__group--has-prepend .hub-select__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group--has-append .hub-select__control,.hub-select__group--has-append .hub-field__control,.hub-select__group--has-append .hub-select__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group>.hub-select__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-select__group>.hub-select__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-inline-start:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-inline-start:var(--hub-select-padding-x);padding-inline-end:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-inline-start:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{order:0;padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{order:var(--hub-select-value-remove-order, 1);padding:.1rem .4rem;cursor:pointer}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon:hover{opacity:.7}.hub-select__control.ng-select.ng-select-multiple .ng-input{padding-block:0 .2rem;padding-inline:.25rem 0}.hub-select__control.ng-select .ng-arrow-wrapper{padding-inline:var(--hub-select-arrow-gap)}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:var(--hub-select-arrow-size) var(--hub-select-arrow-size) calc(var(--hub-select-arrow-size) / 2);border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-width:0 var(--hub-select-arrow-size) var(--hub-select-arrow-size);border-color:transparent transparent var(--hub-select-arrow-color)}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.hub-select__group--floating .hub-select__label-anchor{position:relative;z-index:1002;flex:0 0 0;width:0;align-self:stretch}.hub-select__group--floating .hub-select__label--floating{font-size:var(--hub-select-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-select-padding-x);margin:0;color:var(--hub-select-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);white-space:nowrap;pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-select__group--floating .hub-select__label--floating{transform-origin:100% 0}.hub-select__group--floating .hub-select__label--floating{transition:color .1s ease-in-out,transform .1s ease-in-out}.hub-select__group--floating .hub-select__control.ng-select .ng-select-container,.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container{height:auto;min-height:calc(var(--hub-select-min-height) + var(--hub-field-floating-inset))}.hub-select__group--floating .hub-select__control.ng-select .ng-value-container{padding-block-start:var(--hub-field-floating-inset)}.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:calc(50% + var(--hub-field-floating-inset) / 2)}.hub-select__group--floating:not(.hub-select__group--raised) .ng-placeholder{visibility:hidden}.hub-select__group--floating.hub-select__group--raised .hub-select__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));color:var(--hub-field-floating-raised-color)}.ng-dropdown-panel{background:var(--hub-select-dropdown-bg);border:var(--hub-select-border-width) solid var(--hub-select-dropdown-border-color);border-radius:var(--hub-select-dropdown-border-radius);box-shadow:var(--hub-select-dropdown-box-shadow)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-option-color);background:transparent}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--hub-select-option-marked-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:var(--hub-select-option-selected-color);background:var(--hub-select-option-selected-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{opacity:var(--hub-form-disabled-opacity)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{margin-inline-end:.25em}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-optgroup-color);font-weight:var(--hub-ref-font-weight-medium, 500)}.hub-select__control .ng-dropdown-panel,.ng-dropdown-panel.hub-select__control{z-index:var(--hub-select-dropdown-zindex, var(--hub-select-dropdown-z-index))}.hub-select__buttons{display:inline-flex;flex-wrap:wrap}.hub-select__buttons--vertical{flex-direction:column;align-items:stretch}.hub-select__button{position:relative;padding:var(--hub-select-button-padding-y) var(--hub-select-button-padding-x);color:var(--hub-select-button-color);background:var(--hub-select-button-bg);border:var(--hub-select-border-width) solid var(--hub-select-button-border-color);border-radius:0;font-size:var(--hub-select-font-size);cursor:pointer;transition:var(--hub-form-transition)}.hub-select__button:not(:first-child){margin-inline-start:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-inline-start:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectComponent, decorators: [{
             type: Component,
@@ -7301,7 +7384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[class]': 'classlist()',
                         '[class.hub-select-host]': 'true'
                     }, template: "<div\n\tclass=\"hub-field hub-select\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if ((label() || required()) && !showsFloatingLabel()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if ((label() || required()) && !showsFloatingLabel()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<!-- [disabled] is claimed by the NgModel below (alias of its isDisabled input), not by\n\t\t\t\t     ng-select \u2014 the engine's own `disabled` is a computed fed by setDisabledState.\n\t\t\t\t     Dropping [ngModel] here would silently un-wire the disabled state.\n\n\t\t\t\t     It is declared standalone because it is: the value this field holds travels\n\t\t\t\t     through the ControlValueAccessor on the host, and this inner binding only\n\t\t\t\t     drives the engine. Left undeclared, Angular saw an ngModel under a form it\n\t\t\t\t     cannot reach across the component boundary and warned (NG01354) once per\n\t\t\t\t     control \u2014 eight lines of console for an eight-field dialog. -->\n\t\t\t\t<!--\n\t\t\t\t\tThe control and its attached action are one field: the group is what makes\n\t\t\t\t\tthem share a line and a border, so a select with a button beside it does not\n\t\t\t\t\tread as two unrelated things that happen to be adjacent.\n\t\t\t\t-->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__group\"\n\t\t\t\t\t[class.hub-select__group--floating]=\"showsFloatingLabel()\"\n\t\t\t\t\t[class.hub-select__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t\t\t[class.hub-select__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t[class.hub-select__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t>\n\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--prepend\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe floating label hangs off a zero-width anchor placed exactly where the\n\t\t\t\t\t\tcontrol starts, not off the group. A group can open with an addon or an\n\t\t\t\t\t\tattached button, and a label pinned to the group's own leading edge would\n\t\t\t\t\t\tprint on top of it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t\t<span class=\"hub-select__label-anchor\">\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-select__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t<ng-select\n\t\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t\t[searchFn]=\"$any(searchFn())\"\n\t\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t\t[clearSearchOnAdd]=\"$any(clearSearchOnAdd())\"\n\t\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[placeholder]=\"placeholder() ?? _ngSelectConfig.placeholder\"\n\t\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t(change)=\"change.emit($event)\"\n\t\t\t\t\t\t(focus)=\"handleControlFocus($event)\"\n\t\t\t\t\t\t(blur)=\"handleControlBlur($event)\"\n\t\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-option-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-optgroup-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_typeToSearchTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-typetosearch-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingTextTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingSpinnerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingspinner-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_tagTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_clearButtonTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-clearbutton-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</ng-select>\n\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--append\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe action goes last, after any append addon, mirroring where hub-input puts\n\t\t\t\t\t\tits password toggle: addons label the field, the action acts on it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--append\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__group{display:flex;align-items:stretch;min-width:0}.hub-select__group>.hub-select__control,.hub-select__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-select__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-select-padding-x, var(--hub-input-padding-x));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-select-border-width, var(--hub-input-border-width)) solid var(--hub-select-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));font-size:var(--hub-select-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-select__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-select__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-select-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-select__attached.hub-select__attached>*{padding-block:0;padding-inline:var(--hub-select-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-select-min-height, auto);border:var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-select__attached.hub-select__attached>*:hover,.hub-select__attached.hub-select__attached>*:focus-visible{z-index:1}.hub-select__attached.hub-select__attached>*:not(:hover):not(:focus-visible){border-color:var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color))}.hub-select__attached.hub-select__attached--prepend>*{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-select__attached.hub-select__attached--append>*{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached>hub-input,.hub-select__attached.hub-select__attached>hub-select,.hub-select__attached.hub-select__attached>hub-textarea,.hub-select__attached.hub-select__attached>hub-datepicker,.hub-select__attached.hub-select__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--prepend>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__attached.hub-select__attached--append>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--append>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached--append>hub-input:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-textarea:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-select__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-select__attached)>button,:where(.hub-select__attached)>a,:where(.hub-select__attached)>[role=button],:where(.hub-select__attached)>[role=link],:where(.hub-select__attached)>[tabindex]{background:var(--hub-select-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-select-group-action-color, var(--hub-input-group-action-color))}.hub-select__group--has-prepend .hub-select__control,.hub-select__group--has-prepend .hub-field__control,.hub-select__group--has-prepend .hub-select__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group--has-append .hub-select__control,.hub-select__group--has-append .hub-field__control,.hub-select__group--has-append .hub-select__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group>.hub-select__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-select__group>.hub-select__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-inline-start:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-inline-start:var(--hub-select-padding-x);padding-inline-end:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-inline-start:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{order:0;padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{order:var(--hub-select-value-remove-order, 1);padding:.1rem .4rem;cursor:pointer}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon:hover{opacity:.7}.hub-select__control.ng-select.ng-select-multiple .ng-input{padding-block:0 .2rem;padding-inline:.25rem 0}.hub-select__control.ng-select .ng-arrow-wrapper{padding-inline:var(--hub-select-arrow-gap)}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:var(--hub-select-arrow-size) var(--hub-select-arrow-size) calc(var(--hub-select-arrow-size) / 2);border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-width:0 var(--hub-select-arrow-size) var(--hub-select-arrow-size);border-color:transparent transparent var(--hub-select-arrow-color)}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.hub-select__group--floating .hub-select__label-anchor{position:relative;z-index:1002;flex:0 0 0;width:0;align-self:stretch}.hub-select__group--floating .hub-select__label--floating{font-size:var(--hub-select-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-select-padding-x);margin:0;color:var(--hub-select-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);white-space:nowrap;pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-select__group--floating .hub-select__label--floating{transform-origin:100% 0}.hub-select__group--floating .hub-select__label--floating{transition:color .1s ease-in-out,transform .1s ease-in-out}.hub-select__group--floating .hub-select__control.ng-select .ng-select-container,.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container{height:auto;min-height:calc(var(--hub-select-min-height) + var(--hub-field-floating-inset))}.hub-select__group--floating .hub-select__control.ng-select .ng-value-container{padding-block-start:var(--hub-field-floating-inset)}.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:calc(50% + var(--hub-field-floating-inset) / 2)}.hub-select__group--floating:not(.hub-select__group--raised) .ng-placeholder{visibility:hidden}.hub-select__group--floating.hub-select__group--raised .hub-select__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));color:var(--hub-field-floating-raised-color)}.ng-dropdown-panel{background:var(--hub-select-dropdown-bg);border:var(--hub-select-border-width) solid var(--hub-select-dropdown-border-color);border-radius:var(--hub-select-dropdown-border-radius);box-shadow:var(--hub-select-dropdown-box-shadow)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-option-color);background:transparent}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background:var(--hub-select-option-marked-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:var(--hub-select-option-selected-color);background:var(--hub-select-option-selected-bg)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{opacity:var(--hub-form-disabled-opacity)}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{margin-inline-end:.25em}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{padding:var(--hub-select-option-padding-y) var(--hub-select-option-padding-x);color:var(--hub-select-optgroup-color);font-weight:var(--hub-ref-font-weight-medium, 500)}.hub-select__control .ng-dropdown-panel,.ng-dropdown-panel.hub-select__control{z-index:var(--hub-select-dropdown-zindex, var(--hub-select-dropdown-z-index))}.hub-select__buttons{display:inline-flex;flex-wrap:wrap}.hub-select__buttons--vertical{flex-direction:column;align-items:stretch}.hub-select__button{position:relative;padding:var(--hub-select-button-padding-y) var(--hub-select-button-padding-x);color:var(--hub-select-button-color);background:var(--hub-select-button-bg);border:var(--hub-select-border-width) solid var(--hub-select-button-border-color);border-radius:0;font-size:var(--hub-select-font-size);cursor:pointer;transition:var(--hub-form-transition)}.hub-select__button:not(:first-child){margin-inline-start:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-inline-start:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"] }]
-        }], propDecorators: { _hubOptionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectOptionDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngOptionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubOptgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectOptgroupDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngOptgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptgroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLabelDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubMultiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectMultiLabelDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngMultiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgMultiLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubHeaderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectHeaderDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngHeaderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubFooterTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectFooterDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngFooterTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubNotFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectNotFoundDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngNotFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgNotFoundTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubTypeToSearchTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectTypeToSearchDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngTypeToSearchTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTypeToSearchTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLoadingTextTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLoadingTextDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLoadingTextTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLoadingTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLoadingSpinnerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLoadingSpinnerDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLoadingSpinnerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLoadingSpinnerTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubTagTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectTagDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngTagTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubClearButtonTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectClearButtonDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngClearButtonTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgClearButtonTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _legacySuffixTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectSuffixDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _genericAppendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], clearSearchOnAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnAdd", required: false }] }], fixedPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedPlaceholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], addTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTag", required: false }] }], addTagText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTagText", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], change: [{ type: i0.Output, args: ["change"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onAdd: [{ type: i0.Output, args: ["onAdd"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], scroll: [{ type: i0.Output, args: ["scroll"] }], scrollToEnd: [{ type: i0.Output, args: ["scrollToEnd"] }] } });
+        }], propDecorators: { _engine: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgSelectComponent), { isSignal: true }] }], _hubOptionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectOptionDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngOptionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubOptgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectOptgroupDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngOptgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptgroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLabelDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubMultiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectMultiLabelDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngMultiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgMultiLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubHeaderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectHeaderDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngHeaderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubFooterTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectFooterDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngFooterTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubNotFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectNotFoundDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngNotFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgNotFoundTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubTypeToSearchTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectTypeToSearchDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngTypeToSearchTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTypeToSearchTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLoadingTextTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLoadingTextDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLoadingTextTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLoadingTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLoadingSpinnerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLoadingSpinnerDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLoadingSpinnerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLoadingSpinnerTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubTagTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectTagDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngTagTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubClearButtonTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectClearButtonDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngClearButtonTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgClearButtonTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _legacySuffixTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectSuffixDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _genericAppendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], clearSearchOnAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnAdd", required: false }] }], fixedPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedPlaceholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autoOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOpen", required: false }] }], initialSearchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSearchTerm", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], addTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTag", required: false }] }], addTagText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTagText", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], change: [{ type: i0.Output, args: ["change"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onAdd: [{ type: i0.Output, args: ["onAdd"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], scroll: [{ type: i0.Output, args: ["scroll"] }], scrollToEnd: [{ type: i0.Output, args: ["scrollToEnd"] }] } });
 
 /**
  * Minimal native-`Date` helpers for the calendar. Keeps the library free of a date dependency.
@@ -11840,8 +11923,14 @@ const hubFormControlAdapter = {
             ref.setInput('items', (config.options ?? []).map((option) => ({ ...option })));
             ref.setInput('bindLabel', 'label');
             ref.setInput('bindValue', 'value');
-            ref.setInput('clearable', false);
-            ref.setInput('searchable', false);
+            ref.setInput('clearable', config.clearable ?? false);
+            ref.setInput('searchable', config.searchable ?? false);
+            if (config.autoOpen) {
+                ref.setInput('autoOpen', true);
+            }
+            if (config.searchTerm) {
+                ref.setInput('initialSearchTerm', config.searchTerm);
+            }
             if (config.placeholder) {
                 ref.setInput('placeholder', config.placeholder);
             }