@basis-ng/primitives 0.0.1-alpha.97 → 0.0.1-alpha.99

package/fesm2022/basis-ng-primitives.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { signal, inject, RendererFactory2, PLATFORM_ID, Injectable, input, ElementRef, Component, TemplateRef, Directive, computed, model, linkedSignal, output, effect, contentChildren, contentChild, forwardRef, HostListener, afterRenderEffect, ViewEncapsulation, ChangeDetectorRef, Pipe } from '@angular/core';
-import { isPlatformBrowser, NgClass, NgStyle, CommonModule } from '@angular/common';
+import { isPlatformBrowser, NgClass, NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
 import { NgModel, NG_VALUE_ACCESSOR, ControlContainer } from '@angular/forms';
 import * as i1 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
@@ -2925,6 +2925,18 @@ class Utils {
         clearTimeout(this.debounceTimers.get(key));
         this.debounceTimers.delete(key);
     }
+    /**
+     * Generates a simple UUID.
+     *
+     * @returns A string representing a UUID.
+     */
+    generateUUID() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+            const r = (Math.random() * 16) | 0; // Random integer between 0 and 15
+            const v = c === 'x' ? r : (r & 0x3) | 0x8; // Version 4 UUID
+            return v.toString(16);
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Utils, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Utils, providedIn: 'root' });
 }
