@basis-ng/primitives 0.0.1-alpha.16 → 0.0.1-alpha.18

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

@@ -39,10 +39,10 @@ export declare class ComboboxComponent implements OnInit, ControlValueAccessor {
      */
     readonly maxWidth: import("@angular/core").InputSignal<string>;
     /**
-     * Computed signal for the width of the button element.
+     * Linked signal for the width of the button element.
      * This is used to set the width of the dropdown overlay.
      */
-    readonly buttonWidth: import("@angular/core").Signal<any>;
+    readonly buttonWidth: import("@angular/core").WritableSignal<any>;
     /**
      * Model indicating whether the combobox component is disabled.
      * When disabled, the dropdown cannot be opened or interacted with.
@@ -90,6 +90,15 @@ export declare class ComboboxComponent implements OnInit, ControlValueAccessor {
      * the transition class from the overlay panel.
      */
     close(): void;
+    /**
+     * Focuses the input element within the command component when the overlay is attached.
+     */
+    onOverlayAttached(): void;
+    /**
+     * Sets the width of the button element when the window is resized.
+     * This ensures that the dropdown overlay matches the width of the button.
+     */
+    setButtonWidth(): void;
     /**
      * Callback function to propagate changes to the model.
      * This is called whenever the value changes.
@@ -122,10 +131,6 @@ export declare class ComboboxComponent implements OnInit, ControlValueAccessor {
      * @param isDisabled - A boolean indicating whether the component should be disabled.
      */
     setDisabledState(isDisabled: boolean): void;
-    /**
-     * Focuses the input element within the command component when the overlay is attached.
-     */
-    onOverlayAttached(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComboboxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ComboboxComponent, "b-combobox", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, ["command"], ["*"], true, never>;
 }

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

@@ -1,5 +1,6 @@
 import { ElementRef } from '@angular/core';
 import { CommandOptionsComponent } from './command-options.component';
+import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i0 from "@angular/core";
 /**
  * Component representing a command input with associated options.
@@ -31,6 +32,15 @@ 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 BreakpointObserver service for responsive design.
+     */
+    breakpointObserver: BreakpointObserver;
+    /**
+     * Signal representing whether the current viewport is desktop or not.
+     * This is determined by checking if the Handset breakpoint is matched.
+     */
+    readonly isDesktop: import("@angular/core").WritableSignal<boolean>;
     /**
      * Reference to the host element of the component.
      * This provides access to the DOM element of the command component.

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

@@ -39,10 +39,10 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      */
     readonly maxWidth: import("@angular/core").InputSignal<string>;
     /**
-     * Computed signal for the width of the button element.
+     * Linked signal for the width of the button element.
      * This is used to set the width of the dropdown overlay.
      */
-    readonly buttonWidth: import("@angular/core").Signal<any>;
+    readonly buttonWidth: import("@angular/core").WritableSignal<any>;
     /**
      * Model indicating whether the select component is disabled.
      * When disabled, the dropdown cannot be opened or interacted with.
@@ -90,6 +90,15 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      * the transition class from the overlay panel.
      */
     close(): void;
+    /**
+     * Focuses the options list when the overlay is attached.
+     */
+    onOverlayAttached(): void;
+    /**
+     * Sets the width of the dropdown overlay based on the button's width.
+     * This ensures that the dropdown aligns properly with the button.
+     */
+    setButtonWidth(): void;
     /**
      * Callback function to propagate changes to the model.
      * This is called whenever the value changes.
@@ -122,10 +131,6 @@ export declare class SelectComponent implements OnInit, ControlValueAccessor {
      * @param isDisabled - A boolean indicating whether the component should be disabled.
      */
     setDisabledState(isDisabled: boolean): void;
-    /**
-     * Focuses the options list when the overlay is attached.
-     */
-    onOverlayAttached(): 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"; }, ["optionsList"], ["*"], true, never>;
 }

package/fesm2022/basis-ng-primitives.mjs

@@ -1,5 +1,5 @@
 import * as i0 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 { signal, inject, RendererFactory2, Injectable, input, Component, ElementRef, TemplateRef, Directive, model, computed, output, contentChildren, viewChild, contentChild, linkedSignal, forwardRef, HostListener, effect, afterNextRender, afterRenderEffect } from '@angular/core';
 import { NgStyle, NgClass, CommonModule } from '@angular/common';
 import { NgModel, NG_VALUE_ACCESSOR, ControlContainer } from '@angular/forms';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
@@ -12,6 +12,7 @@ import { CdkDrag, CdkDragHandle, CdkDropList, CdkDropListGroup } from '@angular/
 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';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 class ThemeService {
     /**
@@ -466,10 +467,10 @@ class SelectComponent {
      */
     maxWidth = input('100%');
     /**
-     * Computed signal for the width of the button element.
+     * Linked signal for the width of the button element.
      * This is used to set the width of the dropdown overlay.
      */
