npm - ng-hub-ui-forms - Versions diffs - 22.33.2 → 22.34.0 - Mend

ng-hub-ui-forms 22.33.2 → 22.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +55 -3
package/fesm2022/ng-hub-ui-forms.mjs +365 -62
package/fesm2022/ng-hub-ui-forms.mjs.map +1 -1
package/package.json +7 -1
package/types/ng-hub-ui-forms.d.ts +265 -35

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

@@ -570,10 +570,11 @@ function uuid() {
 /**
  * Returns the active element within the given root, descending into shadow roots when needed.
  *
- * @param root - The document or shadow root to search. Defaults to `document`.
+ * @param root - The document or shadow root to search. Defaults to the global document when there
+ * is one; on a server render there is not, and nothing has focus there anyway.
  * @returns The deepest active element, or `null`.
  */
-function getActiveElement(root = document) {
+function getActiveElement(root = globalThis.document ?? null) {
     const activeEl = root?.activeElement;
     if (!activeEl) {
         return null;
@@ -1018,7 +1019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * the box and shares its border, so the two read as one field with an action on it.
  *
  * Declared as a template rather than plain projected content because a field's `<ng-content>`
- * is already spoken for — the select's carries `<ng-option>` through to its engine — so
+ * is already spoken for — the select's opens straight into the dropdown engine — so
  * anything projected plainly would land in the wrong place. Rendering from a template also
  * keeps the action after the control in the DOM, so tabbing reaches the field before the button
  * acting on it.
@@ -1059,8 +1060,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * content is always the outermost element on that side.
  *
  * Declared as a template rather than plain projected content because a field's `<ng-content>`
- * is already spoken for — the select's carries `<ng-option>` through to its engine, and the
- * input projects its in-field affixes — so anything projected plainly would land in the wrong
+ * is already spoken for — the select's opens straight into the dropdown engine, and the input
+ * projects its in-field affixes — so anything projected plainly would land in the wrong
  * place. Rendering from a template also fixes the DOM order, which is what keeps tabbing sane
  * around an attached button.
  *
@@ -2640,11 +2641,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 /**
  * Marks a template as the legend content of a `<hub-fieldset>`.
  *
+ * @deprecated Project a `<hub-legend>` element as a direct child of the fieldset instead. The slot
+ * existed only so a legend could carry markup, and `<hub-legend>` carries markup on its own —
+ * without an `ng-template`, without a second directive to import, and producing the same DOM the
+ * `legend` input produces, so the library has one answer to "how is a legend written". The slot
+ * keeps working until it is removed in **23.0.0**; a fieldset that still uses it renders exactly as
+ * before, so nothing breaks by doing nothing before then.
+ *
  * @example
  * ```html
+ * <!-- before -->
  * <hub-fieldset formGroupName="address">
  *   <ng-template hubLegend>Shipping address <span class="badge">required</span></ng-template>
  * </hub-fieldset>
+ *
+ * <!-- after -->
+ * <hub-fieldset formGroupName="address">
+ *   <hub-legend>Shipping address <span class="badge">required</span></hub-legend>
+ * </hub-fieldset>
  * ```
  */
 class HubLegendDirective {
@@ -2660,6 +2674,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }] });
+/**
+ * The legend of a `<hub-fieldset>` (or any grouped section), with optional required/invalid state
+ * styling.
+ *
+ * Project it as a direct child of the fieldset: it is lifted into the native `<legend>` element,
+ * which is also what `<hub-fieldset legend="…">` builds for you — so a text legend and a rich one
+ * are the same element with the same classes. It also stands alone as a section title.
+ *
+ * @example
+ * ```html
+ * <hub-fieldset [group]="form.controls.address">
+ *   <hub-legend [required]="true" [invalid]="form.controls.address.invalid">Shipping address</hub-legend>
+ * </hub-fieldset>
+ * ```
+ */
+class HubLegendComponent {
+    /** Whether to render the required indicator. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether to render the invalid state styling. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubLegendComponent, isStandalone: true, selector: "hub-legend", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.hub-legend-host": "true" } }, ngImport: i0, template: `<span class="hub-legend" [class.hub-legend--invalid]="invalid()">
+		<ng-content></ng-content>
+		@if (required()) {
+			<span class="hub-legend__required" aria-hidden="true">*</span>
+		}
+	</span>`, isInline: true, styles: [".hub-legend{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-form-legend-color, var(--hub-sys-text-primary, #212529));font-size:var(--hub-form-legend-font-size, var(--hub-ref-font-size-base, 1rem));font-weight:var(--hub-form-legend-font-weight, var(--hub-ref-font-weight-medium, 500))}.hub-legend--invalid{color:var(--hub-form-invalid-color)}.hub-legend__required{color:var(--hub-form-required-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubLegendComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'hub-legend', template: `<span class="hub-legend" [class.hub-legend--invalid]="invalid()">
+		<ng-content></ng-content>
+		@if (required()) {
+			<span class="hub-legend__required" aria-hidden="true">*</span>
+		}
+	</span>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class.hub-legend-host]': 'true' }, styles: [".hub-legend{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-form-legend-color, var(--hub-sys-text-primary, #212529));font-size:var(--hub-form-legend-font-size, var(--hub-ref-font-size-base, 1rem));font-weight:var(--hub-form-legend-font-weight, var(--hub-ref-font-weight-medium, 500))}.hub-legend--invalid{color:var(--hub-form-invalid-color)}.hub-legend__required{color:var(--hub-form-required-color)}\n"] }]
+        }], propDecorators: { required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
 /**
  * Groups related fields under a `<fieldset>`/`<legend>` and **automatically displays the
  * group-level (cross-field) validation errors** of the bound `FormGroup`/`FormArray`.
@@ -2676,6 +2728,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * parent container. Errors set on the group itself — e.g. by `hubAreEqual` — are rendered without
  * any extra wiring, mirroring how the field components show control-level errors.
  *
+ * ## The legend is always a `<hub-legend>`
+ *
+ * `legend="…"` is shorthand: it builds one for you. When the legend needs more than a string — a
+ * required marker, an icon, a badge — project the element yourself and it lands in the same place:
+ *
+ * ```html
+ * <fieldset hubFieldset [group]="form.controls.address">
+ *   <hub-legend [required]="true">Shipping address</hub-legend>
+ *   …
+ * </fieldset>
+ * ```
+ *
+ * The older `<ng-template hubLegend>` slot still works and is deprecated; see
+ * {@link HubLegendDirective}.
+ *
  * @example
  * ```html
  * <fieldset hubFieldset legend="Credentials" [group]="form.controls.credentials">
@@ -2692,26 +2759,42 @@ class HubFieldsetComponent extends HubGroupControl {
      * the appearance classes land on the element that actually is the fieldset in either form.
      */
     _isElementForm = inject(ElementRef).nativeElement.nodeName === 'HUB-FIELDSET';
-    /** Legend text. Ignored when a `hubLegend` template is projected. */
+    /**
+     * Legend text. Rendered inside a `<hub-legend>`, so a text legend and a projected one are the
+     * same element. Ignored when a `<hub-legend>` is projected, or a `hubLegend` template is.
+     */
     legend = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []));
     /** Extra CSS classes applied to the host element. */
     classlist = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classlist" }] : /* istanbul ignore next */ []));
