bromcom-ui-next 0.1.28 → 0.1.30

package/dist/types/components/popover/popover.component.d.ts

@@ -2,7 +2,8 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 /**
  * @component BcmPopover
  * @description A flexible popover component that displays contextual information or content relative to a target element.
- * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.
+ * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+ * Supports different sizes, trigger types (click, hover, focus), placements, and comprehensive event system.
  *
  * @example Basic Click Popover
  * <bcm-popover trigger="click" size="medium" placement="top">
@@ -11,8 +12,8 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
  *   <span slot="content">This is a simple popover content.</span>
  * </bcm-popover>
  *
- * @example Hover Popover with Props
- * <bcm-popover trigger="hover" hover-delay="200" size="large" placement="right" header-text="Prop Header" message="This is a hover popover with props.">
+ * @example Hover Popover with Delays
+ * <bcm-popover trigger="hover" show-delay="200" hide-delay="100" size="large" placement="right" header-text="Prop Header" message="This is a hover popover with props.">
  *   <bcm-button>Hover Me</bcm-button>
  * </bcm-popover>
  *
@@ -23,8 +24,9 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
  * </bcm-popover>
  * <script>
  *   const popover = document.querySelector('#my-popover');
- *   popover.openPopup(); // Opens the popover
- *   popover.closePopup(); // Closes the popover
+ *   popover.show(); // Opens the popover
+ *   popover.hide(); // Closes the popover
+ *   popover.toggle(); // Toggles the popover
  * </script>
  *
  * @slot - Default slot for the target element that triggers the popover
@@ -37,12 +39,14 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
  * @csspart arrow - The arrow element of the popover, stylable for the positioning arrow
  */
 export declare class Popover implements ComponentInterface {
-    el: HTMLElement;
-    private targetElement;
-    private popoverElement;
-    private arrowElement;
-    private hoverTimeout;
-    private cleanupAutoUpdate;
+    host: HTMLElement;
+    private triggerRef?;
+    private popoverRef?;
+    private arrowRef?;
+    private cleanupAutoUpdate?;
+    private showTimeout?;
+    private hideTimeout?;
+    private popoverId;
     /**
      * @prop {('small' | 'medium' | 'large')} size - Defines the size of the popover.
      * Controls the text size and padding of the popover content.
@@ -56,62 +60,113 @@ export declare class Popover implements ComponentInterface {
      */
     placement: 'top' | 'right' | 'bottom' | 'left';
     /**
-     * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the popover.
-     * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.
+     * @prop {('click' | 'hover' | 'hover focus')} trigger - Defines the interaction type to show/hide the popover.
+     * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave, 'hover focus' combines both.
      * Default: 'click'
      */
-    trigger: 'click' | 'hover';
+    trigger: 'click' | 'hover' | 'hover focus';
     /**
-     * @prop {number} hoverDelay - Delay in milliseconds before showing or hiding the popover when trigger is 'hover'.
-     * Adds a delay to prevent flickering on quick mouse movements.
-     * Default: 150
+     * @prop {number} showDelay - Delay in milliseconds before showing the popover.
+     * Useful to prevent popovers from appearing on quick mouse movements.
+     * Default: 0
      */
-    hoverDelay: number;
+    showDelay: number;
     /**
-     * @prop {boolean} open - Indicates whether the popover is currently open.
-     * Can be set programmatically or toggled by user interaction. Mutable.
+     * @prop {number} hideDelay - Delay in milliseconds before hiding the popover.
+     * Provides a grace period for mouse movements.
+     * Default: 0
+     */
+    hideDelay: number;
+    /**
+     * @prop {boolean} open - Controls the open state of the popover.
+     * Can be set programmatically or toggled by user interaction.
      * Default: false
      */
     open: boolean;
+    /**
+     * @prop {boolean} closeOnOutsideClick - Whether to close the popover when clicking outside.
+     * Default: true
+     */
+    closeOnOutsideClick: boolean;
+    /**
+     * @prop {boolean} closeOnEscape - Whether to close the popover when pressing Escape key.
+     * Default: true
+     */
+    closeOnEscape: boolean;
     /**
      * @prop {string} headerText - Custom text for the popover header.
      * Used as fallback content if the 'header' slot is not provided.
      */
-    headerText: string;
+    headerText?: string;
     /**
      * @prop {string} message - Custom text for the popover content.
      * Used as fallback content if the 'content' slot is not provided.
      */
-    message: string;
+    message?: string;
+    /**
+     * @prop {boolean} arrow - Whether to show an arrow pointing to the trigger element.
+     * Default: true
+     */
+    arrow: boolean;
+    isOpen: boolean;
     /**
-     * @event {EventEmitter<void>} bcmPopoverOpen - Emitted when the popover is opened.
+     * @event bcmBeforeOpen - Emitted before the popover opens.
+     * Useful for performing actions before the popover becomes visible.
+     */
+    bcmBeforeOpen: EventEmitter<void>;
+    /**
+     * @event bcmOpen - Emitted when the popover is opened.
      * Useful for tracking when the popover becomes visible.
      */
-    bcmPopoverOpen: EventEmitter<void>;
+    bcmOpen: EventEmitter<void>;
+    /**
+     * @event bcmBeforeClose - Emitted before the popover closes.
+     * Useful for performing actions before the popover is hidden.
+     */
+    bcmBeforeClose: EventEmitter<void>;
     /**
-     * @event {EventEmitter<void>} bcmPopoverClose - Emitted when the popover is closed.
+     * @event bcmClose - Emitted when the popover is closed.
      * Useful for tracking when the popover is hidden.
      */
-    bcmPopoverClose: EventEmitter<void>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private togglePopover;
-    private showPopover;
-    private hidePopover;
+    bcmClose: EventEmitter<void>;
+    handleOpenChange(newValue: boolean): void;
+    private showInternal;
+    private hideInternal;
+    /**
+     * Programmatically shows the popover.
+     * Respects the showDelay prop.
+     */
+    show(): Promise<void>;
     /**
-     * @method {Promise<void>} openPopup - Programmatically opens the popover.
-     * Triggers the showPopover logic to display the popover with the specified hover delay (if applicable).
-     * @returns {Promise<void>} A promise that resolves when the popover is opened.
+     * Programmatically hides the popover.
+     * Respects the hideDelay prop.
      */
-    openPopup(): Promise<void>;
+    hide(): Promise<void>;
     /**
-     * @method {Promise<void>} closePopup - Programmatically closes the popover.
-     * Triggers the hidePopover logic to hide the popover with the specified hover delay (if applicable).
-     * @returns {Promise<void>} A promise that resolves when the popover is closed.
+     * Toggles the popover visibility.
      */
-    closePopup(): Promise<void>;
+    toggle(): Promise<void>;
+    private clearTimeouts;
+    private startAutoUpdate;
+    private stopAutoUpdate;
     private handleSlotChange;
+    private setupTriggerListeners;
+    private removeTriggerListeners;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handlePopoverMouseEnter;
+    private handlePopoverMouseLeave;
+    private handleTriggerClick;
+    private handleFocus;
+    private handleBlur;
+    private setupAriaAttributes;
+    handleKeyDown(event: KeyboardEvent): void;
     private handleOutsideClick;
+    private addOutsideClickListener;
+    private removeOutsideClickListener;
+    private handleToggle;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     private updatePosition;
     private popoverClass;
     render(): any;

package/dist/types/components/tooltip/tooltip.component.d.ts

@@ -1,86 +1,177 @@
-import { ComponentInterface } from '../../stencil-public-runtime';
+export type TooltipTrigger = 'hover' | 'click';
+export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipSize = 'small' | 'medium' | 'large';
 /**
  * @component BcmTooltip
- * @description A lightweight tooltip component that displays brief contextual information when hovering or clicking on a target element.
- * Supports different sizes, trigger types (click or hover), placements (top, right, bottom, left), and can be controlled via slots or props.
+ * @description A flexible tooltip component that provides contextual information on hover or click.
+ * Built on the native Popover API for top-layer rendering and Floating UI for intelligent positioning.
+ * Automatically handles overflow, flipping, and complex shadow DOM scenarios.
  *
- * @example Basic Hover Tooltip
- * <bcm-tooltip trigger="hover" size="medium" placement="top" message="This is a tooltip.">
- *   <bcm-button>Hover Me</bcm-button>
+ * @slot - The trigger element that will show the tooltip
+ * @slot content - Custom rich content for the tooltip (overrides message prop)
+ *
+ * @part tooltip - The tooltip container element (for custom styling)
+ * @part arrow - The arrow pointer element
+ * @part content - The content wrapper element
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage with text message -->
+ * <bcm-tooltip message="This is a tooltip">
+ *   <button>Hover me</button>
+ * </bcm-tooltip>
+ *
+ * <!-- With custom rich content -->
+ * <bcm-tooltip placement="right" size="large">
+ *   <button>Click me</button>
+ *   <div slot="content">
+ *     <strong>Rich content</strong>
+ *     <p>You can add any HTML here</p>
+ *   </div>
  * </bcm-tooltip>
  *
- * @example Click Tooltip with Programmatic Control
- * <bcm-tooltip id="my-tooltip" trigger="click" message="Controlled tooltip.">
- *   <bcm-button>Click Me</bcm-button>
+ * <!-- Click trigger with custom delays -->
+ * <bcm-tooltip trigger="click" show-delay="0" hide-delay="0">
+ *   <span>Click me</span>
+ * </bcm-tooltip>
+ *
+ * <!-- Mouse following mode -->
+ * <bcm-tooltip follow={true} message="I follow your cursor!">
+ *   <div>Move your mouse here</div>
+ * </bcm-tooltip>
+ *
+ * <!-- Programmatic control -->
+ * <bcm-tooltip id="myTooltip" message="Programmatic tooltip">
+ *   <span>Trigger</span>
  * </bcm-tooltip>
  * <script>
- *   const tooltip = document.querySelector('#my-tooltip');
- *   tooltip.openTooltip(); // Opens the tooltip
- *   tooltip.closeTooltip(); // Closes the tooltip
+ *   const tooltip = document.getElementById('myTooltip');
+ *   tooltip.show();
+ *   setTimeout(() => tooltip.hide(), 2000);
  * </script>
  *
- * @slot - Default slot for the target element that triggers the tooltip
- * @slot tooltip - Slot for custom tooltip content
- *
- * @csspart tooltip - The root tooltip container element, stylable for the entire tooltip
- * @csspart arrow - The arrow element of the tooltip, stylable for the positioning arrow
+ * <!-- Custom styling with CSS parts -->
+ * <style>
+ *   bcm-tooltip::part(tooltip) {
+ *     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ *     border-radius: 12px;
+ *   }
+ *   bcm-tooltip::part(arrow) {
+ *     background: #667eea;
+ *   }
+ * </style>
+ * ```
  */
-export declare class Tooltip implements ComponentInterface {
-    el: HTMLElement;
+export declare class BcmTooltip {
+    host: HTMLBcmTooltipElement;
+    private tooltipRef?;
+    private arrowRef?;
+    private triggerRef?;
+    private cleanupAutoUpdate?;
+    private showTimeout?;
+    private hideTimeout?;
+    private mouseX;
+    private mouseY;
+    private rafId?;
+    private tooltipId;
     /**
-     * @prop {('click' | 'hover')} trigger - Defines the interaction type to show/hide the tooltip.
-     * 'click' toggles on click, 'hover' shows on mouse enter and hides on mouse leave.
-     * Default: 'hover'
+     * How the tooltip is triggered
+     * - 'hover': Shows on mouse enter, hides on mouse leave
+     * - 'click': Toggles on click, closes on outside click or Escape key
      */
-    trigger: 'click' | 'hover';
+    trigger: TooltipTrigger;
     /**
-     * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element.
-     * Default: 'top'
+     * Preferred placement of the tooltip relative to the trigger
+     * Note: Tooltip will automatically flip if there's not enough space
+     * - 'top': Above the trigger element
+     * - 'right': To the right of the trigger element
+     * - 'bottom': Below the trigger element
+     * - 'left': To the left of the trigger element
      */
-    placement: 'top' | 'right' | 'bottom' | 'left';
+    placement: TooltipPlacement;
     /**
-     * @prop {('small' | 'medium' | 'large')} size - Defines the size of the tooltip.
-     * Controls the text size and padding of the tooltip content.
-     * Default: 'medium'
+     * Size variant of the tooltip
+     * - 'small': Compact tooltip with minimal padding (text-size-3, py-1 px-2)
+     * - 'medium': Standard tooltip size (text-size-4, py-1.5 px-3)
+     * - 'large': Larger tooltip for more content (text-size-5, py-2 px-4)
      */
-    size: 'small' | 'medium' | 'large';
+    size: TooltipSize;
     /**
-     * @prop {string} message - Custom text for the tooltip content.
-     * Used as fallback content if the 'tooltip' slot is not provided.
+     * Simple text message to display in the tooltip
+     * Can be overridden by slotting content into the 'content' slot
      */
-    message: string;
+    message?: string;
     /**
-     * @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.
-     * Helps prevent flickering on quick mouse movements.
-     * Default: 150
+     * Delay in milliseconds before showing the tooltip
+     * Useful to prevent tooltips from appearing on quick mouse movements
      */
     showDelay: number;
-    open: boolean;
-    private tooltipElement;
-    private arrowElement;
-    private targetElement;
-    private hoverTimeout;
-    private cleanupAutoUpdate;
-    disconnectedCallback(): void;
-    private updateOutsideClickListener;
-    private toggleTooltip;
-    private showTooltip;
-    private hideTooltip;
     /**
-     * @method {Promise<void>} openTooltip - Programmatically opens the tooltip.
-     * Triggers the showTooltip logic with the specified delay.
-     * @returns {Promise<void>} A promise that resolves when the tooltip is opened.
+     * Delay in milliseconds before hiding the tooltip
+     * Provides a grace period for mouse movements
      */
-    openTooltip(): Promise<void>;
+    hideDelay: number;
     /**
-     * @method {Promise<void>} closeTooltip - Programmatically closes the tooltip.
-     * Triggers the hideTooltip logic with the specified delay.
-     * @returns {Promise<void>} A promise that resolves when the tooltip is closed.
+     * Whether to show an arrow pointing to the trigger element
+     * Note: Arrow is automatically hidden in 'follow' mode
      */
-    closeTooltip(): Promise<void>;
+    arrow: boolean;
+    /**
+     * Disables the tooltip, preventing it from showing
+     * Useful for conditional tooltips based on application state
+     */
+    disabled: boolean;
+    /**
+     * Distance in pixels between the tooltip and the trigger element
+     * Also used as the offset in 'follow' mode
+     */
+    offset: number;
+    /**
+     * Makes the tooltip follow the mouse cursor
+     * When enabled:
+     * - Arrow is hidden
+     * - Tooltip position updates smoothly with cursor movement
+     * - Pointer events are disabled on tooltip to prevent interference
+     */
+    follow: boolean;
+    isOpen: boolean;
+    handleDisabledChange(disabled: boolean): void;
+    handleTriggerChange(): void;
+    handleOpenChange(open: boolean): Promise<void>;
+    /**
+     * Programmatically shows the tooltip
+     * Respects the showDelay prop and disabled state
+     */
+    show(): Promise<void>;
+    /**
+     * Programmatically hides the tooltip
+     * Respects the hideDelay prop
+     */
+    hide(): Promise<void>;
+    /**
+     * Toggles the tooltip visibility
+     * If open, hides it; if closed, shows it
+     */
+    toggle(): Promise<void>;
+    private clearTimeouts;
+    private startAutoUpdate;
+    private stopAutoUpdate;
+    private startFollowing;
+    private stopFollowing;
+    private updatePosition;
+    private setupTriggerListeners;
     private handleSlotChange;
+    private removeTriggerListeners;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleMouseMove;
+    private handleClick;
     private handleOutsideClick;
-    private updatePosition;
+    private handleKeyDown;
+    private handleToggle;
+    private setupOutsideClickListener;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     private tooltipClass;
     render(): any;
 }