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

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

@@ -76,6 +76,11 @@ export declare class ComboboxComponent implements OnInit, ControlValueAccessor {
      * This ensures that the dropdown overlay matches the width of the button.
      */
     setButtonWidth(): void;
+    /**
+     * Computed signal indicando si se permite selección múltiple.
+     * Se obtiene de CommandOptionsComponent.
+     */
+    readonly multiple: import("@angular/core").Signal<boolean>;
     /**
      * Callback function to propagate changes to the model.
      * This is called whenever the value changes.
@@ -88,15 +93,14 @@ export declare class ComboboxComponent implements OnInit, ControlValueAccessor {
     private onTouched;
     /**
      * Writes a new value to the component.
-     * This method is called by Angular Forms to update the value of the combobox component.
-     * @param value - The new value to set.
+     * Este método ahora soporta selección múltiple.
      */
-    writeValue(value: string[]): void;
+    writeValue(value: string | string[]): void;
     /**
      * Registers a callback function to be called when the value changes.
-     * @param fn - The callback function.
+     * Ahora soporta selección múltiple.
      */
-    registerOnChange(fn: (value: string[]) => void): void;
+    registerOnChange(fn: (value: string | string[]) => void): void;
     /**
      * Registers a callback function to be called when the component is touched.
      * @param fn - The callback function.

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

@@ -36,6 +36,10 @@ export declare class CommandOptionsComponent implements OnInit {
      * Emitter for closing the command options.
      */
     closeEmitter: import("@angular/core").OutputEmitterRef<void>;
+    /**
+     * Signal indicando si se permite selección múltiple.
+     */
+    readonly multiple: import("@angular/core").InputSignal<boolean>;
     /**
      * Lifecycle hook that initializes the component.
      * Enables the use of active descendant for the listbox.
@@ -57,6 +61,8 @@ export declare class CommandOptionsComponent implements OnInit {
      * Updates the CSS class of options to reflect the currently highlighted option.
      */
     updateHighlightedOption(): void;
+    handleValueChange(value: string[]): void;
+    onEnter(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CommandOptionsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CommandOptionsComponent, "ul[b-command-options]", never, { "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; "isSignal": true; }; }, { "closeEmitter": "closeEmitter"; }, ["options"], ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: {}; outputs: { "cdkListboxValueChange": "cdkListboxValueChange"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CommandOptionsComponent, "ul[b-command-options]", never, { "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; }, { "closeEmitter": "closeEmitter"; }, ["options"], ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: { "cdkListboxValue": "cdkListboxValue"; "cdkListboxMultiple": "multiple"; }; outputs: { "cdkListboxValueChange": "cdkListboxValueChange"; }; }]>;
 }

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

