@basis-ng/primitives 0.0.1-alpha.8 → 0.0.1-alpha.9

package/core/components/select/{options-list.component.d.ts → select-options.component.d.ts}

@@ -1,13 +1,13 @@
 import { CdkListbox } from '@angular/cdk/listbox';
 import { ElementRef } from '@angular/core';
-import { OptionComponent } from './option.component';
+import { OptionComponent } from '../../../shared/components/option.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/cdk/listbox";
 /**
- * Component representing the list of options in a select or combobox.
+ * Component representing the list of options in a select.
  * This component integrates with Angular CDK Listbox to manage options and their selection.
  */
-export declare class OptionsListComponent {
+export declare class SelectOptionsComponent {
     /**
      * Signal representing the selected values in the listbox.
      * This is an array of strings corresponding to the selected option values.
@@ -46,6 +46,6 @@ export declare class OptionsListComponent {
      * @param value - The new array of selected values.
      */
     handleValueChange(value: string[]): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<OptionsListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OptionsListComponent, "ul[b-options-list]", never, { "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, { "closeEmitter": "closeEmitter"; }, ["options"], ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: { "cdkListboxValue": "cdkListboxValue"; }; outputs: { "cdkListboxValueChange": "cdkListboxValueChange"; }; }]>;
+    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

@@ -1,6 +1,6 @@
 import { CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { OnInit } from '@angular/core';
-import { OptionsListComponent } from './options-list.component';
+import { SelectOptionsComponent } from './select-options.component';
 import { Button } from '../button/button.component';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
@@ -27,7 +27,7 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      * Reference to the content component of the dropdown.
      * This contains the list of selectable options.
      */
-    readonly optionsList: import("@angular/core").Signal<OptionsListComponent | undefined>;
+    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`.

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, linkedSignal, forwardRef, afterNextRender, afterRenderEffect } from '@angular/core';
+import { signal, inject, RendererFactory2, Injectable, input, Component, ElementRef, TemplateRef, Directive, model, computed, output, contentChildren, viewChild, contentChild, linkedSignal, forwardRef, effect, HostListener, 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, NG_VALUE_ACCESSOR, ControlContainer } from '@angular/forms';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i1 from '@angular/cdk/listbox';
 import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
+import { DomSanitizer } from '@angular/platform-browser';
+import { icons, createElement } from 'lucide';
 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';
@@ -152,268 +152,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 }]
         }] });
 
-class Icon {
-    /**
-     * The sanitizer service.
-     */
-    sanitizer = inject(DomSanitizer);
-    /**
-     * The icon of the text field.
-     */
-    icon = input.required();
-    /**
-     * The size of the icon.
-     */
-    size = input(24);
-    /**
-     * The stroke of the icon.
-     */
-    strokeWidth = input(1.8);
-    /**
-     * The color of the icon.
-     */
-    color = input('var(--foreground, #798194)');
-    /**
-     * The svg of the icon.
-     */
-    iconSvg = computed(() => {
-        if (!icons[this.icon()]) {
-            console.error(`Icon '${this.icon()}' not found in Lucide icons.`);
-            return this.sanitizer.bypassSecurityTrustHtml('');
-        }
-        const iconSvg = createElement(icons[this.icon()], {
-            width: this.size(),
-            height: this.size(),
-            stroke: this.color(),
-            'stroke-width': this.strokeWidth(),
-        });
-        return this.sanitizer.bypassSecurityTrustHtml(iconSvg.outerHTML);
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Icon, isStandalone: true, selector: "i[b-icon]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "iconSvg()" } }, ngImport: i0, template: ``, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Icon, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'i[b-icon]',
-                    imports: [],
-                    template: ``,
-                    host: {
-                        '[innerHTML]': 'iconSvg()',
-                    },
-                }]
-        }] });
-
-class UtilsService {
-    debounceTimer;
-    /**
-     * Debounce with optional delay
-     * @param {any} func - The function to debounce
-     * @param {any} delay - The delay in milliseconds
-     */
-    debounce(func, delay) {
-        clearTimeout(this.debounceTimer);
-        this.debounceTimer = setTimeout(func, delay);
-    }
-    /**
-     * Stop debounce
-     */
-    stopDebounce() {
-        clearTimeout(this.debounceTimer);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: UtilsService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: UtilsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class Search {
-    /**
-     * The label associated with the search component.
-     */
-    label = input();
-    /**
-     * The maximum width of the search component.
-     */
-    maxWidth = input('');
-    /**
-     * The placeholder of the text field.
-     */
-    placeholder = input('');
-    /**
-     * Indicates whether the search component is searching.
-     */
-    searching = model(false);
-    /**
-     * Indicates whether the search component is in an invalid state.
-     */
-    invalid = model(false);
-    /**
-     * Indicates whether the search component is disabled.
-     */
-    disabled = model(false);
-    /**
-     * The value of the selected option.
-     */
-    selectedValue = model(null);
-    /**
-     * The search value.
-     */
-    searchValue = model('');
-    /**
-     * Emits the value of the search component when the value changes.
-     */
-    searchChange = output();
-    /**
-     * Emits when the search component is focused.
-     */
-    focused = signal(false);
-    /**
-     * Indicates whether the options dropdown is open.
-     */
-    isOpen = signal(false);
-    /**
-     * The options available for selection.
-     */
-    options = contentChildren(Option);
-    /**
-     * Indicates whether the search component has no options.
-     */
-    noOptions = computed(() => !this.options() || this.options().length === 0);
-    /**
-     * Reference to the select element within the component
-     * @private
-     */
-    select = viewChild('select');
-    /**
-     * Reference to the renderer
-     * @private
-     */
-    renderer = inject(Renderer2);
-    /**
-     * The icon name to display.
-     */
-    selectIconName = computed(() => {
-        return this.searching()
-            ? 'LoaderCircle'
-            : this.selectedValue()
-                ? 'X'
-                : 'ChevronDown';
-    });
-    /**
-     * The icon size to display.
-     */
-    selectIconSize = computed(() => {
-        return this.searching() ? 17 : this.selectedValue() ? 18 : 20;
-    });
-    /**
-     * The debounce time for the search input.
-     */
-    debounceTime = input(300);
-    /**
-     * Reference to the UtilsService
-     * @private
-     */
-    utilsService = inject(UtilsService);
-    /**
-     * Initializes the search component.
-     */
-    constructor() {
-        effect(() => this.renderOptions());
-    }
-    /**
-     * Renders the options within the select element.
-     * @private
-     */
-    renderOptions() {
-        const select = this.select()?.nativeElement;
-        const options = this.options();
-        if (!select || !options || options.length === 0) {
-            return;
-        }
-        // Clear the existing options
-        select.innerHTML = '';
-        // Append the options to the select
-        options.forEach(option => {
-            this.renderer.appendChild(select, option.el.nativeElement);
-        });
-    }
-    /**
-     * Handles the change event of the input text.
-     */
-    onInputValueChange(event) {
-        this.searching.set(true);
-        const value = event.target.value;
-        this.searchValue.set(value);
-        // Use the debounce method from UtilsService
-        this.utilsService.debounce(() => {
-            this.searchChange.emit(value);
-        }, this.debounceTime());
-    }
-    /**
-     * Resets the search component.
-     */
-    reset() {
-        this.selectedValue.set(null);
-        this.searchValue.set('');
-    }
-    /**
-     * Handles the selection change event from the native select element.
-     * @param event The selection change event.
-     */
-    onSelectValueChange(event) {
-        const select = event.target;
-        const value = select.value === 'null' ? null : select.value;
-        this.selectedValue.set(value);
-        this.isOpen.set(false);
-    }
-    /**
-     * Handles click events outside the select component to close the options dropdown.
-     * @param event The mouse click event.
-     */
-    onOutsideClick(event) {
-        if (!this.select().nativeElement.contains(event.target)) {
-            this.isOpen.set(false);
-        }
-    }
-    /**
-     * Handles keyboard events to open or close the options dropdown.
-     * @param event The keyboard event.
-     */
-    onKeyDown(event) {
-        if (event.key === 'Escape') {
-            this.isOpen.set(false);
-        }
-    }
-    /**
-     * Handles the icon click event.
-     */
-    handleIconClick() {
-        if (this.selectedValue()) {
-            this.reset();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Search, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: Search, isStandalone: true, selector: "b-search", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searching: { classPropertyName: "searching", publicName: "searching", 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 }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searching: "searchingChange", invalid: "invalidChange", disabled: "disabledChange", selectedValue: "selectedValueChange", searchValue: "searchValueChange", searchChange: "searchChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "document:click": "onOutsideClick($event)" }, properties: { "style.max-width": "maxWidth()", "class.invalid": "invalid()", "class.disabled": "disabled()", "class.label-up": "(searchValue() || selectedValue() || placeholder() || focused()) && label()" } }, queries: [{ propertyName: "options", predicate: Option, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Label -->\r\n@if (label()) {\r\n  <label>\r\n    {{ label() }}\r\n  </label>\r\n}\r\n\r\n@if (!selectedValue()) {\r\n  <section [class.large]=\"noOptions() && !searching()\">\r\n    <!-- Input -->\r\n    <input\r\n      #input\r\n      [value]=\"searchValue()\"\r\n      [placeholder]=\"placeholder() || ''\"\r\n      [disabled]=\"disabled()\"\r\n      (focus)=\"focused.set(true)\"\r\n      (blur)=\"focused.set(false)\"\r\n      (input)=\"onInputValueChange($event)\" />\r\n\r\n    <!-- Clear Button -->\r\n    @if (searchValue() || selectedValue()) {\r\n      <i\r\n        b-icon\r\n        icon=\"X\"\r\n        [size]=\"18\"\r\n        tabindex=\"0\"\r\n        (click)=\"searchValue.set('')\"\r\n        (keydown.enter)=\"searchValue.set('')\"\r\n        (keydown.space)=\"searchValue.set('')\"\r\n        [color]=\"\r\n          invalid()\r\n            ? 'var(--error-foreground, #c40000ab)'\r\n            : ' var(--input-foreground, #798194)'\r\n        \"></i>\r\n    }\r\n  </section>\r\n}\r\n\r\n<!-- Select -->\r\n<select\r\n  #select\r\n  [value]=\"selectedValue()\"\r\n  (change)=\"onSelectValueChange($event)\"\r\n  [class.no-options]=\"noOptions()\"\r\n  (mousedown)=\"isOpen.set(true)\"\r\n  [disabled]=\"disabled()\"></select>\r\n\r\nnooptions: {{ noOptions() }} searching: {{ searching() }}\r\n\r\n@if (!noOptions() || searching()) {\r\n  <!-- Icon -->\r\n  <div class=\"icon-wrapper\">\r\n    <i\r\n      b-icon\r\n      [icon]=\"selectIconName()\"\r\n      [class.open]=\"isOpen()\"\r\n      [class.select-has-value]=\"selectedValue()\"\r\n      (click)=\"handleIconClick()\"\r\n      (keydown.enter)=\"handleIconClick()\"\r\n      (keydown.space)=\"handleIconClick()\"\r\n      tabindex=\"0\"\r\n      [class.searching]=\"searching()\"\r\n      [size]=\"selectIconSize()\"\r\n      [color]=\"\r\n        invalid()\r\n          ? 'var(--error-foreground, #c40000ab)'\r\n          : ' var(--input-foreground, #798194)'\r\n      \"></i>\r\n  </div>\r\n}\r\n\r\n<!-- Projected Options -->\r\n<ng-content />\r\n", dependencies: [{ kind: "component", type: Icon, selector: "i[b-icon]", inputs: ["icon", "size", "strokeWidth", "color"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Search, decorators: [{
-            type: Component,
-            args: [{ selector: 'b-search', imports: [Icon], host: {
-                        '[style.max-width]': 'maxWidth()',
-                        '[class.invalid]': 'invalid()',
-                        '[class.disabled]': 'disabled()',
-                        '[class.label-up]': '(searchValue() || selectedValue() || placeholder() || focused()) && label()',
-                        '(keydown)': 'onKeyDown($event)',
-                    }, template: "<!-- Label -->\r\n@if (label()) {\r\n  <label>\r\n    {{ label() }}\r\n  </label>\r\n}\r\n\r\n@if (!selectedValue()) {\r\n  <section [class.large]=\"noOptions() && !searching()\">\r\n    <!-- Input -->\r\n    <input\r\n      #input\r\n      [value]=\"searchValue()\"\r\n      [placeholder]=\"placeholder() || ''\"\r\n      [disabled]=\"disabled()\"\r\n      (focus)=\"focused.set(true)\"\r\n      (blur)=\"focused.set(false)\"\r\n      (input)=\"onInputValueChange($event)\" />\r\n\r\n    <!-- Clear Button -->\r\n    @if (searchValue() || selectedValue()) {\r\n      <i\r\n        b-icon\r\n        icon=\"X\"\r\n        [size]=\"18\"\r\n        tabindex=\"0\"\r\n        (click)=\"searchValue.set('')\"\r\n        (keydown.enter)=\"searchValue.set('')\"\r\n        (keydown.space)=\"searchValue.set('')\"\r\n        [color]=\"\r\n          invalid()\r\n            ? 'var(--error-foreground, #c40000ab)'\r\n            : ' var(--input-foreground, #798194)'\r\n        \"></i>\r\n    }\r\n  </section>\r\n}\r\n\r\n<!-- Select -->\r\n<select\r\n  #select\r\n  [value]=\"selectedValue()\"\r\n  (change)=\"onSelectValueChange($event)\"\r\n  [class.no-options]=\"noOptions()\"\r\n  (mousedown)=\"isOpen.set(true)\"\r\n  [disabled]=\"disabled()\"></select>\r\n\r\nnooptions: {{ noOptions() }} searching: {{ searching() }}\r\n\r\n@if (!noOptions() || searching()) {\r\n  <!-- Icon -->\r\n  <div class=\"icon-wrapper\">\r\n    <i\r\n      b-icon\r\n      [icon]=\"selectIconName()\"\r\n      [class.open]=\"isOpen()\"\r\n      [class.select-has-value]=\"selectedValue()\"\r\n      (click)=\"handleIconClick()\"\r\n      (keydown.enter)=\"handleIconClick()\"\r\n      (keydown.space)=\"handleIconClick()\"\r\n      tabindex=\"0\"\r\n      [class.searching]=\"searching()\"\r\n      [size]=\"selectIconSize()\"\r\n      [color]=\"\r\n        invalid()\r\n          ? 'var(--error-foreground, #c40000ab)'\r\n          : ' var(--input-foreground, #798194)'\r\n      \"></i>\r\n  </div>\r\n}\r\n\r\n<!-- Projected Options -->\r\n<ng-content />\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { onOutsideClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
-
 class Input {
     /**
      * The type of the input.
@@ -571,10 +309,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }] });
 
 /**
- * Component representing the list of options in a select or combobox.
+ * Component representing the list of options in a select.
  * This component integrates with Angular CDK Listbox to manage options and their selection.
  */
-class OptionsListComponent {
+class SelectOptionsComponent {
     /**
      * Signal representing the selected values in the listbox.
      * This is an array of strings corresponding to the selected option values.
@@ -616,13 +354,13 @@ class OptionsListComponent {
         this.value.set(value);
         this.closeEmitter.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OptionsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: OptionsListComponent, isStandalone: true, selector: "ul[b-options-list]", 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: OptionComponent, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", 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)" }, 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.7", ngImport: i0, type: OptionsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectOptionsComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ul[b-options-list]',
+                    selector: 'ul[b-select-options]',
                     imports: [],
                     template: `<ng-content />`,
                     hostDirectives: [
@@ -640,6 +378,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 }]
         }] });
 
+class Icon {
+    /**
+     * The sanitizer service.
+     */
+    sanitizer = inject(DomSanitizer);
+    /**
+     * The icon of the text field.
+     */
+    icon = input.required();
+    /**
+     * The size of the icon.
+     */
+    size = input(24);
+    /**
+     * The stroke of the icon.
+     */
+    strokeWidth = input(1.8);
+    /**
+     * The color of the icon.
+     */
+    color = input('var(--foreground, #798194)');
+    /**
+     * The svg of the icon.
+     */
+    iconSvg = computed(() => {
+        if (!icons[this.icon()]) {
+            console.error(`Icon '${this.icon()}' not found in Lucide icons.`);
+            return this.sanitizer.bypassSecurityTrustHtml('');
+        }
+        const iconSvg = createElement(icons[this.icon()], {
+            width: this.size(),
+            height: this.size(),
+            stroke: this.color(),
+            'stroke-width': this.strokeWidth(),
+        });
+        return this.sanitizer.bypassSecurityTrustHtml(iconSvg.outerHTML);
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Icon, isStandalone: true, selector: "i[b-icon]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "iconSvg()" } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Icon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'i[b-icon]',
+                    imports: [],
+                    template: ``,
+                    host: {
+                        '[innerHTML]': 'iconSvg()',
+                    },
+                }]
+        }] });
+
 /**
  * Component representing a custom select dropdown.
  * This component provides a button to toggle the dropdown and displays the selected option(s).
@@ -663,7 +453,7 @@ class SelectComponent {
      * Reference to the content component of the dropdown.
      * This contains the list of selectable options.
      */
-    optionsList = contentChild(OptionsListComponent);
+    optionsList = contentChild(SelectOptionsComponent);
     /**
      * Computed signal representing the selected values from the dropdown.
      * This is linked to the value of the `OptionsListComponent`.
@@ -812,7 +602,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionsList", first: true, predicate: OptionsListComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: Button, descendants: true, isSignal: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: ` <button
+        ], queries: [{ propertyName: "optionsList", first: true, predicate: SelectOptionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: Button, descendants: true, isSignal: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: ` <button
       b-button
       variant="outlined"
       (click)="isOpen() ? close() : open()"
@@ -910,22 +700,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 }]
         }] });
 
-class Option {
-    /**
-     * Reference to the host element.
-     */
-    el = inject(ElementRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Option, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: Option, isStandalone: true, selector: "option[b-option]", ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Option, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'option[b-option]',
-                    template: `<ng-content />`,
-                }]
-        }] });
-
 class Switch {
     /**
      * Value of the switch.
@@ -2713,5 +2487,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, OptionComponent, OptionsListComponent, 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, OptionComponent, Range, ResponsiveService, Row, RowItem, SelectComponent, SelectOptionsComponent, SideSheet, Spinner, Switch, Tab, Table, Tabs, Textarea, ThemeService, TooltipComponent, Tree, TreeNode };
 //# sourceMappingURL=basis-ng-primitives.mjs.map