@spartan-ng/brain 0.0.1-alpha.707 → 0.0.1-alpha.708

package/fesm2022/spartan-ng-brain-combobox.mjs

@@ -74,12 +74,12 @@ class BrnComboboxContent {
     _combobox = injectBrnComboboxBase();
     el = inject(ElementRef);
     /** Determine if the combobox has no visible items */
-    _isEmpty = computed(() => !this._combobox.visibleItems(), ...(ngDevMode ? [{ debugName: "_isEmpty" }] : []));
+    _isEmpty = computed(() => !this._combobox.visibleItems(), ...(ngDevMode ? [{ debugName: "_isEmpty" }] : /* istanbul ignore next */ []));
     _comboboxWidth = this._combobox.searchInputWrapperWidth;
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnComboboxContent, isStandalone: true, selector: "[brnComboboxContent]", host: { properties: { "attr.data-empty": "_isEmpty() ? \"\" : null", "style.--brn-combobox-width.px": "_comboboxWidth()" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnComboboxContent, isStandalone: true, selector: "[brnComboboxContent]", host: { properties: { "attr.data-empty": "_isEmpty() ? \"\" : null", "style.--brn-combobox-width.px": "_comboboxWidth()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxContent]',
@@ -108,56 +108,48 @@ class BrnCombobox {
     _brnPopover = inject(BrnPopover, { optional: true });
     controlState = this._fieldControl?.controlState;
     /** Whether the combobox is disabled */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    _disabled = linkedSignal(this.disabled, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _disabled = linkedSignal(this.disabled, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     /** @internal The disabled state as a readonly signal */
     disabledState = this._disabled.asReadonly();
     /** Options for filtering the combobox items */
-    filterOptions = input({}, ...(ngDevMode ? [{ debugName: "filterOptions" }] : []));
+    filterOptions = input({}, ...(ngDevMode ? [{ debugName: "filterOptions" }] : /* istanbul ignore next */ []));
     /** @internal The collator used for string comparison */
     collator = computed(() => {
         const options = this.filterOptions();
         const mergedOptions = { ...this._config.filterOptions, ...options };
         return new Intl.Collator(options.locale, mergedOptions);
-    }, ...(ngDevMode ? [{ debugName: "collator" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "collator" }] : /* istanbul ignore next */ []));
     /** A function to compare an item with the selected value. */
-    isItemEqualToValue = input(this._config.isItemEqualToValue, ...(ngDevMode ? [{ debugName: "isItemEqualToValue" }] : []));
+    isItemEqualToValue = input(this._config.isItemEqualToValue, ...(ngDevMode ? [{ debugName: "isItemEqualToValue" }] : /* istanbul ignore next */ []));
     /** A function to convert an item to a string for display. */
-    itemToString = input(this._config.itemToString, ...(ngDevMode ? [{ debugName: "itemToString" }] : []));
+    itemToString = input(this._config.itemToString, ...(ngDevMode ? [{ debugName: "itemToString" }] : /* istanbul ignore next */ []));
     /** A custom filter function to use when searching. */
-    filter = input(this._config.filter, ...(ngDevMode ? [{ debugName: "filter" }] : []));
+    filter = input(this._config.filter, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
     /** Whether to auto-highlight the first matching item. */
-    autoHighlight = input(this._config.autoHighlight, ...(ngDevMode ? [{ debugName: "autoHighlight", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
+    autoHighlight = input(this._config.autoHighlight, { ...(ngDevMode ? { debugName: "autoHighlight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Whether to close the popover after selecting an item. */
-    closeOnSelect = input(this._config.closeOnSelect, ...(ngDevMode ? [{ debugName: "closeOnSelect", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
+    closeOnSelect = input(this._config.closeOnSelect, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** The selected value of the combobox. */
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    hasValue = computed(() => this.value() !== null, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => this.value() !== null && this.value() !== undefined, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
     /** The current search query. */
-    search = model('', ...(ngDevMode ? [{ debugName: "search" }] : []));
-    _inputWidth = signal(null, ...(ngDevMode ? [{ debugName: "_inputWidth" }] : []));
+    search = model('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    _inputWidth = signal(null, ...(ngDevMode ? [{ debugName: "_inputWidth" }] : /* istanbul ignore next */ []));
     /** @internal The width of the search input wrapper */
     searchInputWrapperWidth = this._inputWidth.asReadonly();
     /** @internal Access all the items within the combobox */
-    items = contentChildren(BrnComboboxItemToken, ...(ngDevMode ? [{ debugName: "items", descendants: true }] : [{
-            descendants: true,
-        }]));
-    _content = contentChild(BrnComboboxContent, ...(ngDevMode ? [{ debugName: "_content", descendants: true }] : [{
-            descendants: true,
-        }]));
+    items = contentChildren(BrnComboboxItemToken, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
+    _content = contentChild(BrnComboboxContent, { ...(ngDevMode ? { debugName: "_content" } : /* istanbul ignore next */ {}), descendants: true });
     /** Determine if the combobox has any visible items */
-    visibleItems = computed(() => this.items().some((item) => item.visible()), ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
+    visibleItems = computed(() => this.items().some((item) => item.visible()), ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
     /** @internal The key manager for managing active descendant */
     keyManager = new ActiveDescendantKeyManager(this.items, this._injector);
     /** @internal Whether the combobox is expanded */
-    isExpanded = computed(() => this._brnPopover?.stateComputed() === 'open', ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
-    _comboboxInput = signal(undefined, ...(ngDevMode ? [{ debugName: "_comboboxInput" }] : []));
-    mode = computed(() => this._comboboxInput()?.mode() || 'combobox', ...(ngDevMode ? [{ debugName: "mode" }] : []));
-    labelableId = computed(() => this._comboboxInput()?.id(), ...(ngDevMode ? [{ debugName: "labelableId" }] : []));
+    isExpanded = computed(() => this._brnPopover?.stateComputed() === 'open', ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    _comboboxInput = signal(undefined, ...(ngDevMode ? [{ debugName: "_comboboxInput" }] : /* istanbul ignore next */ []));
+    mode = computed(() => this._comboboxInput()?.mode() || 'combobox', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    labelableId = computed(() => this._comboboxInput()?.id(), ...(ngDevMode ? [{ debugName: "labelableId" }] : /* istanbul ignore next */ []));
     _onChange;
     _onTouched;
     constructor() {
@@ -261,10 +253,10 @@ class BrnCombobox {
             return;
         this._brnPopover?.close();
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.17", type: BrnCombobox, isStandalone: true, selector: "[brnCombobox]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToString: { classPropertyName: "itemToString", publicName: "itemToString", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, host: { listeners: { "focusout": "_onFocusOut($event)" } }, providers: [BRN_COMBOBOX_VALUE_ACCESSOR, provideBrnComboboxBase(BrnCombobox), provideBrnLabelable(BrnCombobox)], queries: [{ propertyName: "items", predicate: BrnComboboxItemToken, descendants: true, isSignal: true }, { propertyName: "_content", first: true, predicate: BrnComboboxContent, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BrnFieldControl }], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnCombobox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: BrnCombobox, isStandalone: true, selector: "[brnCombobox]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToString: { classPropertyName: "itemToString", publicName: "itemToString", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, host: { listeners: { "focusout": "_onFocusOut($event)" } }, providers: [BRN_COMBOBOX_VALUE_ACCESSOR, provideBrnComboboxBase(BrnCombobox), provideBrnLabelable(BrnCombobox)], queries: [{ propertyName: "items", predicate: BrnComboboxItemToken, descendants: true, isSignal: true }, { propertyName: "_content", first: true, predicate: BrnComboboxContent, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BrnFieldControl }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnCombobox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnCombobox, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnCombobox]',
@@ -301,10 +293,10 @@ class BrnComboboxAnchor {
             return;
         this._brnDialog.mutableAttachTo.set(this._host.nativeElement);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnComboboxAnchor, isStandalone: true, selector: "[brnComboboxAnchor]", ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnComboboxAnchor, isStandalone: true, selector: "[brnComboboxAnchor]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxAnchor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxAnchor, decorators: [{
             type: Directive,
             args: [{ selector: '[brnComboboxAnchor]' }]
         }], ctorParameters: () => [] });
@@ -312,11 +304,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 class BrnComboboxChip {
     _combobox = injectBrnComboboxBase();
     _disabled = this._combobox.disabledState;
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxChip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnComboboxChip, isStandalone: true, selector: "[brnComboboxChip]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, properties: { "attr.data-disabled": "_disabled() ? \"\" : null", "attr.aria-disabled": "_disabled() ? \"true\" : null" } }, ngImport: i0 });
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxChip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnComboboxChip, isStandalone: true, selector: "[brnComboboxChip]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "tabindex": "-1" }, properties: { "attr.data-disabled": "_disabled() ? \"\" : null", "attr.aria-disabled": "_disabled() ? \"true\" : null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxChip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxChip, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxChip]',
@@ -333,18 +325,15 @@ class BrnComboboxChipInput {
     _el = inject(ElementRef);
     _combobox = injectBrnComboboxBase();
     /** The id of the combobox input */
-    id = input(`brn-combobox-input-${++BrnComboboxChipInput._id}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`brn-combobox-input-${++BrnComboboxChipInput._id}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** Manual override for aria-invalid. When not set, auto-detects from the parent combobox error state. */
-    ariaInvalidOverride = input(undefined, ...(ngDevMode ? [{ debugName: "ariaInvalidOverride", transform: (v) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
-            alias: 'aria-invalid' }] : [{
-            transform: (v) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
-            alias: 'aria-invalid',
-        }]));
+    ariaInvalidOverride = input(undefined, { ...(ngDevMode ? { debugName: "ariaInvalidOverride" } : /* istanbul ignore next */ {}), transform: (v) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
+        alias: 'aria-invalid' });
     /** Computed aria-invalid: uses manual override if provided, otherwise reads from parent error state. */
-    _ariaInvalid = computed(() => this.ariaInvalidOverride() ?? this._combobox.controlState?.()?.invalid, ...(ngDevMode ? [{ debugName: "_ariaInvalid" }] : []));
-    _dirty = computed(() => this._combobox.controlState?.()?.dirty, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
-    _touched = computed(() => this._combobox.controlState?.()?.touched, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
-    _spartanInvalid = computed(() => this._combobox.controlState?.()?.spartanInvalid, ...(ngDevMode ? [{ debugName: "_spartanInvalid" }] : []));
+    _ariaInvalid = computed(() => this.ariaInvalidOverride() ?? this._combobox.controlState?.()?.invalid, ...(ngDevMode ? [{ debugName: "_ariaInvalid" }] : /* istanbul ignore next */ []));
+    _dirty = computed(() => this._combobox.controlState?.()?.dirty, ...(ngDevMode ? [{ debugName: "_dirty" }] : /* istanbul ignore next */ []));
+    _touched = computed(() => this._combobox.controlState?.()?.touched, ...(ngDevMode ? [{ debugName: "_touched" }] : /* istanbul ignore next */ []));
+    _spartanInvalid = computed(() => this._combobox.controlState?.()?.spartanInvalid, ...(ngDevMode ? [{ debugName: "_spartanInvalid" }] : /* istanbul ignore next */ []));
     _disabled = this._combobox.disabledState;
     /** Whether the combobox panel is expanded */
     _isExpanded = this._combobox.isExpanded;
@@ -383,10 +372,10 @@ class BrnComboboxChipInput {
         }
         this._combobox.keyManager.onKeydown(event);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxChipInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnComboboxChipInput, isStandalone: true, selector: "input[brnComboboxChipInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalidOverride: { classPropertyName: "ariaInvalidOverride", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "autocomplete": "off", "autocorrect": "off", "autocapitalize": "none", "spellcheck": "false", "aria-autocomplete": "list", "aria-haspopup": "listbox" }, listeners: { "keydown": "onKeyDown($event)", "input": "onInput($event)" }, properties: { "id": "id()", "attr.aria-expanded": "_isExpanded()", "attr.aria-invalid": "_ariaInvalid() ? \"true\" : null", "attr.data-invalid": "_ariaInvalid() ? \"true\" : null", "attr.data-matches-spartan-invalid": "_spartanInvalid() ? \"true\" : null", "attr.data-dirty": "_touched() ? \"true\" : null", "attr.data-touched": "_touched() ? \"true\" : null", "attr.disabled": "_disabled() ? \"\" : null", "attr.data-disabled": "_disabled() ? \"\" : null" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxChipInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnComboboxChipInput, isStandalone: true, selector: "input[brnComboboxChipInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalidOverride: { classPropertyName: "ariaInvalidOverride", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "autocomplete": "off", "autocorrect": "off", "autocapitalize": "none", "spellcheck": "false", "aria-autocomplete": "list", "aria-haspopup": "listbox" }, listeners: { "keydown": "onKeyDown($event)", "input": "onInput($event)" }, properties: { "id": "id()", "attr.aria-expanded": "_isExpanded()", "attr.aria-invalid": "_ariaInvalid() ? \"true\" : null", "attr.data-invalid": "_ariaInvalid() ? \"true\" : null", "attr.data-matches-spartan-invalid": "_spartanInvalid() ? \"true\" : null", "attr.data-dirty": "_touched() ? \"true\" : null", "attr.data-touched": "_touched() ? \"true\" : null", "attr.disabled": "_disabled() ? \"\" : null", "attr.data-disabled": "_disabled() ? \"\" : null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxChipInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxChipInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[brnComboboxChipInput]',
@@ -426,10 +415,10 @@ class BrnComboboxChipRemove {
         const value = this._chip.value();
         this._combobox.removeValue(value);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxChipRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnComboboxChipRemove, isStandalone: true, selector: "button[brnComboboxChipRemove]", host: { attributes: { "type": "button", "tabindex": "-1", "aria-disabled": "true" }, listeners: { "click": "removeChip($event)" }, properties: { "attr.data-disabled": "_disabled() ? \"\" : null", "attr.aria-disabled": "_disabled() ? \"true\" : null", "attr.disabled": "_disabled() ? \"\" : null" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxChipRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnComboboxChipRemove, isStandalone: true, selector: "button[brnComboboxChipRemove]", host: { attributes: { "type": "button", "tabindex": "-1", "aria-disabled": "true" }, listeners: { "click": "removeChip($event)" }, properties: { "attr.data-disabled": "_disabled() ? \"\" : null", "attr.aria-disabled": "_disabled() ? \"true\" : null", "attr.disabled": "_disabled() ? \"\" : null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxChipRemove, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxChipRemove, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[brnComboboxChipRemove]',
@@ -459,7 +448,7 @@ class BrnComboboxClear {
         else {
             return this._combobox.search() !== '';
         }
-    }, ...(ngDevMode ? [{ debugName: "_shouldShowClear" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_shouldShowClear" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             this._viewContainerRef.clear();
@@ -483,10 +472,10 @@ class BrnComboboxClear {
             this._combobox.resetSearch();
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnComboboxClear, isStandalone: true, selector: "[brnComboboxClear]", ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxClear, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnComboboxClear, isStandalone: true, selector: "[brnComboboxClear]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxClear, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxClear, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxClear]',
@@ -494,10 +483,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         }], ctorParameters: () => [] });
 
 class BrnComboboxEmpty {
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnComboboxEmpty, isStandalone: true, selector: "[brnComboboxEmpty]", host: { attributes: { "role": "status", "aria-live": "polite", "aria-atomic": "true" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnComboboxEmpty, isStandalone: true, selector: "[brnComboboxEmpty]", host: { attributes: { "role": "status", "aria-live": "polite", "aria-atomic": "true" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxEmpty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxEmpty, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxEmpty]',
@@ -512,11 +501,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 class BrnComboboxLabel {
     static _id = 0;
     /** The id of the combobox label */
-    id = input(`brn-combobox-label-${++BrnComboboxLabel._id}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnComboboxLabel, isStandalone: true, selector: "[brnComboboxLabel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" } }, ngImport: i0 });
+    id = input(`brn-combobox-label-${++BrnComboboxLabel._id}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnComboboxLabel, isStandalone: true, selector: "[brnComboboxLabel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxLabel]',
@@ -528,21 +517,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 class BrnComboboxGroup {
     /** Get the items in the group */
-    _items = contentChildren(BrnComboboxItemToken, ...(ngDevMode ? [{ debugName: "_items", descendants: true }] : [{
-            descendants: true,
-        }]));
+    _items = contentChildren(BrnComboboxItemToken, { ...(ngDevMode ? { debugName: "_items" } : /* istanbul ignore next */ {}), descendants: true });
     /** Determine if there are any visible items in the group */
-    _visible = computed(() => this._items().some((item) => item.visible()), ...(ngDevMode ? [{ debugName: "_visible" }] : []));
+    _visible = computed(() => this._items().some((item) => item.visible()), ...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
     /** Get the label associated with the group */
-    _label = contentChild(BrnComboboxLabel, ...(ngDevMode ? [{ debugName: "_label" }] : []));
+    _label = contentChild(BrnComboboxLabel, ...(ngDevMode ? [{ debugName: "_label" }] : /* istanbul ignore next */ []));
     _labelledBy = computed(() => {
         const label = this._label();
         return label ? label.id() : null;
-    }, ...(ngDevMode ? [{ debugName: "_labelledBy" }] : []));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.17", type: BrnComboboxGroup, isStandalone: true, selector: "[brnComboboxGroup]", host: { attributes: { "role": "group" }, properties: { "attr.data-hidden": "!_visible() ? \"\" : null", "attr.aria-labelledby": "_labelledBy()" } }, queries: [{ propertyName: "_items", predicate: BrnComboboxItemToken, descendants: true, isSignal: true }, { propertyName: "_label", first: true, predicate: BrnComboboxLabel, descendants: true, isSignal: true }], ngImport: i0 });
+    }, ...(ngDevMode ? [{ debugName: "_labelledBy" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: BrnComboboxGroup, isStandalone: true, selector: "[brnComboboxGroup]", host: { attributes: { "role": "group" }, properties: { "attr.data-hidden": "!_visible() ? \"\" : null", "attr.aria-labelledby": "_labelledBy()" } }, queries: [{ propertyName: "_items", predicate: BrnComboboxItemToken, descendants: true, isSignal: true }, { propertyName: "_label", first: true, predicate: BrnComboboxLabel, descendants: true, isSignal: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxGroup]',
@@ -561,25 +548,22 @@ class BrnComboboxInput {
     _el = inject(ElementRef);
     _combobox = injectBrnComboboxBase();
     _content = inject(BrnComboboxContent, { optional: true });
-    mode = computed(() => (this._content ? 'popup' : 'combobox'), ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    mode = computed(() => (this._content ? 'popup' : 'combobox'), ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     /** The id of the combobox input */
-    id = input(`brn-combobox-input-${++BrnComboboxInput._id}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`brn-combobox-input-${++BrnComboboxInput._id}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** Manual override for aria-invalid. When not set, auto-detects from the parent combobox error state. */
-    ariaInvalidOverride = input(undefined, ...(ngDevMode ? [{ debugName: "ariaInvalidOverride", transform: (v) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
-            alias: 'aria-invalid' }] : [{
-            transform: (v) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
-            alias: 'aria-invalid',
-        }]));
+    ariaInvalidOverride = input(undefined, { ...(ngDevMode ? { debugName: "ariaInvalidOverride" } : /* istanbul ignore next */ {}), transform: (v) => (v === '' || v === undefined ? undefined : booleanAttribute(v)),
+        alias: 'aria-invalid' });
     /** Forces the invalid state visually, regardless of form control state. */
-    forceInvalid = input(false, ...(ngDevMode ? [{ debugName: "forceInvalid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    forceInvalid = input(false, { ...(ngDevMode ? { debugName: "forceInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     disabled = this._combobox.disabledState;
     /** Whether the combobox panel is expanded */
     _isExpanded = this._combobox.isExpanded;
     /** Computed aria-invalid: uses manual override if provided, otherwise reads from parent error state. */
-    _ariaInvalid = computed(() => this.ariaInvalidOverride() ?? this._combobox.controlState?.()?.invalid, ...(ngDevMode ? [{ debugName: "_ariaInvalid" }] : []));
-    _dirty = computed(() => this._combobox.controlState?.()?.dirty, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
-    _touched = computed(() => this._combobox.controlState?.()?.touched, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
-    _spartanInvalid = computed(() => this.forceInvalid() || this._combobox.controlState?.()?.spartanInvalid, ...(ngDevMode ? [{ debugName: "_spartanInvalid" }] : []));
+    _ariaInvalid = computed(() => this.ariaInvalidOverride() ?? this._combobox.controlState?.()?.invalid, ...(ngDevMode ? [{ debugName: "_ariaInvalid" }] : /* istanbul ignore next */ []));
+    _dirty = computed(() => this._combobox.controlState?.()?.dirty, ...(ngDevMode ? [{ debugName: "_dirty" }] : /* istanbul ignore next */ []));
+    _touched = computed(() => this._combobox.controlState?.()?.touched, ...(ngDevMode ? [{ debugName: "_touched" }] : /* istanbul ignore next */ []));
+    _spartanInvalid = computed(() => this.forceInvalid() || this._combobox.controlState?.()?.spartanInvalid, ...(ngDevMode ? [{ debugName: "_spartanInvalid" }] : /* istanbul ignore next */ []));
     constructor() {
         this._combobox.registerComboboxInput?.(this);
         effect(() => {
@@ -627,10 +611,10 @@ class BrnComboboxInput {
         }
         this._combobox.keyManager.onKeydown(event);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnComboboxInput, isStandalone: true, selector: "input[brnComboboxInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalidOverride: { classPropertyName: "ariaInvalidOverride", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, forceInvalid: { classPropertyName: "forceInvalid", publicName: "forceInvalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "autocomplete": "off", "autocorrect": "off", "autocapitalize": "none", "spellcheck": "false", "aria-autocomplete": "list", "aria-haspopup": "listbox" }, listeners: { "keydown": "onKeyDown($event)", "input": "onInput($event)" }, properties: { "id": "id()", "attr.aria-expanded": "_isExpanded()", "attr.aria-invalid": "_ariaInvalid() ? \"true\": null", "attr.data-invalid": "_ariaInvalid() ? \"true\": null", "attr.data-matches-spartan-invalid": "_spartanInvalid() ? \"true\": null", "attr.data-touched": "_touched() ? \"true\": null", "attr.data-dirty": "_dirty() ? \"true\": null", "attr.disabled": "disabled() ? \"\" : null" } }, exportAs: ["brnComboboxInput"], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnComboboxInput, isStandalone: true, selector: "input[brnComboboxInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalidOverride: { classPropertyName: "ariaInvalidOverride", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, forceInvalid: { classPropertyName: "forceInvalid", publicName: "forceInvalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "autocomplete": "off", "autocorrect": "off", "autocapitalize": "none", "spellcheck": "false", "aria-autocomplete": "list", "aria-haspopup": "listbox" }, listeners: { "keydown": "onKeyDown($event)", "input": "onInput($event)" }, properties: { "id": "id()", "attr.aria-expanded": "_isExpanded()", "attr.aria-invalid": "_ariaInvalid() ? \"true\": null", "attr.data-invalid": "_ariaInvalid() ? \"true\": null", "attr.data-matches-spartan-invalid": "_spartanInvalid() ? \"true\": null", "attr.data-touched": "_touched() ? \"true\": null", "attr.data-dirty": "_dirty() ? \"true\": null", "attr.disabled": "disabled() ? \"\" : null" } }, exportAs: ["brnComboboxInput"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[brnComboboxInput]',
@@ -665,26 +649,23 @@ class BrnComboboxItem {
     /** Access the combobox component */
     _combobox = injectBrnComboboxBase();
     /** A unique id for the item */
-    id = input(`brn-combobox-item-${++BrnComboboxItem._id}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`brn-combobox-item-${++BrnComboboxItem._id}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** The value this item represents. */
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    _disabled = input(false, ...(ngDevMode ? [{ debugName: "_disabled", alias: 'disabled',
-            transform: booleanAttribute }] : [{
-            alias: 'disabled',
-            transform: booleanAttribute,
-        }]));
+    _disabled = input(false, { ...(ngDevMode ? { debugName: "_disabled" } : /* istanbul ignore next */ {}), alias: 'disabled',
+        transform: booleanAttribute });
     /** Expose disabled as a value - used by the Highlightable interface */
     get disabled() {
         return this._disabled();
     }
     /** Whether the item is selected. */
-    active = computed(() => this._combobox.isSelected(this.value()), ...(ngDevMode ? [{ debugName: "active" }] : []));
-    _highlighted = signal(false, ...(ngDevMode ? [{ debugName: "_highlighted" }] : []));
+    active = computed(() => this._combobox.isSelected(this.value()), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    _highlighted = signal(false, ...(ngDevMode ? [{ debugName: "_highlighted" }] : /* istanbul ignore next */ []));
     /** @internal Determine if this item is visible based on the current search query */
     visible = computed(() => {
         return this._combobox.filter()(this.value(), this._combobox.search(), this._combobox.collator(), this._combobox.itemToString());
-    }, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     setActiveStyles() {
         this._highlighted.set(true);
         // ensure the item is in view
@@ -711,10 +692,10 @@ class BrnComboboxItem {
         }
         this._combobox.keyManager.setActiveItem(this);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnComboboxItem, isStandalone: true, selector: "[brnComboboxItem]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "select()", "mouseenter": "activate()" }, properties: { "id": "id()", "attr.data-highlighted": "_highlighted() ? \"\" : null", "attr.data-value": "value()", "attr.data-hidden": "!visible() ? '' : null", "attr.aria-selected": "active()", "attr.aria-disabled": "_disabled()", "attr.data-disabled": "_disabled() ? \"\" : null" } }, providers: [provideBrnComboboxItem(BrnComboboxItem)], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnComboboxItem, isStandalone: true, selector: "[brnComboboxItem]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, _disabled: { classPropertyName: "_disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "select()", "mouseenter": "activate()" }, properties: { "id": "id()", "attr.data-highlighted": "_highlighted() ? \"\" : null", "attr.data-value": "value()", "attr.data-hidden": "!visible() ? '' : null", "attr.aria-selected": "active()", "attr.aria-disabled": "_disabled()", "attr.data-disabled": "_disabled() ? \"\" : null" } }, providers: [provideBrnComboboxItem(BrnComboboxItem)], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxItem]',
@@ -740,11 +721,11 @@ class BrnComboboxList {
     /** Determine if the combobox has any visible items */
     _visibleItems = this._combobox.visibleItems;
     /** The id of the combobox list */
-    id = input(`brn-combobox-list-${++BrnComboboxList._id}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnComboboxList, isStandalone: true, selector: "[brnComboboxList]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox", "tabIndex": "-1", "aria-orientation": "vertical" }, properties: { "id": "id()", "attr.data-empty": "!_visibleItems() ? \"\" : null" } }, ngImport: i0 });
+    id = input(`brn-combobox-list-${++BrnComboboxList._id}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnComboboxList, isStandalone: true, selector: "[brnComboboxList]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox", "tabIndex": "-1", "aria-orientation": "vertical" }, properties: { "id": "id()", "attr.data-empty": "!_visibleItems() ? \"\" : null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxList]',
@@ -771,61 +752,53 @@ class BrnComboboxMultiple {
     _brnPopover = inject(BrnPopover, { optional: true });
     controlState = this._fieldControl?.controlState;
     /** Whether the combobox is disabled */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    _disabled = linkedSignal(this.disabled, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _disabled = linkedSignal(this.disabled, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     /** @internal The disabled state as a readonly signal */
     disabledState = this._disabled.asReadonly();
     /** Options for filtering the combobox items */
-    filterOptions = input({}, ...(ngDevMode ? [{ debugName: "filterOptions" }] : []));
+    filterOptions = input({}, ...(ngDevMode ? [{ debugName: "filterOptions" }] : /* istanbul ignore next */ []));
     /** @internal The collator used for string comparison */
     collator = computed(() => {
         const options = this.filterOptions();
         const mergedOptions = { ...this._config.filterOptions, ...options };
         return new Intl.Collator(options.locale, mergedOptions);
-    }, ...(ngDevMode ? [{ debugName: "collator" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "collator" }] : /* istanbul ignore next */ []));
     /** A function to compare an item with the selected value. */
-    isItemEqualToValue = input(this._config.isItemEqualToValue, ...(ngDevMode ? [{ debugName: "isItemEqualToValue" }] : []));
+    isItemEqualToValue = input(this._config.isItemEqualToValue, ...(ngDevMode ? [{ debugName: "isItemEqualToValue" }] : /* istanbul ignore next */ []));
     /** A function to convert an item to a string for display. */
-    itemToString = input(this._config.itemToString, ...(ngDevMode ? [{ debugName: "itemToString" }] : []));
+    itemToString = input(this._config.itemToString, ...(ngDevMode ? [{ debugName: "itemToString" }] : /* istanbul ignore next */ []));
     /** A custom filter function to use when searching. */
-    filter = input(this._config.filter, ...(ngDevMode ? [{ debugName: "filter" }] : []));
+    filter = input(this._config.filter, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
     /** Whether to auto-highlight the first matching item. */
-    autoHighlight = input(this._config.autoHighlight, ...(ngDevMode ? [{ debugName: "autoHighlight", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
+    autoHighlight = input(this._config.autoHighlight, { ...(ngDevMode ? { debugName: "autoHighlight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Whether to reset the search and close the popover after selecting an item when the search is active. */
-    closeOnSelect = input(this._config.closeOnSelect, ...(ngDevMode ? [{ debugName: "closeOnSelect", transform: booleanAttribute }] : [{
-            transform: booleanAttribute,
-        }]));
+    closeOnSelect = input(this._config.closeOnSelect, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** The selected values of the combobox. */
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => {
         const value = this.value();
-        if (value == null)
+        if (value === null || value === undefined)
             return false;
         return value.length > 0;
-    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
     /** The current search query. */
-    search = model('', ...(ngDevMode ? [{ debugName: "search" }] : []));
-    _inputWidth = signal(null, ...(ngDevMode ? [{ debugName: "_inputWidth" }] : []));
+    search = model('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    _inputWidth = signal(null, ...(ngDevMode ? [{ debugName: "_inputWidth" }] : /* istanbul ignore next */ []));
     /** @internal The width of the search input wrapper */
     searchInputWrapperWidth = this._inputWidth.asReadonly();
     /** @internal Access all the items within the combobox */
-    items = contentChildren(BrnComboboxItemToken, ...(ngDevMode ? [{ debugName: "items", descendants: true }] : [{
-            descendants: true,
-        }]));
-    _content = contentChild(BrnComboboxContent, ...(ngDevMode ? [{ debugName: "_content", descendants: true }] : [{
-            descendants: true,
-        }]));
+    items = contentChildren(BrnComboboxItemToken, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
+    _content = contentChild(BrnComboboxContent, { ...(ngDevMode ? { debugName: "_content" } : /* istanbul ignore next */ {}), descendants: true });
     /** Determine if the combobox has any visible items */
-    visibleItems = computed(() => this.items().some((item) => item.visible()), ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
+    visibleItems = computed(() => this.items().some((item) => item.visible()), ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
     /** @internal The key manager for managing active descendant */
     keyManager = new ActiveDescendantKeyManager(this.items, this._injector);
     /** @internal Whether the autocomplete is expanded */
-    isExpanded = computed(() => this._brnPopover?.stateComputed() === 'open', ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
-    _comboboxChipInput = signal(undefined, ...(ngDevMode ? [{ debugName: "_comboboxChipInput" }] : []));
+    isExpanded = computed(() => this._brnPopover?.stateComputed() === 'open', ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    _comboboxChipInput = signal(undefined, ...(ngDevMode ? [{ debugName: "_comboboxChipInput" }] : /* istanbul ignore next */ []));
     mode = signal('combobox').asReadonly();
-    labelableId = computed(() => this._comboboxChipInput()?.id(), ...(ngDevMode ? [{ debugName: "labelableId" }] : []));
+    labelableId = computed(() => this._comboboxChipInput()?.id(), ...(ngDevMode ? [{ debugName: "labelableId" }] : /* istanbul ignore next */ []));
     _onChange;
     _onTouched;
     constructor() {
@@ -943,14 +916,14 @@ class BrnComboboxMultiple {
     setDisabledState(isDisabled) {
         this._disabled.set(isDisabled);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxMultiple, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.17", type: BrnComboboxMultiple, isStandalone: true, selector: "[brnCombobox]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToString: { classPropertyName: "itemToString", publicName: "itemToString", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, host: { listeners: { "focusout": "_onFocusOut($event)" } }, providers: [
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxMultiple, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: BrnComboboxMultiple, isStandalone: true, selector: "[brnCombobox]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, isItemEqualToValue: { classPropertyName: "isItemEqualToValue", publicName: "isItemEqualToValue", isSignal: true, isRequired: false, transformFunction: null }, itemToString: { classPropertyName: "itemToString", publicName: "itemToString", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, autoHighlight: { classPropertyName: "autoHighlight", publicName: "autoHighlight", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "searchChange" }, host: { listeners: { "focusout": "_onFocusOut($event)" } }, providers: [
             BRN_COMBOBOX_MULTIPLE_VALUE_ACCESSOR,
             provideBrnComboboxBase(BrnComboboxMultiple),
             provideBrnLabelable(BrnComboboxMultiple),
         ], queries: [{ propertyName: "items", predicate: BrnComboboxItemToken, descendants: true, isSignal: true }, { propertyName: "_content", first: true, predicate: BrnComboboxContent, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BrnFieldControl }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxMultiple, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxMultiple, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnCombobox]',
@@ -973,10 +946,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 class BrnComboboxPlaceholder {
     _combobox = injectBrnComboboxBase();
     _hasValue = this._combobox.hasValue;
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnComboboxPlaceholder, isStandalone: true, selector: "[brnComboboxPlaceholder]", host: { properties: { "attr.data-hidden": "_hasValue() ? \"\" : null" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnComboboxPlaceholder, isStandalone: true, selector: "[brnComboboxPlaceholder]", host: { properties: { "attr.data-hidden": "_hasValue() ? \"\" : null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxPlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxPlaceholder, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxPlaceholder]',
@@ -994,10 +967,10 @@ class BrnComboboxPopoverTrigger {
             return;
         this._brnDialog?.open();
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnComboboxPopoverTrigger, isStandalone: true, selector: "[brnComboboxPopoverTrigger]", host: { listeners: { "click": "open()" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnComboboxPopoverTrigger, isStandalone: true, selector: "[brnComboboxPopoverTrigger]", host: { listeners: { "click": "open()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxPopoverTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxPopoverTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxPopoverTrigger]',
@@ -1008,11 +981,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         }] });
 
 class BrnComboboxSeparator {
-    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnComboboxSeparator, isStandalone: true, selector: "[brnComboboxSeparator]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientation()", "attr.data-orientation": "orientation()" } }, ngImport: i0 });
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnComboboxSeparator, isStandalone: true, selector: "[brnComboboxSeparator]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientation()", "attr.data-orientation": "orientation()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxSeparator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxSeparator]',
@@ -1025,10 +998,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
 
 class BrnComboboxStatus {
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxStatus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnComboboxStatus, isStandalone: true, selector: "[brnComboboxStatus]", host: { attributes: { "role": "status", "aria-live": "polite", "aria-atomic": "true" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxStatus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnComboboxStatus, isStandalone: true, selector: "[brnComboboxStatus]", host: { attributes: { "role": "status", "aria-live": "polite", "aria-atomic": "true" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxStatus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxStatus, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxStatus]',
@@ -1044,21 +1017,21 @@ class BrnComboboxTrigger {
     _combobox = injectBrnComboboxBase();
     _isExpanded = this._combobox.isExpanded;
     _disabled = this._combobox.disabledState;
-    _isPlaceholder = computed(() => !this._combobox.hasValue(), ...(ngDevMode ? [{ debugName: "_isPlaceholder" }] : []));
-    _ariaInvalid = computed(() => this._combobox.controlState?.()?.invalid, ...(ngDevMode ? [{ debugName: "_ariaInvalid" }] : []));
-    _dirty = computed(() => this._combobox.controlState?.()?.dirty, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
-    _touched = computed(() => this._combobox.controlState?.()?.touched, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
-    _spartanInvalid = computed(() => this._combobox.controlState?.()?.spartanInvalid, ...(ngDevMode ? [{ debugName: "_spartanInvalid" }] : []));
+    _isPlaceholder = computed(() => !this._combobox.hasValue(), ...(ngDevMode ? [{ debugName: "_isPlaceholder" }] : /* istanbul ignore next */ []));
+    _ariaInvalid = computed(() => this._combobox.controlState?.()?.invalid, ...(ngDevMode ? [{ debugName: "_ariaInvalid" }] : /* istanbul ignore next */ []));
+    _dirty = computed(() => this._combobox.controlState?.()?.dirty, ...(ngDevMode ? [{ debugName: "_dirty" }] : /* istanbul ignore next */ []));
+    _touched = computed(() => this._combobox.controlState?.()?.touched, ...(ngDevMode ? [{ debugName: "_touched" }] : /* istanbul ignore next */ []));
+    _spartanInvalid = computed(() => this._combobox.controlState?.()?.spartanInvalid, ...(ngDevMode ? [{ debugName: "_spartanInvalid" }] : /* istanbul ignore next */ []));
     /** Listen for keydown events */
     onKeyDown(event) {
         if (!this._combobox.isExpanded() && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
             this._combobox.open();
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnComboboxTrigger, isStandalone: true, selector: "button[brnComboboxTrigger]", host: { attributes: { "type": "button", "role": "combobox", "aria-haspopup": "dialog" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-expanded": "_isExpanded() ? \"true\" : \"false\"", "attr.aria-disabled": "_disabled() ? \"true\" : null", "attr.disabled": "_disabled() ? \"\" : null", "attr.data-placeholder": "_isPlaceholder() ? \"\" : null", "attr.aria-invalid": " _ariaInvalid() ? \"true\": null", "attr.data-invalid": " _ariaInvalid() ? \"true\": null", "attr.data-matches-spartan-invalid": " _spartanInvalid() ? \"true\": null", "attr.data-touched": " _touched() ? \"true\": null", "attr.data-dirty": " _dirty() ? \"true\": null" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnComboboxTrigger, isStandalone: true, selector: "button[brnComboboxTrigger]", host: { attributes: { "type": "button", "role": "combobox", "aria-haspopup": "dialog" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-expanded": "_isExpanded() ? \"true\" : \"false\"", "attr.aria-disabled": "_disabled() ? \"true\" : null", "attr.disabled": "_disabled() ? \"\" : null", "attr.data-placeholder": "_isPlaceholder() ? \"\" : null", "attr.aria-invalid": " _ariaInvalid() ? \"true\": null", "attr.data-invalid": " _ariaInvalid() ? \"true\": null", "attr.data-matches-spartan-invalid": " _spartanInvalid() ? \"true\": null", "attr.data-touched": " _touched() ? \"true\": null", "attr.data-dirty": " _dirty() ? \"true\": null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[brnComboboxTrigger]',
@@ -1082,18 +1055,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 class BrnComboboxValue {
     _combobox = injectBrnComboboxBase();
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    _isPlaceholder = computed(() => !this._combobox.hasValue(), ...(ngDevMode ? [{ debugName: "_isPlaceholder" }] : []));
-    hidden = computed(() => !this._combobox.hasValue() && !this.placeholder(), ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    _isPlaceholder = computed(() => !this._combobox.hasValue(), ...(ngDevMode ? [{ debugName: "_isPlaceholder" }] : /* istanbul ignore next */ []));
+    hidden = computed(() => !this._combobox.hasValue() && !this.placeholder(), ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
     _value = computed(() => {
         return this._combobox.hasValue()
             ? stringifyAsLabel(this._combobox.value(), this._combobox.itemToString())
             : this.placeholder();
-    }, ...(ngDevMode ? [{ debugName: "_value" }] : []));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnComboboxValue, isStandalone: true, selector: "[brnComboboxValue]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-placeholder": "_isPlaceholder() ? \"\" : null", "attr.data-hidden": "hidden() ? \"\" : null", "textContent": "_value()" } }, ngImport: i0 });
+    }, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnComboboxValue, isStandalone: true, selector: "[brnComboboxValue]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-placeholder": "_isPlaceholder() ? \"\" : null", "attr.data-hidden": "hidden() ? \"\" : null", "textContent": "_value()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxValue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxValue, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxValue]',
@@ -1115,7 +1088,7 @@ class BrnComboboxValueTemplate {
             return null;
         }
         return value;
-    }, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const value = this._value();
@@ -1130,10 +1103,10 @@ class BrnComboboxValueTemplate {
             }
         });
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxValueTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnComboboxValueTemplate, isStandalone: true, selector: "[brnComboboxValueTemplate]", ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxValueTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnComboboxValueTemplate, isStandalone: true, selector: "[brnComboboxValueTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxValueTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxValueTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxValueTemplate]',
@@ -1146,11 +1119,11 @@ class BrnComboboxValues {
     _combobox = injectBrnComboboxBase();
     _values = computed(() => {
         const values = this._combobox.value();
-        if (values == null) {
+        if (values === null || values === undefined) {
             return null;
         }
         return Array.isArray(values) ? values : [values];
-    }, ...(ngDevMode ? [{ debugName: "_values" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_values" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const values = this._values();
@@ -1165,10 +1138,10 @@ class BrnComboboxValues {
             }
         });
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxValues, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnComboboxValues, isStandalone: true, selector: "[brnComboboxValues]", ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxValues, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnComboboxValues, isStandalone: true, selector: "[brnComboboxValues]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnComboboxValues, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnComboboxValues, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnComboboxValues]',