@telesign/boreal-web-components 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/types/components/overlays/bds-popover/bds-popover.d.ts

@@ -0,0 +1,208 @@
+import { FloatingMixinOptions } from "../../../services/floating/interfaces/Floating";
+import { PositioningResult } from "../../../services/floating/interfaces/Positioning";
+import { IPopover } from './types/IPopover';
+import { AnchoredHooks } from "../../../services/index";
+declare const BdsPopover_base: abstract new (...args: any[]) => {
+    previousTrigger: HTMLElement | undefined;
+    cleanupAutoUpdate: () => void;
+    positionEngine: import("@/services").IFloatingAdapter;
+    logger: import("@/services").Logger;
+    readonly options: FloatingMixinOptions;
+    triggerSlot: HTMLElement;
+    el: HTMLElement;
+    readonly hooks: AnchoredHooks;
+    showElement(): void;
+    onBeforeShow(target?: HTMLElement): boolean;
+    hideElement(): void;
+    handleSlotChange(e: Event, showFn: (this: void) => void, hideFn: (this: void) => void): void;
+    handleKeydown(e: KeyboardEvent, showFn: (this: void) => void, hideFn: (this: void) => void): void;
+    updatePosition(triggerElement: HTMLElement, floatingElement: HTMLElement, options: FloatingMixinOptions, onPositionUpdate?: (result: Awaited<ReturnType<import("@/services").PositioningEngine["computePosition"]>>) => void): Promise<PositioningResult>;
+    startAutoUpdate(triggerElement: HTMLElement, floatingElement: HTMLElement, options: FloatingMixinOptions, onPositionUpdate?: (result: Awaited<ReturnType<import("@/services").PositioningEngine["computePosition"]>>) => void): void;
+    stopAutoUpdate(): void;
+    attachTriggerListeners(trigger: HTMLElement, showFn: (this: void) => void, hideFn: (this: void) => void): void;
+    detachTriggerListeners(trigger: HTMLElement, showFn: (this: void) => void, hideFn: (this: void) => void): void;
+    floatingDisconnect(showFn: (this: void) => void, hideFn: (this: void) => void): void;
+    subscribeToTrigger(trigger?: HTMLElement): void;
+    onBeforeLoad(): void;
+    componentDidLoad(): void;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    floatingOptions: import("@/services").FloatingProp;
+    floatingContent: HTMLElement;
+    isVisible: boolean;
+    onBeforeHide(target?: HTMLElement): boolean;
+    show(target?: HTMLElement): void;
+    hide(target?: HTMLElement): void;
+    toggle(target?: HTMLElement): void;
+    onAfterShow(target?: HTMLElement): void;
+    onAfterHide(target?: HTMLElement): void;
+};
+/**
+ *
+ * @slot - Default slot for the popover body content.
+ * @slot header-icon - Slot for header icon.
+ * @slot header-title - Slot for header title.
+ * @slot footer-helper - Slot for footer helper content.
+ * @slot footer-button - Slot for footer actions.
+ *
+ * @attr {boolean} disabled - When true, prevents the popover from being shown.
+ * @attr {number | 'full' | 'auto'} width - Controls the width of the popover content.
+ * @attr {boolean} header - When true, displays the popover header.
+ * @attr {boolean} footer - When true, displays the popover footer.
+ * @attr {boolean} closable - When true, displays the close button in the header.
+ * @attr {IPopoverFloatingOptions} floatingOptions - Configuration object for floating behavior.
+ *
+ * @csspart popover-content - The main popover container element.
+ * @csspart arrow - The arrow element pointing toward the trigger.
+ * @csspart popover-trigger - The trigger element for the popover.
+ *
+ * @cssprop data-placement - Reflects the resolved placement on the popover element.
+ * @cssprop data-hidearrow - Reflects the hideArrow option.
+ */
+export declare class BdsPopover extends BdsPopover_base implements IPopover {
+    /**
+     * Override default options for the floating mixin.
+     * This can be overridden by passing a different object to the `floatingOptions` prop.
+     */
+    readonly floatingOptions: IPopover['floatingOptions'];
+    /**
+     * If true, disables the popover.
+     * @default false
+     */
+    readonly disabled?: IPopover['disabled'];
+    /**
+     * Width of the popover content.
+     * - number: width in pixels (e.g. 320 → "320px")
+     * - 'full': 100% of the trigger/parent width
+     * - 'auto': fits the content
+     * @default 320
+     */
+    readonly width?: IPopover['width'];
+    /**
+     * If true, displays the header section with icon and title slots.
+     * @default false
+     */
+    readonly header?: boolean;
+    /**
+     * If true, displays the footer section with helper and button slots.
+     * @default false
+     */
+    readonly footer?: boolean;
+    /**
+     * If true, displays a close button inside the header. Requires `header` to be true.
+     * @default false
+     */
+    readonly closable?: boolean;
+    el: HTMLBdsPopoverElement;
+    /**
+     * Tracks the visibility state of the floating element.
+     * Triggers a re-render when changed.
+     */
+    isVisible: boolean;
+    private trigger;
+    private listenTarget;
+    private boundClickOutside;
+    private arrowElement;
+    /**
+     * Returns the resolved options for the floating mixin, merging `floatingOptions`
+     * prop values with their defaults.
+     */
+    get options(): FloatingMixinOptions;
+    /**
+     * Returns the popover width based on the `width` prop.
+     * If `width` is 'full', returns '100%'.
+     * If `width` is 'auto', returns 'auto'.
+     * Otherwise, returns the provided width in pixels.
+     */
+    get popoverWidth(): string;
+    /**
+     * Returns the lifecycle hooks consumed by the anchored mixin to control
+     * tooltip visibility and positioning.
+     * @override anchoredMixin.hooks
+     */
+    get hooks(): AnchoredHooks;
+    /**
+     * Attaches a click outside listener to the document.
+     * If `closeOnClickOutside` is true, the popover will close when the user clicks outside.
+     */
+    private attachClickOutside;
+    /**
+     * Detaches the click outside listener from the document.
+     * If `closeOnClickOutside` is true, the popover will close when the user clicks outside.
+     */
+    private detachClickOutside;
+    /**
+     * Applies the arrow element's `x` and `y` coordinates calculated by the
+     * floating middleware. Skips the update when the arrow element is not
+     * connected to the DOM or when middleware data is absent.
+     *
+     * @param result - The positioning result that may contain `middlewareData.arrow`
+     * with the computed `x` and `y` offsets for the arrow element.
+     */
+    private setArrowPosition;
+    /**
+     *  Handles the click outside event.
+     *  If the click is inside the trigger or the floating content, it will not close the popover.
+     * @param e - Mouse event with the click coordinates.
+     */
+    private handleClickOutside;
+    /**
+     * Handles the click event on the floating content. Prevents the default behavior of the click event.
+     * If `closeOnClick` is true, the popover will close when the user clicks inside the floating content.
+     * @param e - Mouse event with the click coordinates.
+     */
+    private handleContentClick;
+    /**
+     * Handles the click event on the floating content.
+     * If `closeOnClick` is true, the popover will close when the user clicks inside the floating content.
+     */
+    private handleFloatingClick;
+    /**
+     *  Handles the position update event.
+     *  Updates the position of the floating content and the arrow element.
+     * @param result - Positioning result with the position and the placement.
+     */
+    private handlePosition;
+    /**
+     *  Attaches the trigger to the popover.
+     *  If the trigger is not set, it will return.
+     * @returns
+     */
+    private attachTrigger;
+    /**
+     *  Subscribes the trigger to the popover.
+     *  If the trigger is not a button, input, or select element, it will return.
+     * @param trigger - The trigger element to subscribe.
+     */
+    private subscribe;
+    /**
+     *  Handles the show event.
+     *  If the event is not a click event, it will stop the propagation.
+     * @param evt - Mouse event with the click coordinates.
+     */
+    private handleShow;
+    /**
+     *  Returns true if the arrow should be shown, false otherwise.
+     * @returns - True if the arrow should be shown, false otherwise.
+     */
+    get canShowArrow(): boolean;
+    /**
+     *  Returns the placement of the popover.
+     * @returns - The placement of the popover.
+     */
+    get getPlacement(): string;
+    /**
+     *  Returns true if the header slot is present, false otherwise.
+     * @returns - True if the header slot is present, false otherwise.
+     */
+    get hasHeaderSlot(): boolean;
+    /**
+     *  Returns true if the footer slot is present, false otherwise.
+     * @returns - True if the footer slot is present, false otherwise.
+     */
+    get hasFooterSlot(): boolean;
+    disconnectedCallback(): void;
+    render(): any;
+}
+export {};
+//# sourceMappingURL=bds-popover.d.ts.map