-    buttonWidth = computed(() => this.button()?.el.nativeElement.offsetWidth);
+    buttonWidth = linkedSignal(() => this.button()?.el.nativeElement.offsetWidth);
     /**
      * Model indicating whether the select component is disabled.
      * When disabled, the dropdown cannot be opened or interacted with.
@@ -549,6 +550,19 @@ class SelectComponent {
             this.button()?.el.nativeElement.focus();
         }, this.closeDelay());
     }
+    /**
+     * Focuses the options list when the overlay is attached.
+     */
+    onOverlayAttached() {
+        this.optionsList()?.el.nativeElement.focus();
+    }
+    /**
+     * Sets the width of the dropdown overlay based on the button's width.
+     * This ensures that the dropdown aligns properly with the button.
+     */
+    setButtonWidth() {
+        this.buttonWidth.set(this.button()?.el.nativeElement.offsetWidth);
+    }
     // Control Value Accessor methods
     /**
      * Callback function to propagate changes to the model.
@@ -595,14 +609,8 @@ class SelectComponent {
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
     }
-    /**
-     * Focuses the options list when the overlay is attached.
-     */
-    onOverlayAttached() {
-        this.optionsList()?.el.nativeElement.focus();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "b-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { properties: { "style.max-width": "maxWidth()", "class.disabled": "disabled()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "b-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "window:resize": "setButtonWidth()" }, properties: { "style.max-width": "maxWidth()", "class.disabled": "disabled()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
@@ -706,7 +714,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         },
                     ],
                 }]
-        }] });
+        }], propDecorators: { setButtonWidth: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
 
 class Switch {
     /**
@@ -2615,6 +2626,15 @@ class CommandComponent {
      * This is linked to the options of the `CommandOptionsComponent`.
      */
     options = computed(() => this.commandOptions()?.options());
+    /**
+     * Reference to the BreakpointObserver service for responsive design.
+     */
+    breakpointObserver = inject(BreakpointObserver);
+    /**
+     * Signal representing whether the current viewport is desktop or not.
+     * This is determined by checking if the Handset breakpoint is matched.
+     */
+    isDesktop = signal(!this.breakpointObserver.isMatched(Breakpoints.Handset));
     /**
      * Reference to the host element of the component.
      * This provides access to the DOM element of the command component.
@@ -2625,12 +2645,12 @@ class CommandComponent {
       type="text"
       b-input
       cdkTrapFocus
-      [cdkTrapFocusAutoCapture]="true"
+      [cdkTrapFocusAutoCapture]="isDesktop()"
       #trappedInput
       (keydown.arrowDown)="commandOptions()?.nextOption()"
       (keydown.arrowUp)="commandOptions()?.previousOption()"
       (keydown.enter)="commandOptions()?.selectOption()"
-      (blur)="trappedInput.el.nativeElement.focus()" />
+      (blur)="isDesktop() && trappedInput.el.nativeElement.focus()" />
     <ng-content />`, isInline: true, dependencies: [{ kind: "component", type: Input, selector: "input[b-input]", inputs: ["type", "placeholder", "invalid", "disabled", "maxWidth", "decimals", "numberType"], outputs: ["invalidChange", "disabledChange", "valueChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CommandComponent, decorators: [{
@@ -2642,12 +2662,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
       type="text"
       b-input
       cdkTrapFocus
-      [cdkTrapFocusAutoCapture]="true"
+      [cdkTrapFocusAutoCapture]="isDesktop()"
       #trappedInput
       (keydown.arrowDown)="commandOptions()?.nextOption()"
       (keydown.arrowUp)="commandOptions()?.previousOption()"
       (keydown.enter)="commandOptions()?.selectOption()"
-      (blur)="trappedInput.el.nativeElement.focus()" />
+      (blur)="isDesktop() && trappedInput.el.nativeElement.focus()" />
     <ng-content />`,
                     host: {
                         '[style.maxWidth]': 'maxWidth()',
@@ -2691,10 +2711,10 @@ class ComboboxComponent {
      */
     maxWidth = input('100%');
     /**
-     * Computed signal for the width of the button element.
+     * Linked signal for the width of the button element.
      * This is used to set the width of the dropdown overlay.
      */
-    buttonWidth = computed(() => this.button()?.el.nativeElement.offsetWidth);
+    buttonWidth = linkedSignal(() => this.button()?.el.nativeElement.offsetWidth);
     /**
      * Model indicating whether the combobox component is disabled.
      * When disabled, the dropdown cannot be opened or interacted with.
@@ -2774,6 +2794,19 @@ class ComboboxComponent {
             this.button()?.el.nativeElement.focus();
         }, this.closeDelay());
     }
+    /**
+     * Focuses the input element within the command component when the overlay is attached.
+     */
+    onOverlayAttached() {
+        this.command()?.el.nativeElement.querySelector('input')?.focus();
+    }
+    /**
+     * Sets the width of the button element when the window is resized.
+     * This ensures that the dropdown overlay matches the width of the button.
+     */
+    setButtonWidth() {
+        this.buttonWidth.set(this.button()?.el.nativeElement.offsetWidth);
+    }
     // Control Value Accessor methods
     /**
      * Callback function to propagate changes to the model.
@@ -2820,14 +2853,8 @@ class ComboboxComponent {
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
     }
-    /**
-     * Focuses the input element within the command component when the overlay is attached.
-     */
-    onOverlayAttached() {
-        this.command()?.el.nativeElement.querySelector('input')?.focus();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: ComboboxComponent, isStandalone: true, selector: "b-combobox", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { properties: { "style.max-width": "maxWidth()", "class.disabled": "disabled()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: ComboboxComponent, isStandalone: true, selector: "b-combobox", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "window:resize": "setButtonWidth()" }, properties: { "style.max-width": "maxWidth()", "class.disabled": "disabled()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ComboboxComponent),
@@ -2931,7 +2958,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         },
                     ],
                 }]
-        }] });
+        }], propDecorators: { setButtonWidth: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
 
 /*
  * Public API Surface of basis-ng