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

package/dist/types/components/layouts/bds-grid/grid/types/IGrid.d.ts

@@ -0,0 +1,6 @@
+import { GridLayout } from './types';
+export interface IGrid {
+    layout: GridLayout;
+    rowGap?: string;
+}
+//# sourceMappingURL=IGrid.d.ts.map

package/dist/types/components/layouts/bds-grid/grid/types/enum.d.ts

@@ -0,0 +1,5 @@
+export declare const GRID_LAYOUT: {
+    readonly FIXED: "fixed";
+    readonly FLUID: "fluid";
+};
+//# sourceMappingURL=enum.d.ts.map

package/dist/types/components/layouts/bds-grid/grid/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './enum';
+export * from './IGrid';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/layouts/bds-grid/grid/types/types.d.ts

@@ -0,0 +1,3 @@
+import { GRID_LAYOUT } from './enum';
+export type GridLayout = (typeof GRID_LAYOUT)[keyof typeof GRID_LAYOUT];
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/layouts/bds-grid/grid-item/bds-grid-item.d.ts

@@ -0,0 +1,31 @@
+import { type IGridItem } from './types';
+/**
+ * Grid item child of `bds-grid`. Must be a direct child of `bds-grid`.
+ *
+ * @slot - Item content. The grid item manages position only — content styling is
+ *   the responsibility of the slotted element.
+ */
+export declare class BdsGridItem implements IGridItem {
+    el: HTMLBdsGridItemElement;
+    /** Column span at all breakpoints (fallback). `'full'` spans all columns (`grid-column: 1 / -1`). */
+    readonly colSpan: IGridItem['colSpan'];
+    /** Override col-span at the `sm` breakpoint (≥320px). */
+    readonly colSpanSm: IGridItem['colSpanSm'];
+    /** Override col-span at the `md` breakpoint (≥769px). */
+    readonly colSpanMd: IGridItem['colSpanMd'];
+    /** Override col-span at the `lg` breakpoint (≥960px). */
+    readonly colSpanLg: IGridItem['colSpanLg'];
+    /** Override col-span at the `xl` breakpoint (≥1152px). */
+    readonly colSpanXl: IGridItem['colSpanXl'];
+    /** Override col-span at the `2xl` breakpoint (≥1344px). */
+    readonly colSpan2xl: IGridItem['colSpan2xl'];
+    /** Row span. `'full'` maps to `grid-row: 1 / -1`. */
+    readonly rowSpan: IGridItem['rowSpan'];
+    /** Column offset: shifts the item right by N columns (0–11). */
+    readonly offset: IGridItem['offset'];
+    checkPropValues(): void;
+    componentWillLoad(): void;
+    private getHostStyles;
+    render(): any;
+}
+//# sourceMappingURL=bds-grid-item.d.ts.map

package/dist/types/components/layouts/bds-grid/grid-item/types/IGridItem.d.ts

@@ -0,0 +1,12 @@
+import { ColSpanValue, RowSpanValue } from './types';
+export interface IGridItem {
+    colSpan: ColSpanValue;
+    colSpanSm?: ColSpanValue;
+    colSpanMd?: ColSpanValue;
+    colSpanLg?: ColSpanValue;
+    colSpanXl?: ColSpanValue;
+    colSpan2xl?: ColSpanValue;
+    rowSpan?: RowSpanValue;
+    offset: number;
+}
+//# sourceMappingURL=IGridItem.d.ts.map

package/dist/types/components/layouts/bds-grid/grid-item/types/enum.d.ts

@@ -0,0 +1,11 @@
+export declare const GRID_ITEM_COL_SPAN: {
+    readonly SM_MAX: 4;
+    readonly MD_MAX: 8;
+    readonly LG_MAX: 12;
+    readonly XL_MAX: 12;
+    readonly XXL_MAX: 12;
+    readonly DEFAULT: 12;
+    readonly OFFSET_MIN: 0;
+    readonly OFFSET_MAX: 11;
+};
+//# sourceMappingURL=enum.d.ts.map

package/dist/types/components/layouts/bds-grid/grid-item/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './IGridItem';
+export * from './types';
+export * from './enum';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/layouts/bds-grid/grid-item/types/types.d.ts

