ng-hub-ui-forms 22.7.0 → 22.9.0

package/README.md

@@ -92,7 +92,7 @@ mode — no Bootstrap dependency.
 
 ## 🎯 Features
 
-- **Fields** — `hub-input` (text/number/email/password/color/switch/checkbox/counter, with input-group addons & masks, projected in-field affixes, a built-in `clearable` button and debounced typeahead `search`; the `file` format is **deprecated** → use `hub-file-input`), `hub-otp-input`, `hub-textarea` (+ `hubAutoresize`), `hub-slider` (single / dual thumb, gradient fill), `hub-segmented` (segmented control field — single & multiple selection, horizontal & vertical, with label + validation), `hub-select` (dropdown format, grouping, typeahead, custom templates; the `buttons` / `checkbox` / `radio` formats are **deprecated** → use `hub-segmented`), `hub-datepicker` (single & range, keyboard nav, i18n), `hub-file-input` (drag & drop, clipboard paste, type/size limits, previews, optional upload progress).
+- **Fields** — `hub-input` (text/number/email/password/color/switch/checkbox/counter, with input-group addons & masks, projected in-field affixes, a built-in `clearable` button and debounced typeahead `search`; the `file` format is **deprecated** → use `hub-file-input`), `hub-otp-input`, `hub-textarea` (+ `hubAutoresize`), `hub-slider` (single / dual thumb, gradient fill), `hub-segmented` (segmented control field — single & multiple selection, horizontal & vertical, with label + validation), `hub-select` (dropdown format, grouping, client-side search via `searchable` **and** server-side async typeahead via a `typeahead` Subject, tag creation with `addTag`, custom templates; the `buttons` / `checkbox` / `radio` formats are **deprecated** → use `hub-segmented`), `hub-datepicker` (single & range, keyboard nav, i18n), `hub-file-input` (drag & drop, clipboard paste, type/size limits, previews, optional upload progress).
 - **Automatic error display** — bind a field and its control errors render below it; `hub-fieldset`, `form[hubForm]` and `hub-legend` surface group- and form-level (cross-field) errors the same way, with zero wiring.
 - **Containers** — `hub-fieldset` / `form[hubForm]` group fields and show their group errors; `hub-legend` renders an accessible legend.
 - **Configurable** — `provideHubForms({ … })` sets the invalid-feedback templates, datepicker locale/labels, file-input labels and more, app-wide or per instance.
@@ -189,7 +189,7 @@ Project a leading / trailing icon **inside** the field, emit a debounced term on
 <!-- object items -->
 <hub-select formControlName="country" label="Country" [items]="countries" bindLabel="name" bindValue="code" />
 
-<!-- multiple + typeahead -->
+<!-- multiple + client-side search (searchable filters the loaded items as you type) -->
 <hub-select formControlName="tags" label="Tags" [items]="tags" [multiple]="true" [searchable]="true" />
 
 <!-- grouped -->
@@ -208,6 +208,51 @@ Custom option/label templates are projected straight through to the engine:
 > Import `NgOptionTemplateDirective` / `NgLabelTemplateDirective` from `ng-hub-ui-forms`.
 > The dropdown panel renders to `body` by default (`appendTo`) so it is never clipped by cards or scroll containers.
 
+#### Async typeahead & tags
+
+`searchable` filters the already-loaded `items` client-side. For **server-side** loading, pass a `typeahead` Subject instead — the control stops filtering locally, pushes each term to the Subject, and you feed the results back through `[items]`:
+
+```html
+<hub-select
+	formControlName="city"
+	label="City"
+	[items]="cities()"
+	bindLabel="name"
+	bindValue="code"
+	[typeahead]="citySearch$"
+	[minTermLength]="2"
+	[loading]="loading()"
+/>
+
+<!-- tagging: create items from the typed term -->
+<hub-select formControlName="tags" [items]="tags" [multiple]="true" [addTag]="true" addTagText="Create tag" />
+```
+
+- `typeahead` (`Subject<string> | undefined`, default `undefined`) — receives every search-term change for async loading; pair with the `onSearch` output if you also need the matched items.
+- `minTermLength` (`number`, default `0`) — minimum term length before filtering (or the `typeahead` Subject) kicks in.
+- `addTag` (`boolean | (term: string) => any | Promise<any>`, default `false`) — `true` adds the term as-is; a function maps the term to a new item (sync or `Promise`).
+- `addTagText` (`string`, default `'Add item'`) — label of the "add item" row shown while typing.
+- `compareWith` (`(a, b) => boolean | undefined`, default `undefined`) — custom item/value equality (e.g. objects compared by id); when omitted, the engine's built-in comparison (including `bindValue` matching) applies.
+
+### Segmented
+
+```html
+<hub-segmented formControlName="view" label="View" [options]="viewOptions" />
+```
+
+A projected `hubSegmentedOption` template replaces each segment's content (icons, badges, rich markup) while the component keeps owning selection, keyboard navigation and ARIA. Context: the option (implicit), `selected` and `index`:
+
+```html
+<hub-segmented formControlName="view" label="View" [options]="viewOptions">
+	<ng-template hubSegmentedOption let-option let-selected="selected" let-index="index">
+		<hub-icon [name]="option.value" />
+		{{ option.label }}
+	</ng-template>
+</hub-segmented>
+```
+
+> Import `HubSegmentedOptionDirective` from `ng-hub-ui-forms`; the context is typed as `HubSegmentedOptionContext`.
+
 ### Datepicker
 
 ```html
@@ -407,7 +452,7 @@ hub-input {
 }
 ```
 
