@basis-ng/primitives 0.0.1-alpha.4 → 0.0.1-alpha.6

package/core/components/select/select-content.component.d.ts

@@ -1,39 +1,56 @@
+import { CdkListbox } from '@angular/cdk/listbox';
 import { ElementRef } from '@angular/core';
+import { SelectOptionComponent } from './select-option.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/cdk/listbox";
 /**
  * Component representing the content of a select dropdown.
- * It integrates with Angular CDK Listbox for managing options and their selection.
+ * This component integrates with Angular CDK Listbox to manage options and their selection.
  */
 export declare class SelectContentComponent {
     /**
      * Signal representing the selected values in the listbox.
+     * This is an array of strings corresponding to the selected option values.
      */
     readonly value: import("@angular/core").WritableSignal<string[]>;
     /**
-     * Signal representing the content of the selected option.
+     * Signal representing the content of the selected option(s).
+     * This is a string that can be used to display the selected option(s).
      */
     readonly content: import("@angular/core").WritableSignal<string>;
     /**
      * Event emitter triggered when the dropdown should close.
+     * This is used to notify the parent component to close the dropdown.
      */
     closeEmitter: import("@angular/core").OutputEmitterRef<void>;
     /**
      * Reference to the host element of the component.
+     * This provides access to the DOM element of the dropdown content.
      */
     el: ElementRef<any>;
     /**
      * Input for setting the maximum height of the dropdown.
-     * Defaults to '300px'.
+     * Defaults to '300px'. This controls the vertical size of the dropdown.
      */
     readonly maxHeight: import("@angular/core").InputSignal<string>;
+    /**
+     * Reference to the CDK Listbox directive.
+     * This is used to manage the options and their selection state.
+     */
+    listBox: CdkListbox<any>;
+    /**
+     * Reference to the list of options in the dropdown.
+     * This is a collection of `SelectOptionComponent` instances representing the available options.
+     */
+    readonly options: import("@angular/core").Signal<readonly SelectOptionComponent[]>;
     /**
      * Handles changes to the selected value in the listbox.
-     * Updates the `value` and `content` signals and emits the `closeEmitter` event.
+     * This method updates the `value` signal, emits the `closeEmitter` event,
+     * and ensures the parent component is notified of the selection change.
      *
-     * @param $event - The event object containing the new value and option details.
+     * @param value - The new array of selected values.
      */
-    handleValueChange($event: any): void;
+    handleValueChange(value: string[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectContentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectContentComponent, "ul[b-select-content]", never, { "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, { "closeEmitter": "closeEmitter"; }, never, ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: { "cdkListboxValue": "cdkListboxValue"; }; outputs: { "cdkListboxValueChange": "cdkListboxValueChange"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectContentComponent, "ul[b-select-content]", never, { "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, { "closeEmitter": "closeEmitter"; }, ["options"], ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: { "cdkListboxValue": "cdkListboxValue"; }; outputs: { "cdkListboxValueChange": "cdkListboxValueChange"; }; }]>;
 }

package/core/components/select/select-option.component.d.ts

@@ -0,0 +1,22 @@
+import { CdkOption } from '@angular/cdk/listbox';
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/listbox";
+/**
+ * Component representing an individual option in a select dropdown.
+ * This component integrates with Angular CDK Option to manage the option's state and behavior.
+ */
+export declare class SelectOptionComponent {
+    /**
+     * The `ElementRef` of the select option.
+     * This provides direct access to the DOM element of the option.
+     */
+    el: ElementRef<any>;
+    /**
+     * The `CdkOption` instance associated with this select option.
+     * This provides methods and properties for managing the option's state, such as selection and value.
+     */
+    option: CdkOption<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectOptionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectOptionComponent, "li[b-select-option]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkOption; inputs: { "cdkOption": "value"; }; outputs: {}; }]>;
+}

package/core/components/select/select.component.d.ts

@@ -1,36 +1,37 @@
+import { OnInit } from '@angular/core';
 import { SelectContentComponent } from './select-content.component';
 import { Button } from '../button/button.component';
+import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
 /**
  * Component representing a custom select dropdown.
- * It provides a button to toggle the dropdown and displays the selected option.
+ * This component provides a button to toggle the dropdown and displays the selected option(s).
  */
-export declare class SelectComponent {
+export declare class SelectComponent implements OnInit, ControlValueAccessor {
     /**
      * Placeholder text displayed when no option is selected.
      * Defaults to 'Select an option'.
      */
     readonly placeholder: import("@angular/core").InputSignal<string>;
     /**
-     * Signal indicating whether the dropdown is open.
+     * Signal indicating whether the dropdown is currently open.
      */
     readonly isOpen: import("@angular/core").WritableSignal<boolean>;
     /**
      * Reference to the button element used to toggle the dropdown.
+     * This is used for managing focus and interactions.
      */
     readonly button: import("@angular/core").Signal<Button | undefined>;
     /**
      * Reference to the content component of the dropdown.
+     * This contains the list of selectable options.
      */
-    readonly listBox: import("@angular/core").Signal<SelectContentComponent | undefined>;
+    readonly selectContent: import("@angular/core").Signal<SelectContentComponent | undefined>;
     /**
      * Computed signal representing the selected values from the dropdown.
+     * This is linked to the value of the `SelectContentComponent`.
      */
-    readonly value: import("@angular/core").Signal<string[] | undefined>;
-    /**
-     * Computed signal representing the content of the selected option.
-     */
-    readonly content: import("@angular/core").Signal<string | undefined>;
+    readonly value: import("@angular/core").WritableSignal<string[] | undefined>;
     /**
      * Input for setting the maximum width of the dropdown.
      * Defaults to '100%'.
@@ -38,29 +39,77 @@ export declare class SelectComponent {
     readonly maxWidth: import("@angular/core").InputSignal<string>;
     /**
      * Computed signal for the width of the button element.
+     * This is used to set the width of the dropdown overlay.
      */
     readonly buttonWidth: import("@angular/core").Signal<any>;
-    /**
-     * Model indicating whether the select component is invalid.
-     */
-    readonly invalid: import("@angular/core").ModelSignal<boolean>;
     /**
      * Model indicating whether the select component is disabled.
+     * When disabled, the dropdown cannot be opened or interacted with.
      */
     readonly disabled: import("@angular/core").ModelSignal<boolean>;
-    constructor();
     /**
-     * Handles changes to the selected value by subscribing to the close event of the listbox.
+     * Computed signal representing the options available in the dropdown.
+     * This retrieves the options from the `SelectContentComponent`.
+     */
+    readonly options: import("@angular/core").Signal<readonly import("@basis-ng/primitives").SelectOptionComponent[] | undefined>;
+    /**
+     * Computed signal representing the content of the selected option(s).
+     * If no option is selected, it returns the placeholder text.
+     */
+    readonly content: import("@angular/core").Signal<string | undefined>;
+    /**
+     * Lifecycle hook that is called after the component is initialized.
+     * It sets up the necessary subscriptions for handling value changes.
+     */
+    ngOnInit(): void;
+    /**
+     * Subscribes to the `closeEmitter` of the `SelectContentComponent` to handle
+     * changes to the selected value. This ensures the dropdown closes and the
+     * value is propagated to Angular Forms.
      */
     handleSelectedValueChange(): void;
     /**
      * Opens the dropdown and focuses the listbox.
+     * This method sets the `isOpen` signal to `true` and ensures the listbox gains focus.
      */
     open(): void;
     /**
      * Closes the dropdown and focuses the button.
+     * This method sets the `isOpen` signal to `false` and ensures the button regains focus.
      */
     close(): void;
+    /**
+     * Callback function to propagate changes to the model.
+     * This is called whenever the value changes.
+     */
+    private onChange;
+    /**
+     * Callback function to mark the component as touched.
+     * This is called when the component loses focus.
+     */
+    private onTouched;
+    /**
+     * Writes a new value to the component.
+     * This method is called by Angular Forms to update the value of the select component.
+     * @param value - The new value to set.
+     */
+    writeValue(value: string[]): void;
+    /**
+     * Registers a callback function to be called when the value changes.
+     * @param fn - The callback function.
+     */
+    registerOnChange(fn: (value: string[]) => void): void;
+    /**
+     * Registers a callback function to be called when the component is touched.
+     * @param fn - The callback function.
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Sets the disabled state of the component.
+     * This method is called by Angular Forms to enable or disable the component.
+     * @param isDisabled - A boolean indicating whether the component should be disabled.
+     */
+    setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "b-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "invalid": "invalidChange"; "disabled": "disabledChange"; }, ["listBox"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "b-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, ["selectContent"], ["*"], true, never>;
 }

package/fesm2022/basis-ng-primitives.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { signal, inject, RendererFactory2, Injectable, input, Component, ElementRef, TemplateRef, Directive, computed, model, output, contentChildren, viewChild, Renderer2, effect, HostListener, contentChild, afterNextRender, afterRenderEffect, linkedSignal } from '@angular/core';
+import { signal, inject, RendererFactory2, Injectable, input, Component, ElementRef, TemplateRef, Directive, computed, model, output, contentChildren, viewChild, Renderer2, effect, HostListener, contentChild, linkedSignal, forwardRef, afterNextRender, afterRenderEffect } from '@angular/core';
 import { NgStyle, NgClass, CommonModule } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { icons, createElement } from 'lucide';
-import { NgModel, ControlContainer } from '@angular/forms';
+import { NgModel, NG_VALUE_ACCESSOR, ControlContainer } from '@angular/forms';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i1 from '@angular/cdk/listbox';
-import { CdkListbox } from '@angular/cdk/listbox';
+import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
 import * as i1$1 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDragHandle, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';
 import * as i1$2 from '@angular/cdk/menu';
@@ -537,46 +537,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 }]
         }] });
 
