@basis-ng/primitives 0.0.1-alpha.67 → 0.0.1-alpha.68

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

@@ -27,10 +27,13 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      */
     readonly optionsList: import("@angular/core").Signal<SelectOptionsComponent | undefined>;
     /**
-     * Computed signal representing the selected values from the dropdown.
-     * This is linked to the value of the `OptionsListComponent`.
+     * Value of the select component.
      */
-    readonly value: import("@angular/core").WritableSignal<string[] | undefined>;
+    value: string[];
+    /**
+     * Content to be displayed in the button.
+     */
+    content: string | undefined;
     /**
      * Linked signal for the width of the button element.
      * This is used to set the width of the dropdown overlay.
@@ -46,11 +49,6 @@ 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.
@@ -71,6 +69,14 @@ 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

@@ -749,10 +749,13 @@ class SelectComponent {
      */
     optionsList = contentChild(SelectOptionsComponent);
     /**
-     * Computed signal representing the selected values from the dropdown.
-     * This is linked to the value of the `OptionsListComponent`.
+     * Value of the select component.
+     */
+    value = [];
+    /**
+     * Content to be displayed in the button.
      */
-    value = linkedSignal(() => this.optionsList()?.value());
+    content;
     /**
      * Linked signal for the width of the button element.
      * This is used to set the width of the dropdown overlay.
@@ -768,28 +771,6 @@ 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.
@@ -809,7 +790,7 @@ class SelectComponent {
      */
     handleSelectedValueChange() {
         this.optionsList()?.closeEmitter.subscribe(() => {
-            this.onChange(this.value());
+            this.onChange(this.value);
             this.onTouched();
             this.isOpen.set(false);
         });
@@ -821,6 +802,28 @@ 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.
@@ -849,7 +852,7 @@ class SelectComponent {
             value.forEach(value => {
                 this.optionsList()?.listBox?.selectValue(value);
             });
-            this.value.set(value);
+            this.content = this.getContent(value);
         }
     }
     /**
@@ -890,7 +893,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
@@ -925,7 +928,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