-**`hub-select` inside a modal** — the dropdown panel stacks through `--hub-select-dropdown-z-index` (default `calc(var(--hub-sys-zindex-modal, 1055) + 5)`), so a select opened inside a `HubModal` renders above the dialog instead of being clipped underneath it.
+**`hub-select` inside a modal** — the dropdown panel stacks through `--hub-select-dropdown-zindex` (default `calc(var(--hub-sys-zindex-modal, 1055) + 5)`; the previous `--hub-select-dropdown-z-index` spelling is deprecated but still honoured), so a select opened inside a `HubModal` renders above the dialog instead of being clipped underneath it.
 
 **`hub-segmented` variants & theming** — the `color` input tints the selected segment from the semantic families (`<hub-segmented color="primary">`); any of the `--hub-segmented-*` slots can be set directly, or in one call with the SCSS mixin:
 
@@ -438,6 +483,7 @@ import { HubSignalFieldControl, hubSignalErrorMessages } from 'ng-hub-ui-forms/s
 ## ♿ Accessibility
 
 - Labels are associated with their control (`for`/`id`); required fields are marked.
+- `required` — set inline or derived from `Validators.required`, with `formControlName` **or** a direct `[formControl]` binding — is reflected as `aria-required` on every field, including the select's combobox search input, the segmented `radiogroup` and each OTP cell.
 - Validation errors render in an `role="alert"` region tied to the field.
 - The select exposes correct combobox/listbox semantics; the datepicker is fully keyboard-navigable.
 

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, model, Directive, inject, TemplateRef, InjectionToken, makeEnvironmentProviders, ElementRef, ChangeDetectorRef, contentChild, contentChildren, signal, computed, effect, numberAttribute, booleanAttribute, output, DestroyRef, viewChild, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChildren, PLATFORM_ID, afterRenderEffect, afterNextRender, Injectable, Renderer2, NgZone, afterEveryRender, HostAttributeToken, linkedSignal, forwardRef, Injector, HostListener, LOCALE_ID, Pipe } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormControl, Validators, NgControl, ControlContainer, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormControl, FormControlName, FormControlDirective, Validators, NgControl, ControlContainer, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, Subject, takeUntil, tap, animationFrameScheduler, asapScheduler, fromEvent } from 'rxjs';
 import { NgTemplateOutlet, KeyValuePipe, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { auditTime, tap as tap$1, debounceTime, filter, map } from 'rxjs/operators';
@@ -220,7 +220,11 @@ class HubFormControl {
         if (this._control && !this._control.control && formControlName) {
             throw new Error(`Can't find form control with name ${formControlName}`);
         }
-        if (this._control?.control && formControlName) {
+        // Derive `required` from the reactive control's validators for BOTH reactive
+        // bindings (`formControlName` and `[formControl]`); template-driven bindings
+        // (ngModel) keep honoring the inline `required` input instead.
+        const isReactiveBinding = this._control instanceof FormControlName || this._control instanceof FormControlDirective;
+        if (this._control?.control && isReactiveBinding) {
             const control = this._control.control;
             if (isDefined$1(this.required())) {
                 console.warn(`You're using the inline property "required" with a reactive control. The property will be overwritten with the validators of the control.`);
@@ -1607,6 +1611,7 @@ class HubOtpInputComponent extends HubFieldControl {
 							[type]="secret() ? 'password' : 'text'"
 							[attr.inputmode]="mode() === 'numeric' ? 'numeric' : 'text'"
 							[attr.autocomplete]="index === 0 ? 'one-time-code' : 'off'"
+							[attr.aria-required]="required() ? 'true' : null"
 							[attr.aria-label]="ariaCellLabel() + ' ' + (index + 1)"
 							maxlength="1"
 							[value]="chars()[index]"
@@ -1680,6 +1685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 							[type]="secret() ? 'password' : 'text'"
 							[attr.inputmode]="mode() === 'numeric' ? 'numeric' : 'text'"
 							[attr.autocomplete]="index === 0 ? 'one-time-code' : 'off'"
+							[attr.aria-required]="required() ? 'true' : null"
 							[attr.aria-label]="ariaCellLabel() + ' ' + (index + 1)"
 							maxlength="1"
 							[value]="chars()[index]"
@@ -1971,6 +1977,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     }, template: "<div\n\tclass=\"hub-field hub-slider\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n\t[style.--hub-slider-percent]=\"percent()\"\n\t[style.--hub-slider-from]=\"lowerPercent()\"\n\t[style.--hub-slider-to]=\"upperPercent()\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\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}\n\n\t<div\n\t\tclass=\"hub-field__body hub-slider__range\"\n\t\t[class.hub-slider__range--dual]=\"range()\"\n\t\t[class.hub-slider__range--flush]=\"!showValue()\"\n\t>\n\t\t@if (range()) {\n\t\t\t<div class=\"hub-slider__rail\" aria-hidden=\"true\"></div>\n\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--lower\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"lower()\"\n\t\t\t\t(input)=\"setLower($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range start\"\n\t\t\t\t[attr.aria-valuetext]=\"lower()\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--upper\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"upper()\"\n\t\t\t\t(input)=\"setUpper($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range end\"\n\t\t\t\t[attr.aria-valuetext]=\"upper()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--lower\" aria-hidden=\"true\">{{ lower() }}</span>\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--upper\" aria-hidden=\"true\">{{ upper() }}</span>\n\t\t\t}\n\t\t} @else {\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"single()\"\n\t\t\t\t(input)=\"setValue($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-valuetext]=\"single()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble\" aria-hidden=\"true\">{{ single() }}</span>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (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 class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></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\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-slider{display:block}hub-slider.hidden-control{display:none!important}.hub-slider__range{position:relative;padding-top:var(--hub-slider-value-space)}.hub-slider__range--flush{--hub-slider-value-space: 0}.hub-slider__track{width:var(--hub-slider-track-width);height:var(--hub-slider-track-height);margin:0;appearance:none;-webkit-appearance:none;background:var(--hub-slider-track-fill) no-repeat,var(--hub-slider-track-bg);background-size:calc(var(--hub-slider-percent) * 1%) 100%,100% 100%;border-radius:var(--hub-slider-track-border-radius);cursor:pointer}.hub-slider__track:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-slider__track::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-thumb{width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-track{height:var(--hub-slider-track-height);background:transparent;border-radius:var(--hub-slider-track-border-radius)}.hub-slider__track:focus-visible{outline:0}.hub-slider__track:focus-visible::-webkit-slider-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__track:focus-visible::-moz-range-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__bubble{position:absolute;top:0;left:calc(var(--hub-slider-percent) * 1%);transform:translate(-50%);padding:.1rem .4rem;color:var(--hub-slider-tooltip-color);background:var(--hub-slider-tooltip-bg);font-size:var(--hub-ref-font-size-sm, .875rem);line-height:1.4;border-radius:var(--hub-slider-tooltip-border-radius);white-space:nowrap;pointer-events:none}.hub-slider__bubble--lower{left:calc(var(--hub-slider-from) * 1%)}.hub-slider__bubble--upper{left:calc(var(--hub-slider-to) * 1%)}.hub-slider__range--dual{min-height:calc(var(--hub-slider-value-space) + var(--hub-slider-thumb-height))}.hub-slider__range--dual .hub-slider__rail,.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{position:absolute;left:0;right:0;top:calc(var(--hub-slider-value-space) + var(--hub-slider-thumb-height) / 2)}.hub-slider__range--dual .hub-slider__rail{height:var(--hub-slider-track-height);transform:translateY(-50%);border-radius:var(--hub-slider-track-border-radius);background:var(--hub-slider-track-fill) no-repeat,var(--hub-slider-track-bg);background-size:calc((var(--hub-slider-to) - var(--hub-slider-from)) * 1%) 100%,100% 100%;background-position:calc(var(--hub-slider-from) / max(100 - var(--hub-slider-to) + var(--hub-slider-from),1) * 100%) center,0 0;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{width:100%;height:var(--hub-slider-thumb-height);margin:0;transform:translateY(-50%);background:transparent;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower::-webkit-slider-thumb,.hub-slider__range--dual .hub-slider__track--upper::-webkit-slider-thumb{pointer-events:auto;position:relative;z-index:2}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-thumb,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-thumb{pointer-events:auto}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-track,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-track{background:transparent}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
+/**
+ * Replaces the rendering of each option's content in `<hub-segmented>`.
+ *
+ * By default a segment renders its `label` as plain text; this template takes over the
+ * inside of the segment button (icons, badges, rich markup) while the component keeps
+ * owning selection state, keyboard navigation and ARIA semantics.
+ *
+ * @example
+ * ```html
+ * <hub-segmented formControlName="view" [options]="views">
+ *   <ng-template hubSegmentedOption let-option let-selected="selected">
+ *     <hub-icon [name]="option.value" [label]="option.label" />
+ *     {{ option.label }}
+ *   </ng-template>
+ * </hub-segmented>
+ * ```
+ */
+class HubSegmentedOptionDirective {
+    /** Template reference for the option content. */
+    template = inject(TemplateRef);
+    /**
+     * Narrows the context for the template type-checker.
+     *
+     * @param _directive - The directive instance.
+     * @param _context - The candidate context.
+     * @returns Always `true`; exists only to type `let-option` and the extra bindings.
+     */
+    static ngTemplateContextGuard(_directive, _context) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSegmentedOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: HubSegmentedOptionDirective, isStandalone: true, selector: "[hubSegmentedOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSegmentedOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hubSegmentedOption]'
+                }]
+        }] });
+
 /**
  * Resolves a user-supplied accent value to a paintable CSS colour for a `--hub-*-accent` slot.
  *
@@ -2018,6 +2064,9 @@ class HubSegmentedComponent extends HubFieldControl {
     /** The selectable options, in render order. */
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Optional `hubSegmentedOption` template replacing each option's content. */
+    optionTpt = contentChild(HubSegmentedOptionDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionTpt" }] : /* istanbul ignore next */ []));
     /** Visual density. */
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -2232,14 +2281,14 @@ class HubSegmentedComponent extends HubFieldControl {
         return Object.is(a, b);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSegmentedComponent, isStandalone: true, selector: "hub-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.hub-segmented-host": "true" } }, viewQueries: [{ propertyName: "_buttons", predicate: ["optionButton"], descendants: true, isSignal: true }, { propertyName: "_bar", first: true, predicate: ["segmentedBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\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}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[style.--hub-segmented-accent]=\"accentVar()\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (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 class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></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\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant]){--hub-segmented-selected-bg: var(--hub-segmented-accent);--hub-segmented-selected-color: oklch(from var(--hub-segmented-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.1", type: HubSegmentedComponent, isStandalone: true, selector: "hub-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.hub-segmented-host": "true" } }, queries: [{ propertyName: "optionTpt", first: true, predicate: HubSegmentedOptionDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_buttons", predicate: ["optionButton"], descendants: true, isSignal: true }, { propertyName: "_bar", first: true, predicate: ["segmentedBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\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}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[style.--hub-segmented-accent]=\"accentVar()\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-required]=\"multiple() ? null : required() ? 'true' : null\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t@if (optionTpt(); as tpt) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option), index }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (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 class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></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\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant]){--hub-segmented-selected-bg: var(--hub-segmented-accent);--hub-segmented-selected-color: oklch(from var(--hub-segmented-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSegmentedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-segmented', standalone: true, imports: [NgTemplateOutlet, KeyValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class.hub-segmented-host]': 'true'
-                    }, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\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}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[style.--hub-segmented-accent]=\"accentVar()\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (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 class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></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\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant]){--hub-segmented-selected-bg: var(--hub-segmented-accent);--hub-segmented-selected-color: oklch(from var(--hub-segmented-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], _buttons: [{ type: i0.ViewChildren, args: ['optionButton', { isSignal: true }] }], _bar: [{ type: i0.ViewChild, args: ['segmentedBar', { isSignal: true }] }] } });
+                    }, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\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}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[style.--hub-segmented-accent]=\"accentVar()\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-required]=\"multiple() ? null : required() ? 'true' : null\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t@if (optionTpt(); as tpt) {\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpt.template\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: option, selected: isSelected(option), index }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (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 class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></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\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant]){--hub-segmented-selected-bg: var(--hub-segmented-accent);--hub-segmented-selected-color: oklch(from var(--hub-segmented-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionTpt: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSegmentedOptionDirective), { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], _buttons: [{ type: i0.ViewChildren, args: ['optionButton', { isSignal: true }] }], _bar: [{ type: i0.ViewChild, args: ['segmentedBar', { isSignal: true }] }] } });
 
 /**
  * Marks a template as the legend content of a `<hub-fieldset>`.
@@ -5642,6 +5691,35 @@ class HubSelectComponent extends HubFieldControl {
      */
     appendTo = input('body', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+    /**
+     * Allows creating new items from the search term (dropdown format). `true`
+     * adds the term as-is; a function maps the term to a new item (sync or
+     * `Promise`).
+     */
+    addTag = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addTag" }] : /* istanbul ignore next */ []));
+    /** Label of the "add item" row shown while typing when `addTag` is enabled. */
+    addTagText = input('Add item', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "addTagText" }] : /* istanbul ignore next */ []));
+    /** Minimum search-term length before filtering (or `typeahead`) kicks in. */
+    minTermLength = input(0, { ...(ngDevMode ? { debugName: "minTermLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Subject that receives search-term changes for async/server-side loading
+     * (dropdown format). When provided, the control stops filtering client-side
+     * and pushes each term here; feed the results back through `items`.
+     *
+     * Note: the vendor also pushes `null` through the Subject when it clears the
+     * search box (e.g. right after a selection) — filter it out if you only
+     * expect strings.
+     */
+    typeahead = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeahead" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom equality between an item and the bound value (e.g. objects compared
+     * by id). When omitted, the vendor's built-in comparison applies.
+     */
+    compareWith = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
     /** Helper text shown below the control. */
     formText = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "formText" }] : /* istanbul ignore next */ []));
