@basis-ng/primitives 0.0.1-alpha.111 → 0.0.1-alpha.112

package/fesm2022/basis-ng-primitives.mjs

@@ -13,7 +13,7 @@ import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i1$1 from '@angular/cdk/menu';
 import { CdkMenu, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
 import * as i1$2 from '@angular/cdk/overlay';
-import { CdkConnectedOverlay, Overlay as Overlay$1, ScrollStrategyOptions, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, ScrollStrategyOptions, CdkOverlayOrigin, Overlay as Overlay$1 } from '@angular/cdk/overlay';
 import * as i1$3 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDragHandle, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';
 import { HttpClient } from '@angular/common/http';
@@ -1642,234 +1642,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 }]
         }] });
 
-class Range {
-    value = model('0', ...(ngDevMode ? [{ debugName: "value" }] : []));
-    el = inject(ElementRef);
-    ngAfterViewInit() {
-        this.value.set(this.el.nativeElement.value);
-    }
-    onInput(event) {
-        this.value.set(event.target.value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Range, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.6", type: Range, isStandalone: true, selector: "input[b-range]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "input": "onInput($event)" }, properties: { "attr.value": "value()" } }, ngImport: i0, template: ``, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Range, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'input[b-range]',
-                    template: ``,
-                    host: {
-                        '[attr.value]': 'value()',
-                        '(input)': 'onInput($event)',
-                    },
-                }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
-
 /**
- * Directive to manage overlay behavior and positioning.
- * Integrates with Angular CDK's `CdkConnectedOverlay` to provide
- * flexible overlay positioning and triggering mechanisms.
+ * Directive that wires an Angular CDK connected overlay to a trigger and exposes
+ * reactive signals for positions and scroll strategy.
  */