@@ -3538,6 +3550,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
+/**
+ * Directive that toggles a connected popover via click or hover interactions.
+ */
+class PopoverTrigger {
+    /** Reference to the trigger host element. */
+    el = inject(ElementRef);
+    /** Reactive open state of the associated popover. */
+    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    /** Interaction mode that determines whether the popover opens on click or hover.
+     *
+     * @defaultValue 'click'
+     */
+    mode = input('click', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Whether clicking outside the popover should close it when managed by a parent component.
+     *
+     * @defaultValue true
+     */
+    closeOnOutsideClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : []));
+    /** Disables trigger interactions when true.
+     *
+     * @defaultValue false
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: PopoverTrigger, isStandalone: true, selector: "[bPopoverTrigger]", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "(mode() === \"click\" && !disabled()) && active.set(!active())", "mouseenter": "(mode() === \"hover\" && !disabled()) && active.set(true)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PopoverTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bPopoverTrigger]',
+                    host: {
+                        '(click)': '(mode() === "click" && !disabled()) && active.set(!active())',
+                        '(mouseenter)': '(mode() === "hover" && !disabled()) && active.set(true)',
+                    },
+                }]
+        }] });
+
+/**
+ * Renders the projected popover content and positions it relative to an anchor using CSS anchor positioning.
+ */
+class PopoverContent {
+    /**
+     * Requested anchor-relative position of the popover.
+     */
+    position = input.required(...(ngDevMode ? [{ debugName: "position" }] : []));
+    /**
+     * Reference to the host DOM element for direct native access when needed.
+     */
+    el = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PopoverContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: PopoverContent, isStandalone: true, selector: "b-popover-content", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.position-area": "position()", "animate.enter": "'b-popover-entering'", "animate.leave": "'b-popover-leaving'" } }, ngImport: i0, template: ` <ng-content /> `, isInline: true, styles: [":host{position:absolute;position-anchor:var(--anchor-name);position-try-fallbacks:flip-block,flip-inline}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PopoverContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'b-popover-content', imports: [], template: ` <ng-content /> `, host: {
+                        '[style.position-area]': 'position()',
+                        '[animate.enter]': "'b-popover-entering'",
+                        '[animate.leave]': "'b-popover-leaving'",
+                    }, styles: [":host{position:absolute;position-anchor:var(--anchor-name);position-try-fallbacks:flip-block,flip-inline}\n"] }]
+        }] });
+
+/**
+ * Hosts trigger and content projections and manages showing and positioning popover content relative to its trigger.
+ */
+class Popover {
+    /** Utility service used to generate a unique anchor name. */
+    utils = inject(Utils);
+    /** Reference to the host DOM element for event boundary checks. */
+    el = inject(ElementRef);
+    /** Reactive signal indicating whether the popover is currently active (open). */
+    active = computed(() => this.trigger()?.active(), ...(ngDevMode ? [{ debugName: "active" }] : []));
+    /** Unique anchor CSS name used to link trigger and content via anchor positioning. */
+    anchorName = signal('--' + this.utils.generateUUID(), ...(ngDevMode ? [{ debugName: "anchorName" }] : []));
+    /** Mode of the trigger (e.g. hover or click) used to determine interaction behavior. */
+    triggerMode = computed(() => this.trigger()?.mode(), ...(ngDevMode ? [{ debugName: "triggerMode" }] : []));
+    /**
+     * Whether a click outside the popover should close it.
+     *
+     * @defaultValue true
+     */
+    closeOnOutsideClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : []));
+    /** Content child reference to the popover trigger directive instance. */
+    trigger = contentChild(PopoverTrigger, ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    /** Content child reference to the projected popover content component. */
+    content = contentChild(PopoverContent, ...(ngDevMode ? [{ debugName: "content" }] : []));
+    /** Template reference for inline content projected with the 'popoverContent' identifier. */
+    contentTplRef = contentChild('popoverContent', ...(ngDevMode ? [{ debugName: "contentTplRef" }] : []));
+    /**
+     * Lifecycle hook that initializes the trigger element with its anchor name.
+     */
+    ngOnInit() {
+        this.setTriggerAnchorName();
+    }
+    /**
+     * Creates a reactive effect that syncs content anchor and registers outside click listeners when active.
+     */
+    constructor() {
+        effect(onCleanup => {
+            if (this.active()) {
+                this.setContentAnchorName();
+                if (this.closeOnOutsideClick()) {
+                    const handler = (event) => {
+                        if (!this.el.nativeElement.contains(event.target)) {
+                            this.trigger()?.active.set(false);
+                        }
+                    };
+                    document.addEventListener('click', handler, true);
+                    onCleanup(() => document.removeEventListener('click', handler, true));
+                }
+            }
+        });
+    }
+    /**
+     * Applies the generated anchor name to the content element for CSS anchor positioning.
+     */
+    setContentAnchorName() {
+        this.content()?.el.nativeElement.style.setProperty('--anchor-name', this.anchorName());
+    }
+    /**
+     * Applies the generated anchor name to the trigger element to associate it with the content.
+     */
+    setTriggerAnchorName() {
+        this.trigger()?.el.nativeElement.style.setProperty('anchor-name', this.anchorName());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Popover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: Popover, isStandalone: true, selector: "b-popover", inputs: { closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseleave": "triggerMode() === \"hover\" && trigger()?.active.set(false)" } }, queries: [{ propertyName: "trigger", first: true, predicate: PopoverTrigger, descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: PopoverContent, descendants: true, isSignal: true }, { propertyName: "contentTplRef", first: true, predicate: ["popoverContent"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-content />
+    @if (active()) {
+      <ng-container *ngTemplateOutlet="contentTplRef()" />
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: Popover, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'b-popover',
+                    imports: [NgTemplateOutlet],
+                    template: `
+    <ng-content />
+    @if (active()) {
+      <ng-container *ngTemplateOutlet="contentTplRef()" />
+    }
+  `,
+                    host: {
+                        '(mouseleave)': 'triggerMode() === "hover" && trigger()?.active.set(false)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
 /*
  * Public API Surface of basis-ng
  */
@@ -3547,5 +3708,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, Badge, Button, ButtonGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorPicker, CommandComponent, CommandOptionsComponent, ConnectedOverlay, Dialog, DialogManager, Drawer, Input, InputGroup, LazyContentDirective, Menu, MenuGroup, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuLabel, MenuTriggerDirective, Option, Otp, OtpDigitDirective, OverlayOrigin, Range, ResponsiveManager, RowComponent, RowItemComponent, Select, SelectContent, SelectFilter, SelectTrigger, SelectValue, Sheet, Spinner, SwitchComponent, Tab, TableComponent, Tabs, TextareaComponent, ThemeManager, Tooltip, TooltipContent, TooltipTrigger, TranslatePipe, TranslationManager, Tree, TreeNode };
+export { Alert, Badge, Button, ButtonGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorPicker, CommandComponent, CommandOptionsComponent, ConnectedOverlay, Dialog, DialogManager, Drawer, Input, InputGroup, LazyContentDirective, Menu, MenuGroup, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuLabel, MenuTriggerDirective, Option, Otp, OtpDigitDirective, OverlayOrigin, Popover, PopoverContent, PopoverTrigger, Range, ResponsiveManager, RowComponent, RowItemComponent, Select, SelectContent, SelectFilter, SelectTrigger, SelectValue, Sheet, Spinner, SwitchComponent, Tab, TableComponent, Tabs, TextareaComponent, ThemeManager, Tooltip, TooltipContent, TooltipTrigger, TranslatePipe, TranslationManager, Tree, TreeNode };
 //# sourceMappingURL=basis-ng-primitives.mjs.map