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

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

@@ -0,0 +1,22 @@
+import { CdkOption } from '@angular/cdk/listbox';
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/listbox";
+/**
+ * Component representing an individual option in a select or combobox.
+ * This component integrates with Angular CDK Option to manage the option's state and behavior.
+ */
+export declare class OptionComponent {
+    /**
+     * The `ElementRef` of the option.
+     * This provides direct access to the DOM element of the option.
+     */
+    el: ElementRef<any>;
+    /**
+     * The `CdkOption` instance associated with this option.
+     * This provides methods and properties for managing the option's state, such as selection and value.
+     */
+    cdkOption: CdkOption<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OptionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OptionComponent, "li[b-option]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.CdkOption; inputs: { "cdkOption": "value"; }; outputs: {}; }]>;
+}

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

@@ -1,23 +1,18 @@
 import { CdkListbox } from '@angular/cdk/listbox';
 import { ElementRef } from '@angular/core';
-import { SelectOptionComponent } from './select-option.component';
+import { OptionComponent } from './option.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/cdk/listbox";
 /**
- * Component representing the content of a select dropdown.
+ * Component representing the list of options in a select or combobox.
  * This component integrates with Angular CDK Listbox to manage options and their selection.
  */
-export declare class SelectContentComponent {
+export declare class OptionsListComponent {
     /**
      * Signal representing the selected values in the listbox.
      * This is an array of strings corresponding to the selected option values.
      */
     readonly value: import("@angular/core").WritableSignal<string[]>;
-    /**
-     * Signal representing the content of the selected option(s).
-     * This is a string that can be used to display the selected option(s).
-     */
-    readonly content: 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.
@@ -25,7 +20,7 @@ export declare class SelectContentComponent {
     closeEmitter: import("@angular/core").OutputEmitterRef<void>;
     /**
      * Reference to the host element of the component.
-     * This provides access to the DOM element of the dropdown content.
+     * This provides access to the DOM element of the options list.
      */
     el: ElementRef<any>;
     /**
@@ -40,9 +35,9 @@ export declare class SelectContentComponent {
     listBox: CdkListbox<any>;
     /**
      * Reference to the list of options in the dropdown.
-     * This is a collection of `SelectOptionComponent` instances representing the available options.
+     * This is a collection of `OptionComponent` instances representing the available options.
      */
-    readonly options: import("@angular/core").Signal<readonly SelectOptionComponent[]>;
+    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,
@@ -51,6 +46,6 @@ export declare class SelectContentComponent {
      * @param value - The new array of selected values.
      */
     handleValueChange(value: string[]): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectContentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectContentComponent, "ul[b-select-content]", 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<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"; }; }]>;
 }

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

@@ -1,5 +1,6 @@
+import { CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { OnInit } from '@angular/core';
-import { SelectContentComponent } from './select-content.component';
+import { OptionsListComponent } from './options-list.component';
 import { Button } from '../button/button.component';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
@@ -26,10 +27,10 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      * Reference to the content component of the dropdown.
      * This contains the list of selectable options.
      */
-    readonly selectContent: import("@angular/core").Signal<SelectContentComponent | undefined>;
+    readonly optionsList: import("@angular/core").Signal<OptionsListComponent | undefined>;
     /**
      * Computed signal representing the selected values from the dropdown.
-     * This is linked to the value of the `SelectContentComponent`.
+     * This is linked to the value of the `OptionsListComponent`.
      */
     readonly value: import("@angular/core").WritableSignal<string[] | undefined>;
     /**
@@ -49,21 +50,31 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
     readonly disabled: import("@angular/core").ModelSignal<boolean>;
     /**
      * Computed signal representing the options available in the dropdown.
-     * This retrieves the options from the `SelectContentComponent`.
+     * This retrieves the options from the `OptionsListComponent`.
      */
-    readonly options: import("@angular/core").Signal<readonly import("@basis-ng/primitives").SelectOptionComponent[] | undefined>;
+    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.
+     */
+    readonly closeDelay: import("@angular/core").WritableSignal<number>;
+    /**
+     * Reference to the CdkConnectedOverlay directive.
+     * This is used to manage the positioning and visibility of the dropdown overlay.
+     */
+    readonly cdkConnectedOverlay: import("@angular/core").Signal<CdkConnectedOverlay | undefined>;
     /**
      * Lifecycle hook that is called after the component is initialized.
      * It sets up the necessary subscriptions for handling value changes.
      */
     ngOnInit(): void;
     /**
-     * Subscribes to the `closeEmitter` of the `SelectContentComponent` to handle
+     * Subscribes to the `closeEmitter` of the `OptionsListComponent` to handle
      * changes to the selected value. This ensures the dropdown closes and the
      * value is propagated to Angular Forms.
      */
@@ -74,8 +85,9 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      */
     open(): void;
     /**
-     * Closes the dropdown and focuses the button.
-     * This method sets the `isOpen` signal to `false` and ensures the button regains focus.
+     * Closes the dropdown with a transition effect and refocuses the button.
+     * This method sets the `isOpen` signal to `false` after a delay and removes
+     * the transition class from the overlay panel.
      */
     close(): void;
     /**
@@ -111,5 +123,5 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      */
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "b-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, ["selectContent"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "b-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, ["optionsList"], ["*"], true, never>;
 }

package/fesm2022/basis-ng-primitives.mjs

@@ -538,27 +538,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }] });
 
 /**
- * Component representing an individual option in a select dropdown.
+ * Component representing an individual option in a select or combobox.
  * This component integrates with Angular CDK Option to manage the option's state and behavior.
  */