-    /** Query for a projected `hubLegend` template. */
+    /**
+     * Query for a projected `hubLegend` template.
+     *
+     * @deprecated Project a `<hub-legend>` element instead — the slot exists only so the legend can
+     * carry markup, and `<hub-legend>` carries markup without an `ng-template` and without an extra
+     * import. Removed in 23.0.0.
+     */
     legendTmp = contentChild(HubLegendDirective, { ...(ngDevMode ? { debugName: "legendTmp" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    /**
+     * A `<hub-legend>` projected as a direct child, which is the way a legend that needs more than
+     * text is written. Queried rather than merely projected because the `<legend>` element must not
+     * be emitted at all when the group has no legend of any kind.
+     */
+    _projectedLegend = contentChild(HubLegendComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_projectedLegend" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubFieldsetComponent, isStandalone: true, selector: "hub-fieldset, fieldset[hubFieldset]", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classlist()", "class.hub-fieldset-host": "true", "class.hub-fieldset": "!_isElementForm", "class.hub-fieldset--invalid": "!_isElementForm && isInvalid" } }, queries: [{ propertyName: "legendTmp", first: true, predicate: HubLegendDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #body>\n\t@if (legend() || legendTmp()) {\n\t\t<legend class=\"hub-fieldset__legend\">\n\t\t\t@if (legendTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"legendTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ legend() }}\n\t\t\t}\n\t\t</legend>\n\t}\n\n\t<div class=\"hub-fieldset__content\">\n\t\t<ng-content></ng-content>\n\t</div>\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</ng-template>\n\n@if (_isElementForm) {\n\t<fieldset class=\"hub-fieldset\" [class.hub-fieldset--invalid]=\"isInvalid\">\n\t\t<ng-container [ngTemplateOutlet]=\"body\"></ng-container>\n\t</fieldset>\n} @else {\n\t<ng-container [ngTemplateOutlet]=\"body\"></ng-container>\n}\n", styles: ["hub-fieldset{display:block}hub-fieldset.hidden-control{display:none!important}.hub-fieldset{min-width:0;margin:0;padding:var(--hub-form-fieldset-padding-y, var(--hub-ref-space-3, 1rem)) var(--hub-form-fieldset-padding-x, var(--hub-ref-space-3, 1rem));background:var(--hub-form-fieldset-bg, transparent);border:var(--hub-form-fieldset-border-width, var(--hub-ref-border-width, 1px)) solid var(--hub-form-fieldset-border-color, var(--hub-sys-border-color-default, #dee2e6));border-radius:var(--hub-form-fieldset-border-radius, var(--hub-ref-radius-md, .375rem))}.hub-fieldset--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-fieldset__legend{width:auto;padding:0 var(--hub-form-legend-padding-x, var(--hub-ref-space-2, .5rem));margin:0;color:var(--hub-form-legend-color, var(--hub-sys-text-primary, #212529));font-size:var(--hub-form-legend-font-size, var(--hub-ref-font-size-base, 1rem));font-weight:var(--hub-form-legend-font-weight, var(--hub-ref-font-weight-medium, 500));float:none}.hub-fieldset__content{display:flex;flex-direction:column;gap:var(--hub-form-fieldset-gap-row, var(--hub-ref-space-3, 1rem))}\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.8", type: HubFieldsetComponent, isStandalone: true, selector: "hub-fieldset, fieldset[hubFieldset]", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classlist()", "class.hub-fieldset-host": "true", "class.hub-fieldset": "!_isElementForm", "class.hub-fieldset--invalid": "!_isElementForm && isInvalid" } }, queries: [{ propertyName: "legendTmp", first: true, predicate: HubLegendDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_projectedLegend", first: true, predicate: HubLegendComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #body>\n\t@if (legend() || legendTmp() || _projectedLegend()) {\n\t\t<legend class=\"hub-fieldset__legend\">\n\t\t\t<ng-content select=\"hub-legend\"></ng-content>\n\t\t\t@if (!_projectedLegend()) {\n\t\t\t\t@if (legendTmp(); as tpl) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n\t\t\t\t} @else {\n\t\t\t\t\t<hub-legend>{{ legend() }}</hub-legend>\n\t\t\t\t}\n\t\t\t}\n\t\t</legend>\n\t}\n\n\t<div class=\"hub-fieldset__content\">\n\t\t<ng-content></ng-content>\n\t</div>\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</ng-template>\n\n@if (_isElementForm) {\n\t<fieldset class=\"hub-fieldset\" [class.hub-fieldset--invalid]=\"isInvalid\">\n\t\t<ng-container [ngTemplateOutlet]=\"body\"></ng-container>\n\t</fieldset>\n} @else {\n\t<ng-container [ngTemplateOutlet]=\"body\"></ng-container>\n}\n", styles: ["hub-fieldset{display:block}hub-fieldset.hidden-control{display:none!important}.hub-fieldset{min-width:0;margin:0;padding:var(--hub-form-fieldset-padding-y, var(--hub-ref-space-3, 1rem)) var(--hub-form-fieldset-padding-x, var(--hub-ref-space-3, 1rem));background:var(--hub-form-fieldset-bg, transparent);border:var(--hub-form-fieldset-border-width, var(--hub-ref-border-width, 1px)) solid var(--hub-form-fieldset-border-color, var(--hub-sys-border-color-default, #dee2e6));border-radius:var(--hub-form-fieldset-border-radius, var(--hub-ref-radius-md, .375rem))}.hub-fieldset--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-fieldset__legend{width:auto;padding:0 var(--hub-form-legend-padding-x, var(--hub-ref-space-2, .5rem));margin:0;color:var(--hub-form-legend-color, var(--hub-sys-text-primary, #212529));font-size:var(--hub-form-legend-font-size, var(--hub-ref-font-size-base, 1rem));font-weight:var(--hub-form-legend-font-weight, var(--hub-ref-font-weight-medium, 500));float:none}.hub-fieldset__content{display:flex;flex-direction:column;gap:var(--hub-form-fieldset-gap-row, var(--hub-ref-space-3, 1rem))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HubLegendComponent, selector: "hub-legend", inputs: ["required", "invalid"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubFieldsetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-fieldset, fieldset[hubFieldset]', imports: [NgTemplateOutlet, KeyValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'hub-fieldset, fieldset[hubFieldset]', imports: [NgTemplateOutlet, KeyValuePipe, HubLegendComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classlist()',
                         '[class.hub-fieldset-host]': 'true',
                         '[class.hub-fieldset]': '!_isElementForm',
                         '[class.hub-fieldset--invalid]': '!_isElementForm && isInvalid'
-                    }, template: "<ng-template #body>\n\t@if (legend() || legendTmp()) {\n\t\t<legend class=\"hub-fieldset__legend\">\n\t\t\t@if (legendTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"legendTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ legend() }}\n\t\t\t}\n\t\t</legend>\n\t}\n\n\t<div class=\"hub-fieldset__content\">\n\t\t<ng-content></ng-content>\n\t</div>\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</ng-template>\n\n@if (_isElementForm) {\n\t<fieldset class=\"hub-fieldset\" [class.hub-fieldset--invalid]=\"isInvalid\">\n\t\t<ng-container [ngTemplateOutlet]=\"body\"></ng-container>\n\t</fieldset>\n} @else {\n\t<ng-container [ngTemplateOutlet]=\"body\"></ng-container>\n}\n", styles: ["hub-fieldset{display:block}hub-fieldset.hidden-control{display:none!important}.hub-fieldset{min-width:0;margin:0;padding:var(--hub-form-fieldset-padding-y, var(--hub-ref-space-3, 1rem)) var(--hub-form-fieldset-padding-x, var(--hub-ref-space-3, 1rem));background:var(--hub-form-fieldset-bg, transparent);border:var(--hub-form-fieldset-border-width, var(--hub-ref-border-width, 1px)) solid var(--hub-form-fieldset-border-color, var(--hub-sys-border-color-default, #dee2e6));border-radius:var(--hub-form-fieldset-border-radius, var(--hub-ref-radius-md, .375rem))}.hub-fieldset--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-fieldset__legend{width:auto;padding:0 var(--hub-form-legend-padding-x, var(--hub-ref-space-2, .5rem));margin:0;color:var(--hub-form-legend-color, var(--hub-sys-text-primary, #212529));font-size:var(--hub-form-legend-font-size, var(--hub-ref-font-size-base, 1rem));font-weight:var(--hub-form-legend-font-weight, var(--hub-ref-font-weight-medium, 500));float:none}.hub-fieldset__content{display:flex;flex-direction:column;gap:var(--hub-form-fieldset-gap-row, var(--hub-ref-space-3, 1rem))}\n"] }]
-        }], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], legendTmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubLegendDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
+                    }, template: "<ng-template #body>\n\t@if (legend() || legendTmp() || _projectedLegend()) {\n\t\t<legend class=\"hub-fieldset__legend\">\n\t\t\t<ng-content select=\"hub-legend\"></ng-content>\n\t\t\t@if (!_projectedLegend()) {\n\t\t\t\t@if (legendTmp(); as tpl) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n\t\t\t\t} @else {\n\t\t\t\t\t<hub-legend>{{ legend() }}</hub-legend>\n\t\t\t\t}\n\t\t\t}\n\t\t</legend>\n\t}\n\n\t<div class=\"hub-fieldset__content\">\n\t\t<ng-content></ng-content>\n\t</div>\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</ng-template>\n\n@if (_isElementForm) {\n\t<fieldset class=\"hub-fieldset\" [class.hub-fieldset--invalid]=\"isInvalid\">\n\t\t<ng-container [ngTemplateOutlet]=\"body\"></ng-container>\n\t</fieldset>\n} @else {\n\t<ng-container [ngTemplateOutlet]=\"body\"></ng-container>\n}\n", styles: ["hub-fieldset{display:block}hub-fieldset.hidden-control{display:none!important}.hub-fieldset{min-width:0;margin:0;padding:var(--hub-form-fieldset-padding-y, var(--hub-ref-space-3, 1rem)) var(--hub-form-fieldset-padding-x, var(--hub-ref-space-3, 1rem));background:var(--hub-form-fieldset-bg, transparent);border:var(--hub-form-fieldset-border-width, var(--hub-ref-border-width, 1px)) solid var(--hub-form-fieldset-border-color, var(--hub-sys-border-color-default, #dee2e6));border-radius:var(--hub-form-fieldset-border-radius, var(--hub-ref-radius-md, .375rem))}.hub-fieldset--invalid{border-color:var(--hub-form-invalid-border-color)}.hub-fieldset__legend{width:auto;padding:0 var(--hub-form-legend-padding-x, var(--hub-ref-space-2, .5rem));margin:0;color:var(--hub-form-legend-color, var(--hub-sys-text-primary, #212529));font-size:var(--hub-form-legend-font-size, var(--hub-ref-font-size-base, 1rem));font-weight:var(--hub-form-legend-font-weight, var(--hub-ref-font-weight-medium, 500));float:none}.hub-fieldset__content{display:flex;flex-direction:column;gap:var(--hub-form-fieldset-gap-row, var(--hub-ref-space-3, 1rem))}\n"] }]
+        }], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], legendTmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubLegendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _projectedLegend: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubLegendComponent), { isSignal: true }] }] } });
 /**
  * Applied to a reactive `<form [formGroup]>`, **automatically displays the form-level validation
@@ -2757,44 +2840,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     }, template: "<ng-content></ng-content>\n\n@if (isInvalid) {\n\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t<ul>\n\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t<li>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t></ng-container>\n\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</li>\n\t\t\t}\n\t\t</ul>\n\t</div>\n}\n" }]
         }] });
-/**
- * Presentational legend for a `<hub-fieldset>` (or any grouped section), with optional
- * required/invalid state styling.
- *
- * Use it inside a `hubLegend` template, or standalone as a section title.
- *
- * @example
- * ```html
- * <hub-fieldset [group]="form.controls.address">
- *   <ng-template hubLegend>
- *     <hub-legend [required]="true" [invalid]="form.controls.address.invalid">Shipping address</hub-legend>
- *   </ng-template>
- * </hub-fieldset>
- * ```
- */
-class HubLegendComponent {
-    /** Whether to render the required indicator. */
-    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Whether to render the invalid state styling. */
-    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubLegendComponent, isStandalone: true, selector: "hub-legend", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.hub-legend-host": "true" } }, ngImport: i0, template: `<span class="hub-legend" [class.hub-legend--invalid]="invalid()">
-		<ng-content></ng-content>
-		@if (required()) {
-			<span class="hub-legend__required" aria-hidden="true">*</span>
-		}
-	</span>`, isInline: true, styles: [".hub-legend{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-form-legend-color, var(--hub-sys-text-primary, #212529));font-size:var(--hub-form-legend-font-size, var(--hub-ref-font-size-base, 1rem));font-weight:var(--hub-form-legend-font-weight, var(--hub-ref-font-weight-medium, 500))}.hub-legend--invalid{color:var(--hub-form-invalid-color)}.hub-legend__required{color:var(--hub-form-required-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubLegendComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'hub-legend', template: `<span class="hub-legend" [class.hub-legend--invalid]="invalid()">
-		<ng-content></ng-content>
-		@if (required()) {
-			<span class="hub-legend__required" aria-hidden="true">*</span>
-		}
-	</span>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class.hub-legend-host]': 'true' }, styles: [".hub-legend{display:inline-flex;align-items:baseline;gap:.15rem;color:var(--hub-form-legend-color, var(--hub-sys-text-primary, #212529));font-size:var(--hub-form-legend-font-size, var(--hub-ref-font-size-base, 1rem));font-weight:var(--hub-form-legend-font-weight, var(--hub-ref-font-weight-medium, 500))}.hub-legend--invalid{color:var(--hub-form-invalid-color)}.hub-legend__required{color:var(--hub-form-required-color)}\n"] }]
-        }], propDecorators: { required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
 /**
  * Enum mirror of {@link HubSelectFormat} for ergonomic template usage.
  */
@@ -2819,7 +2864,7 @@ var HubSelectFormats;
  * one field with an action on it.
  *
  * Declared as a template rather than projected content because the select's catch-all
- * `<ng-content>` — which carries `<ng-option>` through to the engine — is declared first
+ * `<ng-content>` — which opens straight into the dropdown engine — is declared first
  * and would swallow it. Rendering from a template also keeps the action after the control
  * in the DOM, so tabbing reaches the field before the button acting on it.
  *
@@ -6040,6 +6085,211 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
+/**
+ * Hub-named slots for the parts of a `<hub-select>` a consumer can re-draw.
+ *
+ * `hub-select` is built on a vendored copy of ng-select (see `PATCHES.md`), whose own slot
+ * directives are attribute selectors in the `ng-*` namespace: `ng-option-tmp`, `ng-label-tmp` and
+ * ten more. Those were re-exported, so the public surface of `ng-hub-ui-forms` invited consumers to
+ * write markup named after an internal dependency that is re-synced from upstream on a schedule and
+ * that no promise here covers. The directives in this file are the surface the library actually
+ * owns: same slots, same template contexts, hub names, and nothing in `vendor/` changed — so the
+ * automated sync stays as low-conflict as it was.
+ *
+ * Each is a plain marker over an `<ng-template>`; `hub-select` queries it and forwards the template
+ * into the engine with the context documented on each directive.
+ */
+/**
+ * Draws one option in the dropdown list.
+ *
+ * Context: `item` (the raw item), `item$` (the engine's wrapper, carrying `selected`/`disabled`),
+ * `index`, `searchTerm`.
+ *
+ * @example
+ * ```html
+ * <hub-select [items]="users" bindLabel="name">
+ *   <ng-template hubSelectOption let-item="item" let-search="searchTerm">
+ *     <img [src]="item.avatar" alt="" /> {{ item.name }}
+ *   </ng-template>
+ * </hub-select>
+ * ```
+ */
+class HubSelectOptionDirective {
+    /** Template reference for the option content. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HubSelectOptionDirective, isStandalone: true, selector: "[hubSelectOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectOptionDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubSelectOption]' }]
+        }] });
+/**
+ * Draws a group header when the list is grouped with `groupBy`.
+ *
+ * Context: `item`, `item$`, `index`, `searchTerm`.
+ */
+class HubSelectOptgroupDirective {
+    /** Template reference for the group header content. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectOptgroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HubSelectOptgroupDirective, isStandalone: true, selector: "[hubSelectOptgroup]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectOptgroupDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubSelectOptgroup]' }]
+        }] });
+/**
+ * Draws the selected value inside the closed control, in single-select mode.
+ *
+ * Context: `item`, `label`, `clear`.
+ */
+class HubSelectLabelDirective {
+    /** Template reference for the selected-value content. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HubSelectLabelDirective, isStandalone: true, selector: "[hubSelectLabel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectLabelDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubSelectLabel]' }]
+        }] });
+/**
+ * Draws all selected values at once in multiple mode, replacing the per-value chips.
+ *
+ * Context: `items`, `clear`.
+ */
+class HubSelectMultiLabelDirective {
+    /** Template reference for the multi-value content. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectMultiLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HubSelectMultiLabelDirective, isStandalone: true, selector: "[hubSelectMultiLabel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectMultiLabelDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubSelectMultiLabel]' }]
+        }] });
+/**
+ * Draws a fixed block above the option list.
+ *
+ * Context: `searchTerm`.
+ */
+class HubSelectHeaderDirective {
+    /** Template reference for the dropdown header. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HubSelectHeaderDirective, isStandalone: true, selector: "[hubSelectHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubSelectHeader]' }]
+        }] });
+/**
+ * Draws a fixed block below the option list.
+ *
+ * Context: `searchTerm`.
+ */
+class HubSelectFooterDirective {
+    /** Template reference for the dropdown footer. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HubSelectFooterDirective, isStandalone: true, selector: "[hubSelectFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectFooterDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubSelectFooter]' }]
+        }] });
+/**
+ * Replaces the "no items found" message.
+ *
+ * Context: `searchTerm`.
+ */
+class HubSelectNotFoundDirective {
+    /** Template reference for the empty-result content. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectNotFoundDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HubSelectNotFoundDirective, isStandalone: true, selector: "[hubSelectNotFound]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectNotFoundDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubSelectNotFound]' }]
+        }] });
+/**
+ * Replaces the "type to search" hint shown before `minTermLength` characters have been typed.
+ *
+ * No context.
+ */
+class HubSelectTypeToSearchDirective {
+    /** Template reference for the type-to-search hint. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectTypeToSearchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HubSelectTypeToSearchDirective, isStandalone: true, selector: "[hubSelectTypeToSearch]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectTypeToSearchDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubSelectTypeToSearch]' }]
+        }] });
+/**
+ * Replaces the "loading…" message shown while a typeahead is in flight and no item has arrived.
+ *
+ * Context: `searchTerm`.
+ */
+class HubSelectLoadingTextDirective {
+    /** Template reference for the loading message. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectLoadingTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HubSelectLoadingTextDirective, isStandalone: true, selector: "[hubSelectLoadingText]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectLoadingTextDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubSelectLoadingText]' }]
+        }] });
+/**
+ * Replaces the spinner drawn in the control while `loading` is set.
+ *
+ * No context.
+ */
+class HubSelectLoadingSpinnerDirective {
+    /** Template reference for the loading spinner. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectLoadingSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HubSelectLoadingSpinnerDirective, isStandalone: true, selector: "[hubSelectLoadingSpinner]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectLoadingSpinnerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubSelectLoadingSpinner]' }]
+        }] });
+/**
+ * Replaces the "add <term>" row offered when `addTag` is enabled.
+ *
+ * Context: `searchTerm`.
+ */
+class HubSelectTagDirective {
+    /** Template reference for the add-tag row. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HubSelectTagDirective, isStandalone: true, selector: "[hubSelectTag]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectTagDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubSelectTag]' }]
+        }] });
+/**
+ * Replaces the clear (×) control.
+ *
+ * No context.
+ */
+class HubSelectClearButtonDirective {
+    /** Template reference for the clear control. */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectClearButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: HubSelectClearButtonDirective, isStandalone: true, selector: "[hubSelectClearButton]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectClearButtonDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[hubSelectClearButton]' }]
+        }] });
 /**
  * Accessible select / multiselect / autocomplete built on the vendored ng-select engine, with the
  * `ng-hub-ui-forms` conventions on top: CVA binding, automatic error display (via
@@ -6070,14 +6320,62 @@ class HubSelectComponent extends HubFieldControl {
     // which does NOT see through this wrapper's `<ng-content>`. We grab the
     // consumer-projected templates here and re-declare them as direct content of
     // the inner ng-select (see the template), forwarding each with its context —
-    // so `<ng-template ng-option-tmp>` etc. work through `<hub-select>`.
-    _optionTpl = contentChild(NgOptionTemplateDirective, { ...(ngDevMode ? { debugName: "_optionTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
-    _optgroupTpl = contentChild(NgOptgroupTemplateDirective, { ...(ngDevMode ? { debugName: "_optgroupTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
-    _labelTpl = contentChild(NgLabelTemplateDirective, { ...(ngDevMode ? { debugName: "_labelTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
-    _multiLabelTpl = contentChild(NgMultiLabelTemplateDirective, { ...(ngDevMode ? { debugName: "_multiLabelTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
-    _headerTpl = contentChild(NgHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "_headerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
-    _footerTpl = contentChild(NgFooterTemplateDirective, { ...(ngDevMode ? { debugName: "_footerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
-    _notFoundTpl = contentChild(NgNotFoundTemplateDirective, { ...(ngDevMode ? { debugName: "_notFoundTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    // so `<ng-template hubSelectOption>` etc. work through `<hub-select>`.
+    //
+    // Each slot is queried twice: once for the hub-named directive that is the supported way to
+    // write it, and once for the vendored `ng-*-tmp` attribute that used to be the only way. The
+    // hub one wins; the vendored one is deprecated and disappears in 23.0.0 along with its export.
+    _hubOptionTpl = contentChild(HubSelectOptionDirective, { ...(ngDevMode ? { debugName: "_hubOptionTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _ngOptionTpl = contentChild(NgOptionTemplateDirective, { ...(ngDevMode ? { debugName: "_ngOptionTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _optionTpl = computed(() => this._hubOptionTpl() ?? this._ngOptionTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_optionTpl" }] : /* istanbul ignore next */ []));
+    _hubOptgroupTpl = contentChild(HubSelectOptgroupDirective, { ...(ngDevMode ? { debugName: "_hubOptgroupTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _ngOptgroupTpl = contentChild(NgOptgroupTemplateDirective, { ...(ngDevMode ? { debugName: "_ngOptgroupTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _optgroupTpl = computed(() => this._hubOptgroupTpl() ?? this._ngOptgroupTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_optgroupTpl" }] : /* istanbul ignore next */ []));
+    _hubLabelTpl = contentChild(HubSelectLabelDirective, { ...(ngDevMode ? { debugName: "_hubLabelTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _ngLabelTpl = contentChild(NgLabelTemplateDirective, { ...(ngDevMode ? { debugName: "_ngLabelTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _labelTpl = computed(() => this._hubLabelTpl() ?? this._ngLabelTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_labelTpl" }] : /* istanbul ignore next */ []));
+    _hubMultiLabelTpl = contentChild(HubSelectMultiLabelDirective, { ...(ngDevMode ? { debugName: "_hubMultiLabelTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _ngMultiLabelTpl = contentChild(NgMultiLabelTemplateDirective, { ...(ngDevMode ? { debugName: "_ngMultiLabelTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _multiLabelTpl = computed(() => this._hubMultiLabelTpl() ?? this._ngMultiLabelTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_multiLabelTpl" }] : /* istanbul ignore next */ []));
+    _hubHeaderTpl = contentChild(HubSelectHeaderDirective, { ...(ngDevMode ? { debugName: "_hubHeaderTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _ngHeaderTpl = contentChild(NgHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "_ngHeaderTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _headerTpl = computed(() => this._hubHeaderTpl() ?? this._ngHeaderTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_headerTpl" }] : /* istanbul ignore next */ []));
+    _hubFooterTpl = contentChild(HubSelectFooterDirective, { ...(ngDevMode ? { debugName: "_hubFooterTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _ngFooterTpl = contentChild(NgFooterTemplateDirective, { ...(ngDevMode ? { debugName: "_ngFooterTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _footerTpl = computed(() => this._hubFooterTpl() ?? this._ngFooterTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_footerTpl" }] : /* istanbul ignore next */ []));
+    _hubNotFoundTpl = contentChild(HubSelectNotFoundDirective, { ...(ngDevMode ? { debugName: "_hubNotFoundTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _ngNotFoundTpl = contentChild(NgNotFoundTemplateDirective, { ...(ngDevMode ? { debugName: "_ngNotFoundTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _notFoundTpl = computed(() => this._hubNotFoundTpl() ?? this._ngNotFoundTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_notFoundTpl" }] : /* istanbul ignore next */ []));
+    // The five slots below were exported but never forwarded: written inside a `<hub-select>` they
+    // belonged to this wrapper's content, and the engine's own `contentChild` cannot see through an
+    // `<ng-content>`, so they did nothing at all. They are forwarded now, under hub names.
+    _hubTypeToSearchTpl = contentChild(HubSelectTypeToSearchDirective, { ...(ngDevMode ? { debugName: "_hubTypeToSearchTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _ngTypeToSearchTpl = contentChild(NgTypeToSearchTemplateDirective, { ...(ngDevMode ? { debugName: "_ngTypeToSearchTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _typeToSearchTpl = computed(() => this._hubTypeToSearchTpl() ?? this._ngTypeToSearchTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_typeToSearchTpl" }] : /* istanbul ignore next */ []));
+    _hubLoadingTextTpl = contentChild(HubSelectLoadingTextDirective, { ...(ngDevMode ? { debugName: "_hubLoadingTextTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _ngLoadingTextTpl = contentChild(NgLoadingTextTemplateDirective, { ...(ngDevMode ? { debugName: "_ngLoadingTextTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _loadingTextTpl = computed(() => this._hubLoadingTextTpl() ?? this._ngLoadingTextTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_loadingTextTpl" }] : /* istanbul ignore next */ []));
+    _hubLoadingSpinnerTpl = contentChild(HubSelectLoadingSpinnerDirective, { ...(ngDevMode ? { debugName: "_hubLoadingSpinnerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _ngLoadingSpinnerTpl = contentChild(NgLoadingSpinnerTemplateDirective, { ...(ngDevMode ? { debugName: "_ngLoadingSpinnerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _loadingSpinnerTpl = computed(() => this._hubLoadingSpinnerTpl() ?? this._ngLoadingSpinnerTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_loadingSpinnerTpl" }] : /* istanbul ignore next */ []));
+    _hubTagTpl = contentChild(HubSelectTagDirective, { ...(ngDevMode ? { debugName: "_hubTagTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _ngTagTpl = contentChild(NgTagTemplateDirective, { ...(ngDevMode ? { debugName: "_ngTagTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _tagTpl = computed(() => this._hubTagTpl() ?? this._ngTagTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tagTpl" }] : /* istanbul ignore next */ []));
+    _hubClearButtonTpl = contentChild(HubSelectClearButtonDirective, { ...(ngDevMode ? { debugName: "_hubClearButtonTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _ngClearButtonTpl = contentChild(NgClearButtonTemplateDirective, { ...(ngDevMode ? { debugName: "_ngClearButtonTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    _clearButtonTpl = computed(() => this._hubClearButtonTpl() ?? this._ngClearButtonTpl(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_clearButtonTpl" }] : /* istanbul ignore next */ []));
     /** Deprecated select-only slot, superseded by `[hubAppend]`. */
     _legacySuffixTpl = contentChild(HubSelectSuffixDirective, { ...(ngDevMode ? { debugName: "_legacySuffixTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
     /** Projected inline-start content (`[hubPrepend]`). */
@@ -6434,7 +6732,7 @@ class HubSelectComponent extends HubFieldControl {
         return value ? [value] : [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubSelectComponent, isStandalone: true, selector: "hub-select", inputs: { prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, fixedPlaceholder: { classPropertyName: "fixedPlaceholder", publicName: "fixedPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, addTag: { classPropertyName: "addTag", publicName: "addTag", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", 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 }, { propertyName: "_legacySuffixTpl", first: true, predicate: HubSelectSuffixDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_genericAppendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-select\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if ((label() || required()) && !showsFloatingLabel()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if ((label() || required()) && !showsFloatingLabel()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<!-- [disabled] is claimed by the NgModel below (alias of its isDisabled input), not by\n\t\t\t\t     ng-select \u2014 the engine's own `disabled` is a computed fed by setDisabledState.\n\t\t\t\t     Dropping [ngModel] here would silently un-wire the disabled state. -->\n\t\t\t\t<!--\n\t\t\t\t\tThe control and its attached action are one field: the group is what makes\n\t\t\t\t\tthem share a line and a border, so a select with a button beside it does not\n\t\t\t\t\tread as two unrelated things that happen to be adjacent.\n\t\t\t\t-->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__group\"\n\t\t\t\t\t[class.hub-select__group--floating]=\"showsFloatingLabel()\"\n\t\t\t\t\t[class.hub-select__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t\t\t[class.hub-select__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t[class.hub-select__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t>\n\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--prepend\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe floating label hangs off a zero-width anchor placed exactly where the\n\t\t\t\t\t\tcontrol starts, not off the group. A group can open with an addon or an\n\t\t\t\t\t\tattached button, and a label pinned to the group's own leading edge would\n\t\t\t\t\t\tprint on top of it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t\t<span class=\"hub-select__label-anchor\">\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-select__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t<ng-select\n\t\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t\t[searchFn]=\"$any(searchFn())\"\n\t\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[placeholder]=\"placeholder() ?? _ngSelectConfig.placeholder\"\n\t\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t(focus)=\"handleControlFocus($event)\"\n\t\t\t\t\t\t(blur)=\"handleControlBlur($event)\"\n\t\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-option-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-optgroup-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</ng-select>\n\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--append\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe action goes last, after any append addon, mirroring where hub-input puts\n\t\t\t\t\t\tits password toggle: addons label the field, the action acts on it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--append\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__group{display:flex;align-items:stretch;min-width:0}.hub-select__group>.hub-select__control,.hub-select__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-select__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-select-padding-x, var(--hub-input-padding-x));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-select-border-width, var(--hub-input-border-width)) solid var(--hub-select-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));font-size:var(--hub-select-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-select__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-select__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-select-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-select__attached.hub-select__attached>*{padding-block:0;padding-inline:var(--hub-select-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-select-min-height, auto);border:var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-select__attached.hub-select__attached>*:hover,.hub-select__attached.hub-select__attached>*:focus-visible{z-index:1}.hub-select__attached.hub-select__attached--prepend>*{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-select__attached.hub-select__attached--append>*{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached>hub-input,.hub-select__attached.hub-select__attached>hub-select,.hub-select__attached.hub-select__attached>hub-textarea,.hub-select__attached.hub-select__attached>hub-datepicker,.hub-select__attached.hub-select__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--prepend>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__attached.hub-select__attached--append>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--append>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached--append>hub-input:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-textarea:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-select__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-select__attached)>button,:where(.hub-select__attached)>a,:where(.hub-select__attached)>[role=button],:where(.hub-select__attached)>[role=link],:where(.hub-select__attached)>[tabindex]{background:var(--hub-select-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-select-group-action-color, var(--hub-input-group-action-color))}.hub-select__group--has-prepend .hub-select__control,.hub-select__group--has-prepend .hub-field__control,.hub-select__group--has-prepend .hub-select__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group--has-append .hub-select__control,.hub-select__group--has-append .hub-field__control,.hub-select__group--has-append .hub-select__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group>.hub-select__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-select__group>.hub-select__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-inline-start:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-inline-start:var(--hub-select-padding-x);padding-inline-end:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-inline-start:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{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-block:0 .2rem;padding-inline:.25rem 0}.hub-select__control.ng-select .ng-arrow-wrapper{padding-inline:var(--hub-select-arrow-gap)}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:var(--hub-select-arrow-size) var(--hub-select-arrow-size) calc(var(--hub-select-arrow-size) / 2);border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-width:0 var(--hub-select-arrow-size) var(--hub-select-arrow-size);border-color:transparent transparent var(--hub-select-arrow-color)}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.hub-select__group--floating .hub-select__label-anchor{position:relative;z-index:1002;flex:0 0 0;width:0;align-self:stretch}.hub-select__group--floating .hub-select__label--floating{font-size:var(--hub-select-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-select-padding-x);margin:0;color:var(--hub-select-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);white-space:nowrap;pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-select__group--floating .hub-select__label--floating{transform-origin:100% 0}.hub-select__group--floating .hub-select__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-select__group--floating .hub-select__control.ng-select .ng-select-container,.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container{height:auto;min-height:calc(var(--hub-select-min-height) + var(--hub-field-floating-inset))}.hub-select__group--floating .hub-select__control.ng-select .ng-value-container{padding-block-start:var(--hub-field-floating-inset)}.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:calc(50% + var(--hub-field-floating-inset) / 2)}.hub-select__group--floating:not(.hub-select__group--raised) .ng-placeholder{visibility:hidden}.hub-select__group--floating.hub-select__group--raised .hub-select__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.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-inline-start:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-inline-start:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubSelectComponent, isStandalone: true, selector: "hub-select", inputs: { prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, fixedPlaceholder: { classPropertyName: "fixedPlaceholder", publicName: "fixedPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, addTag: { classPropertyName: "addTag", publicName: "addTag", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, typeahead: { classPropertyName: "typeahead", publicName: "typeahead", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, classlist: { classPropertyName: "classlist", publicName: "classlist", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", onFocus: "onFocus", onBlur: "onBlur", onOpen: "onOpen", onClose: "onClose", onClear: "onClear", onSearch: "onSearch", onAdd: "onAdd", onRemove: "onRemove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { properties: { "class": "classlist()", "class.hub-select-host": "true" } }, queries: [{ propertyName: "_hubOptionTpl", first: true, predicate: HubSelectOptionDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngOptionTpl", first: true, predicate: NgOptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubOptgroupTpl", first: true, predicate: HubSelectOptgroupDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngOptgroupTpl", first: true, predicate: NgOptgroupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLabelTpl", first: true, predicate: HubSelectLabelDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLabelTpl", first: true, predicate: NgLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubMultiLabelTpl", first: true, predicate: HubSelectMultiLabelDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngMultiLabelTpl", first: true, predicate: NgMultiLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubHeaderTpl", first: true, predicate: HubSelectHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngHeaderTpl", first: true, predicate: NgHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubFooterTpl", first: true, predicate: HubSelectFooterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngFooterTpl", first: true, predicate: NgFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubNotFoundTpl", first: true, predicate: HubSelectNotFoundDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngNotFoundTpl", first: true, predicate: NgNotFoundTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubTypeToSearchTpl", first: true, predicate: HubSelectTypeToSearchDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngTypeToSearchTpl", first: true, predicate: NgTypeToSearchTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLoadingTextTpl", first: true, predicate: HubSelectLoadingTextDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLoadingTextTpl", first: true, predicate: NgLoadingTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubLoadingSpinnerTpl", first: true, predicate: HubSelectLoadingSpinnerDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngLoadingSpinnerTpl", first: true, predicate: NgLoadingSpinnerTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubTagTpl", first: true, predicate: HubSelectTagDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngTagTpl", first: true, predicate: NgTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_hubClearButtonTpl", first: true, predicate: HubSelectClearButtonDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_ngClearButtonTpl", first: true, predicate: NgClearButtonTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_legacySuffixTpl", first: true, predicate: HubSelectSuffixDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_prependTpl", first: true, predicate: HubPrependDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "_genericAppendTpl", first: true, predicate: HubAppendDirective, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-select\"\n\t[class.hub-field--horizontal]=\"labelType() === _labelTypes.Horizontal || (!label() && required())\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if ((label() || required()) && !showsFloatingLabel()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if ((label() || required()) && !showsFloatingLabel()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<!-- [disabled] is claimed by the NgModel below (alias of its isDisabled input), not by\n\t\t\t\t     ng-select \u2014 the engine's own `disabled` is a computed fed by setDisabledState.\n\t\t\t\t     Dropping [ngModel] here would silently un-wire the disabled state. -->\n\t\t\t\t<!--\n\t\t\t\t\tThe control and its attached action are one field: the group is what makes\n\t\t\t\t\tthem share a line and a border, so a select with a button beside it does not\n\t\t\t\t\tread as two unrelated things that happen to be adjacent.\n\t\t\t\t-->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__group\"\n\t\t\t\t\t[class.hub-select__group--floating]=\"showsFloatingLabel()\"\n\t\t\t\t\t[class.hub-select__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t\t\t[class.hub-select__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t[class.hub-select__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t>\n\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--prepend\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe floating label hangs off a zero-width anchor placed exactly where the\n\t\t\t\t\t\tcontrol starts, not off the group. A group can open with an addon or an\n\t\t\t\t\t\tattached button, and a label pinned to the group's own leading edge would\n\t\t\t\t\t\tprint on top of it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t\t<span class=\"hub-select__label-anchor\">\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-select__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t<ng-select\n\t\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t\t[searchFn]=\"$any(searchFn())\"\n\t\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[placeholder]=\"placeholder() ?? _ngSelectConfig.placeholder\"\n\t\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t(focus)=\"handleControlFocus($event)\"\n\t\t\t\t\t\t(blur)=\"handleControlBlur($event)\"\n\t\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-option-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-optgroup-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_typeToSearchTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-typetosearch-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingTextTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingSpinnerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingspinner-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_tagTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_clearButtonTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-clearbutton-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</ng-select>\n\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--append\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe action goes last, after any append addon, mirroring where hub-input puts\n\t\t\t\t\t\tits password toggle: addons label the field, the action acts on it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--append\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__group{display:flex;align-items:stretch;min-width:0}.hub-select__group>.hub-select__control,.hub-select__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-select__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-select-padding-x, var(--hub-input-padding-x));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-select-border-width, var(--hub-input-border-width)) solid var(--hub-select-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));font-size:var(--hub-select-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-select__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-select__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-select-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-select__attached.hub-select__attached>*{padding-block:0;padding-inline:var(--hub-select-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-select-min-height, auto);border:var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-select__attached.hub-select__attached>*:hover,.hub-select__attached.hub-select__attached>*:focus-visible{z-index:1}.hub-select__attached.hub-select__attached--prepend>*{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-select__attached.hub-select__attached--append>*{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached>hub-input,.hub-select__attached.hub-select__attached>hub-select,.hub-select__attached.hub-select__attached>hub-textarea,.hub-select__attached.hub-select__attached>hub-datepicker,.hub-select__attached.hub-select__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--prepend>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__attached.hub-select__attached--append>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--append>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached--append>hub-input:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-textarea:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-select__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-select__attached)>button,:where(.hub-select__attached)>a,:where(.hub-select__attached)>[role=button],:where(.hub-select__attached)>[role=link],:where(.hub-select__attached)>[tabindex]{background:var(--hub-select-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-select-group-action-color, var(--hub-input-group-action-color))}.hub-select__group--has-prepend .hub-select__control,.hub-select__group--has-prepend .hub-field__control,.hub-select__group--has-prepend .hub-select__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group--has-append .hub-select__control,.hub-select__group--has-append .hub-field__control,.hub-select__group--has-append .hub-select__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group>.hub-select__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-select__group>.hub-select__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-inline-start:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-inline-start:var(--hub-select-padding-x);padding-inline-end:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-inline-start:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{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-block:0 .2rem;padding-inline:.25rem 0}.hub-select__control.ng-select .ng-arrow-wrapper{padding-inline:var(--hub-select-arrow-gap)}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:var(--hub-select-arrow-size) var(--hub-select-arrow-size) calc(var(--hub-select-arrow-size) / 2);border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-width:0 var(--hub-select-arrow-size) var(--hub-select-arrow-size);border-color:transparent transparent var(--hub-select-arrow-color)}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.hub-select__group--floating .hub-select__label-anchor{position:relative;z-index:1002;flex:0 0 0;width:0;align-self:stretch}.hub-select__group--floating .hub-select__label--floating{font-size:var(--hub-select-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-select-padding-x);margin:0;color:var(--hub-select-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);white-space:nowrap;pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-select__group--floating .hub-select__label--floating{transform-origin:100% 0}.hub-select__group--floating .hub-select__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-select__group--floating .hub-select__control.ng-select .ng-select-container,.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container{height:auto;min-height:calc(var(--hub-select-min-height) + var(--hub-field-floating-inset))}.hub-select__group--floating .hub-select__control.ng-select .ng-value-container{padding-block-start:var(--hub-field-floating-inset)}.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:calc(50% + var(--hub-field-floating-inset) / 2)}.hub-select__group--floating:not(.hub-select__group--raised) .ng-placeholder{visibility:hidden}.hub-select__group--floating.hub-select__group--raised .hub-select__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.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-inline-start:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-inline-start:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: NgTypeToSearchTemplateDirective, selector: "[ng-typetosearch-tmp]" }, { kind: "directive", type: NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "directive", type: NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "directive", type: NgClearButtonTemplateDirective, selector: "[ng-clearbutton-tmp]" }, { kind: "directive", type: HubTooltipDirective, selector: "[hubTooltip]", inputs: ["hubTooltip", "hubTooltipPlacement", "hubTooltipDelay", "hubTooltipOffset"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubSelectComponent, decorators: [{
             type: Component,
@@ -6450,12 +6748,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         NgHeaderTemplateDirective,
                         NgFooterTemplateDirective,
                         NgNotFoundTemplateDirective,
+                        NgTypeToSearchTemplateDirective,
+                        NgLoadingTextTemplateDirective,
+                        NgLoadingSpinnerTemplateDirective,
+                        NgTagTemplateDirective,
+                        NgClearButtonTemplateDirective,
                         HubTooltipDirective
                     ], 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--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if ((label() || required()) && !showsFloatingLabel()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if ((label() || required()) && !showsFloatingLabel()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<!-- [disabled] is claimed by the NgModel below (alias of its isDisabled input), not by\n\t\t\t\t     ng-select \u2014 the engine's own `disabled` is a computed fed by setDisabledState.\n\t\t\t\t     Dropping [ngModel] here would silently un-wire the disabled state. -->\n\t\t\t\t<!--\n\t\t\t\t\tThe control and its attached action are one field: the group is what makes\n\t\t\t\t\tthem share a line and a border, so a select with a button beside it does not\n\t\t\t\t\tread as two unrelated things that happen to be adjacent.\n\t\t\t\t-->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__group\"\n\t\t\t\t\t[class.hub-select__group--floating]=\"showsFloatingLabel()\"\n\t\t\t\t\t[class.hub-select__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t\t\t[class.hub-select__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t[class.hub-select__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t>\n\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--prepend\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe floating label hangs off a zero-width anchor placed exactly where the\n\t\t\t\t\t\tcontrol starts, not off the group. A group can open with an addon or an\n\t\t\t\t\t\tattached button, and a label pinned to the group's own leading edge would\n\t\t\t\t\t\tprint on top of it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t\t<span class=\"hub-select__label-anchor\">\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-select__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t<ng-select\n\t\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t\t[searchFn]=\"$any(searchFn())\"\n\t\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[placeholder]=\"placeholder() ?? _ngSelectConfig.placeholder\"\n\t\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t(focus)=\"handleControlFocus($event)\"\n\t\t\t\t\t\t(blur)=\"handleControlBlur($event)\"\n\t\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-option-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-optgroup-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</ng-select>\n\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--append\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe action goes last, after any append addon, mirroring where hub-input puts\n\t\t\t\t\t\tits password toggle: addons label the field, the action acts on it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--append\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__group{display:flex;align-items:stretch;min-width:0}.hub-select__group>.hub-select__control,.hub-select__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-select__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-select-padding-x, var(--hub-input-padding-x));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-select-border-width, var(--hub-input-border-width)) solid var(--hub-select-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));font-size:var(--hub-select-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-select__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-select__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-select-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-select__attached.hub-select__attached>*{padding-block:0;padding-inline:var(--hub-select-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-select-min-height, auto);border:var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-select__attached.hub-select__attached>*:hover,.hub-select__attached.hub-select__attached>*:focus-visible{z-index:1}.hub-select__attached.hub-select__attached--prepend>*{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-select__attached.hub-select__attached--append>*{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached>hub-input,.hub-select__attached.hub-select__attached>hub-select,.hub-select__attached.hub-select__attached>hub-textarea,.hub-select__attached.hub-select__attached>hub-datepicker,.hub-select__attached.hub-select__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--prepend>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__attached.hub-select__attached--append>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--append>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached--append>hub-input:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-textarea:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-select__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-select__attached)>button,:where(.hub-select__attached)>a,:where(.hub-select__attached)>[role=button],:where(.hub-select__attached)>[role=link],:where(.hub-select__attached)>[tabindex]{background:var(--hub-select-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-select-group-action-color, var(--hub-input-group-action-color))}.hub-select__group--has-prepend .hub-select__control,.hub-select__group--has-prepend .hub-field__control,.hub-select__group--has-prepend .hub-select__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group--has-append .hub-select__control,.hub-select__group--has-append .hub-field__control,.hub-select__group--has-append .hub-select__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group>.hub-select__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-select__group>.hub-select__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-inline-start:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-inline-start:var(--hub-select-padding-x);padding-inline-end:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-inline-start:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{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-block:0 .2rem;padding-inline:.25rem 0}.hub-select__control.ng-select .ng-arrow-wrapper{padding-inline:var(--hub-select-arrow-gap)}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:var(--hub-select-arrow-size) var(--hub-select-arrow-size) calc(var(--hub-select-arrow-size) / 2);border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-width:0 var(--hub-select-arrow-size) var(--hub-select-arrow-size);border-color:transparent transparent var(--hub-select-arrow-color)}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.hub-select__group--floating .hub-select__label-anchor{position:relative;z-index:1002;flex:0 0 0;width:0;align-self:stretch}.hub-select__group--floating .hub-select__label--floating{font-size:var(--hub-select-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-select-padding-x);margin:0;color:var(--hub-select-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);white-space:nowrap;pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-select__group--floating .hub-select__label--floating{transform-origin:100% 0}.hub-select__group--floating .hub-select__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-select__group--floating .hub-select__control.ng-select .ng-select-container,.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container{height:auto;min-height:calc(var(--hub-select-min-height) + var(--hub-field-floating-inset))}.hub-select__group--floating .hub-select__control.ng-select .ng-value-container{padding-block-start:var(--hub-field-floating-inset)}.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:calc(50% + var(--hub-field-floating-inset) / 2)}.hub-select__group--floating:not(.hub-select__group--raised) .ng-placeholder{visibility:hidden}.hub-select__group--floating.hub-select__group--raised .hub-select__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.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-inline-start:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-inline-start:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"] }]
-        }], propDecorators: { _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 }] }], _legacySuffixTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectSuffixDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _genericAppendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], fixedPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedPlaceholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], addTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTag", required: false }] }], addTagText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTagText", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], 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--readonly]=\"readonly()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n>\n\t@if (showsFormTextTooltip()) {\n\t\t<!--\n\t\t\tThe row exists because the hint does, not because the label does. A field with a\n\t\t\tfloating label \u2014 or no label at all \u2014 still has helper text to offer, and the mark\n\t\t\tis the only place left to offer it from once the block below stands down.\n\t\t-->\n\t\t<div class=\"hub-field__label-row\">\n\t\t\t@if ((label() || required()) && !showsFloatingLabel()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t\t\t}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"hub-field__hint\"\n\t\t\t\t[attr.aria-label]=\"formText()\"\n\t\t\t\t[hubTooltip]=\"formText()\"\n\t\t\t\thubTooltipPlacement=\"top\"\n\t\t\t></button>\n\t\t</div>\n\t} @else if ((label() || required()) && !showsFloatingLabel()) {\n\t\t<ng-container [ngTemplateOutlet]=\"hubFieldLabelTpl\" />\n\t}\n\n\t<ng-template #hubFieldLabelTpl>\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"hub-field__label\"\n\t\t\t[class.hub-field__label--visually-hidden]=\"labelType() === _labelTypes.VisuallyHidden\"\n\t\t>\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t</ng-template>\n\n\t<div class=\"hub-field__body\">\n\t\t@switch (format()) {\n\t\t\t@case (_selectFormats.Dropdown) {\n\t\t\t\t<!-- [disabled] is claimed by the NgModel below (alias of its isDisabled input), not by\n\t\t\t\t     ng-select \u2014 the engine's own `disabled` is a computed fed by setDisabledState.\n\t\t\t\t     Dropping [ngModel] here would silently un-wire the disabled state. -->\n\t\t\t\t<!--\n\t\t\t\t\tThe control and its attached action are one field: the group is what makes\n\t\t\t\t\tthem share a line and a border, so a select with a button beside it does not\n\t\t\t\t\tread as two unrelated things that happen to be adjacent.\n\t\t\t\t-->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__group\"\n\t\t\t\t\t[class.hub-select__group--floating]=\"showsFloatingLabel()\"\n\t\t\t\t\t[class.hub-select__group--raised]=\"showsFloatingLabel() && isLabelRaised()\"\n\t\t\t\t\t[class.hub-select__group--has-prepend]=\"hasPrepend() || hasPrependTpl()\"\n\t\t\t\t\t[class.hub-select__group--has-append]=\"hasAppend() || hasAppendTpl()\"\n\t\t\t\t>\n\t\t\t\t\t@if (_prependTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--prepend\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t@for (addon of _prepend(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--prepend\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe floating label hangs off a zero-width anchor placed exactly where the\n\t\t\t\t\t\tcontrol starts, not off the group. A group can open with an addon or an\n\t\t\t\t\t\tattached button, and a label pinned to the group's own leading edge would\n\t\t\t\t\t\tprint on top of it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (showsFloatingLabel()) {\n\t\t\t\t\t\t<span class=\"hub-select__label-anchor\">\n\t\t\t\t\t\t\t<label [for]=\"id\" class=\"hub-field__label hub-select__label--floating\">\n\t\t\t\t\t\t\t\t{{ label() }}\n\t\t\t\t\t\t\t\t@if (required()) {\n\t\t\t\t\t\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t\t<ng-select\n\t\t\t\t\t\tclass=\"hub-select__control\"\n\t\t\t\t\t\t[class.hub-select__control--invalid]=\"isInvalid\"\n\t\t\t\t\t\t[labelForId]=\"$any(id)\"\n\t\t\t\t\t\t[items]=\"items()\"\n\t\t\t\t\t\t[bindLabel]=\"$any(bindLabel())\"\n\t\t\t\t\t\t[searchFn]=\"$any(searchFn())\"\n\t\t\t\t\t\t[bindValue]=\"$any(bindValue())\"\n\t\t\t\t\t\t[groupBy]=\"$any(groupBy())\"\n\t\t\t\t\t\t[multiple]=\"multiple()\"\n\t\t\t\t\t\t[searchable]=\"searchable()\"\n\t\t\t\t\t\t[clearable]=\"clearable()\"\n\t\t\t\t\t\t[closeOnSelect]=\"closeOnSelect()\"\n\t\t\t\t\t\t[fixedPlaceholder]=\"fixedPlaceholder()\"\n\t\t\t\t\t\t[loading]=\"loading()\"\n\t\t\t\t\t\t[readonly]=\"readonly()\"\n\t\t\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t\t\t[placeholder]=\"placeholder() ?? _ngSelectConfig.placeholder\"\n\t\t\t\t\t\t[notFoundText]=\"notFoundText()\"\n\t\t\t\t\t\t[appendTo]=\"appendTo()\"\n\t\t\t\t\t\t[addTag]=\"$any(addTag())\"\n\t\t\t\t\t\t[addTagText]=\"addTagText()\"\n\t\t\t\t\t\t[minTermLength]=\"minTermLength()\"\n\t\t\t\t\t\t[typeahead]=\"$any(typeahead())\"\n\t\t\t\t\t\t[compareWith]=\"$any(compareWith())\"\n\t\t\t\t\t\t[inputAttrs]=\"a11yInputAttrs()\"\n\t\t\t\t\t\t[ngModel]=\"_value()\"\n\t\t\t\t\t\t(ngModelChange)=\"setValue($event)\"\n\t\t\t\t\t\t(focus)=\"handleControlFocus($event)\"\n\t\t\t\t\t\t(blur)=\"handleControlBlur($event)\"\n\t\t\t\t\t\t(open)=\"onOpen.emit()\"\n\t\t\t\t\t\t(close)=\"onClose.emit()\"\n\t\t\t\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t\t\t\t(search)=\"onSearch.emit($event)\"\n\t\t\t\t\t\t(add)=\"onAdd.emit($event)\"\n\t\t\t\t\t\t(remove)=\"onRemove.emit($event)\"\n\t\t\t\t\t\t(scroll)=\"scroll.emit($event)\"\n\t\t\t\t\t\t(scrollToEnd)=\"scrollToEnd.emit($event)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t@if (_optionTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-option-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_optgroupTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t\tng-optgroup-tmp\n\t\t\t\t\t\t\t\tlet-item=\"item\"\n\t\t\t\t\t\t\t\tlet-item$=\"item$\"\n\t\t\t\t\t\t\t\tlet-index=\"index\"\n\t\t\t\t\t\t\t\tlet-searchTerm=\"searchTerm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tpl\"\n\t\t\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ item, item$, index, searchTerm }\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_labelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-label=\"label\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ item, clear, label }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_multiLabelTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ items, clear }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_headerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-header-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_footerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-footer-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_notFoundTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-notfound-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_typeToSearchTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-typetosearch-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingTextTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingtext-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_loadingSpinnerTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-loadingspinner-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_tagTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-tag-tmp let-searchTerm=\"searchTerm\">\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ searchTerm }\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t@if (_clearButtonTpl(); as tpl) {\n\t\t\t\t\t\t\t<ng-template ng-clearbutton-tmp>\n\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</ng-select>\n\t\t\t\t\t@for (addon of _append(); track $index) {\n\t\t\t\t\t\t<span class=\"hub-select__addon hub-select__addon--append\">{{ addon }}</span>\n\t\t\t\t\t}\n\t\t\t\t\t<!--\n\t\t\t\t\t\tThe action goes last, after any append addon, mirroring where hub-input puts\n\t\t\t\t\t\tits password toggle: addons label the field, the action acts on it.\n\t\t\t\t\t-->\n\t\t\t\t\t@if (_appendTpl(); as tpl) {\n\t\t\t\t\t\t<span class=\"hub-select__attached hub-select__attached--append\">\n\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"tpl\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@case (_selectFormats.Buttons) {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__buttons\"\n\t\t\t\t\t[class.hub-select__buttons--vertical]=\"vertical()\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"hub-select__button\"\n\t\t\t\t\t\t\t[class.hub-select__button--selected]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[attr.aria-pressed]=\"isSelected(item)\"\n\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t(click)=\"toggleItem(item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ itemLabel(item) }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t<div\n\t\t\t\t\tclass=\"hub-select__options\"\n\t\t\t\t\t[class.hub-select__options--vertical]=\"vertical()\"\n\t\t\t\t\t[attr.role]=\"format() === _selectFormats.Radio ? 'radiogroup' : 'group'\"\n\t\t\t\t\t[attr.aria-label]=\"label() || null\"\n\t\t\t\t>\n\t\t\t\t\t@for (item of items(); track $index) {\n\t\t\t\t\t\t<label class=\"hub-select__option\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"hub-select__option-input\"\n\t\t\t\t\t\t\t\t[type]=\"format() === _selectFormats.Radio ? 'radio' : 'checkbox'\"\n\t\t\t\t\t\t\t\t[name]=\"id\"\n\t\t\t\t\t\t\t\t[checked]=\"isSelected(item)\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled() || readonly()\"\n\t\t\t\t\t\t\t\t(change)=\"toggleItem(item)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span class=\"hub-select__option-label\">{{ itemLabel(item) }}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (!showsFormTextTooltip() && (formText() || formTextTmp())) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"hub-field__feedback-text\"\n\t\t\t\t\t\t\t\t[innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-select{display:block}hub-select.hidden-control{display:none!important}.hub-select__group{display:flex;align-items:stretch;min-width:0}.hub-select__group>.hub-select__control,.hub-select__group>.hub-field__control{flex:1 1 auto;min-width:0}.hub-select__addon{display:flex;align-items:center;flex:0 0 auto;padding:0 var(--hub-select-padding-x, var(--hub-input-padding-x));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color));background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));border:var(--hub-select-border-width, var(--hub-input-border-width)) solid var(--hub-select-group-addon-border-color, var(--hub-input-group-addon-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));font-size:var(--hub-select-font-size, var(--hub-input-font-size));white-space:nowrap}.hub-select__addon--prepend{border-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}.hub-select__addon--append{border-inline-start:0;border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached{display:flex;align-items:stretch;flex:0 0 auto;gap:var(--hub-select-group-attached-gap, var(--hub-input-group-attached-gap));position:relative}.hub-select__attached.hub-select__attached>*{padding-block:0;padding-inline:var(--hub-select-padding-x, var(--hub-input-padding-x));height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:var(--hub-select-min-height, auto);border:var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)) solid var(--hub-select-group-attached-border-color, var(--hub-input-group-attached-border-color));border-radius:var(--hub-select-border-radius, var(--hub-input-border-radius));margin-inline:calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width))) 0;position:relative}.hub-select__attached.hub-select__attached>*:hover,.hub-select__attached.hub-select__attached>*:focus-visible{z-index:1}.hub-select__attached.hub-select__attached--prepend>*{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));margin-inline:0 calc(-1 * var(--hub-select-group-attached-border-width, var(--hub-input-group-attached-border-width)))}.hub-select__attached.hub-select__attached--append>*{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--prepend>*:not(:first-child){border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached--append>*:not(:last-child){border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__attached.hub-select__attached>hub-input,.hub-select__attached.hub-select__attached>hub-select,.hub-select__attached.hub-select__attached>hub-textarea,.hub-select__attached.hub-select__attached>hub-datepicker,.hub-select__attached.hub-select__attached>hub-timepicker{padding-inline:0;border:0;border-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--prepend>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker .hub-field__control{border-start-end-radius:0;border-end-end-radius:0}.hub-select__attached.hub-select__attached--prepend>hub-input:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-textarea:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-datepicker:first-child .hub-field__control,.hub-select__attached.hub-select__attached--prepend>hub-timepicker:first-child .hub-field__control{border-start-start-radius:var(--hub-input-border-radius);border-end-start-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--prepend>hub-select:first-child .ng-select-container{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__attached.hub-select__attached--append>hub-input .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-select .ng-select-container,.hub-select__attached.hub-select__attached--append>hub-textarea .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker .hub-field__control{border-start-start-radius:0;border-end-start-radius:0}.hub-select__attached.hub-select__attached--append>hub-input:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-textarea:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-datepicker:last-child .hub-field__control,.hub-select__attached.hub-select__attached--append>hub-timepicker:last-child .hub-field__control{border-start-end-radius:var(--hub-input-border-radius);border-end-end-radius:var(--hub-input-border-radius)}.hub-select__attached.hub-select__attached--append>hub-select:last-child .ng-select-container{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}:where(.hub-select__attached)>*:not(button):not(a):not(input):not(select):not(textarea):not([role=button]):not([role=link]):not([tabindex]){background:var(--hub-select-group-addon-bg, var(--hub-input-group-addon-bg));color:var(--hub-select-group-addon-color, var(--hub-input-group-addon-color))}:where(.hub-select__attached)>button,:where(.hub-select__attached)>a,:where(.hub-select__attached)>[role=button],:where(.hub-select__attached)>[role=link],:where(.hub-select__attached)>[tabindex]{background:var(--hub-select-group-action-bg, var(--hub-input-group-action-bg));color:var(--hub-select-group-action-color, var(--hub-input-group-action-color))}.hub-select__group--has-prepend .hub-select__control,.hub-select__group--has-prepend .hub-field__control,.hub-select__group--has-prepend .hub-select__control.ng-select .ng-select-container{border-start-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-start-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group--has-append .hub-select__control,.hub-select__group--has-append .hub-field__control,.hub-select__group--has-append .hub-select__control.ng-select .ng-select-container{border-start-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius));border-end-end-radius:var(--hub-select-group-attached-radius, var(--hub-input-group-attached-radius))}.hub-select__group>.hub-select__addon--prepend:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.hub-select__group>.hub-select__addon--append:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.hub-select__control.ng-select{font-size:var(--hub-select-font-size);color:var(--hub-select-color)}.hub-select__control.ng-select .ng-select-container{min-height:var(--hub-select-min-height);align-items:center;color:var(--hub-select-color);background:var(--hub-select-bg);border:var(--hub-select-border-width) solid var(--hub-select-border-color);border-radius:var(--hub-select-border-radius);transition:var(--hub-form-transition)}.hub-select__control.ng-select .ng-value-container{align-items:center;padding-inline-start:var(--hub-select-padding-x)}.hub-select__control.ng-select .ng-placeholder{color:var(--hub-select-placeholder-color)}.hub-select__control.ng-select.ng-has-value .ng-placeholder{display:none}.hub-select__control.ng-select.ng-select-single .ng-select-container{height:var(--hub-select-min-height)}.hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:50%;transform:translateY(-50%);padding-inline-start:var(--hub-select-padding-x);padding-inline-end:3rem}.hub-select__control.ng-select .ng-value{color:var(--hub-select-color)}.hub-select__control.ng-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,.hub-select__control.ng-select.ng-select-opened .ng-select-container{border-color:var(--hub-select-focus-border-color);box-shadow:var(--hub-select-focus-box-shadow)}.hub-select__control.ng-select.ng-select-multiple .ng-value-container{padding-top:0;padding-inline-start:var(--hub-select-padding-x);gap:.25rem}.hub-select__control.ng-select.ng-select-multiple .ng-placeholder{top:50%;transform:translateY(-50%);padding-bottom:0}.hub-select__control.ng-select.ng-select-multiple .ng-value{display:inline-flex;align-items:center;margin:0 0 .25rem;background:var(--hub-select-value-bg);color:var(--hub-select-value-color);border-radius:var(--hub-select-value-border-radius)}.hub-select__control.ng-select.ng-select-multiple .ng-value .ng-value-label{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-block:0 .2rem;padding-inline:.25rem 0}.hub-select__control.ng-select .ng-arrow-wrapper{padding-inline:var(--hub-select-arrow-gap)}.hub-select__control.ng-select .ng-arrow-wrapper .ng-arrow{border-style:solid;border-width:var(--hub-select-arrow-size) var(--hub-select-arrow-size) calc(var(--hub-select-arrow-size) / 2);border-color:var(--hub-select-arrow-color) transparent transparent}.hub-select__control.ng-select.ng-select-opened .ng-arrow-wrapper .ng-arrow{border-width:0 var(--hub-select-arrow-size) var(--hub-select-arrow-size);border-color:transparent transparent var(--hub-select-arrow-color)}.hub-select__control.ng-select .ng-clear-wrapper{color:var(--hub-select-clear-color)}.hub-select__control.ng-select .ng-clear-wrapper:hover .ng-clear{color:var(--hub-select-clear-hover-color)}.hub-select__control.ng-select.ng-select-disabled .ng-select-container{opacity:var(--hub-form-disabled-opacity)}.hub-select__control.ng-select.hub-select__control--invalid .ng-select-container{border-color:var(--hub-form-invalid-border-color)}.hub-select__control.ng-select.hub-select__control--invalid.ng-select-focused .ng-select-container{box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-invalid-focus-ring-color)}.hub-select__group--floating .hub-select__label-anchor{position:relative;z-index:1002;flex:0 0 0;width:0;align-self:stretch}.hub-select__group--floating .hub-select__label--floating{font-size:var(--hub-select-font-size);position:absolute;top:0;inset-inline-start:0;display:flex;align-items:center;height:100%;padding:0 var(--hub-select-padding-x);margin:0;color:var(--hub-select-placeholder-color);font-weight:var(--hub-ref-font-weight-base, 400);white-space:nowrap;pointer-events:none;transform-origin:0 0}[dir=rtl] .hub-select__group--floating .hub-select__label--floating{transform-origin:100% 0}.hub-select__group--floating .hub-select__label--floating{transition:opacity .1s ease-in-out,transform .1s ease-in-out}.hub-select__group--floating .hub-select__control.ng-select .ng-select-container,.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container{height:auto;min-height:calc(var(--hub-select-min-height) + var(--hub-field-floating-inset))}.hub-select__group--floating .hub-select__control.ng-select .ng-value-container{padding-block-start:var(--hub-field-floating-inset)}.hub-select__group--floating .hub-select__control.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:calc(50% + var(--hub-field-floating-inset) / 2)}.hub-select__group--floating:not(.hub-select__group--raised) .ng-placeholder{visibility:hidden}.hub-select__group--floating.hub-select__group--raised .hub-select__label--floating{transform:scale(var(--hub-field-floating-scale)) translateY(calc(-1 * var(--hub-field-floating-travel)));opacity:.9}.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-inline-start:calc(-1 * var(--hub-select-border-width))}.hub-select__button:first-child{border-start-start-radius:var(--hub-select-border-radius);border-end-start-radius:var(--hub-select-border-radius)}.hub-select__button:last-child{border-start-end-radius:var(--hub-select-border-radius);border-end-end-radius:var(--hub-select-border-radius)}.hub-select__button:hover,.hub-select__button:focus-visible,.hub-select__button--selected{z-index:1}.hub-select__button:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__button--selected{color:var(--hub-select-button-selected-color);background:var(--hub-select-button-selected-bg);border-color:var(--hub-select-button-selected-border-color)}.hub-select__button:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__buttons--vertical .hub-select__button:not(:first-child){margin-inline-start:0;margin-top:calc(-1 * var(--hub-select-border-width))}.hub-select__buttons--vertical .hub-select__button:first-child{border-radius:var(--hub-select-border-radius) var(--hub-select-border-radius) 0 0}.hub-select__buttons--vertical .hub-select__button:last-child{border-radius:0 0 var(--hub-select-border-radius) var(--hub-select-border-radius)}.hub-select__buttons--vertical .hub-select__button:not(:first-child):not(:last-child){border-radius:0}.hub-select__options{display:flex;flex-wrap:wrap;gap:var(--hub-select-button-gap) var(--hub-ref-space-4, 1.5rem)}.hub-select__options--vertical{flex-direction:column}.hub-select__option{display:inline-flex;align-items:center;gap:var(--hub-check-label-gap);cursor:pointer}.hub-select__option-input{flex:0 0 auto;width:var(--hub-check-input-width);height:var(--hub-check-input-height);margin:0;accent-color:var(--hub-check-input-checked-bg);cursor:pointer}.hub-select__option-input:focus-visible{outline:0;box-shadow:var(--hub-input-focus-box-shadow)}.hub-select__option-input:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-select__option-label{color:var(--hub-select-color);font-size:var(--hub-select-font-size)}\n"] }]
+        }], propDecorators: { _hubOptionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectOptionDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngOptionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptionTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubOptgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectOptgroupDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngOptgroupTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgOptgroupTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLabelDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubMultiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectMultiLabelDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngMultiLabelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgMultiLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubHeaderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectHeaderDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngHeaderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubFooterTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectFooterDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngFooterTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubNotFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectNotFoundDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngNotFoundTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgNotFoundTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubTypeToSearchTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectTypeToSearchDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngTypeToSearchTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTypeToSearchTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLoadingTextTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLoadingTextDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLoadingTextTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLoadingTextTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubLoadingSpinnerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectLoadingSpinnerDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngLoadingSpinnerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgLoadingSpinnerTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubTagTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectTagDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngTagTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _hubClearButtonTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectClearButtonDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _ngClearButtonTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgClearButtonTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _legacySuffixTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubSelectSuffixDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _prependTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubPrependDirective), { ...{ read: TemplateRef }, isSignal: true }] }], _genericAppendTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubAppendDirective), { ...{ read: TemplateRef }, isSignal: true }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], fixedPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedPlaceholder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], notFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "notFoundText", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], addTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTag", required: false }] }], addTagText: [{ type: i0.Input, args: [{ isSignal: true, alias: "addTagText", required: false }] }], minTermLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTermLength", required: false }] }], typeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeahead", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], 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.
@@ -9926,5 +10229,5 @@ const hubFormControlAdapter = {
  * Generated bundle index. Do not edit.
  */
-export { FormTextTypes, HUB_FILE_UPLOADER, HUB_FORMS_CONFIG, HubAppendDirective, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFileDropzoneNoticeDirective, HubFileIconDirective, HubFileInputComponent, HubFilePreviewDirective, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubPrependDirective, HubSafeUrlPipe, HubSegmentedComponent, HubSegmentedOptionDirective, HubSelectComponent, HubSelectFormats, HubSelectSuffixDirective, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubTimepickerComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFileInputLabels, defaultHubFormsConfig, defaultHubPasswordLabels, 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, scorePasswordStrength, toFileArray, uuid };
+export { FormTextTypes, HUB_FILE_UPLOADER, HUB_FORMS_CONFIG, HubAppendDirective, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFileDropzoneNoticeDirective, HubFileIconDirective, HubFileInputComponent, HubFilePreviewDirective, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubPrependDirective, HubSafeUrlPipe, HubSegmentedComponent, HubSegmentedOptionDirective, HubSelectClearButtonDirective, HubSelectComponent, HubSelectFooterDirective, HubSelectFormats, HubSelectHeaderDirective, HubSelectLabelDirective, HubSelectLoadingSpinnerDirective, HubSelectLoadingTextDirective, HubSelectMultiLabelDirective, HubSelectNotFoundDirective, HubSelectOptgroupDirective, HubSelectOptionDirective, HubSelectSuffixDirective, HubSelectTagDirective, HubSelectTypeToSearchDirective, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubTimepickerComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFileInputLabels, defaultHubFormsConfig, defaultHubPasswordLabels, 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, scorePasswordStrength, toFileArray, uuid };
 //# sourceMappingURL=ng-hub-ui-forms.mjs.map