@@ -5651,6 +5729,15 @@ class HubSelectComponent extends HubFieldControl {
     /** Extra CSS classes applied to the host element. */
     classlist = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classlist" }] : /* istanbul ignore next */ []));
+    /** ARIA attributes forwarded to the vendor's combobox search input. */
+    a11yInputAttrs = computed(() => {
+        const attrs = {};
+        if (this.required()) {
+            attrs['aria-required'] = 'true';
+        }
+        return attrs;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "a11yInputAttrs" }] : /* istanbul ignore next */ []));
     /** Emits whenever the value changes. */
     valueChange = output();
     /** Emits when the control gains focus (dropdown format). */
@@ -5762,7 +5849,7 @@ class HubSelectComponent extends HubFieldControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSelectComponent, isStandalone: true, selector: "hub-select", inputs: { 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 }, 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 }, 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 }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, formTextType: { classPropertyName: "formTextType", publicName: "formTextType", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", 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: "_optionTpl", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_optgroupTpl", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_labelTpl", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_multiLabelTpl", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_headerTpl", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_footerTpl", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_notFoundTpl", first: true, predicate: NgNotFoundTemplateDirective, 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--invalid]=\"isInvalid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\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}\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<ng-select\n\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t(focus)=\"onFocus.emit($event)\"\n\t\t\t\t\t(blur)=\"onBlur.emit($event)\"\n\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t>\n\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, 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 (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, 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 (_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<ng-content></ng-content>\n\t\t\t\t</ng-select>\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 (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 class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></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__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-left: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-left:var(--hub-select-padding-x);padding-right: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-left: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{padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{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:0 0 .2rem .25rem}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-color:var(--hub-select-arrow-color) transparent transparent}.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)}.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-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-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-left:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-top-left-radius:var(--hub-select-border-radius);border-bottom-left-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-top-right-radius:var(--hub-select-border-radius);border-bottom-right-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-left: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: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSelectComponent, isStandalone: true, selector: "hub-select", inputs: { 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 }, 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 }, 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 }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, formTextType: { classPropertyName: "formTextType", publicName: "formTextType", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", 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: "_optionTpl", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_optgroupTpl", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_labelTpl", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_multiLabelTpl", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_headerTpl", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_footerTpl", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_notFoundTpl", first: true, predicate: NgNotFoundTemplateDirective, 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--invalid]=\"isInvalid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\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}\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<ng-select\n\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t(focus)=\"onFocus.emit($event)\"\n\t\t\t\t\t(blur)=\"onBlur.emit($event)\"\n\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t>\n\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, 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 (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, 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 (_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<ng-content></ng-content>\n\t\t\t\t</ng-select>\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 (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 class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></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__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-left: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-left:var(--hub-select-padding-x);padding-right: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-left: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{padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{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:0 0 .2rem .25rem}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-color:var(--hub-select-arrow-color) transparent transparent}.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)}.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-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-left:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-top-left-radius:var(--hub-select-border-radius);border-bottom-left-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-top-right-radius:var(--hub-select-border-radius);border-bottom-right-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-left: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: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSelectComponent, decorators: [{
             type: Component,