-class SelectOptionComponent {
+class OptionComponent {
     /**
-     * The `ElementRef` of the select option.
+     * The `ElementRef` of the option.
      * This provides direct access to the DOM element of the option.
      */
     el = inject(ElementRef);
     /**
-     * The `CdkOption` instance associated with this select option.
+     * The `CdkOption` instance associated with this option.
      * This provides methods and properties for managing the option's state, such as selection and value.
      */
-    option = inject(CdkOption);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SelectOptionComponent, isStandalone: true, selector: "li[b-select-option]", hostDirectives: [{ directive: i1.CdkOption, inputs: ["cdkOption", "value"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    cdkOption = inject(CdkOption);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: OptionComponent, isStandalone: true, selector: "li[b-option]", hostDirectives: [{ directive: i1.CdkOption, inputs: ["cdkOption", "value"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'li[b-select-option]',
+                    selector: 'li[b-option]',
                     imports: [],
                     template: `<ng-content />`,
                     hostDirectives: [
@@ -571,20 +571,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }] });
 
 /**
- * Component representing the content of a select dropdown.
+ * Component representing the list of options in a select or combobox.
  * This component integrates with Angular CDK Listbox to manage options and their selection.
  */
-class SelectContentComponent {
+class OptionsListComponent {
     /**
      * Signal representing the selected values in the listbox.
      * This is an array of strings corresponding to the selected option values.
      */
     value = signal([]);
-    /**
-     * Signal representing the content of the selected option(s).
-     * This is a string that can be used to display the selected option(s).
-     */
-    content = signal('');
     /**
      * Event emitter triggered when the dropdown should close.
      * This is used to notify the parent component to close the dropdown.
@@ -592,7 +587,7 @@ class SelectContentComponent {
     closeEmitter = output();
     /**
      * Reference to the host element of the component.
-     * This provides access to the DOM element of the dropdown content.
+     * This provides access to the DOM element of the options list.
      */
     el = inject(ElementRef);
     /**
@@ -607,9 +602,9 @@ class SelectContentComponent {
     listBox = inject(CdkListbox);
     /**
      * Reference to the list of options in the dropdown.
-     * This is a collection of `SelectOptionComponent` instances representing the available options.
+     * This is a collection of `OptionComponent` instances representing the available options.
      */
-    options = contentChildren(SelectOptionComponent);
+    options = contentChildren(OptionComponent);
     /**
      * Handles changes to the selected value in the listbox.
      * This method updates the `value` signal, emits the `closeEmitter` event,
@@ -621,13 +616,13 @@ class SelectContentComponent {
         this.value.set(value);
         this.closeEmitter.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: SelectContentComponent, isStandalone: true, selector: "ul[b-select-content]", 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: SelectOptionComponent, 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: 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OptionsListComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ul[b-select-content]',
+                    selector: 'ul[b-options-list]',
                     imports: [],
                     template: `<ng-content />`,
                     hostDirectives: [
@@ -668,12 +663,12 @@ class SelectComponent {
      * Reference to the content component of the dropdown.
      * This contains the list of selectable options.
      */
-    selectContent = contentChild(SelectContentComponent);
+    optionsList = contentChild(OptionsListComponent);
     /**
      * Computed signal representing the selected values from the dropdown.
-     * This is linked to the value of the `SelectContentComponent`.
+     * This is linked to the value of the `OptionsListComponent`.
      */
-    value = linkedSignal(() => this.selectContent()?.value());
+    value = linkedSignal(() => this.optionsList()?.value());
     /**
      * Input for setting the maximum width of the dropdown.
      * Defaults to '100%'.
@@ -691,9 +686,9 @@ class SelectComponent {
     disabled = model(false);
     /**
      * Computed signal representing the options available in the dropdown.
-     * This retrieves the options from the `SelectContentComponent`.
+     * This retrieves the options from the `OptionsListComponent`.
      */
-    options = computed(() => this.selectContent()?.options());
+    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.
@@ -702,7 +697,7 @@ class SelectComponent {
         const selected = this.value();
         if (selected && selected.length > 0) {
             return this.options()?.reduce((acc, option) => {
-                if (selected.includes(option.option.value)) {
+                if (selected.includes(option.cdkOption.value)) {
                     return acc
                         ? acc + ', ' + option.el.nativeElement.innerText
                         : option.el.nativeElement.innerText;
@@ -714,6 +709,16 @@ class SelectComponent {
             return this.placeholder();
         }
     });
+    /**
+     * Signal representing the delay before closing the dropdown.
+     * This is used to provide a smooth transition when closing the dropdown.
+     */
+    closeDelay = signal(150);
+    /**
+     * Reference to the CdkConnectedOverlay directive.
+     * This is used to manage the positioning and visibility of the dropdown overlay.
+     */
+    cdkConnectedOverlay = viewChild(CdkConnectedOverlay);
     /**
      * Lifecycle hook that is called after the component is initialized.
      * It sets up the necessary subscriptions for handling value changes.
@@ -722,12 +727,12 @@ class SelectComponent {
         this.handleSelectedValueChange();
     }
     /**
-     * Subscribes to the `closeEmitter` of the `SelectContentComponent` to handle
+     * Subscribes to the `closeEmitter` of the `OptionsListComponent` to handle
      * changes to the selected value. This ensures the dropdown closes and the
      * value is propagated to Angular Forms.
      */
     handleSelectedValueChange() {
-        this.selectContent()?.closeEmitter.subscribe(() => {
+        this.optionsList()?.closeEmitter.subscribe(() => {
             this.onChange(this.value()); // Notify Angular Forms about the change
             this.onTouched(); // Mark the component as touched
             this.close(); // Close the dropdown
@@ -739,15 +744,20 @@ class SelectComponent {
      */
     open() {
         this.isOpen.set(true);
-        setTimeout(() => this.selectContent()?.el.nativeElement.focus(), 0);
+        setTimeout(() => this.optionsList()?.el.nativeElement.focus(), 0);
     }
     /**
-     * Closes the dropdown and focuses the button.
-     * This method sets the `isOpen` signal to `false` and ensures the button regains focus.
+     * Closes the dropdown with a transition effect and refocuses the button.
+     * This method sets the `isOpen` signal to `false` after a delay and removes
+     * the transition class from the overlay panel.
      */
     close() {
-        setTimeout(() => this.button()?.el.nativeElement.focus(), 0);
-        this.isOpen.set(false);
+        this.cdkConnectedOverlay()?.overlayRef.addPanelClass('cdk-overlay-pane-closing');
+        setTimeout(() => {
+            this.isOpen.set(false);
+            this.cdkConnectedOverlay()?.overlayRef.removePanelClass('cdk-overlay-pane-closing');
+            this.button()?.el.nativeElement.focus();
+        }, this.closeDelay());
     }
     // Control Value Accessor methods
     /**
@@ -768,7 +778,7 @@ class SelectComponent {
     writeValue(value) {
         if (value) {
             value.forEach(value => {
-                this.selectContent()?.listBox?.selectValue(value);
+                this.optionsList()?.listBox?.selectValue(value);
             });
             this.value.set(value);
         }
@@ -802,7 +812,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "selectContent", first: true, predicate: SelectContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "button", first: true, predicate: Button, descendants: true, isSignal: true }], ngImport: i0, template: ` <button
+        ], 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
       b-button
       variant="outlined"
       (click)="isOpen() ? close() : open()"
@@ -2703,5 +2713,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, Range, ResponsiveService, Row, RowItem, Search, SelectComponent, SelectContentComponent, SelectOptionComponent, 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, Option, OptionComponent, OptionsListComponent, Range, ResponsiveService, Row, RowItem, Search, SelectComponent, SideSheet, Spinner, Switch, Tab, Table, Tabs, Textarea, ThemeService, TooltipComponent, Tree, TreeNode };
 //# sourceMappingURL=basis-ng-primitives.mjs.map