@@ -9,30 +9,53 @@ import * as i1 from "@angular/cdk/listbox";
  */
 export declare class SelectOptionsComponent {
     /**
-     * Whether multiple selection is enabled.
+     * Signal representing the selected values in the listbox.
+     * This is an array of strings corresponding to the selected option values.
      */
-    readonly multiple: import("@angular/core").InputSignal<boolean>;
-    /**
-     * Signal representing the selected value(s).
-     * - If `multiple` is true: string[]
-     * - If `multiple` is false: string | null
-     */
-    readonly value: import("@angular/core").WritableSignal<string | string[] | null>;
+    readonly value: 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 options list.
+     */
     el: ElementRef<any>;
-    listBox: CdkListbox<any>;
+    /**
+     * Input for setting the maximum height of the dropdown.
+     * Defaults to '300px'. This controls the vertical size of the dropdown.
+     */
     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>;
+    /**
+     * Signal indicating whether multiple selections are allowed.
+     * If true, the select component allows selecting multiple options.
+     */
+    readonly multiple: import("@angular/core").InputSignal<boolean>;
+    /**
+     * 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 valueArray - The new array of selected values from the CDK listbox.
+     * @param value - The new array of selected values.
      */
-    handleValueChange(valueArray: string[]): void;
+    handleValueChange(value: string[]): void;
+    onEnter(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectOptionsComponent, never>;
-    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"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectOptionsComponent, "ul[b-select-options]", never, { "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; }, { "closeEmitter": "closeEmitter"; }, ["options"], ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: { "cdkListboxValue": "cdkListboxValue"; "cdkListboxMultiple": "multiple"; }; 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 | string[] | null | undefined>;
+    readonly value: import("@angular/core").WritableSignal<string[] | undefined>;
     /**
      * Linked signal for the width of the button element.
      * This is used to set the width of the dropdown overlay.
@@ -41,6 +41,11 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      * When disabled, the dropdown cannot be opened or interacted with.
      */
     readonly disabled: import("@angular/core").ModelSignal<boolean>;
+    /**
+     * Computed signal indicating whether multiple selections are allowed.
+     * This retrieves the `multiple` property from the `OptionsListComponent`.
+     */
+    readonly multiple: import("@angular/core").Signal<boolean>;
     /**
      * Computed signal representing the options available in the dropdown.
      * This retrieves the options from the `OptionsListComponent`.
@@ -91,12 +96,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 | string[] | null): void;
+    writeValue(value: string | string[]): void;
     /**
      * Registers a callback function to be called when the value changes.
      * @param fn - The callback function.
      */
-    registerOnChange(fn: (value: string | string[] | null) => void): void;
+    registerOnChange(fn: (value: string | string[]) => 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

@@ -294,7 +294,7 @@ class OptionComponent {
      */
     cdkOption = inject(CdkOption);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: OptionComponent, isStandalone: true, selector: "li[b-option]", hostDirectives: [{ directive: i1.CdkOption, inputs: ["cdkOption", "value"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: OptionComponent, isStandalone: true, selector: "li[b-option]", hostDirectives: [{ directive: i1.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
@@ -305,7 +305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     hostDirectives: [
                         {
                             directive: CdkOption,
-                            inputs: ['cdkOption: value'],
+                            inputs: ['cdkOption: value', 'cdkOptionDisabled: disabled'],
                         },
                     ],
                 }]
@@ -317,45 +317,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  */
 class SelectOptionsComponent {
     /**
-     * Whether multiple selection is enabled.
+     * Signal representing the selected values in the listbox.
+     * This is an array of strings corresponding to the selected option values.
      */
-    multiple = input(false);
-    /**
-     * Signal representing the selected value(s).
-     * - If `multiple` is true: string[]
-     * - If `multiple` is false: string | null
-     */
-    value = signal(null);
+    value = 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 options list.
+     */
     el = inject(ElementRef);
-    listBox = inject(CdkListbox);
+    /**
+     * Input for setting the maximum height of the dropdown.
+     * Defaults to '300px'. This controls the vertical size of the dropdown.
+     */
     maxHeight = input('300px');
+    /**
+     * No options message displayed when there are no available options in the dropdown.
+     */
     noOptionsMessage = input('');
+    /**
+     * Signal indicating whether multiple selections are allowed.
+     * If true, the select component allows selecting multiple options.
+     */
+    multiple = input(false);
+    /**
+     * 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 valueArray - The new array of selected values from the CDK listbox.
+     * @param value - The new array of selected values.
      */
-    handleValueChange(valueArray) {
-        if (valueArray.length === 1 && valueArray[0] === '') {
-            this.value.set(this.multiple() ? [] : null);
-            this.closeEmitter.emit();
+    handleValueChange(value) {
+        // If the value is an empty array or contains a single empty string, clear the selection.
+        if (value.length === 1 && value[0] === '') {
+            this.value.set([]);
+            if (!this.multiple()) {
+                this.closeEmitter.emit();
+            }
             return;
         }
-        if (this.multiple()) {
-            this.value.set(valueArray);
+        this.value.set(value);
+        if (!this.multiple()) {
+            this.closeEmitter.emit();
         }
-        else {
-            this.value.set(valueArray[0] ?? null);
+    }
+    onEnter() {
+        if (!this.multiple()) {
+            this.closeEmitter.emit();
         }
-        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: { 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 />
+    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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "handleValueChange($event.value)", "keydown.enter": "onEnter()" }, properties: { "cdkListboxValue": "value()", "style.max-height": "maxHeight()" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue", "cdkListboxMultiple", "multiple"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />
     @if (options().length === 0) {
       <div class="no-options-message">
         {{ noOptionsMessage() }}
@@ -376,7 +403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     hostDirectives: [
                         {
                             directive: CdkListbox,
-                            inputs: ['cdkListboxValue'],
+                            inputs: ['cdkListboxValue', 'cdkListboxMultiple: multiple'],
                             outputs: ['cdkListboxValueChange'],
                         },
                     ],
@@ -384,7 +411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         '[cdkListboxValue]': 'value()',
                         '(cdkListboxValueChange)': 'handleValueChange($event.value)',
                         '[style.max-height]': 'maxHeight()',
-                        '(keydown.enter)': 'closeEmitter.emit()',
+                        '(keydown.enter)': 'onEnter()',
                     },
                 }]
         }] });
@@ -781,6 +808,11 @@ class SelectComponent {
      * When disabled, the dropdown cannot be opened or interacted with.
      */
     disabled = model(false);
+    /**
+     * Computed signal indicating whether multiple selections are allowed.
+     * This retrieves the `multiple` property from the `OptionsListComponent`.
+     */
+    multiple = computed(() => this.optionsList()?.multiple() ?? false);
     /**
      * Computed signal representing the options available in the dropdown.
      * This retrieves the options from the `OptionsListComponent`.
@@ -792,12 +824,11 @@ class SelectComponent {
      */
     content = computed(() => {
         const selected = this.value();
-        const selectedArray = Array.isArray(selected) ? selected : [selected];
-        const valid = selectedArray.length > 0 &&
-            !(selectedArray.length === 1 && selectedArray[0] === '');
-        if (valid) {
+        if (selected &&
+            selected.length > 0 &&
+            !(selected.length === 1 && selected[0] === '')) {
             return this.options()?.reduce((acc, option) => {
-                if (selectedArray.includes(option.cdkOption.value)) {
+                if (selected.includes(option.cdkOption.value)) {
                     return acc
                         ? acc + ', ' + option.el.nativeElement.innerText
                         : option.el.nativeElement.innerText;
@@ -828,20 +859,7 @@ class SelectComponent {
      */
     handleSelectedValueChange() {
         this.optionsList()?.closeEmitter.subscribe(() => {
-            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.onChange(this.value());
             this.onTouched();
             this.isOpen.set(false);
         });
@@ -877,19 +895,34 @@ class SelectComponent {
      * @param value - The new value to set.
      */
     writeValue(value) {
-        if (value == null)
+        if (!value) {
             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]);
+        }
+        const values = this.multiple()
+            ? Array.isArray(value)
+                ? value
+                : [value]
+            : [typeof value === 'string' ? value : value?.[0]];
+        if (values) {
+            values.forEach(val => {
+                this.optionsList()?.listBox?.selectValue(val);
+            });
+            this.value.set(values);
+        }
     }
     /**
      * Registers a callback function to be called when the value changes.
      * @param fn - The callback function.
      */
     registerOnChange(fn) {
-        this.onChange = fn;
+        this.onChange = (val) => {
+            if (this.multiple()) {
+                fn(val);
+            }
+            else {
+                fn(val?.[0] ?? '');
+            }
+        };
     }
     /**
      * Registers a callback function to be called when the component is touched.
@@ -2580,6 +2613,10 @@ class CommandOptionsComponent {
      * Emitter for closing the command options.
      */
     closeEmitter = output();
+    /**
+     * Signal indicando si se permite selección múltiple.
+     */
+    multiple = input(false);
     /**
      * Lifecycle hook that initializes the component.
      * Enables the use of active descendant for the listbox.
@@ -2634,8 +2671,27 @@ class CommandOptionsComponent {
             }
         });
     }
+    handleValueChange(value) {
+        // If the value is an empty array or contains a single empty string, clear the selection.
+        if (value.length === 1 && value[0] === '') {
+            this.value.set([]);
+            if (!this.multiple()) {
+                this.closeEmitter.emit();
+            }
+            return;
+        }
+        this.value.set(value);
+        if (!this.multiple()) {
+            this.closeEmitter.emit();
+        }
+    }
+    onEnter() {
+        if (!this.multiple()) {
+            this.closeEmitter.emit();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CommandOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: CommandOptionsComponent, isStandalone: true, selector: "ul[b-command-options]", inputs: { noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "selectOption($event.value)", "keydown.enter": "closeEmitter.emit()" } }, queries: [{ propertyName: "options", predicate: CdkOption, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: CommandOptionsComponent, isStandalone: true, selector: "ul[b-command-options]", inputs: { noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "handleValueChange($event.value)", "keydown.enter": "onEnter()" }, properties: { "cdkListboxValue": "value()", "cdkListboxMultiple": "multiple()" } }, queries: [{ propertyName: "options", predicate: CdkOption, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue", "cdkListboxMultiple", "multiple"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />
     @if (options().length === 0) {
       <div class="no-options-message">
         {{ noOptionsMessage() }}
@@ -2656,12 +2712,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     hostDirectives: [
                         {
                             directive: CdkListbox,
+                            inputs: ['cdkListboxValue', 'cdkListboxMultiple: multiple'],
                             outputs: ['cdkListboxValueChange'],
                         },
                     ],
                     host: {
-                        '(cdkListboxValueChange)': 'selectOption($event.value)',
-                        '(keydown.enter)': 'closeEmitter.emit()',
+                        '[cdkListboxValue]': 'value()',
+                        '[cdkListboxMultiple]': 'multiple()',
+                        '(cdkListboxValueChange)': 'handleValueChange($event.value)',
+                        '(keydown.enter)': 'onEnter()',
                     },
                 }]
         }] });
@@ -2877,6 +2936,11 @@ class ComboboxComponent {
     setButtonWidth() {
         this.buttonWidth.set(this.button()?.el.nativeElement.offsetWidth);
     }
+    /**
+     * Computed signal indicando si se permite selección múltiple.
+     * Se obtiene de CommandOptionsComponent.
+     */
+    multiple = computed(() => this.command()?.commandOptions()?.multiple() ?? false);
     // Control Value Accessor methods
     /**
      * Callback function to propagate changes to the model.
@@ -2890,23 +2954,37 @@ class ComboboxComponent {
     onTouched = () => undefined;
     /**
      * Writes a new value to the component.
-     * This method is called by Angular Forms to update the value of the combobox component.
-     * @param value - The new value to set.
+     * Este método ahora soporta selección múltiple.
      */
     writeValue(value) {
-        if (value) {
-            value.forEach(value => {
-                this.command()?.commandOptions()?.cdkListbox?.selectValue(value);
+        if (!value) {
+            return;
+        }
+        const values = this.multiple()
+            ? Array.isArray(value)
+                ? value
+                : [value]
+            : [typeof value === 'string' ? value : value?.[0]];
+        if (values) {
+            values.forEach(val => {
+                this.command()?.commandOptions()?.cdkListbox?.selectValue(val);
             });
-            this.value.set(value);
+            this.value.set(values);
         }
     }
     /**
      * Registers a callback function to be called when the value changes.
-     * @param fn - The callback function.
+     * Ahora soporta selección múltiple.
      */
     registerOnChange(fn) {
-        this.onChange = fn;
+        this.onChange = (val) => {
+            if (this.multiple()) {
+                fn(val);
+            }
+            else {
+                fn(val?.[0] ?? '');
+            }
+        };
     }
     /**
      * Registers a callback function to be called when the component is touched.