-class ConnectedOverlay {
+class Overlay {
     /**
-     * Controls whether the overlay is open.
-     * @default false
+     * Reference to the CDK connected overlay instance.
      */
-    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    cdkConnectedOverlay = inject(CdkConnectedOverlay);
     /**
-     * The trigger directive that activates the overlay.
-     * This input is required.
+     * Options for scroll handling provided by the CDK.
      */
-    trigger = input.required(...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    scrollStrategyOptions = inject(ScrollStrategyOptions);
     /**
-     * A computed map of positions to their corresponding `ConnectedPosition` configurations.
+     * The overlay trigger object (signal) that controls the overlay origin and active state.
      */
-    positionsMap = computed(() => ({
-        'top-left': {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'bottom',
-            offsetX: 0,
-            offsetY: -4,
-        },
-        'top-center': {
-            originX: 'center',
-            originY: 'top',
-            overlayX: 'center',
-            overlayY: 'bottom',
-            offsetX: 0,
-            offsetY: -4,
-        },
-        'top-right': {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'bottom',
-            offsetX: 0,
-            offsetY: -4,
-        },
-        'bottom-left': {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top',
-            offsetX: 0,
-            offsetY: 4,
-        },
-        'bottom-center': {
-            originX: 'center',
-            originY: 'bottom',
-            overlayX: 'center',
-            overlayY: 'top',
-            offsetX: 0,
-            offsetY: 4,
-        },
-        'bottom-right': {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'top',
-            offsetX: 0,
-            offsetY: 4,
-        },
-        'left-top': {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'top',
-            offsetX: -4,
-            offsetY: 0,
-        },
-        'left-center': {
-            originX: 'start',
-            originY: 'center',
-            overlayX: 'end',
-            overlayY: 'center',
-            offsetX: -4,
-            offsetY: 0,
-        },
-        'left-bottom': {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'bottom',
-            offsetX: -4,
-            offsetY: 0,
-        },
-        'right-top': {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'top',
-            offsetX: 4,
-            offsetY: 0,
-        },
-        'right-center': {
-            originX: 'end',
-            originY: 'center',
-            overlayX: 'start',
-            overlayY: 'center',
-            offsetX: 4,
-            offsetY: 0,
-        },
-        'right-bottom': {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'bottom',
-            offsetX: 4,
-            offsetY: 0,
-        },
-    }), ...(ngDevMode ? [{ debugName: "positionsMap" }] : []));
+    trigger = input(...(ngDevMode ? [undefined, { debugName: "trigger" }] : []));
     /**
-     * List of positions for the overlay.
-     * @default ['bottom-left']
+     * Whether the overlay is open.
      */
-    positions = input(['bottom-left'], ...(ngDevMode ? [{ debugName: "positions" }] : []));
-    /**
-     * Controls whether the trigger element should be focused when the overlay is closed.
-     * @default true
+    open = computed(() => this.trigger()?.active() || false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /** Preferred overlay positions in priority order.
+  
+     * @defaultValue ['bottom-center', 'top-center']
      */
-    focusTriggerOnClose = input(true, ...(ngDevMode ? [{ debugName: "focusTriggerOnClose" }] : []));
-    /**
-     * Computed list of `ConnectedPosition` objects based on the `positions` input.
+    positions = input(['bottom-center', 'top-center'], ...(ngDevMode ? [{ debugName: "positions" }] : []));
+    /** Whether clicking outside closes the overlay.
+  
+     * @defaultValue true
      */
-    connectedPositions = computed(() => this.positions().map((position) => this.positionsMap()[position]), ...(ngDevMode ? [{ debugName: "connectedPositions" }] : []));
+    closeOnClickOutside = model(true, ...(ngDevMode ? [{ debugName: "closeOnClickOutside" }] : []));
+    /** Whether pressing Escape closes the overlay.
+  
+     * @defaultValue true
+     */
+    closeOnTypeEscape = model(true, ...(ngDevMode ? [{ debugName: "closeOnTypeEscape" }] : []));
     /**
-     * Signal to track the currently active `ConnectionPositionPair`.
+     * Whether to focus the trigger element when the overlay closes.
+     *
+     * @defaultValue true
      */
-    connectedPositionPair = linkedSignal(() => this.connectedPositions()[0], ...(ngDevMode ? [{ debugName: "connectedPositionPair" }] : []));
+    focusTriggerOnClose = model(true, ...(ngDevMode ? [{ debugName: "focusTriggerOnClose" }] : []));
+    /** Scroll handling mode applied to the overlay.
+  
+     * @defaultValue 'reposition'
+     */
+    scrollStrategy = model('reposition', ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : []));
     /**
-     * Injected instance of `CdkConnectedOverlay`.
+     * Computed array of CDK ConnectedPosition values derived from `positions`.
      */
-    cdkConnectedOverlay = inject(CdkConnectedOverlay);
+    connectedPositions = computed(() => this.positions().map((position) => positionsMap[position]), ...(ngDevMode ? [{ debugName: "connectedPositions" }] : []));
     /**
-     * Injected instance of `Overlay`.
+     * Linked signal that holds the currently active ConnectionPositionPair.
      */
-    overlay = inject(Overlay$1);
+    connectedPositionPair = linkedSignal(() => this.connectedPositions()[0], ...(ngDevMode ? [{ debugName: "connectedPositionPair" }] : []));
     /**
-     * Computed direction of the overlay based on the active position pair.
+     * Computed overlay direction string derived from the active connection pair (e.g. 'top', 'bottom').
      */
     direction = computed(() => {
         const pair = this.connectedPositionPair();
-        return Object.entries(this.positionsMap())
+        return Object.entries(positionsMap)
             .find(([, position]) => position.originX === pair.originX &&
             position.originY === pair.originY &&
             position.overlayX === pair.overlayX &&
             position.overlayY === pair.overlayY)?.[0]
             .split('-')[0];
     }, ...(ngDevMode ? [{ debugName: "direction" }] : []));
-    /**
-     * Event emitter for overlay detach events.
-     */
-    detachEmitter = output();
-    /**
-     * Event emitter for overlay attach events.
-     */
-    attachEmitter = output();
-    /**
-     * Event emitter for overlay outside click events.
-     */
-    outsideClickEmitter = output();
-    /**
-     * Event emitter for overlay backdrop click events.
-     */
-    backdropClickEmitter = output();
     /**
      * Flag to indicate if el overlay ya fue abierto al menos una vez.
      */
     hasBeenOpened = false;
-    /**
-     * Constructor to initialize the directive and set up reactive effects.
-     */
     constructor() {
         effect(() => {
-            this.handleOrigin();
-            this.handleConnectedPositions();
-            this.handleOpen();
+            this.handleAttach();
+            this.setScrollStrategy();
+            this.setPositions();
         });
     }
     /**
-     * Handles the origin of the overlay.
-     * This method sets the `cdkConnectedOverlay.origin` to the trigger element.
-     */
-    handleOrigin() {
-        this.cdkConnectedOverlay.origin = this.trigger().trigger;
-    }
-    /**
-     * Handles the connected positions for the overlay.
-     * This method updates the `cdkConnectedOverlay` positions based on the current state.
-     */
-    handleConnectedPositions() {
-        this.cdkConnectedOverlay.positions = this.connectedPositions();
-    }
-    /**
-     * Handles the opening and closing of the overlay based on the `open` input.
-     * Determines whether to open or close the overlay and invokes the appropriate method.
+     * Attach or detach the overlay based on the `open` signal.
+     * Also manages focus on the trigger element when closing.
      */
-    handleOpen() {
+    handleAttach() {
         if (this.open()) {
             this.cdkConnectedOverlay.attachOverlay();
             this.hasBeenOpened = true;
@@ -1878,29 +1733,559 @@ class ConnectedOverlay {
             this.cdkConnectedOverlay.detachOverlay();
             // Only focus the trigger if the overlay has been opened at least once
             if (this.hasBeenOpened && this.focusTriggerOnClose()) {
-                this.trigger().el.nativeElement.focus();
+                this.trigger()?.el.nativeElement.focus();
             }
         }
     }
     /**
-     * Toggles the open state of the overlay.
-     * If the overlay is open, it will be closed, and vice versa.
+     * Set the active connection pair when the CDK overlay reports a position change.
+     *
+     * @param event - The position change event containing the new connection pair.
      */
-    toggleOverlay() {
-        this.open.set(!this.open());
+    setPositionPair(event) {
+        this.connectedPositionPair.set(event.connectionPair);
     }
     /**
-     * Closes the overlay by setting the `open` state to false.
+     * Deactivate the overlay trigger when the overlay detaches.
      */
-    closeOverlay() {
-        this.open.set(false);
+    deactivateTrigger() {
+        this.trigger()?.active?.set(false);
     }
     /**
-     * Opens the overlay by setting the `open` state to true.
+     * Close the overlay if a click occurs outside and `closeOnClickOutside` is enabled.
      */
-    openOverlay() {
-        this.open.set(true);
-    }
+    closeIfClickedOutside() {
+        console.log('clicked outside');
+        if (this.closeOnClickOutside()) {
+            this.trigger()?.active?.set(false);
+        }
+    }
+    /**
+     * Close the overlay when the Escape key is pressed and `closeOnTypeEscape` is enabled.
+     *
+     * @param event - The keyboard event emitted by the overlay.
+     */
+    closeOnEscape(event) {
+        if (this.closeOnTypeEscape() && event.key === 'Escape') {
+            this.trigger()?.active?.set(false);
+        }
+    }
+    /**
+     * Apply the selected scroll strategy to the CDK connected overlay.
+     */
+    setScrollStrategy() {
+        switch (this.scrollStrategy()) {
+            case 'close':
+                this.cdkConnectedOverlay.scrollStrategy = this.scrollStrategyOptions.close();
+                break;
+            case 'reposition':
+                this.cdkConnectedOverlay.scrollStrategy = this.scrollStrategyOptions.reposition();
+                break;
+            case 'block':
+                this.cdkConnectedOverlay.scrollStrategy = this.scrollStrategyOptions.block();
+                break;
+        }
+    }
+    /**
+     * Update the overlay's available positions from the computed `connectedPositions`.
+     */
+    setPositions() {
+        this.cdkConnectedOverlay.positions = this.connectedPositions();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Overlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.6", type: Overlay, isStandalone: true, selector: "[bOverlay]", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, closeOnTypeEscape: { classPropertyName: "closeOnTypeEscape", publicName: "closeOnTypeEscape", isSignal: true, isRequired: false, transformFunction: null }, focusTriggerOnClose: { classPropertyName: "focusTriggerOnClose", publicName: "focusTriggerOnClose", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeOnClickOutside: "closeOnClickOutsideChange", closeOnTypeEscape: "closeOnTypeEscapeChange", focusTriggerOnClose: "focusTriggerOnCloseChange", scrollStrategy: "scrollStrategyChange" }, host: { listeners: { "positionChange": "setPositionPair($event)", "detach": "deactivateTrigger()", "overlayOutsideClick": "closeIfClickedOutside()", "overlayKeydown": "closeOnEscape($event)" } }, hostDirectives: [{ directive: i1$2.CdkConnectedOverlay, inputs: ["cdkConnectedOverlayBackdropClass", "backdropClass", "cdkConnectedOverlayDisposeOnNavigation", "disposeOnNavigation", "cdkConnectedOverlayFlexibleDimensions", "flexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "growAfterOpen", "cdkConnectedOverlayHasBackdrop", "hasBackdrop", "cdkConnectedOverlayHeight", "height", "cdkConnectedOverlayLockPosition", "lockPosition", "cdkConnectedOverlayMinHeight", "minHeight", "cdkConnectedOverlayMinWidth", "minWidth", "cdkConnectedOverlayOffsetX", "offsetX", "cdkConnectedOverlayOffsetY", "offsetY", "cdkConnectedOverlayOrigin", "trigger", "cdkConnectedOverlayPanelClass", "panelClass", "cdkConnectedOverlayPositionStrategy", "positionStrategy", "cdkConnectedOverlayPush", "push", "cdkConnectedOverlayTransformOriginOn", "transformOriginSelector", "cdkConnectedOverlayViewportMargin", "viewportMargin", "cdkConnectedOverlayWidth", "width"], outputs: ["attach", "attach", "detach", "detach", "overlayKeydown", "overlayKeydown", "overlayOutsideClick", "overlayOutsideClick", "positionChange", "positionChange"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Overlay, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bOverlay]',
+                    hostDirectives: [
+                        {
+                            directive: CdkConnectedOverlay,
+                            inputs: [
+                                'cdkConnectedOverlayBackdropClass: backdropClass',
+                                'cdkConnectedOverlayDisposeOnNavigation: disposeOnNavigation',
+                                'cdkConnectedOverlayFlexibleDimensions: flexibleDimensions',
+                                'cdkConnectedOverlayGrowAfterOpen: growAfterOpen',
+                                'cdkConnectedOverlayHasBackdrop: hasBackdrop',
+                                'cdkConnectedOverlayHeight: height',
+                                'cdkConnectedOverlayLockPosition: lockPosition',
+                                'cdkConnectedOverlayMinHeight: minHeight',
+                                'cdkConnectedOverlayMinWidth: minWidth',
+                                'cdkConnectedOverlayOffsetX: offsetX',
+                                'cdkConnectedOverlayOffsetY: offsetY',
+                                'cdkConnectedOverlayOrigin: trigger',
+                                'cdkConnectedOverlayPanelClass: panelClass',
+                                'cdkConnectedOverlayPositionStrategy: positionStrategy',
+                                'cdkConnectedOverlayPush: push',
+                                'cdkConnectedOverlayTransformOriginOn: transformOriginSelector',
+                                'cdkConnectedOverlayViewportMargin: viewportMargin',
+                                'cdkConnectedOverlayWidth: width',
+                            ],
+                            outputs: [
+                                'attach: attach',
+                                'detach: detach',
+                                'overlayKeydown: overlayKeydown',
+                                'overlayOutsideClick: overlayOutsideClick',
+                                'positionChange: positionChange',
+                            ],
+                        },
+                    ],
+                    host: {
+                        '(positionChange)': 'setPositionPair($event)',
+                        '(detach)': 'deactivateTrigger()',
+                        '(overlayOutsideClick)': 'closeIfClickedOutside()',
+                        '(overlayKeydown)': 'closeOnEscape($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positions", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }, { type: i0.Output, args: ["closeOnClickOutsideChange"] }], closeOnTypeEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnTypeEscape", required: false }] }, { type: i0.Output, args: ["closeOnTypeEscapeChange"] }], focusTriggerOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusTriggerOnClose", required: false }] }, { type: i0.Output, args: ["focusTriggerOnCloseChange"] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }, { type: i0.Output, args: ["scrollStrategyChange"] }] } });
+/** Map of semantic positions to CDK ConnectedPosition configuration objects. */
+const positionsMap = {
+    'top-left': {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetX: 0,
+        offsetY: -4,
+    },
+    'top-center': {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+        offsetX: 0,
+        offsetY: -4,
+    },
+    'top-right': {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetX: 0,
+        offsetY: -4,
+    },
+    'bottom-left': {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetX: 0,
+        offsetY: 4,
+    },
+    'bottom-center': {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetX: 0,
+        offsetY: 4,
+    },
+    'bottom-right': {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetX: 0,
+        offsetY: 4,
+    },
+    'left-top': {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetX: -4,
+        offsetY: 0,
+    },
+    'left-center': {
+        originX: 'start',
+        originY: 'center',
+        overlayX: 'end',
+        overlayY: 'center',
+        offsetX: -4,
+        offsetY: 0,
+    },
+    'left-bottom': {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetX: -4,
+        offsetY: 0,
+    },
+    'right-top': {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetX: 4,
+        offsetY: 0,
+    },
+    'right-center': {
+        originX: 'end',
+        originY: 'center',
+        overlayX: 'start',
+        overlayY: 'center',
+        offsetX: 4,
+        offsetY: 0,
+    },
+    'right-bottom': {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetX: 4,
+        offsetY: 0,
+    },
+};
+
+/**
+ * Popover directive that configures an overlay for displaying popover content.
+ * Popovers differ from tooltips in that they allow multi-line content and use
+ * padding-based sizing (no fixed heights) and do not expose variant classes.
+ */
+class Popover extends Overlay {
+    ngOnInit() {
+        this.setScrollStrategyToClose();
+    }
+    /**
+     * Sets the scroll strategy to close the popover when scrolling occurs.
+     */
+    setScrollStrategyToClose() {
+        this.scrollStrategy.set('close');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Popover, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: Popover, isStandalone: true, selector: "[bPopover]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Popover, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bPopover]',
+                }]
+        }] });
+
+/**
+ * Popover content that is displayed within a connected overlay.
+ * Unlike tooltip content, popover content uses padding and flexible height
+ * so it can contain multiple lines of text and larger blocks.
+ */
+class PopoverContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: PopoverContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: PopoverContent, isStandalone: true, selector: "b-popover-content", ngImport: i0, template: ` <ng-content /> `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: PopoverContent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-popover-content',
+                    template: ` <ng-content /> `,
+                }]
+        }] });
+
+/**
+ * Directive that marks an element as an overlay trigger and toggles its active state on click.
+ */
+class OverlayTrigger extends CdkOverlayOrigin {
+    /**
+     * Signal that holds whether the overlay trigger is active.
+     *
+     * @defaultValue false
+     */
+    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    /**
+     * Reference to the `ElementRef` of the host element.
+     * This is used to access the native DOM element.
+     */
+    el = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: OverlayTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: OverlayTrigger, isStandalone: true, selector: "[bOverlayTrigger]", exportAs: ["bOverlayTrigger"], usesInheritance: true, hostDirectives: [{ directive: i1$2.CdkOverlayOrigin }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: OverlayTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bOverlayTrigger]',
+                    hostDirectives: [CdkOverlayOrigin],
+                    exportAs: 'bOverlayTrigger',
+                }]
+        }] });
+
+/**
+ * Trigger directive that emits activation events for popovers.
+ * Exposes the same `trigger` and `el` properties expected by `ConnectedOverlay`.
+ */
+class PopoverTrigger extends OverlayTrigger {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: PopoverTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: PopoverTrigger, isStandalone: true, selector: "[bPopoverTrigger]", host: { listeners: { "click": "active.set(!active())" } }, exportAs: ["bPopoverTrigger"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: PopoverTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bPopoverTrigger]',
+                    host: {
+                        '(click)': 'active.set(!active())',
+                    },
+                    exportAs: 'bPopoverTrigger',
+                }]
+        }] });
+
+class Range {
+    value = model('0', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    el = inject(ElementRef);
+    ngAfterViewInit() {
+        this.value.set(this.el.nativeElement.value);
+    }
+    onInput(event) {
+        this.value.set(event.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Range, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.6", type: Range, isStandalone: true, selector: "input[b-range]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "input": "onInput($event)" }, properties: { "attr.value": "value()" } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Range, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input[b-range]',
+                    template: ``,
+                    host: {
+                        '[attr.value]': 'value()',
+                        '(input)': 'onInput($event)',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Directive to manage overlay behavior and positioning.
+ * Integrates with Angular CDK's `CdkConnectedOverlay` to provide
+ * flexible overlay positioning and triggering mechanisms.
+ */
+class ConnectedOverlay {
+    /**
+     * Controls whether the overlay is open.
+     * @default false
+     */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /**
+     * The trigger directive that activates the overlay.
+     * This input is required.
+     */
+    trigger = input.required(...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    /**
+     * A computed map of positions to their corresponding `ConnectedPosition` configurations.
+     */
+    positionsMap = computed(() => ({
+        'top-left': {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetX: 0,
+            offsetY: -4,
+        },
+        'top-center': {
+            originX: 'center',
+            originY: 'top',
+            overlayX: 'center',
+            overlayY: 'bottom',
+            offsetX: 0,
+            offsetY: -4,
+        },
+        'top-right': {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetX: 0,
+            offsetY: -4,
+        },
+        'bottom-left': {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetX: 0,
+            offsetY: 4,
+        },
+        'bottom-center': {
+            originX: 'center',
+            originY: 'bottom',
+            overlayX: 'center',
+            overlayY: 'top',
+            offsetX: 0,
+            offsetY: 4,
+        },
+        'bottom-right': {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetX: 0,
+            offsetY: 4,
+        },
+        'left-top': {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetX: -4,
+            offsetY: 0,
+        },
+        'left-center': {
+            originX: 'start',
+            originY: 'center',
+            overlayX: 'end',
+            overlayY: 'center',
+            offsetX: -4,
+            offsetY: 0,
+        },
+        'left-bottom': {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetX: -4,
+            offsetY: 0,
+        },
+        'right-top': {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetX: 4,
+            offsetY: 0,
+        },
+        'right-center': {
+            originX: 'end',
+            originY: 'center',
+            overlayX: 'start',
+            overlayY: 'center',
+            offsetX: 4,
+            offsetY: 0,
+        },
+        'right-bottom': {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetX: 4,
+            offsetY: 0,
+        },
+    }), ...(ngDevMode ? [{ debugName: "positionsMap" }] : []));
+    /**
+     * List of positions for the overlay.
+     * @default ['bottom-left']
+     */
+    positions = input(['bottom-left'], ...(ngDevMode ? [{ debugName: "positions" }] : []));
+    /**
+     * Controls whether the trigger element should be focused when the overlay is closed.
+     * @default true
+     */
+    focusTriggerOnClose = input(true, ...(ngDevMode ? [{ debugName: "focusTriggerOnClose" }] : []));
+    /**
+     * Computed list of `ConnectedPosition` objects based on the `positions` input.
+     */
+    connectedPositions = computed(() => this.positions().map((position) => this.positionsMap()[position]), ...(ngDevMode ? [{ debugName: "connectedPositions" }] : []));
+    /**
+     * Signal to track the currently active `ConnectionPositionPair`.
+     */
+    connectedPositionPair = linkedSignal(() => this.connectedPositions()[0], ...(ngDevMode ? [{ debugName: "connectedPositionPair" }] : []));
+    /**
+     * Injected instance of `CdkConnectedOverlay`.
+     */
+    cdkConnectedOverlay = inject(CdkConnectedOverlay);
+    /**
+     * Injected instance of `Overlay`.
+     */
+    overlay = inject(Overlay$1);
+    /**
+     * Computed direction of the overlay based on the active position pair.
+     */
+    direction = computed(() => {
+        const pair = this.connectedPositionPair();
+        return Object.entries(this.positionsMap())
+            .find(([, position]) => position.originX === pair.originX &&
+            position.originY === pair.originY &&
+            position.overlayX === pair.overlayX &&
+            position.overlayY === pair.overlayY)?.[0]
+            .split('-')[0];
+    }, ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    /**
+     * Event emitter for overlay detach events.
+     */
+    detachEmitter = output();
+    /**
+     * Event emitter for overlay attach events.
+     */
+    attachEmitter = output();
+    /**
+     * Event emitter for overlay outside click events.
+     */
+    outsideClickEmitter = output();
+    /**
+     * Event emitter for overlay backdrop click events.
+     */
+    backdropClickEmitter = output();
+    /**
+     * Flag to indicate if el overlay ya fue abierto al menos una vez.
+     */
+    hasBeenOpened = false;
+    /**
+     * Constructor to initialize the directive and set up reactive effects.
+     */
+    constructor() {
+        effect(() => {
+            this.handleOrigin();
+            this.handleConnectedPositions();
+            this.handleOpen();
+        });
+    }
+    /**
+     * Handles the origin of the overlay.
+     * This method sets the `cdkConnectedOverlay.origin` to the trigger element.
+     */
+    handleOrigin() {
+        this.cdkConnectedOverlay.origin = this.trigger().trigger;
+    }
+    /**
+     * Handles the connected positions for the overlay.
+     * This method updates the `cdkConnectedOverlay` positions based on the current state.
+     */
+    handleConnectedPositions() {
+        this.cdkConnectedOverlay.positions = this.connectedPositions();
+    }
+    /**
+     * Handles the opening and closing of the overlay based on the `open` input.
+     * Determines whether to open or close the overlay and invokes the appropriate method.
+     */
+    handleOpen() {
+        if (this.open()) {
+            this.cdkConnectedOverlay.attachOverlay();
+            this.hasBeenOpened = true;
+        }
+        else {
+            this.cdkConnectedOverlay.detachOverlay();
+            // Only focus the trigger if the overlay has been opened at least once
+            if (this.hasBeenOpened && this.focusTriggerOnClose()) {
+                this.trigger().el.nativeElement.focus();
+            }
+        }
+    }
+    /**
+     * Toggles the open state of the overlay.
+     * If the overlay is open, it will be closed, and vice versa.
+     */
+    toggleOverlay() {
+        this.open.set(!this.open());
+    }
+    /**
+     * Closes the overlay by setting the `open` state to false.
+     */
+    closeOverlay() {
+        this.open.set(false);
+    }
+    /**
+     * Opens the overlay by setting the `open` state to true.
+     */
+    openOverlay() {
+        this.open.set(true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ConnectedOverlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.6", type: ConnectedOverlay, isStandalone: true, selector: "[bConnectedOverlay]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, focusTriggerOnClose: { classPropertyName: "focusTriggerOnClose", publicName: "focusTriggerOnClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", detachEmitter: "detachEmitter", attachEmitter: "attachEmitter", outsideClickEmitter: "outsideClickEmitter", backdropClickEmitter: "backdropClickEmitter" }, host: { listeners: { "positionChange": "connectedPositionPair.set($event.connectionPair)", "detach": "detachEmitter.emit()", "attach": "attachEmitter.emit()", "outsideClick": "outsideClickEmitter.emit()", "backdropClick": "backdropClickEmitter.emit()" } }, hostDirectives: [{ directive: i1$2.CdkConnectedOverlay, inputs: ["cdkConnectedOverlayWidth", "width", "cdkConnectedOverlayMinWidth", "minWidth", "cdkConnectedOverlayBackdropClass", "customBackdropClass", "cdkConnectedOverlayPanelClass", "panelClass"], outputs: ["detach", "detach", "attach", "attach", "overlayOutsideClick", "outsideClick", "backdropClick", "backdropClick", "positionChange", "positionChange"] }], ngImport: i0 });
 }
@@ -2523,378 +2908,82 @@ class Tabs {
     /**
      * Query list of Tab child components.
      */
-    tabs = contentChildren(Tab, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
-    /**
-     * Computed array of underlying CDK options for navigation.
-     */
-    cdkOptions = computed(() => this.tabs().map((tab) => tab.cdkOption), ...(ngDevMode ? [{ debugName: "cdkOptions" }] : []));
-    /**
-     * Keyboard manager that handles arrow navigation between tabs.
-     */
-    listKeyManager = computed(() => new ActiveDescendantKeyManager(this.cdkOptions()).withWrap().withHorizontalOrientation('ltr'), ...(ngDevMode ? [{ debugName: "listKeyManager" }] : []));
-    /**
-     * Move highlight to the previous tab.
-     */
-    previousTab() {
-        this.listKeyManager().setPreviousItemActive();
-    }
-    /**
-     * Move highlight to the next tab.
-     */
-    nextTab() {
-        this.listKeyManager().setNextItemActive();
-    }
-    /**
-     * Initialize CDK listbox behaviors on component init.
-     */
-    ngOnInit() {
-        this.cdkListbox.useActiveDescendant = true;
-        this.cdkListbox.orientation = 'horizontal';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", type: Tabs, isStandalone: true, selector: "b-tabs", host: { listeners: { "keydown.arrowLeft": "previousTab()", "keydown.arrowUp": "previousTab()", "keydown.arrowRight": "nextTab()", "keydown.arrowDown": "nextTab()" } }, queries: [{ propertyName: "tabs", predicate: Tab, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Tabs, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'b-tabs',
-                    imports: [],
-                    template: ` <ng-content /> `,
-                    hostDirectives: [CdkListbox],
-                    host: {
-                        '(keydown.arrowLeft)': 'previousTab()',
-                        '(keydown.arrowUp)': 'previousTab()',
-                        '(keydown.arrowRight)': 'nextTab()',
-                        '(keydown.arrowDown)': 'nextTab()',
-                    },
-                }]
-        }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Tab), { isSignal: true }] }] } });
-
-/**
- * Wrapper for grouping textarea-related elements vertically.
- */
-class TextareaGroup {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TextareaGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: TextareaGroup, isStandalone: true, selector: "b-textarea-group", ngImport: i0, template: ` <ng-content /> `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TextareaGroup, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'b-textarea-group',
-                    template: ` <ng-content /> `,
-                }]
-        }] });
-
-/**
- * A styled textarea component.
- */
-class Textarea {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Textarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: Textarea, isStandalone: true, selector: "textarea[b-textarea]", ngImport: i0, template: ``, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Textarea, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'textarea[b-textarea]',
-                    template: ``,
-                }]
-        }] });
-
-/**
- * Directive that wires an Angular CDK connected overlay to a trigger and exposes
- * reactive signals for positions and scroll strategy.
- */
-class Overlay {
-    /**
-     * Reference to the CDK connected overlay instance.
-     */
-    cdkConnectedOverlay = inject(CdkConnectedOverlay);
-    /**
-     * Options for scroll handling provided by the CDK.
-     */
-    scrollStrategyOptions = inject(ScrollStrategyOptions);
-    /**
-     * The overlay trigger object (signal) that controls the overlay origin and active state.
-     */
-    trigger = input(...(ngDevMode ? [undefined, { debugName: "trigger" }] : []));
-    /**
-     * Whether the overlay is open.
-     */
-    open = computed(() => this.trigger()?.active() || false, ...(ngDevMode ? [{ debugName: "open" }] : []));
-    /** Preferred overlay positions in priority order.
-  
-     * @defaultValue ['bottom-center', 'top-center']
-     */
-    positions = input(['bottom-center', 'top-center'], ...(ngDevMode ? [{ debugName: "positions" }] : []));
-    /** Whether clicking outside closes the overlay.
-  
-     * @defaultValue true
-     */
-    closeOnClickOutside = model(true, ...(ngDevMode ? [{ debugName: "closeOnClickOutside" }] : []));
-    /** Whether pressing Escape closes the overlay.
-  
-     * @defaultValue true
-     */
-    closeOnTypeEscape = model(true, ...(ngDevMode ? [{ debugName: "closeOnTypeEscape" }] : []));
-    /**
-     * Whether to focus the trigger element when the overlay closes.
-     *
-     * @defaultValue true
-     */
-    focusTriggerOnClose = model(true, ...(ngDevMode ? [{ debugName: "focusTriggerOnClose" }] : []));
-    /** Scroll handling mode applied to the overlay.
-  
-     * @defaultValue 'reposition'
-     */
-    scroll = model('reposition', ...(ngDevMode ? [{ debugName: "scroll" }] : []));
-    /**
-     * Computed array of CDK ConnectedPosition values derived from `positions`.
-     */
-    connectedPositions = computed(() => this.positions().map((position) => positionsMap[position]), ...(ngDevMode ? [{ debugName: "connectedPositions" }] : []));
-    /**
-     * Linked signal that holds the currently active ConnectionPositionPair.
-     */
-    connectedPositionPair = linkedSignal(() => this.connectedPositions()[0], ...(ngDevMode ? [{ debugName: "connectedPositionPair" }] : []));
-    /**
-     * Computed overlay direction string derived from the active connection pair (e.g. 'top', 'bottom').
-     */
-    direction = computed(() => {
-        const pair = this.connectedPositionPair();
-        return Object.entries(positionsMap)
-            .find(([, position]) => position.originX === pair.originX &&
-            position.originY === pair.originY &&
-            position.overlayX === pair.overlayX &&
-            position.overlayY === pair.overlayY)?.[0]
-            .split('-')[0];
-    }, ...(ngDevMode ? [{ debugName: "direction" }] : []));
-    /**
-     * Flag to indicate if el overlay ya fue abierto al menos una vez.
-     */
-    hasBeenOpened = false;
-    constructor() {
-        effect(() => {
-            this.handleAttach();
-            this.setScrollStrategy();
-            this.setPositions();
-        });
-    }
-    /**
-     * Attach or detach the overlay based on the `open` signal.
-     * Also manages focus on the trigger element when closing.
-     */
-    handleAttach() {
-        if (this.open()) {
-            this.cdkConnectedOverlay.attachOverlay();
-            this.hasBeenOpened = true;
-        }
-        else {
-            this.cdkConnectedOverlay.detachOverlay();
-            // Only focus the trigger if the overlay has been opened at least once
-            if (this.hasBeenOpened && this.focusTriggerOnClose()) {
-                this.trigger()?.el.nativeElement.focus();
-            }
-        }
-    }
-    /**
-     * Set the active connection pair when the CDK overlay reports a position change.
-     *
-     * @param event - The position change event containing the new connection pair.
-     */
-    setPositionPair(event) {
-        this.connectedPositionPair.set(event.connectionPair);
-    }
+    tabs = contentChildren(Tab, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     /**
-     * Deactivate the overlay trigger when the overlay detaches.
+     * Computed array of underlying CDK options for navigation.
      */
-    deactivateTrigger() {
-        this.trigger()?.active?.set(false);
-    }
+    cdkOptions = computed(() => this.tabs().map((tab) => tab.cdkOption), ...(ngDevMode ? [{ debugName: "cdkOptions" }] : []));
     /**
-     * Close the overlay if a click occurs outside and `closeOnClickOutside` is enabled.
+     * Keyboard manager that handles arrow navigation between tabs.
      */
-    closeIfClickedOutside() {
-        if (this.closeOnClickOutside()) {
-            this.trigger()?.active?.set(false);
-        }
-    }
+    listKeyManager = computed(() => new ActiveDescendantKeyManager(this.cdkOptions()).withWrap().withHorizontalOrientation('ltr'), ...(ngDevMode ? [{ debugName: "listKeyManager" }] : []));
     /**
-     * Close the overlay when the Escape key is pressed and `closeOnTypeEscape` is enabled.
-     *
-     * @param event - The keyboard event emitted by the overlay.
+     * Move highlight to the previous tab.
      */
-    closeOnEscape(event) {
-        if (this.closeOnTypeEscape() && event.key === 'Escape') {
-            this.trigger()?.active?.set(false);
-        }
+    previousTab() {
+        this.listKeyManager().setPreviousItemActive();
     }
     /**
-     * Apply the selected scroll strategy to the CDK connected overlay.
+     * Move highlight to the next tab.
      */
-    setScrollStrategy() {
-        switch (this.scroll()) {
-            case 'close':
-                this.cdkConnectedOverlay.scrollStrategy = this.scrollStrategyOptions.close();
-                break;
-            case 'reposition':
-                this.cdkConnectedOverlay.scrollStrategy = this.scrollStrategyOptions.reposition();
-                break;
-            case 'block':
-                this.cdkConnectedOverlay.scrollStrategy = this.scrollStrategyOptions.block();
-                break;
-        }
+    nextTab() {
+        this.listKeyManager().setNextItemActive();
     }
     /**
-     * Update the overlay's available positions from the computed `connectedPositions`.
+     * Initialize CDK listbox behaviors on component init.
      */
-    setPositions() {
-        this.cdkConnectedOverlay.positions = this.connectedPositions();
+    ngOnInit() {
+        this.cdkListbox.useActiveDescendant = true;
+        this.cdkListbox.orientation = 'horizontal';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Overlay, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.6", type: Overlay, isStandalone: true, selector: "[bOverlay]", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, closeOnTypeEscape: { classPropertyName: "closeOnTypeEscape", publicName: "closeOnTypeEscape", isSignal: true, isRequired: false, transformFunction: null }, focusTriggerOnClose: { classPropertyName: "focusTriggerOnClose", publicName: "focusTriggerOnClose", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeOnClickOutside: "closeOnClickOutsideChange", closeOnTypeEscape: "closeOnTypeEscapeChange", focusTriggerOnClose: "focusTriggerOnCloseChange", scroll: "scrollChange" }, host: { listeners: { "positionChange": "setPositionPair($event)", "detach": "deactivateTrigger()", "overlayOutsideClick": "closeIfClickedOutside()", "overlayKeydown": "closeOnEscape($event)" } }, hostDirectives: [{ directive: i1$2.CdkConnectedOverlay, inputs: ["cdkConnectedOverlayBackdropClass", "backdropClass", "cdkConnectedOverlayDisposeOnNavigation", "disposeOnNavigation", "cdkConnectedOverlayFlexibleDimensions", "flexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "growAfterOpen", "cdkConnectedOverlayHasBackdrop", "hasBackdrop", "cdkConnectedOverlayHeight", "height", "cdkConnectedOverlayLockPosition", "lockPosition", "cdkConnectedOverlayMinHeight", "minHeight", "cdkConnectedOverlayMinWidth", "minWidth", "cdkConnectedOverlayOffsetX", "offsetX", "cdkConnectedOverlayOffsetY", "offsetY", "cdkConnectedOverlayOrigin", "trigger", "cdkConnectedOverlayPanelClass", "panelClass", "cdkConnectedOverlayPositionStrategy", "positionStrategy", "cdkConnectedOverlayPush", "push", "cdkConnectedOverlayTransformOriginOn", "transformOriginSelector", "cdkConnectedOverlayViewportMargin", "viewportMargin", "cdkConnectedOverlayWidth", "width"], outputs: ["attach", "attach", "detach", "detach", "overlayKeydown", "overlayKeydown", "overlayOutsideClick", "overlayOutsideClick", "positionChange", "positionChange"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", type: Tabs, isStandalone: true, selector: "b-tabs", host: { listeners: { "keydown.arrowLeft": "previousTab()", "keydown.arrowUp": "previousTab()", "keydown.arrowRight": "nextTab()", "keydown.arrowDown": "nextTab()" } }, queries: [{ propertyName: "tabs", predicate: Tab, isSignal: true }], hostDirectives: [{ directive: i1.CdkListbox }], ngImport: i0, template: ` <ng-content /> `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Overlay, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[bOverlay]',
-                    hostDirectives: [
-                        {
-                            directive: CdkConnectedOverlay,
-                            inputs: [
-                                'cdkConnectedOverlayBackdropClass: backdropClass',
-                                'cdkConnectedOverlayDisposeOnNavigation: disposeOnNavigation',
-                                'cdkConnectedOverlayFlexibleDimensions: flexibleDimensions',
-                                'cdkConnectedOverlayGrowAfterOpen: growAfterOpen',
-                                'cdkConnectedOverlayHasBackdrop: hasBackdrop',
-                                'cdkConnectedOverlayHeight: height',
-                                'cdkConnectedOverlayLockPosition: lockPosition',
-                                'cdkConnectedOverlayMinHeight: minHeight',
-                                'cdkConnectedOverlayMinWidth: minWidth',
-                                'cdkConnectedOverlayOffsetX: offsetX',
-                                'cdkConnectedOverlayOffsetY: offsetY',
-                                'cdkConnectedOverlayOrigin: trigger',
-                                'cdkConnectedOverlayPanelClass: panelClass',
-                                'cdkConnectedOverlayPositionStrategy: positionStrategy',
-                                'cdkConnectedOverlayPush: push',
-                                'cdkConnectedOverlayTransformOriginOn: transformOriginSelector',
-                                'cdkConnectedOverlayViewportMargin: viewportMargin',
-                                'cdkConnectedOverlayWidth: width',
-                            ],
-                            outputs: [
-                                'attach: attach',
-                                'detach: detach',
-                                'overlayKeydown: overlayKeydown',
-                                'overlayOutsideClick: overlayOutsideClick',
-                                'positionChange: positionChange',
-                            ],
-                        },
-                    ],
+                    selector: 'b-tabs',
+                    imports: [],
+                    template: ` <ng-content /> `,
+                    hostDirectives: [CdkListbox],
                     host: {
-                        '(positionChange)': 'setPositionPair($event)',
-                        '(detach)': 'deactivateTrigger()',
-                        '(overlayOutsideClick)': 'closeIfClickedOutside()',
-                        '(overlayKeydown)': 'closeOnEscape($event)',
+                        '(keydown.arrowLeft)': 'previousTab()',
+                        '(keydown.arrowUp)': 'previousTab()',
+                        '(keydown.arrowRight)': 'nextTab()',
+                        '(keydown.arrowDown)': 'nextTab()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positions", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }, { type: i0.Output, args: ["closeOnClickOutsideChange"] }], closeOnTypeEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnTypeEscape", required: false }] }, { type: i0.Output, args: ["closeOnTypeEscapeChange"] }], focusTriggerOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusTriggerOnClose", required: false }] }, { type: i0.Output, args: ["focusTriggerOnCloseChange"] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }, { type: i0.Output, args: ["scrollChange"] }] } });
-/** Map of semantic positions to CDK ConnectedPosition configuration objects. */
-const positionsMap = {
-    'top-left': {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'bottom',
-        offsetX: 0,
-        offsetY: -4,
-    },
-    'top-center': {
-        originX: 'center',
-        originY: 'top',
-        overlayX: 'center',
-        overlayY: 'bottom',
-        offsetX: 0,
-        offsetY: -4,
-    },
-    'top-right': {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'bottom',
-        offsetX: 0,
-        offsetY: -4,
-    },
-    'bottom-left': {
-        originX: 'start',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'top',
-        offsetX: 0,
-        offsetY: 4,
-    },
-    'bottom-center': {
-        originX: 'center',
-        originY: 'bottom',
-        overlayX: 'center',
-        overlayY: 'top',
-        offsetX: 0,
-        offsetY: 4,
-    },
-    'bottom-right': {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'top',
-        offsetX: 0,
-        offsetY: 4,
-    },
-    'left-top': {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'top',
-        offsetX: -4,
-        offsetY: 0,
-    },
-    'left-center': {
-        originX: 'start',
-        originY: 'center',
-        overlayX: 'end',
-        overlayY: 'center',
-        offsetX: -4,
-        offsetY: 0,
-    },
-    'left-bottom': {
-        originX: 'start',
-        originY: 'bottom',
-        overlayX: 'end',
-        overlayY: 'bottom',
-        offsetX: -4,
-        offsetY: 0,
-    },
-    'right-top': {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'top',
-        offsetX: 4,
-        offsetY: 0,
-    },
-    'right-center': {
-        originX: 'end',
-        originY: 'center',
-        overlayX: 'start',
-        overlayY: 'center',
-        offsetX: 4,
-        offsetY: 0,
-    },
-    'right-bottom': {
-        originX: 'end',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'bottom',
-        offsetX: 4,
-        offsetY: 0,
-    },
-};
+        }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => Tab), { isSignal: true }] }] } });
+
+/**
+ * Wrapper for grouping textarea-related elements vertically.
+ */
+class TextareaGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TextareaGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: TextareaGroup, isStandalone: true, selector: "b-textarea-group", ngImport: i0, template: ` <ng-content /> `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: TextareaGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-textarea-group',
+                    template: ` <ng-content /> `,
+                }]
+        }] });
+
+/**
+ * A styled textarea component.
+ */
+class Textarea {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Textarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: Textarea, isStandalone: true, selector: "textarea[b-textarea]", ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Textarea, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'textarea[b-textarea]',
+                    template: ``,
+                }]
+        }] });
 
 /**
  * Tooltip directive that configures an overlay for displaying tooltip content.
@@ -2934,33 +3023,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 }]
         }] });
 
-/**
- * Directive that marks an element as an overlay trigger and toggles its active state on click.
- */
-class OverlayTrigger extends CdkOverlayOrigin {
-    /**
-     * Signal that holds whether the overlay trigger is active.
-     *
-     * @defaultValue false
-     */
-    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
-    /**
-     * Reference to the `ElementRef` of the host element.
-     * This is used to access the native DOM element.
-     */
-    el = inject(ElementRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: OverlayTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: OverlayTrigger, isStandalone: true, selector: "[bOverlayTrigger]", exportAs: ["bOverlayTrigger"], usesInheritance: true, hostDirectives: [{ directive: i1$2.CdkOverlayOrigin }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: OverlayTrigger, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bOverlayTrigger]',
-                    hostDirectives: [CdkOverlayOrigin],
-                    exportAs: 'bOverlayTrigger',
-                }]
-        }] });
-
 /**
  * Trigger directive that emits activation events for tooltips.
  *
@@ -3624,5 +3686,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, Badge, Button, ButtonGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CommandComponent, CommandOptionsComponent, ConnectedOverlay, Dialog, DialogContent, DialogManager, Drawer, Input, InputGroup, Menu, MenuGroup, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuLabel, MenuTriggerDirective, Option, Otp, OtpDigitDirective, Overlay, OverlayOrigin, OverlayTrigger, Range, ResponsiveManager, Select, SelectContent, SelectFilter, SelectTrigger, SelectValue, Sheet, Spinner, SwitchComponent, Tab, Tabs, Textarea, TextareaGroup, ThemeManager, Tooltip, TooltipContent, TooltipTrigger, TranslatePipe, TranslationManager, Tree, TreeNode, Utils };
+export { Alert, Badge, Button, ButtonGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CommandComponent, CommandOptionsComponent, ConnectedOverlay, Dialog, DialogContent, DialogManager, Drawer, Input, InputGroup, Menu, MenuGroup, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuLabel, MenuTriggerDirective, Option, Otp, OtpDigitDirective, Overlay, OverlayOrigin, OverlayTrigger, Popover, PopoverContent, PopoverTrigger, Range, ResponsiveManager, Select, SelectContent, SelectFilter, SelectTrigger, SelectValue, Sheet, Spinner, SwitchComponent, Tab, Tabs, Textarea, TextareaGroup, ThemeManager, Tooltip, TooltipContent, TooltipTrigger, TranslatePipe, TranslationManager, Tree, TreeNode, Utils };
 //# sourceMappingURL=basis-ng-primitives.mjs.map