@@ -0,0 +1,3 @@
+export type ColSpanValue = number | 'full';
+export type RowSpanValue = number | 'full';
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,147 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { BackdropHooks } from "../../../services/index";
+import { type IDialog } from './types';
+declare const BdsDialog_base: abstract new (...args: any[]) => {
+    dialogElement: HTMLDialogElement;
+    backdropClose: boolean;
+    escapeClose: boolean;
+    preventClose: boolean;
+    isClosing: boolean;
+    previousOverflow: string;
+    readonly hooks: BackdropHooks;
+    showElement(): void;
+    hideElement(): void;
+    closeElement(): void;
+    toggle(): void;
+    onAfterShow(target?: HTMLElement): void;
+    onAfterHide(target?: HTMLElement): void;
+    onBeforeClose(target?: HTMLElement): void;
+    handleBackdropClick(e: MouseEvent): void;
+    handleKeydown(ev: KeyboardEvent): void;
+    addTransitionAnimation(animationClassName: string): void;
+    removeTransitionAnimation(animationClassName: string): void;
+    floatingOptions: import("@/services").FloatingProp;
+    floatingContent: HTMLElement;
+    isVisible: boolean;
+    readonly options: import("@/services").FloatingMixinOptions;
+    onBeforeShow(target?: HTMLElement): boolean;
+    onBeforeHide(target?: HTMLElement): boolean;
+    show(target?: HTMLElement): void;
+    hide(target?: HTMLElement): void;
+};
+/**
+ * Modal dialog component for displaying content in an overlay.
+ *
+ * @summary Modal overlay for alerts, forms, and confirmations with customizable layout and behavior.
+ *
+ * @slot - Main content of the dialog body.
+ * @slot footer - Content for the dialog footer (e.g. action buttons).
+ *
+ * @attr {boolean} active - Controls dialog visibility.
+ * @attr {boolean} prevent-close - Disables closing the dialog.
+ * @attr {string} layout - Layout type: 'default', 'headerless', or 'footerless'.
+ * @attr {string} content-padding - Content padding: 'default' or 'none'.
+ * @attr {boolean} backdrop-close - Close on backdrop click.
+ * @attr {boolean} escape-close - Close on Escape key.
+ * @attr {string} size - Dialog size: 'sm', 'md', 'lg', or 'full'.
+ * @attr {string} variant - Visual variant: 'default', 'info', 'success', 'warning', or 'danger'.
+ * @attr {string} title-dialog - Dialog title text.
+ * @attr {boolean} maximizable - Show maximize button.
+ * @attr {boolean} closable - Show close button.
+ * @attr {string} width - Custom width for the dialog.
+ * @attr {string} height - Custom height for the dialog.
+ *
+ * @property {boolean} active - Controls whether the dialog is open.
+ * @property {boolean} preventClose - Disables closing the dialog.
+ * @property {string} height - Custom height for the dialog.
+ * @property {string} width - Custom width for the dialog.
+ * @property {string} layout - Layout type: 'default', 'headerless', or 'footerless'.
+ * @property {string} contentPadding - Content padding: 'default' or 'none'.
+ * @property {boolean} backdropClose - Close dialog when clicking the backdrop.
+ * @property {boolean} escapeClose - Close dialog when pressing Escape.
+ * @property {string} size - Dialog size: 'sm', 'md', 'lg', or 'full'.
+ * @property {string} variant - Visual variant: 'default', 'info', 'success', 'warning', or 'danger'.
+ * @property {string} titleDialog - Title text displayed in the header.
+ * @property {boolean} maximizable - Show maximize button.
+ * @property {boolean} closable - Hide the close button in the header.
+ *
+ * @fires bdsOpen - Emitted when the dialog opens.
+ * @fires bdsClose - Emitted when the dialog closes.
+ * @fires bdsMaximize - Emitted when the maximize button is clicked.
+ *
+ * @cssprop --bds-dialog-width - Custom width for the dialog.
+ * @cssprop --bds-dialog-height - Custom height for the dialog.
+ */
+export declare class BdsDialog extends BdsDialog_base implements IDialog {
+    private inheritedAttributes;
+    el: HTMLBdsDialogElement;
+    /** Controls whether the dialog is open. */
+    active: IDialog['active'];
+    /** Controls whether the dialog is closable. */
+    readonly preventClose: IDialog['preventClose'];
+    /** Dialog custom height */
+    readonly height: IDialog['height'];
+    /** Dialog custom width */
+    readonly width: IDialog['width'];
+    /** Layout type: 'default', 'headerless', or 'footerless'. */
+    readonly layout: IDialog['layout'];
+    /** Content padding: 'default' or 'none'. */
+    readonly contentPadding: IDialog['contentPadding'];
+    /** Close dialog when clicking the backdrop. */
+    readonly backdropClose: IDialog['backdropClose'];
+    /** Close dialog when pressing Escape. */
+    readonly escapeClose: IDialog['escapeClose'];
+    /** Dialog size: 'small', 'medium', 'large', or 'full'. */
+    readonly size: IDialog['size'];
+    /** Visual variant: 'default', 'info', 'success', 'warning', or 'danger'. */
+    readonly variant: IDialog['variant'];
+    /** Title text displayed in the header. */
+    readonly titleDialog: IDialog['titleDialog'];
+    /** Show maximize button to toggle full-screen. */
+    readonly maximizable: IDialog['maximizable'];
+    /** Hide the close button in the header. */
+    readonly closable: IDialog['closable'];
+    handleIsOpenChange(active: boolean): void;
+    /** Emitted when the dialog opens. */
+    bdsOpen: EventEmitter<void>;
+    /** Emitted when the dialog closes. */
+    bdsClose: EventEmitter<void>;
+    /** Emitted when the dialog maximize button is clicked. */
+    bdsMaximize: EventEmitter<void>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private checkPropValues;
+    private onDialogTransitionEnd;
+    private handleMaximize;
+    /**
+     * Opens the dialog programmatically.
+     * This method triggers the show functionality to display the dialog.
+     */
+    open(): Promise<void>;
+    /**
+     * Closes the dialog programmatically.
+     * This method triggers the close functionality to hide the dialog.
+     */
+    close(): Promise<void>;
+    private get isHeaderLeftVisible();
+    private get isHeaderRightVisible();
+    get hooks(): BackdropHooks;
+    /**
+     * Handles the transition logic before closing the dialog.
+     * Sets the active prop to false, removes the enter transition animation,
+     * and checks if there's a transition duration. If no transition, hides immediately;
+     * otherwise, the hide will be triggered after the transition ends.
+     */
+    private transitionBeforeClose;
+    private onOpenDialog;
+    private resetComponent;
+    /** Render helper functions */
+    private getVariantIcon;
+    private getStyles;
+    private getFixedSize;
+    private getHeaderLeftElement;
+    private getHeaderRightElement;
+    render(): any;
+}
+export {};
+//# sourceMappingURL=bds-dialog.d.ts.map

