@basis-ng/primitives 0.0.1-alpha.13 → 0.0.1-alpha.15

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

@@ -79,6 +79,11 @@ export declare class ComboboxComponent implements OnInit, ControlValueAccessor {
      * value is propagated to Angular Forms.
      */
     handleSelectedValueChange(): void;
+    /**
+     * Opens the dropdown and focuses the listbox.
+     * This method sets the `isOpen` signal to `true` and ensures the listbox gains focus.
+     */
+    open(): void;
     /**
      * Closes the dropdown with a transition effect and refocuses the button.
      * This method sets the `isOpen` signal to `false` after a delay and removes

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

@@ -40,7 +40,7 @@ export declare class CommandOptionsComponent implements OnInit {
     /**
      * Selects the currently active option and updates the listbox value.
      */
-    selectOption(): void;
+    selectOption(value?: string[]): void;
     /**
      * Moves the active item to the next option and updates the highlighted option.
      */
@@ -54,5 +54,5 @@ export declare class CommandOptionsComponent implements OnInit {
      */
     updateHighlightedOption(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CommandOptionsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CommandOptionsComponent, "ul[b-command-options]", never, {}, { "closeEmitter": "closeEmitter"; }, ["options"], ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CommandOptionsComponent, "ul[b-command-options]", never, {}, { "closeEmitter": "closeEmitter"; }, ["options"], ["*"], true, [{ directive: typeof i1.CdkListbox; inputs: {}; outputs: { "cdkListboxValueChange": "cdkListboxValueChange"; }; }]>;
 }

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

@@ -1,3 +1,4 @@
+import { ElementRef } from '@angular/core';
 import { CommandOptionsComponent } from './command-options.component';
 import * as i0 from "@angular/core";
 /**
@@ -30,6 +31,11 @@ export declare class CommandComponent {
      * This is linked to the options of the `CommandOptionsComponent`.
      */
     readonly options: import("@angular/core").Signal<readonly import("@angular/cdk/listbox").CdkOption<any>[] | undefined>;
+    /**
+     * Reference to the host element of the component.
+     * This provides access to the DOM element of the command component.
+     */
+    el: ElementRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<CommandComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CommandComponent, "b-command", never, { "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, {}, ["commandOptions"], ["*"], true, never>;
 }

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

@@ -3,7 +3,6 @@ import { ElementRef } from '@angular/core';
 import { OptionComponent } from '../../../shared/components/option.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/cdk/listbox";
-import * as i2 from "@angular/cdk/a11y";
 /**
  * Component representing the list of options in a select.
  * This component integrates with Angular CDK Listbox to manage options and their selection.
@@ -48,5 +47,5 @@ export declare class SelectOptionsComponent {
      */
     handleValueChange(value: string[]): 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"; }; }, { directive: typeof i2.CdkTrapFocus; inputs: { "cdkTrapFocusAutoCapture": "cdkTrapFocusAutoCapture"; }; outputs: {}; }]>;
+    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

@@ -79,6 +79,11 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      * value is propagated to Angular Forms.
      */
     handleSelectedValueChange(): void;
+    /**
+     * Opens the dropdown and focuses the listbox.
+     * This method sets the `isOpen` signal to `true` and ensures the listbox gains focus.
+     */
+    open(): void;
     /**
      * Closes the dropdown with a transition effect and refocuses the button.
      * This method sets the `isOpen` signal to `false` after a delay and removes

package/fesm2022/basis-ng-primitives.mjs

@@ -5,14 +5,13 @@ 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 * as i2 from '@angular/cdk/a11y';
-import { CdkTrapFocus, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 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';
 import { CdkMenu, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
+import { ActiveDescendantKeyManager, CdkTrapFocus } from '@angular/cdk/a11y';
 
 class ThemeService {
     /**
@@ -357,7 +356,7 @@ class SelectOptionsComponent {
         this.closeEmitter.emit();
     }
     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()", "cdkTrapFocusAutoCapture": "true" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, inputs: ["cdkListboxValue", "cdkListboxValue"], outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }, { directive: i2.CdkTrapFocus, inputs: ["cdkTrapFocusAutoCapture", "cdkTrapFocusAutoCapture"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    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: SelectOptionsComponent, decorators: [{
             type: Component,
@@ -371,16 +370,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             inputs: ['cdkListboxValue'],
                             outputs: ['cdkListboxValueChange'],
                         },
-                        {
-                            directive: CdkTrapFocus,
-                            inputs: ['cdkTrapFocusAutoCapture'],
-                        },
                     ],
                     host: {
                         '[cdkListboxValue]': 'value()',
                         '(cdkListboxValueChange)': 'handleValueChange($event.value)',
                         '[style.max-height]': 'maxHeight()',
-                        '[cdkTrapFocusAutoCapture]': 'true',
                     },
                 }]
         }] });
@@ -535,6 +529,14 @@ class SelectComponent {
             this.close(); // Close the dropdown
         });
     }
+    /**
+     * Opens the dropdown and focuses the listbox.
+     * This method sets the `isOpen` signal to `true` and ensures the listbox gains focus.
+     */
+    open() {
+        this.isOpen.set(true);
+        setTimeout(() => this.optionsList()?.el.nativeElement.focus(), 0);
+    }
     /**
      * Closes the dropdown with a transition effect and refocuses the button.
      * This method sets the `isOpen` signal to `false` after a delay and removes
@@ -604,9 +606,9 @@ class SelectComponent {
         ], 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() : this.isOpen.set(true)"
-      (keydown.arrowUp)="!isOpen() && this.isOpen.set(true)"
-      (keydown.arrowDown)="!isOpen() && this.isOpen.set(true)"
+      (click)="isOpen() ? close() : open()"
+      (keydown.arrowUp)="!isOpen() && open()"
+      (keydown.arrowDown)="!isOpen() && open()"
       cdkOverlayOrigin
       [activeEnabled]="false"
       #trigger="cdkOverlayOrigin">
@@ -649,9 +651,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     template: ` <button
       b-button
       variant="outlined"
-      (click)="isOpen() ? close() : this.isOpen.set(true)"
-      (keydown.arrowUp)="!isOpen() && this.isOpen.set(true)"
-      (keydown.arrowDown)="!isOpen() && this.isOpen.set(true)"
+      (click)="isOpen() ? close() : open()"
+      (keydown.arrowUp)="!isOpen() && open()"
+      (keydown.arrowDown)="!isOpen() && open()"
       cdkOverlayOrigin
       [activeEnabled]="false"
       #trigger="cdkOverlayOrigin">
@@ -2518,8 +2520,11 @@ class CommandOptionsComponent {
     /**
      * Selects the currently active option and updates the listbox value.
      */
-    selectOption() {
-        this.value.set(this.listKeyManager().activeItem?.value ?? []);
+    selectOption(value) {
+        const selectValue = value
+            ? value
+            : (this.listKeyManager().activeItem?.value ?? []);
+        this.value.set(selectValue);
         this.cdkListbox.value = this.value();
         this.closeEmitter.emit();
     }
@@ -2553,7 +2558,7 @@ class CommandOptionsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CommandOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: CommandOptionsComponent, isStandalone: true, selector: "ul[b-command-options]", outputs: { closeEmitter: "closeEmitter" }, queries: [{ propertyName: "options", predicate: CdkOption, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: CommandOptionsComponent, isStandalone: true, selector: "ul[b-command-options]", outputs: { closeEmitter: "closeEmitter" }, host: { listeners: { "cdkListboxValueChange": "selectOption($event.value)" } }, queries: [{ propertyName: "options", predicate: CdkOption, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox, outputs: ["cdkListboxValueChange", "cdkListboxValueChange"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CommandOptionsComponent, decorators: [{
             type: Component,
@@ -2561,7 +2566,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     selector: 'ul[b-command-options]',
                     imports: [],
                     template: `<ng-content />`,
-                    hostDirectives: [CdkListbox],
+                    hostDirectives: [
+                        {
+                            directive: CdkListbox,
+                            outputs: ['cdkListboxValueChange'],
+                        },
+                    ],
+                    host: {
+                        '(cdkListboxValueChange)': 'selectOption($event.value)',
+                    },
                 }]
         }] });
 
@@ -2595,6 +2608,11 @@ class CommandComponent {
      * This is linked to the options of the `CommandOptionsComponent`.
      */
     options = computed(() => this.commandOptions()?.options());
+    /**
+     * Reference to the host element of the component.
+     * This provides access to the DOM element of the command component.
+     */
+    el = inject(ElementRef);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CommandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: CommandComponent, isStandalone: true, selector: "b-command", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.maxWidth": "maxWidth()", "style.maxHeight": "maxHeight()" } }, queries: [{ propertyName: "commandOptions", first: true, predicate: CommandOptionsComponent, descendants: true, isSignal: true }], ngImport: i0, template: `<input
       type="text"
@@ -2729,6 +2747,13 @@ class ComboboxComponent {
             this.close(); // Close the dropdown
         });
     }
+    /**
+     * Opens the dropdown and focuses the listbox.
+     * This method sets the `isOpen` signal to `true` and ensures the listbox gains focus.
+     */
+    open() {
+        this.isOpen.set(true);
+    }
     /**
      * Closes the dropdown with a transition effect and refocuses the button.
      * This method sets the `isOpen` signal to `false` after a delay and removes
@@ -2798,9 +2823,7 @@ class ComboboxComponent {
         ], queries: [{ propertyName: "command", first: true, predicate: CommandComponent, 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() : this.isOpen.set(true)"
-      (keydown.arrowUp)="!isOpen() && this.isOpen.set(true)"
-      (keydown.arrowDown)="!isOpen() && this.isOpen.set(true)"
+      (click)="isOpen() ? close() : open()"
       cdkOverlayOrigin
       [activeEnabled]="false"
       #trigger="cdkOverlayOrigin">
@@ -2843,9 +2866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     template: ` <button
       b-button
       variant="outlined"
-      (click)="isOpen() ? close() : this.isOpen.set(true)"
-      (keydown.arrowUp)="!isOpen() && this.isOpen.set(true)"
-      (keydown.arrowDown)="!isOpen() && this.isOpen.set(true)"
+      (click)="isOpen() ? close() : open()"
       cdkOverlayOrigin
       [activeEnabled]="false"
       #trigger="cdkOverlayOrigin">