@basis-ng/primitives 0.0.1-alpha.74 → 0.0.1-alpha.76

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

@@ -9,47 +9,30 @@ import * as i1 from "@angular/cdk/listbox";
  */
 export declare class SelectOptionsComponent {
     /**
-     * Signal representing the selected values in the listbox.
-     * This is an array of strings corresponding to the selected option values.
+     * Whether multiple selection is enabled.
      */
-    readonly value: import("@angular/core").WritableSignal<string[]>;
+    readonly multiple: import("@angular/core").InputSignal<boolean>;
     /**
-     * Event emitter triggered when the dropdown should close.
-     * This is used to notify the parent component to close the dropdown.
+     * Signal representing the selected value(s).
+     * - If `multiple` is true: string[]
+     * - If `multiple` is false: string | null
      */
-    closeEmitter: import("@angular/core").OutputEmitterRef<void>;
+    readonly value: import("@angular/core").WritableSignal<string | string[] | null>;
     /**
-     * Reference to the host element of the component.
-     * This provides access to the DOM element of the options list.
+     * Event emitter triggered when the dropdown should close.
      */
+    closeEmitter: import("@angular/core").OutputEmitterRef<void>;
     el: ElementRef<any>;
-    /**
-     * Input for setting the maximum height of the dropdown.
-     * Defaults to '300px'. This controls the vertical size of the dropdown.
-     */
+    listBox: CdkListbox<any>;
     readonly maxHeight: import("@angular/core").InputSignal<string>;
-    /**
-     * No options message displayed when there are no available options in the dropdown.
-     */
     readonly noOptionsMessage: 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 `OptionComponent` instances representing the available options.
-     */
     readonly options: import("@angular/core").Signal<readonly OptionComponent[]>;
     /**
      * Handles changes to the selected value in the listbox.
-     * This method updates the `value` signal, emits the `closeEmitter` event,
-     * and ensures the parent component is notified of the selection change.
      *
-     * @param value - The new array of selected values.
+     * @param valueArray - The new array of selected values from the CDK listbox.
      */
-    handleValueChange(value: string[]): void;
+    handleValueChange(valueArray: string[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectOptionsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectOptionsComponent, "ul[b-select-options]", never, { "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; "isSignal": true; }; }, { "closeEmitter": "closeEmitter"; }, ["options"], ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: { "cdkListboxValue": "cdkListboxValue"; }; outputs: { "cdkListboxValueChange": "cdkListboxValueChange"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectOptionsComponent, "ul[b-select-options]", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; "isSignal": true; }; }, { "closeEmitter": "closeEmitter"; }, ["options"], ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: { "cdkListboxValue": "cdkListboxValue"; }; outputs: { "cdkListboxValueChange": "cdkListboxValueChange"; }; }]>;
 }

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

@@ -30,7 +30,7 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      * Computed signal representing the selected values from the dropdown.
      * This is linked to the value of the `OptionsListComponent`.
      */
-    readonly value: import("@angular/core").WritableSignal<string[] | undefined>;
+    readonly value: import("@angular/core").WritableSignal<string | string[] | null | undefined>;
     /**
      * Linked signal for the width of the button element.
      * This is used to set the width of the dropdown overlay.
@@ -91,12 +91,12 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      * 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;
+    writeValue(value: string | string[] | null): void;
     /**
      * Registers a callback function to be called when the value changes.
      * @param fn - The callback function.
      */
-    registerOnChange(fn: (value: string[]) => void): void;
+    registerOnChange(fn: (value: string | string[] | null) => void): void;
     /**
      * Registers a callback function to be called when the component is touched.
      * @param fn - The callback function.

package/fesm2022/basis-ng-primitives.mjs

@@ -317,52 +317,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  */
 class SelectOptionsComponent {
     /**
-     * Signal representing the selected values in the listbox.
-     * This is an array of strings corresponding to the selected option values.
+     * Whether multiple selection is enabled.
      */
-    value = signal([]);
+    multiple = input(false);
     /**
-     * Event emitter triggered when the dropdown should close.
-     * This is used to notify the parent component to close the dropdown.
+     * Signal representing the selected value(s).
+     * - If `multiple` is true: string[]
+     * - If `multiple` is false: string | null
      */
-    closeEmitter = output();
+    value = signal(null);
     /**
-     * Reference to the host element of the component.
-     * This provides access to the DOM element of the options list.
+     * Event emitter triggered when the dropdown should close.
      */
+    closeEmitter = output();
     el = inject(ElementRef);
-    /**
-     * Input for setting the maximum height of the dropdown.
-     * Defaults to '300px'. This controls the vertical size of the dropdown.
-     */
+    listBox = inject(CdkListbox);
     maxHeight = input('300px');
-    /**
-     * No options message displayed when there are no available options in the dropdown.
-     */
     noOptionsMessage = input('');
-    /**
-     * 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 `OptionComponent` instances representing the available options.
-     */
     options = contentChildren(OptionComponent);
     /**
      * Handles changes to the selected value in the listbox.
-     * This method updates the `value` signal, emits the `closeEmitter` event,
-     * and ensures the parent component is notified of the selection change.
      *
-     * @param value - The new array of selected values.
+     * @param valueArray - The new array of selected values from the CDK listbox.
      */
-    handleValueChange(value) {
-        this.value.set(value);
+    handleValueChange(valueArray) {
+        if (valueArray.length === 1 && valueArray[0] === '') {
+            this.value.set(this.multiple() ? [] : null);
+            this.closeEmitter.emit();
+            return;
+        }
+        if (this.multiple()) {
+            this.value.set(valueArray);
+        }
+        else {
+            this.value.set(valueArray[0] ?? null);
+        }
         this.closeEmitter.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: SelectOptionsComponent, isStandalone: true, selector: "ul[b-select-options]", inputs: { maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "handleValueChange($event.value)", "keydown.enter": "closeEmitter.emit()" }, properties: { "cdkListboxValue": "value()", "style.max-height": "maxHeight()" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: SelectOptionsComponent, isStandalone: true, selector: "ul[b-select-options]", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "handleValueChange($event.value)", "keydown.enter": "closeEmitter.emit()" }, properties: { "cdkListboxValue": "value()", "style.max-height": "maxHeight()" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />
     @if (options().length === 0) {
       <div class="no-options-message">
         {{ noOptionsMessage() }}
@@ -799,11 +792,12 @@ class SelectComponent {
      */
     content = computed(() => {
         const selected = this.value();
-        if (selected &&
-            selected.length > 0 &&
-            !(selected.length === 1 && selected[0] === '')) {
+        const selectedArray = Array.isArray(selected) ? selected : [selected];
+        const valid = selectedArray.length > 0 &&
+            !(selectedArray.length === 1 && selectedArray[0] === '');
+        if (valid) {
             return this.options()?.reduce((acc, option) => {
-                if (selected.includes(option.cdkOption.value)) {
+                if (selectedArray.includes(option.cdkOption.value)) {
                     return acc
                         ? acc + ', ' + option.el.nativeElement.innerText
                         : option.el.nativeElement.innerText;
@@ -834,7 +828,20 @@ class SelectComponent {
      */
     handleSelectedValueChange() {
         this.optionsList()?.closeEmitter.subscribe(() => {
-            this.onChange(this.value());
+            const selected = this.value();
+            const isMultiple = this.optionsList()?.multiple();
+            let emitValue;
+            if (isMultiple) {
+                emitValue = Array.isArray(selected) ? selected : [];
+            }
+            else {
+                emitValue = Array.isArray(selected)
+                    ? (selected[0] ?? null)
+                    : typeof selected === 'string'
+                        ? selected
+                        : null;
+            }
+            this.onChange(emitValue);
             this.onTouched();
             this.isOpen.set(false);
         });
@@ -870,12 +877,12 @@ class SelectComponent {
      * @param value - The new value to set.
      */
     writeValue(value) {
-        if (value) {
-            value.forEach(value => {
-                this.optionsList()?.listBox?.selectValue(value);
-            });
-            this.value.set(value);
-        }
+        if (value == null)
+            return;
+        const isMultiple = this.optionsList()?.multiple();
+        const values = isMultiple ? value : [value];
+        values.forEach(v => this.optionsList()?.listBox?.selectValue(v));
+        this.value.set(isMultiple ? values : values[0]);
     }
     /**
      * Registers a callback function to be called when the value changes.
@@ -2587,6 +2594,13 @@ class CommandOptionsComponent {
         const selectValue = value
             ? value
             : (this.listKeyManager().activeItem?.value ?? []);
+        //  If the selectValue is an empty array or contains only an empty string, clear the selection
+        if (selectValue.length === 1 && selectValue[0] === '') {
+            this.value.set([]);
+            this.cdkListbox.value = [];
+            this.closeEmitter.emit();
+            return;
+        }
         this.value.set(selectValue);
         this.cdkListbox.value = this.value();
         this.closeEmitter.emit();