@@ -5782,8 +5869,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[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--invalid]=\"isInvalid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\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}\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<ng-select\n\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t(focus)=\"onFocus.emit($event)\"\n\t\t\t\t\t(blur)=\"onBlur.emit($event)\"\n\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t>\n\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, 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 (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, 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 (_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<ng-content></ng-content>\n\t\t\t\t</ng-select>\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 (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 class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></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__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-left: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-left:var(--hub-select-padding-x);padding-right: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-left: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{padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{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:0 0 .2rem .25rem}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-color:var(--hub-select-arrow-color) transparent transparent}.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)}.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-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-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-left:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-top-left-radius:var(--hub-select-border-radius);border-bottom-left-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-top-right-radius:var(--hub-select-border-radius);border-bottom-right-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-left: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: { _optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _optgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptgroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _labelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _multiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgMultiLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _notFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgNotFoundTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], 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 }] }], 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 }] }], 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 }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], 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"] }] } });
+                    }, 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--invalid]=\"isInvalid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\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}\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<ng-select\n\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t[placeholder]=\"placeholder()\"\n\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t(focus)=\"onFocus.emit($event)\"\n\t\t\t\t\t(blur)=\"onBlur.emit($event)\"\n\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t>\n\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, 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 (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-optgroup-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\" let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, item$, index, 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 (_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<ng-content></ng-content>\n\t\t\t\t</ng-select>\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 (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 class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></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__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-left: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-left:var(--hub-select-padding-x);padding-right: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-left: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{padding:.1rem .4rem}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-icon{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:0 0 .2rem .25rem}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-color:var(--hub-select-arrow-color) transparent transparent}.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)}.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-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-left:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-top-left-radius:var(--hub-select-border-radius);border-bottom-left-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-top-right-radius:var(--hub-select-border-radius);border-bottom-right-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-left: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: { _optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _optgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptgroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _labelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _multiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgMultiLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _notFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgNotFoundTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], 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 }] }], 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 }] }], 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 }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], 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.
@@ -7526,5 +7613,5 @@ const hubFormControlAdapter = {
  * Generated bundle index. Do not edit.
  */
 
-export { FormTextTypes, HUB_FILE_UPLOADER, HUB_FORMS_CONFIG, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFileDropzoneNoticeDirective, HubFileIconDirective, HubFileInputComponent, HubFilePreviewDirective, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubSafeUrlPipe, HubSegmentedComponent, HubSelectComponent, HubSelectFormats, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFileInputLabels, defaultHubFormsConfig, defaultInvalidFeedback, fileKey, formatFileSize, get, getActiveElement, getMinOrMaxValueFromValidator, hubAcceptedFiles, hubAreEqual, hubFormControlAdapter, hubMaxFileSize, hubMaxFiles, hubMaxTotalSize, hubMinFileSize, hubMinFiles, isDefined$1 as isDefined, isMaskActive, isString, joinButLast, matchesAccept, provideHubFileUploader, provideHubForms, runInZone, toFileArray, uuid };
+export { FormTextTypes, HUB_FILE_UPLOADER, HUB_FORMS_CONFIG, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFileDropzoneNoticeDirective, HubFileIconDirective, HubFileInputComponent, HubFilePreviewDirective, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubSafeUrlPipe, HubSegmentedComponent, HubSegmentedOptionDirective, HubSelectComponent, HubSelectFormats, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFileInputLabels, defaultHubFormsConfig, defaultInvalidFeedback, fileKey, formatFileSize, get, getActiveElement, getMinOrMaxValueFromValidator, hubAcceptedFiles, hubAreEqual, hubFormControlAdapter, hubMaxFileSize, hubMaxFiles, hubMaxTotalSize, hubMinFileSize, hubMinFiles, isDefined$1 as isDefined, isMaskActive, isString, joinButLast, matchesAccept, provideHubFileUploader, provideHubForms, runInZone, toFileArray, uuid };
 //# sourceMappingURL=ng-hub-ui-forms.mjs.map