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

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

@@ -55,30 +55,28 @@ class BrnSelect {
     /** Access the popover if present */
     _brnPopover = inject(BrnPopover, { optional: true });
     /** Whether the select 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();
     /** The selected value of the select. */
-    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 */ []));
     /** 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" }] : []));
-    _triggerWidth = signal(null, ...(ngDevMode ? [{ debugName: "_triggerWidth" }] : []));
+    itemToString = input(this._config.itemToString, ...(ngDevMode ? [{ debugName: "itemToString" }] : /* istanbul ignore next */ []));
+    _triggerWidth = signal(null, ...(ngDevMode ? [{ debugName: "_triggerWidth" }] : /* istanbul ignore next */ []));
     /** @internal The width of the trigger wrapper */
     triggerWidth = this._triggerWidth.asReadonly();
     /** @internal Access all the items within the select */
-    items = contentChildren(BrnSelectItemToken, ...(ngDevMode ? [{ debugName: "items", descendants: true }] : [{
-            descendants: true,
-        }]));
+    items = contentChildren(BrnSelectItemToken, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
     /** @internal The key manager for managing active descendant */
     keyManager = new ActiveDescendantKeyManager(this.items, this._injector);
     /** @internal Whether the select is expanded */
-    isExpanded = computed(() => this._brnPopover?.stateComputed() === 'open', ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
-    _selectTrigger = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectTrigger" }] : []));
-    labelableId = computed(() => this._selectTrigger()?.id(), ...(ngDevMode ? [{ debugName: "labelableId" }] : []));
+    isExpanded = computed(() => this._brnPopover?.stateComputed() === 'open', ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    _selectTrigger = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectTrigger" }] : /* istanbul ignore next */ []));
+    labelableId = computed(() => this._selectTrigger()?.id(), ...(ngDevMode ? [{ debugName: "labelableId" }] : /* istanbul ignore next */ []));
     _onChange;
     _onTouched;
     constructor() {
@@ -99,7 +97,9 @@ class BrnSelect {
                 const items = this.items();
                 const value = this.value();
                 untracked(() => {
-                    const index = value !== null ? items.findIndex((item) => this.isItemEqualToValue()(item.value(), value)) : -1;
+                    const index = value !== null && value !== undefined
+                        ? items.findIndex((item) => this.isItemEqualToValue()(item.value(), value))
+                        : -1;
                     if (index !== -1) {
                         this.keyManager.setActiveItem(index);
                     }
@@ -162,10 +162,10 @@ class BrnSelect {
     setDisabledState(isDisabled) {
         this._disabled.set(isDisabled);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.17", type: BrnSelect, isStandalone: true, selector: "[brnSelect]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 } }, outputs: { value: "valueChange" }, providers: [provideBrnSelectBase(BrnSelect), BRN_SELECT_VALUE_ACCESSOR, provideBrnLabelable(BrnSelect)], queries: [{ propertyName: "items", predicate: BrnSelectItemToken, 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: BrnSelect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: BrnSelect, isStandalone: true, selector: "[brnSelect]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 } }, outputs: { value: "valueChange" }, providers: [provideBrnSelectBase(BrnSelect), BRN_SELECT_VALUE_ACCESSOR, provideBrnLabelable(BrnSelect)], queries: [{ propertyName: "items", predicate: BrnSelectItemToken, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BrnFieldControl }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelect, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelect]',
@@ -183,9 +183,9 @@ class BrnSelectContent {
     _select = injectBrnSelectBase();
     _selectWidth = this._select.triggerWidth;
     _elementRef = inject((ElementRef));
-    _scrollUp = signal(false, ...(ngDevMode ? [{ debugName: "_scrollUp" }] : []));
+    _scrollUp = signal(false, ...(ngDevMode ? [{ debugName: "_scrollUp" }] : /* istanbul ignore next */ []));
     showScrollUp = this._scrollUp.asReadonly();
-    _scrollDown = signal(false, ...(ngDevMode ? [{ debugName: "_scrollDown" }] : []));
+    _scrollDown = signal(false, ...(ngDevMode ? [{ debugName: "_scrollDown" }] : /* istanbul ignore next */ []));
     showScrollDown = this._scrollDown.asReadonly();
     constructor() {
         afterNextRender(() => {
@@ -221,10 +221,10 @@ class BrnSelectContent {
             stop();
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnSelectContent, isStandalone: true, selector: "[brnSelectContent]", host: { listeners: { "scroll": "handleScroll()" }, properties: { "style.--brn-select-width.px": "_selectWidth()" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnSelectContent, isStandalone: true, selector: "[brnSelectContent]", host: { listeners: { "scroll": "handleScroll()" }, properties: { "style.--brn-select-width.px": "_selectWidth()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectContent]',
@@ -237,11 +237,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 class BrnSelectLabel {
     static _id = 0;
-    id = input(`brn-select-label-${++BrnSelectLabel._id}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnSelectLabel, isStandalone: true, selector: "[brnSelectLabel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" } }, ngImport: i0 });
+    id = input(`brn-select-label-${++BrnSelectLabel._id}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnSelectLabel, isStandalone: true, selector: "[brnSelectLabel]", 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: BrnSelectLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectLabel]',
@@ -252,12 +252,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 class BrnSelectGroup {
-    _selectLabel = contentChild(BrnSelectLabel, ...(ngDevMode ? [{ debugName: "_selectLabel" }] : []));
-    _labelledby = computed(() => this._selectLabel()?.id() ?? null, ...(ngDevMode ? [{ debugName: "_labelledby" }] : []));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.17", type: BrnSelectGroup, isStandalone: true, selector: "[brnSelectGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "_labelledby()" } }, queries: [{ propertyName: "_selectLabel", first: true, predicate: BrnSelectLabel, descendants: true, isSignal: true }], ngImport: i0 });
+    _selectLabel = contentChild(BrnSelectLabel, ...(ngDevMode ? [{ debugName: "_selectLabel" }] : /* istanbul ignore next */ []));
+    _labelledby = computed(() => this._selectLabel()?.id() ?? null, ...(ngDevMode ? [{ debugName: "_labelledby" }] : /* istanbul ignore next */ []));
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: BrnSelectGroup, isStandalone: true, selector: "[brnSelectGroup]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "_labelledby()" } }, queries: [{ propertyName: "_selectLabel", first: true, predicate: BrnSelectLabel, descendants: true, isSignal: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectGroup]',
@@ -275,22 +275,19 @@ class BrnSelectItem {
     /** Access the select component */
     _select = injectBrnSelectBase();
     /** A unique id for the item */
-    id = input(`brn-select-item-${++BrnSelectItem._id}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`brn-select-item-${++BrnSelectItem._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._select.isSelected(this.value()), ...(ngDevMode ? [{ debugName: "active" }] : []));
-    _highlighted = signal(false, ...(ngDevMode ? [{ debugName: "_highlighted" }] : []));
+    active = computed(() => this._select.isSelected(this.value()), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    _highlighted = signal(false, ...(ngDevMode ? [{ debugName: "_highlighted" }] : /* istanbul ignore next */ []));
     setActiveStyles() {
         this._highlighted.set(true);
         // ensure the item is in view
@@ -317,10 +314,10 @@ class BrnSelectItem {
         }
         this._select.keyManager.setActiveItem(this);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnSelectItem, isStandalone: true, selector: "[brnSelectItem]", 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.aria-selected": "active()", "attr.aria-disabled": "_disabled()", "attr.data-disabled": "_disabled() ? \"\" : null" } }, providers: [provideBrnSelectItem(BrnSelectItem)], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnSelectItem, isStandalone: true, selector: "[brnSelectItem]", 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.aria-selected": "active()", "attr.aria-disabled": "_disabled()", "attr.data-disabled": "_disabled() ? \"\" : null" } }, providers: [provideBrnSelectItem(BrnSelectItem)], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectItem]',
@@ -340,10 +337,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], _disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class BrnSelectList {
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnSelectList, isStandalone: true, selector: "[brnSelectList]", host: { attributes: { "role": "listbox" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnSelectList, isStandalone: true, selector: "[brnSelectList]", host: { attributes: { "role": "listbox" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectList]',
@@ -366,35 +363,33 @@ class BrnSelectMultiple {
     /** Access the popover if present */
     _brnPopover = inject(BrnPopover, { optional: true });
     /** 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();
     /** The selected value of the select. */
-    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 */ []));
     /** 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" }] : []));
-    _triggerWidth = signal(null, ...(ngDevMode ? [{ debugName: "_triggerWidth" }] : []));
+    itemToString = input(this._config.itemToString, ...(ngDevMode ? [{ debugName: "itemToString" }] : /* istanbul ignore next */ []));
+    _triggerWidth = signal(null, ...(ngDevMode ? [{ debugName: "_triggerWidth" }] : /* istanbul ignore next */ []));
     /** @internal The width of the trigger wrapper */
     triggerWidth = this._triggerWidth.asReadonly();
     /** @internal Access all the items within the select */
-    items = contentChildren(BrnSelectItemToken, ...(ngDevMode ? [{ debugName: "items", descendants: true }] : [{
-            descendants: true,
-        }]));
+    items = contentChildren(BrnSelectItemToken, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
     /** @internal The key manager for managing active descendant */
     keyManager = new ActiveDescendantKeyManager(this.items, this._injector);
     /** @internal Whether the select is expanded */
-    isExpanded = computed(() => this._brnPopover?.stateComputed() === 'open', ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
-    _selectTrigger = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectTrigger" }] : []));
-    labelableId = computed(() => this._selectTrigger()?.id(), ...(ngDevMode ? [{ debugName: "labelableId" }] : []));
+    isExpanded = computed(() => this._brnPopover?.stateComputed() === 'open', ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    _selectTrigger = signal(undefined, ...(ngDevMode ? [{ debugName: "_selectTrigger" }] : /* istanbul ignore next */ []));
+    labelableId = computed(() => this._selectTrigger()?.id(), ...(ngDevMode ? [{ debugName: "labelableId" }] : /* istanbul ignore next */ []));
     _onChange;
     _onTouched;
     constructor() {
@@ -416,7 +411,9 @@ class BrnSelectMultiple {
                 const values = this.value();
                 const lastValue = values ? values[values.length - 1] : null;
                 untracked(() => {
-                    const index = lastValue !== null ? items.findIndex((item) => this.isItemEqualToValue()(item.value(), lastValue)) : -1;
+                    const index = lastValue !== null && lastValue !== undefined
+                        ? items.findIndex((item) => this.isItemEqualToValue()(item.value(), lastValue))
+                        : -1;
                     if (index !== -1) {
                         this.keyManager.setActiveItem(index);
                     }
@@ -484,14 +481,14 @@ class BrnSelectMultiple {
     setDisabledState(isDisabled) {
         this._disabled.set(isDisabled);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectMultiple, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.17", type: BrnSelectMultiple, isStandalone: true, selector: "[brnSelectMultiple]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 } }, outputs: { value: "valueChange" }, providers: [
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectMultiple, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: BrnSelectMultiple, isStandalone: true, selector: "[brnSelectMultiple]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 } }, outputs: { value: "valueChange" }, providers: [
             provideBrnSelectBase(BrnSelectMultiple),
             BRN_SELECT_MULTIPLE_VALUE_ACCESSOR,
             provideBrnLabelable(BrnSelectMultiple),
         ], queries: [{ propertyName: "items", predicate: BrnSelectItemToken, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BrnFieldControl }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectMultiple, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectMultiple, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectMultiple]',
@@ -509,10 +506,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 class BrnSelectPlaceholder {
     _select = injectBrnSelectBase();
     _hasValue = this._select.hasValue;
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnSelectPlaceholder, isStandalone: true, selector: "[brnSelectPlaceholder]", 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: BrnSelectPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnSelectPlaceholder, isStandalone: true, selector: "[brnSelectPlaceholder]", host: { properties: { "attr.data-hidden": "_hasValue() ? \"\" : null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectPlaceholder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectPlaceholder, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectPlaceholder]',
@@ -535,10 +532,10 @@ class BrnSelectScrollDown {
             .pipe(takeUntil(mouseLeave$), takeUntil(this._endReached), takeUntilDestroyed(this._destroyRef))
             .subscribe(() => this._selectContent.scrollDown(() => this._endReached.next(true)));
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectScrollDown, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnSelectScrollDown, isStandalone: true, selector: "[brnSelectScrollDown]", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "_scrollDown()" }, properties: { "attr.data-hidden": "!_showScrollDown() ? \"\" : null" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectScrollDown, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnSelectScrollDown, isStandalone: true, selector: "[brnSelectScrollDown]", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "_scrollDown()" }, properties: { "attr.data-hidden": "!_showScrollDown() ? \"\" : null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectScrollDown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectScrollDown, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectScrollDown]',
@@ -563,10 +560,10 @@ class BrnSelectScrollUp {
             .pipe(takeUntil(mouseLeave$), takeUntil(this._endReached), takeUntilDestroyed(this._destroyRef))
             .subscribe(() => this._selectContent.scrollUp(() => this._endReached.next(true)));
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectScrollUp, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnSelectScrollUp, isStandalone: true, selector: "[brnSelectScrollUp]", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "_scrollUp()" }, properties: { "attr.data-hidden": "!_showScrollUp() ? \"\" : null" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectScrollUp, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnSelectScrollUp, isStandalone: true, selector: "[brnSelectScrollUp]", host: { attributes: { "aria-hidden": "true" }, listeners: { "mouseenter": "_scrollUp()" }, properties: { "attr.data-hidden": "!_showScrollUp() ? \"\" : null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectScrollUp, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectScrollUp, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectScrollUp]',
@@ -579,11 +576,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         }] });
 
 class BrnSelectSeparator {
-    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnSelectSeparator, isStandalone: true, selector: "[brnSelectSeparator]", 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: BrnSelectSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnSelectSeparator, isStandalone: true, selector: "[brnSelectSeparator]", 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: BrnSelectSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectSeparator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectSeparator]',
@@ -601,17 +598,17 @@ class BrnSelectTrigger {
     _brnDialog = inject(BrnDialog, { optional: true });
     _select = injectBrnSelectBase();
     _elementSize = injectElementSize();
-    id = input(`brn-select-trigger-${++BrnSelectTrigger._id}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    id = input(`brn-select-trigger-${++BrnSelectTrigger._id}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** Whether to force the trigger into an invalid state. */
-    forceInvalid = input(false, ...(ngDevMode ? [{ debugName: "forceInvalid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    forceInvalid = input(false, { ...(ngDevMode ? { debugName: "forceInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Whether the combobox panel is expanded */
     _isExpanded = this._select.isExpanded;
     _disabled = this._select.disabledState;
-    _isPlaceholder = computed(() => !this._select.hasValue(), ...(ngDevMode ? [{ debugName: "_isPlaceholder" }] : []));
-    _invalid = computed(() => this._select?.controlState?.()?.invalid, ...(ngDevMode ? [{ debugName: "_invalid" }] : []));
-    _touched = computed(() => this._select?.controlState?.()?.touched, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
-    _dirty = computed(() => this._select?.controlState?.()?.dirty, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
-    _spartanInvalid = computed(() => this.forceInvalid() || this._select?.controlState?.()?.spartanInvalid, ...(ngDevMode ? [{ debugName: "_spartanInvalid" }] : []));
+    _isPlaceholder = computed(() => !this._select.hasValue(), ...(ngDevMode ? [{ debugName: "_isPlaceholder" }] : /* istanbul ignore next */ []));
+    _invalid = computed(() => this._select?.controlState?.()?.invalid, ...(ngDevMode ? [{ debugName: "_invalid" }] : /* istanbul ignore next */ []));
+    _touched = computed(() => this._select?.controlState?.()?.touched, ...(ngDevMode ? [{ debugName: "_touched" }] : /* istanbul ignore next */ []));
+    _dirty = computed(() => this._select?.controlState?.()?.dirty, ...(ngDevMode ? [{ debugName: "_dirty" }] : /* istanbul ignore next */ []));
+    _spartanInvalid = computed(() => this.forceInvalid() || this._select?.controlState?.()?.spartanInvalid, ...(ngDevMode ? [{ debugName: "_spartanInvalid" }] : /* istanbul ignore next */ []));
     constructor() {
         this._select.registerSelectTrigger(this);
         if (this._brnDialog) {
@@ -651,10 +648,10 @@ class BrnSelectTrigger {
         }
         this._select.keyManager.onKeydown(event);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnSelectTrigger, isStandalone: true, selector: "button[brnSelectTrigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, forceInvalid: { classPropertyName: "forceInvalid", publicName: "forceInvalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox", "type": "button" }, listeners: { "click": "open()", "keydown": "onKeyDown($event)" }, properties: { "id": "id()", "attr.aria-expanded": "_isExpanded()", "attr.data-placeholder": "_isPlaceholder() ? \"\" : null", "disabled": "_disabled()", "attr.aria-invalid": "_invalid?.() ? \"true\" : null", "attr.data-dirty": "_dirty?.() ? \"true\": null", "attr.data-touched": "_touched?.() ? \"true\" : null", "attr.data-matches-spartan-invalid": "_spartanInvalid?.() ? \"true\" : null" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnSelectTrigger, isStandalone: true, selector: "button[brnSelectTrigger]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, forceInvalid: { classPropertyName: "forceInvalid", publicName: "forceInvalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox", "type": "button" }, listeners: { "click": "open()", "keydown": "onKeyDown($event)" }, properties: { "id": "id()", "attr.aria-expanded": "_isExpanded()", "attr.data-placeholder": "_isPlaceholder() ? \"\" : null", "disabled": "_disabled()", "attr.aria-invalid": "_invalid?.() ? \"true\" : null", "attr.data-dirty": "_dirty?.() ? \"true\": null", "attr.data-touched": "_touched?.() ? \"true\" : null", "attr.data-matches-spartan-invalid": "_spartanInvalid?.() ? \"true\" : null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[brnSelectTrigger]',
@@ -678,18 +675,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 class BrnSelectValue {
     _select = injectBrnSelectBase();
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    _isPlaceholder = computed(() => !this._select.hasValue(), ...(ngDevMode ? [{ debugName: "_isPlaceholder" }] : []));
-    hidden = computed(() => !this._select.hasValue() && !this.placeholder(), ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    _isPlaceholder = computed(() => !this._select.hasValue(), ...(ngDevMode ? [{ debugName: "_isPlaceholder" }] : /* istanbul ignore next */ []));
+    hidden = computed(() => !this._select.hasValue() && !this.placeholder(), ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
     _value = computed(() => {
         return this._select.hasValue()
             ? stringifyAsLabel(this._select.value(), this._select.itemToString())
             : this.placeholder();
-    }, ...(ngDevMode ? [{ debugName: "_value" }] : []));
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.17", type: BrnSelectValue, isStandalone: true, selector: "[brnSelectValue]", 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: BrnSelectValue, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: BrnSelectValue, isStandalone: true, selector: "[brnSelectValue]", 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: BrnSelectValue, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectValue, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectValue]',
@@ -707,15 +704,15 @@ class BrnSelectValueTemplate {
     _select = injectBrnSelectBase();
     _value = computed(() => {
         const value = this._select.value();
-        if (value === null) {
+        if (value === null || value === undefined) {
             return null;
         }
         return value;
-    }, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const value = this._value();
-            if (value !== null) {
+            if (value !== null && value !== undefined) {
                 this._viewContainerRef.clear();
                 this._viewContainerRef.createEmbeddedView(this._templateRef, {
                     $implicit: value,
@@ -726,10 +723,10 @@ class BrnSelectValueTemplate {
             }
         });
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectValueTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnSelectValueTemplate, isStandalone: true, selector: "[brnSelectValueTemplate]", ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectValueTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnSelectValueTemplate, isStandalone: true, selector: "[brnSelectValueTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectValueTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectValueTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectValueTemplate]',
@@ -742,11 +739,11 @@ class BrnSelectValues {
     _select = injectBrnSelectBase();
     _values = computed(() => {
         const values = this._select.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();
@@ -761,10 +758,10 @@ class BrnSelectValues {
             }
         });
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectValues, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: BrnSelectValues, isStandalone: true, selector: "[brnSelectValues]", ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectValues, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: BrnSelectValues, isStandalone: true, selector: "[brnSelectValues]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: BrnSelectValues, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: BrnSelectValues, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnSelectValues]',