package/dist/types/components/overlays/bds-popover/types/IPopover.d.ts

@@ -0,0 +1,11 @@
+import { FloatingPopoverProp } from "../../../../services/index";
+import { PopoverWidth } from './width';
+export interface IPopover {
+    floatingOptions: Partial<FloatingPopoverProp>;
+    disabled?: boolean;
+    width?: PopoverWidth;
+    header?: boolean;
+    footer?: boolean;
+    closable?: boolean;
+}
+//# sourceMappingURL=IPopover.d.ts.map

package/dist/types/components/overlays/bds-popover/types/width.d.ts

@@ -0,0 +1,2 @@
+export type PopoverWidth = number | 'full' | 'auto';
+//# sourceMappingURL=width.d.ts.map

package/dist/types/components/overlays/bds-tooltip/bds-tooltip.d.ts

@@ -0,0 +1,142 @@
+import { ITooltip } from './types/ITooltip';
+import { StyleModifiers } from "../../../types/index";
+import { AnchoredHooks, FloatingMixinOptions, FloatingTooltipProp, PositioningResult } from "../../../services/index";
+declare const BdsTooltip_base: abstract new (...args: any[]) => {
+    previousTrigger: HTMLElement | undefined;
+    cleanupAutoUpdate: () => void;
+    positionEngine: import("@/services").IFloatingAdapter;
+    logger: import("@/services").Logger;
+    readonly options: FloatingMixinOptions;
+    triggerSlot: HTMLElement;
+    el: HTMLElement;
+    readonly hooks: AnchoredHooks;
+    showElement(): void;
+    onBeforeShow(target?: HTMLElement): boolean;
+    hideElement(): void;
+    handleSlotChange(e: Event, showFn: (this: void) => void, hideFn: (this: void) => void): void;
+    handleKeydown(e: KeyboardEvent, showFn: (this: void) => void, hideFn: (this: void) => void): void;
+    updatePosition(triggerElement: HTMLElement, floatingElement: HTMLElement, options: FloatingMixinOptions, onPositionUpdate?: (result: Awaited<ReturnType<import("@/services").PositioningEngine["computePosition"]>>) => void): Promise<PositioningResult>;
+    startAutoUpdate(triggerElement: HTMLElement, floatingElement: HTMLElement, options: FloatingMixinOptions, onPositionUpdate?: (result: Awaited<ReturnType<import("@/services").PositioningEngine["computePosition"]>>) => void): void;
+    stopAutoUpdate(): void;
+    attachTriggerListeners(trigger: HTMLElement, showFn: (this: void) => void, hideFn: (this: void) => void): void;
+    detachTriggerListeners(trigger: HTMLElement, showFn: (this: void) => void, hideFn: (this: void) => void): void;
+    floatingDisconnect(showFn: (this: void) => void, hideFn: (this: void) => void): void;
+    subscribeToTrigger(trigger?: HTMLElement): void;
+    onBeforeLoad(): void;
+    componentDidLoad(): void;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    floatingOptions: import("@/services").FloatingProp;
+    floatingContent: HTMLElement;
+    isVisible: boolean;
+    onBeforeHide(target?: HTMLElement): boolean;
+    show(target?: HTMLElement): void;
+    hide(target?: HTMLElement): void;
+    toggle(target?: HTMLElement): void;
+    onAfterShow(target?: HTMLElement): void;
+    onAfterHide(target?: HTMLElement): void;
+};
+/**
+ * Tooltip component that displays a short label anchored to a trigger element on hover.
+ *
+ * @summary Displays a floating tooltip anchored to a trigger element on mouseenter/mouseleave,
+ * with configurable placement, optional arrow, and multiline support.
+ *
+ * @slot - Default slot for the tooltip text content.
+ *
+ * @attr {boolean} disabled - When true, prevents the tooltip from being shown.
+ * @attr {boolean} multiline - When true, allows the tooltip content to wrap across multiple lines.
+ * @attr {Partial<FloatingTooltipProp>} floating-options - Configuration object for floating behavior.
+ *
+ * @csspart arrow - The arrow element pointing toward the trigger.
+ * @csspart tooltip-content - The inner content wrapper inside the tooltip.
+ *
+ * @cssprop data-placement - Reflects the resolved placement on the tooltip container element.
+ * @cssprop data-hidearrow - Reflects the hideArrow option on the tooltip container element.
+ * @cssprop data-multiline - Reflects the multiline prop on the tooltip container element.
+ */
+export declare class BdsTooltip extends BdsTooltip_base implements ITooltip {
+    /**
+     * If true, allows multiline content in the tooltip.
+     * @default false
+     */
+    readonly multiline?: ITooltip['multiline'];
+    /**
+     * If true, disables the tooltip.
+     * @default false
+     */
+    readonly disabled?: ITooltip['disabled'];
+    /**
+     * Override default options for the floating mixin.
+     * This can be overridden by passing a different object to the `floatingOptions` prop.
+     */
+    readonly floatingOptions: Partial<FloatingTooltipProp>;
+    isVisible: boolean;
+    private arrowElement;
+    el: HTMLBdsTooltipElement;
+    /**
+     * Returns the resolved options for the floating mixin, merging `floatingOptions`
+     * prop values with their defaults.
+     *
+     * @returns {FloatingMixinOptions} Resolved configuration used by the anchored mixin
+     * to position the tooltip.
+     * @override anchoredMixin.options
+     *
+     * @example
+     * // floatingOptions = { placement: 'top', hideArrow: true }
+     * this.options
+     * return { placement: 'top', offset: 8, arrow: undefined, strategy: 'fixed' }
+     */
+    get options(): FloatingMixinOptions;
+    /**
+     * Returns the lifecycle hooks consumed by the anchored mixin to control
+     * tooltip visibility and positioning.
+     * @override anchoredMixin.hooks
+     *
+     * @returns {AnchoredHooks} Object containing the three hook callbacks:
+     * - `onPositionUpdate` — called after each positioning calculation.
+     * - `onBeforeShow` — called before the tooltip becomes visible; returning false cancels the show.
+     * - `onBeforeHide` — called before the tooltip is hidden; returning false cancels the hide.
+     */
+    get hooks(): AnchoredHooks;
+    get canShowArrow(): boolean;
+    get getPlacement(): string;
+    /**
+     * Guard called by `onBeforeShow` to determine whether the tooltip is allowed to show.
+     *
+     * @returns {boolean} `true` if the tooltip is not disabled and may be shown; `false` otherwise.
+     */
+    private validateShow;
+    /**
+     * Guard called by `onBeforeHide` to determine whether the tooltip is allowed to hide.
+     * When `stayOnHover` is enabled, hides are cancelled if the pointer is moving
+     * into the floating content element itself.
+     *
+     * @param target - The element the pointer is moving toward (relatedTarget of the mouseleave event).
+     * @returns {boolean} `true` if the tooltip should hide; `false` if the hide should be cancelled.
+     */
+    private validateHide;
+    /**
+     * Callback for `onPositionUpdate`. Applies the resolved placement as a
+     * `data-placement` attribute on the floating content element and delegates
+     * arrow positioning to `setArrowPosition`.
+     *
+     * @param result - The positioning result produced by the floating middleware.
+     */
+    private handlePosition;
+    /**
+     * Applies the arrow element's `x` and `y` coordinates calculated by the
+     * floating middleware. Skips the update when the arrow element is not
+     * connected to the DOM or when middleware data is absent.
+     *
+     * @param result - The positioning result that may contain `middlewareData.arrow`
+     * with the computed `x` and `y` offsets for the arrow element.
+     */
+    private setArrowPosition;
+    get hasMultiline(): boolean;
+    get tooltipStyles(): StyleModifiers;
+    private subscribe;
+    render(): any;
+}
+export {};
+//# sourceMappingURL=bds-tooltip.d.ts.map

package/dist/types/components/overlays/bds-tooltip/types/ITooltip.d.ts

@@ -0,0 +1,11 @@
+import { FloatingTooltipProp } from "../../../../components";
+import { IFloatingMixin } from "../../../../services/floating/interfaces/Floating";
+/**
+ * Interface for BdsTooltip props and states.
+ */
+export interface ITooltip extends IFloatingMixin {
+    disabled?: boolean;
+    multiline?: boolean;
+    floatingOptions?: Partial<FloatingTooltipProp>;
+}
+//# sourceMappingURL=ITooltip.d.ts.map