@basis-ng/primitives 0.0.1-alpha.69 → 0.0.1-alpha.70

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

@@ -17,7 +17,7 @@ export declare class SelectOptionsComponent {
      * 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<string[]>;
+    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.
@@ -46,11 +46,6 @@ export declare class SelectOptionsComponent {
      * @param value - The new array of selected values.
      */
     handleValueChange(value: string[]): void;
-    /**
-     * Emits the current value when the Enter key is pressed.
-     * This ensures the dropdown closes and the parent component is notified.
-     */
-    emitCurrentValueOnEnter(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectOptionsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectOptionsComponent, "ul[b-select-options]", 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.component.d.ts

@@ -27,13 +27,10 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      */
     readonly optionsList: import("@angular/core").Signal<SelectOptionsComponent | undefined>;
     /**
-     * Value of the select component.
+     * Computed signal representing the selected values from the dropdown.
+     * This is linked to the value of the `OptionsListComponent`.
      */
-    value: string[];
-    /**
-     * Content to be displayed in the button.
-     */
-    content: string | 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.
@@ -49,6 +46,11 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      * This retrieves the options from the `OptionsListComponent`.
      */
     readonly options: import("@angular/core").Signal<readonly import("@basis-ng/primitives").OptionComponent[] | 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>;
     /**
      * Signal representing the delay before closing the dropdown.
      * This is used to provide a smooth transition when closing the dropdown.
@@ -69,14 +71,6 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      * Focuses the options list when the overlay is attached.
      */
     onOverlayAttached(): void;
-    /**
-     * Returns the content to be displayed in the button.
-     * If no value is selected, it returns the placeholder text.
-     * Otherwise, it returns the selected option(s) as a comma-separated string.
-     *
-     * @param value - The array of selected values.
-     */
-    getContent(value: string[]): string | undefined;
     /**
      * Sets the width of the dropdown overlay based on the button's width.
      * This ensures that the dropdown aligns properly with the button.

package/fesm2022/basis-ng-primitives.mjs

@@ -344,17 +344,10 @@ class SelectOptionsComponent {
      */
     handleValueChange(value) {
         this.value.set(value);
-        this.closeEmitter.emit(value); // Emitimos el valor seleccionado
-    }
-    /**
-     * Emits the current value when the Enter key is pressed.
-     * This ensures the dropdown closes and the parent component is notified.
-     */
-    emitCurrentValueOnEnter() {
-        this.closeEmitter.emit(this.value());
+        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.2.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 } }, outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "handleValueChange($event.value)", "keydown.enter": "emitCurrentValueOnEnter()" }, 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 />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.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 } }, 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 />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectOptionsComponent, decorators: [{
             type: Component,
@@ -373,7 +366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         '[cdkListboxValue]': 'value()',
                         '(cdkListboxValueChange)': 'handleValueChange($event.value)',
                         '[style.max-height]': 'maxHeight()',
-                        '(keydown.enter)': 'emitCurrentValueOnEnter()',
+                        '(keydown.enter)': 'closeEmitter.emit()',
                     },
                 }]
         }] });
@@ -756,13 +749,10 @@ class SelectComponent {
      */
     optionsList = contentChild(SelectOptionsComponent);
     /**
-     * Value of the select component.
-     */
-    value = [];
-    /**
-     * Content to be displayed in the button.
+     * Computed signal representing the selected values from the dropdown.
+     * This is linked to the value of the `OptionsListComponent`.
      */
-    content;
+    value = linkedSignal(() => this.optionsList()?.value());
     /**
      * Linked signal for the width of the button element.
      * This is used to set the width of the dropdown overlay.
@@ -778,6 +768,28 @@ class SelectComponent {
      * This retrieves the options from the `OptionsListComponent`.
      */
     options = computed(() => this.optionsList()?.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 &&
+            !(selected.length === 1 && selected[0] === '')) {
+            return this.options()?.reduce((acc, option) => {
+                if (selected.includes(option.cdkOption.value)) {
+                    return acc
+                        ? acc + ', ' + option.el.nativeElement.innerText
+                        : option.el.nativeElement.innerText;
+                }
+                return acc;
+            }, '');
+        }
+        else {
+            return this.placeholder();
+        }
+    });
     /**
      * Signal representing the delay before closing the dropdown.
      * This is used to provide a smooth transition when closing the dropdown.
@@ -796,10 +808,8 @@ class SelectComponent {
      * value is propagated to Angular Forms.
      */
     handleSelectedValueChange() {
-        this.optionsList()?.closeEmitter.subscribe((value) => {
-            this.value = value;
-            this.onChange(this.value);
-            this.content = this.getContent(this.value);
+        this.optionsList()?.closeEmitter.subscribe(() => {
+            this.onChange(this.value());
             this.onTouched();
             this.isOpen.set(false);
         });
@@ -811,28 +821,6 @@ class SelectComponent {
         this.buttonWidth.set(this.button()?.el.nativeElement.offsetWidth);
         this.optionsList()?.el.nativeElement.focus();
     }
-    /**
-     * Returns the content to be displayed in the button.
-     * If no value is selected, it returns the placeholder text.
-     * Otherwise, it returns the selected option(s) as a comma-separated string.
-     *
-     * @param value - The array of selected values.
-     */
-    getContent(value) {
-        if (value && value.length > 0) {
-            return this.options()?.reduce((acc, option) => {
-                if (value.includes(option.cdkOption.value)) {
-                    return acc
-                        ? acc + ', ' + option.el.nativeElement.innerText
-                        : option.el.nativeElement.innerText;
-                }
-                return acc;
-            }, '');
-        }
-        else {
-            return this.placeholder();
-        }
-    }
     /**
      * Sets the width of the dropdown overlay based on the button's width.
      * This ensures that the dropdown aligns properly with the button.
@@ -861,7 +849,7 @@ class SelectComponent {
             value.forEach(value => {
                 this.optionsList()?.listBox?.selectValue(value);
             });
-            this.content = this.getContent(value);
+            this.value.set(value);
         }
     }
     /**
@@ -902,7 +890,7 @@ class SelectComponent {
       [activeEnabled]="false"
       bOverlayTrigger
       #trigger="bOverlayTrigger">
-      <span>{{ content }}</span>
+      <span>{{ content() }}</span>
       <i b-icon icon="ChevronDown" [size]="16"></i>
     </button>
     <ng-template
@@ -937,7 +925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
       [activeEnabled]="false"
       bOverlayTrigger
       #trigger="bOverlayTrigger">
-      <span>{{ content }}</span>
+      <span>{{ content() }}</span>
       <i b-icon icon="ChevronDown" [size]="16"></i>
     </button>
     <ng-template