+/**
+ * Component representing an individual option in a select dropdown.
+ * This component integrates with Angular CDK Option to manage the option's state and behavior.
+ */
+class SelectOptionComponent {
+    /**
+     * The `ElementRef` of the select option.
+     * This provides direct access to the DOM element of the option.
+     */
+    el = inject(ElementRef);
+    /**
+     * The `CdkOption` instance associated with this select option.
+     * This provides methods and properties for managing the option's state, such as selection and value.
+     */
+    option = inject(CdkOption);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SelectOptionComponent, isStandalone: true, selector: "li[b-select-option]", hostDirectives: [{ directive: i1.CdkOption, inputs: ["cdkOption", "value"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectOptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[b-select-option]',
+                    imports: [],
+                    template: `<ng-content />`,
+                    hostDirectives: [
+                        {
+                            directive: CdkOption,
+                            inputs: ['cdkOption: value'],
+                        },
+                    ],
+                }]
+        }] });
+
 /**
  * Component representing the content of a select dropdown.
- * It integrates with Angular CDK Listbox for managing options and their selection.
+ * This component integrates with Angular CDK Listbox to manage options and their selection.
  */
 class SelectContentComponent {
     /**
      * Signal representing the selected values in the listbox.
+     * This is an array of strings corresponding to the selected option values.
      */
     value = signal([]);
     /**
-     * Signal representing the content of the selected option.
+     * Signal representing the content of the selected option(s).
+     * This is a string that can be used to display the selected option(s).
      */
     content = signal('');
     /**
      * Event emitter triggered when the dropdown should close.
+     * This is used to notify the parent component to close the dropdown.
      */
     closeEmitter = output();
     /**
      * Reference to the host element of the component.
+     * This provides access to the DOM element of the dropdown content.
      */
     el = inject(ElementRef);
     /**
      * Input for setting the maximum height of the dropdown.
-     * Defaults to '300px'.
+     * Defaults to '300px'. This controls the vertical size of the dropdown.
      */
     maxHeight = input('300px');
+    /**
+     * Reference to the CDK Listbox directive.
+     * This is used to manage the options and their selection state.
+     */
+    listBox = inject(CdkListbox);
+    /**
+     * Reference to the list of options in the dropdown.
+     * This is a collection of `SelectOptionComponent` instances representing the available options.
+     */
+    options = contentChildren(SelectOptionComponent);
     /**
      * Handles changes to the selected value in the listbox.
-     * Updates the `value` and `content` signals and emits the `closeEmitter` event.
+     * This method updates the `value` signal, emits the `closeEmitter` event,
+     * and ensures the parent component is notified of the selection change.
      *
-     * @param $event - The event object containing the new value and option details.
+     * @param value - The new array of selected values.
      */
-    handleValueChange($event) {
-        const value = $event.value;
-        this.content.set($event.option.element.innerText);
-        this.value.set(value.length === 0 || (value.length === 1 && value[0] === '') ? [] : value);
+    handleValueChange(value) {
+        this.value.set(value);
         this.closeEmitter.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: SelectContentComponent, isStandalone: true, selector: "ul[b-select-content]", inputs: { maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "handleValueChange($event)" }, properties: { "cdkListboxValue": "value()", "style.max-height": "maxHeight()" } }, hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: SelectContentComponent, isStandalone: true, selector: "ul[b-select-content]", inputs: { maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "handleValueChange($event.value)" }, properties: { "cdkListboxValue": "value()", "style.max-height": "maxHeight()" } }, queries: [{ propertyName: "options", predicate: SelectOptionComponent, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectContentComponent, decorators: [{
             type: Component,
@@ -593,7 +639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     ],
                     host: {
                         '[cdkListboxValue]': 'value()',
-                        '(cdkListboxValueChange)': 'handleValueChange($event)',
+                        '(cdkListboxValueChange)': 'handleValueChange($event.value)',
                         '[style.max-height]': 'maxHeight()',
                     },
                 }]
@@ -601,7 +647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 
 /**
  * Component representing a custom select dropdown.
- * It provides a button to toggle the dropdown and displays the selected option.
+ * This component provides a button to toggle the dropdown and displays the selected option(s).
  */
 class SelectComponent {
     /**
@@ -610,25 +656,24 @@ class SelectComponent {
      */
     placeholder = input('Select an option');
     /**
-     * Signal indicating whether the dropdown is open.
+     * Signal indicating whether the dropdown is currently open.
      */
     isOpen = signal(false);
     /**
      * Reference to the button element used to toggle the dropdown.
+     * This is used for managing focus and interactions.
      */
     button = viewChild(Button);
     /**
      * Reference to the content component of the dropdown.
+     * This contains the list of selectable options.
      */
-    listBox = contentChild(SelectContentComponent);
+    selectContent = contentChild(SelectContentComponent);
     /**
      * Computed signal representing the selected values from the dropdown.
+     * This is linked to the value of the `SelectContentComponent`.
      */
-    value = computed(() => this.listBox()?.value());
-    /**
-     * Computed signal representing the content of the selected option.
-     */
-    content = computed(() => this.listBox()?.content());
+    value = linkedSignal(() => this.selectContent()?.value());
     /**
      * Input for setting the maximum width of the dropdown.
      * Defaults to '100%'.
@@ -636,44 +681,128 @@ class SelectComponent {
     maxWidth = input('100%');
     /**
      * Computed signal for the width of the button element.
+     * This is used to set the width of the dropdown overlay.
      */
     buttonWidth = computed(() => this.button()?.el.nativeElement.offsetWidth);
-    /**
-     * Model indicating whether the select component is invalid.
-     */
-    invalid = model(false);
     /**
      * Model indicating whether the select component is disabled.
+     * When disabled, the dropdown cannot be opened or interacted with.
      */
     disabled = model(false);
-    constructor() {
-        /**
-         * Effect to handle changes in the selected value.
-         */
-        effect(() => this.handleSelectedValueChange());
+    /**
+     * Computed signal representing the options available in the dropdown.
+     * This retrieves the options from the `SelectContentComponent`.
+     */
+    options = computed(() => this.selectContent()?.options());
+    /**
+     * Computed signal representing the content of the selected option(s).
+     * If no option is selected, it returns the placeholder text.
+     */
+    content = computed(() => {
+        const selected = this.value();
+        if (selected && selected.length > 0) {
+            return this.options()?.reduce((acc, option) => {
+                if (selected.includes(option.option.value)) {
+                    return acc
+                        ? acc + ', ' + option.el.nativeElement.innerText
+                        : option.el.nativeElement.innerText;
+                }
+                return acc;
+            }, '');
+        }
+        else {
+            return this.placeholder();
+        }
+    });
+    /**
+     * Lifecycle hook that is called after the component is initialized.
+     * It sets up the necessary subscriptions for handling value changes.
+     */
+    ngOnInit() {
+        this.handleSelectedValueChange();
     }
     /**
-     * Handles changes to the selected value by subscribing to the close event of the listbox.
+     * Subscribes to the `closeEmitter` of the `SelectContentComponent` to handle
+     * changes to the selected value. This ensures the dropdown closes and the
+     * value is propagated to Angular Forms.
      */
     handleSelectedValueChange() {
-        this.listBox()?.closeEmitter.subscribe(() => this.close());
+        this.selectContent()?.closeEmitter.subscribe(() => {
+            this.onChange(this.value()); // Notify Angular Forms about the change
+            this.onTouched(); // Mark the component as touched
+            this.close(); // Close the dropdown
+        });
     }
     /**
      * Opens the dropdown and focuses the listbox.
+     * This method sets the `isOpen` signal to `true` and ensures the listbox gains focus.
      */
     open() {
         this.isOpen.set(true);
-        setTimeout(() => this.listBox()?.el.nativeElement.focus(), 0);
+        setTimeout(() => this.selectContent()?.el.nativeElement.focus(), 0);
     }
     /**
      * Closes the dropdown and focuses the button.
+     * This method sets the `isOpen` signal to `false` and ensures the button regains focus.
      */
     close() {
         setTimeout(() => this.button()?.el.nativeElement.focus(), 0);
         this.isOpen.set(false);
     }
+    // Control Value Accessor methods
+    /**
+     * Callback function to propagate changes to the model.
+     * This is called whenever the value changes.
+     */
+    onChange = () => undefined;
+    /**
+     * Callback function to mark the component as touched.
+     * This is called when the component loses focus.
+     */
+    onTouched = () => undefined;
+    /**
+     * Writes a new value to the component.
+     * This method is called by Angular Forms to update the value of the select component.
+     * @param value - The new value to set.
+     */
+    writeValue(value) {
+        if (value) {
+            value.forEach(value => {
+                this.selectContent()?.listBox?.selectValue(value);
+            });
+            this.value.set(value);
+        }
+    }
+    /**
+     * Registers a callback function to be called when the value changes.
+     * @param fn - The callback function.
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Registers a callback function to be called when the component is touched.
+     * @param fn - The callback function.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Sets the disabled state of the component.
+     * This method is called by Angular Forms to enable or disable the component.
+     * @param isDisabled - A boolean indicating whether the component should be disabled.
+     */
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "b-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { invalid: "invalidChange", disabled: "disabledChange" }, host: { properties: { "style.max-width": "maxWidth()", "class.ng-invalid": "invalid()", "class.disabled": "disabled()" } }, queries: [{ propertyName: "listBox", first: true, predicate: SelectContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: Button, descendants: true, isSignal: true }], ngImport: i0, template: ` <button
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "b-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { properties: { "style.max-width": "maxWidth()", "class.disabled": "disabled()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "selectContent", first: true, predicate: SelectContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: Button, descendants: true, isSignal: true }], ngImport: i0, template: ` <button
       b-button
       variant="outlined"
       (click)="isOpen() ? close() : open()"
@@ -682,7 +811,7 @@ class SelectComponent {
       cdkOverlayOrigin
       [activeEnabled]="false"
       #trigger="cdkOverlayOrigin">
-      {{ value() && value()!.length === 0 ? placeholder() : content() }}
+      {{ content() }}
       <i b-icon icon="ChevronDown" [size]="20"></i>
     </button>
     <ng-template
@@ -727,7 +856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
       cdkOverlayOrigin
       [activeEnabled]="false"
       #trigger="cdkOverlayOrigin">
-      {{ value() && value()!.length === 0 ? placeholder() : content() }}
+      {{ content() }}
       <i b-icon icon="ChevronDown" [size]="20"></i>
     </button>
     <ng-template
@@ -759,11 +888,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
     </ng-template>`,
                     host: {
                         '[style.max-width]': 'maxWidth()',
-                        '[class.ng-invalid]': 'invalid()',
                         '[class.disabled]': 'disabled()',
                     },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true,
+                        },
+                    ],
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class Option {
     /**
@@ -2568,5 +2703,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, AttachedBox, Badge, BottomSheet, Button, ButtonGroup, Checkbox, ColorPicker, Icon, InViewportDirective, InViewportService, Input, InputGroup, Label, LazyContentDirective, Menu, MenuItemCheckboxComponent, MenuItemComponent, MenuItemRadioComponent, MenuLabel, MenuTrigger, Option, Range, ResponsiveService, Row, RowItem, Search, SelectComponent, SideSheet, Spinner, Switch, Tab, Table, Tabs, Textarea, ThemeService, TooltipComponent, Tree, TreeNode };
+export { Alert, AttachedBox, Badge, BottomSheet, Button, ButtonGroup, Checkbox, ColorPicker, Icon, InViewportDirective, InViewportService, Input, InputGroup, Label, LazyContentDirective, Menu, MenuItemCheckboxComponent, MenuItemComponent, MenuItemRadioComponent, MenuLabel, MenuTrigger, Option, Range, ResponsiveService, Row, RowItem, Search, SelectComponent, SelectContentComponent, SelectOptionComponent, SideSheet, Spinner, Switch, Tab, Table, Tabs, Textarea, ThemeService, TooltipComponent, Tree, TreeNode };
 //# sourceMappingURL=basis-ng-primitives.mjs.map