package/dist/types/components/overlays/bds-dialog/types/IDialog.d.ts

@@ -0,0 +1,17 @@
+import { DialogSizes, DialogLayout, DialogContentPadding, DialogVariants } from './types';
+export interface IDialog {
+    active: boolean;
+    layout: DialogLayout;
+    width: string;
+    height: string;
+    contentPadding: DialogContentPadding;
+    size: DialogSizes;
+    variant: DialogVariants;
+    titleDialog: string;
+    backdropClose: boolean;
+    escapeClose: boolean;
+    maximizable: boolean;
+    closable: boolean;
+    preventClose: boolean;
+}
+//# sourceMappingURL=IDialog.d.ts.map

package/dist/types/components/overlays/bds-dialog/types/enum.d.ts

@@ -0,0 +1,29 @@
+export declare const DIALOG_SIZES: {
+    readonly SMALL: "sm";
+    readonly MEDIUM: "md";
+    readonly LARGE: "lg";
+    readonly FULL: "full";
+};
+export declare const DIALOG_VARIANT: {
+    readonly DEFAULT: "default";
+    readonly INFO: "info";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+};
+export declare const DIALOG_VARIANT_ICON: {
+    readonly INFO: "bds-icon-info-circle-fill";
+    readonly SUCCESS: "bds-icon-check-circle-fill";
+    readonly WARNING: "bds-icon-info-major-triangle-up-fill";
+    readonly DANGER: "bds-icon-alert-circle-fill";
+};
+export declare const DIALOG_LAYOUT: {
+    readonly DEFAULT: "default";
+    readonly HEADERLESS: "headerless";
+    readonly FOOTERLESS: "footerless";
+};
+export declare const DIALOG_CONTENT_PADDING: {
+    readonly DEFAULT: "default";
+    readonly NONE: "none";
+};
+//# sourceMappingURL=enum.d.ts.map

package/dist/types/components/overlays/bds-dialog/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './enum';
+export * from './IDialog';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,6 @@
+import { DIALOG_CONTENT_PADDING, DIALOG_LAYOUT, DIALOG_SIZES, DIALOG_VARIANT } from './enum';
+export type DialogSizes = (typeof DIALOG_SIZES)[keyof typeof DIALOG_SIZES];
+export type DialogLayout = (typeof DIALOG_LAYOUT)[keyof typeof DIALOG_LAYOUT];
+export type DialogContentPadding = (typeof DIALOG_CONTENT_PADDING)[keyof typeof DIALOG_CONTENT_PADDING];
+export type DialogVariants = (typeof DIALOG_VARIANT)[keyof typeof DIALOG_VARIANT];
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,209 @@
+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;
+    hideFocus(): void;
+    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/constants/Offset.d.ts

@@ -0,0 +1,2 @@
+export declare const OFFSET = 11;
+//# sourceMappingURL=Offset.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