bromcom-ui-next 0.1.4 → 0.1.6

package/dist/types/components/radio-group/radio-group.component.d.ts

@@ -0,0 +1,124 @@
+/**
+ * @component BcmRadioGroup
+ * @description A radio group component that manages a collection of `bcm-radio` components, ensuring only one radio button is selected at a time.
+ * Supports horizontal or vertical layouts, various sizes, and states such as disabled, required, and error.
+ *
+ * @example
+ * <bcm-radio-group name="group1" size="medium" direction="vertical" label="Select an option">
+ *   <bcm-radio label="Option 1" value="1"></bcm-radio>
+ *   <bcm-radio label="Option 2" value="2"></bcm-radio>
+ * </bcm-radio-group>
+ *
+ * @example Radio group with error state and caption
+ * <bcm-radio-group name="group1" error={true} caption-text="Please select an option">
+ *   <bcm-radio label="Option 1" value="1"></bcm-radio>
+ *   <bcm-radio label="Option 2" value="2"></bcm-radio>
+ * </bcm-radio-group>
+ *
+ * @prop {string} name - The name attribute for the radio group, used to group radio buttons.
+ * @defaultValue undefined
+ * @prop {string} value - The currently selected value of the radio group.
+ * @defaultValue undefined
+ * @prop {boolean} disabled - Whether the radio group and its radio buttons are disabled.
+ * @defaultValue false
+ * @prop {boolean} required - Whether the radio group is required in a form.
+ * @defaultValue false
+ * @prop {boolean} error - Whether the radio group is in an error state.
+ * @defaultValue false
+ * @prop {string} label - The label text to display above the radio group.
+ * @defaultValue undefined
+ * @prop {RadioSize} size - Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.
+ * @defaultValue 'medium'
+ * @prop {Direction} direction - The layout direction of the radio buttons: 'horizontal' | 'vertical'.
+ * @defaultValue 'vertical'
+ * @prop {string} captionText - Optional caption text to display below the radio group, often used for error messages or hints.
+ * @defaultValue undefined
+ *
+ * @event {EventEmitter<HTMLBcmRadioElement>} bcmRadioGroupChange - Emitted when the selected radio button changes, passing the selected radio element.
+ *
+ * @method setClear - Clears the selected value and unchecks all radio buttons.
+ * @method resetCaption - Resets the error state and caption.
+ *
+ * @csspart host - The root element of the radio group.
+ * @csspart container - The container for the radio buttons.
+ * @csspart label - The label element above the radio group.
+ * @csspart caption - The caption text below the radio group.
+ */
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class BcmRadioGroup implements ComponentInterface {
+    host: HTMLBcmRadioGroupElement;
+    /**
+     * The name attribute for the radio group, used to group radio buttons.
+     * @prop
+     * @defaultValue undefined
+     */
+    name: string;
+    /**
+     * The currently selected value of the radio group.
+     * @prop
+     * @defaultValue undefined
+     */
+    value: string;
+    /**
+     * Whether the radio group and its radio buttons are disabled.
+     * @prop
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Whether the radio group is required in a form.
+     * @prop
+     * @defaultValue false
+     */
+    required: boolean;
+    /**
+     * Whether the radio group is in an error state.
+     * @prop
+     * @defaultValue false
+     */
+    error: boolean;
+    /**
+     * The label text to display above the radio group.
+     * @prop
+     * @defaultValue undefined
+     */
+    label: string;
+    /**
+     * Defines the size of the radio group and its radio buttons: 'small' | 'medium' | 'large'.
+     * @prop
+     * @defaultValue 'medium'
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * The layout direction of the radio buttons: 'horizontal' | 'vertical'.
+     * @prop
+     * @defaultValue 'vertical'
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * Optional caption text to display below the radio group, often used for error messages or hints.
+     * @prop
+     * @defaultValue undefined
+     */
+    captionText?: string;
+    bcmRadioGroupChange: EventEmitter<any>;
+    private readonly radioGroupName;
+    get radios(): NodeListOf<HTMLBcmRadioElement>;
+    componentWillLoad(): void;
+    /**
+     * Clears the selected value (sets it to an empty string) and unchecks all radio buttons.
+     * @method
+     */
+    setClear(): Promise<void>;
+    /**
+     * Resets the error state and caption.
+     * @method
+     */
+    resetCaption(): Promise<void>;
+    private handleSlotChange;
+    handleValueChange(newValue: string): void;
+    handleRadioChange(event: CustomEvent): void;
+    private updateRadios;
+    private radioGroupClass;
+    render(): any;
+}

package/dist/types/components/segmented-picker/segmented-picker-option.component.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SegmentedPickerSize } from './types';
+export declare class BcmSegmentedPickerOption {
+    host: HTMLElement;
+    /** Option value */
+    value: string;
+    /** Option display label */
+    label?: string;
+    /** Controls the option size */
+    size?: SegmentedPickerSize;
+    /** Whether this option is selected */
+    selected: boolean;
+    /** Whether this option is disabled */
+    disabled: boolean;
+    /** Click event */
+    bcmOptionClick: EventEmitter<string>;
+    private parentValueObserver;
+    private parentRef;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private setupValueObserver;
+    private isValueSelected;
+    private getSizeFromParent;
+    private isDisabled;
+    private handleClick;
+    getWidth(): Promise<number>;
+    private optionClass;
+    render(): any;
+}

package/dist/types/components/segmented-picker/segmented-picker.component.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { SegmentedPickerSize } from './types';
+export declare class BcmSegmentedPicker {
+    host: HTMLElement;
+    /** Controls the component size */
+    size: SegmentedPickerSize;
+    /** The selected option value */
+    value?: string;
+    /** Disabled state */
+    disabled: boolean;
+    /** Full width component */
+    fullWidth: boolean;
+    /** Change event */
+    bcmChange: EventEmitter<{
+        value: string;
+    }>;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    indicatorStyles: {
+        left: string;
+        width: string;
+        transition: string;
+    };
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    valueChanged(): void;
+    handleOptionClick(event: CustomEvent<string>): void;
+    private parseOptions;
+    private updateIndicatorPosition;
+    private segmentedClass;
+    render(): any;
+}

package/dist/types/components/segmented-picker/types.d.ts

@@ -0,0 +1 @@
+export type SegmentedPickerSize = 'small' | 'medium' | 'large';

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

@@ -0,0 +1,62 @@
+import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @component BcmSwitch
+ * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.
+ * Supports different sizes, label positions, error states, and accessibility features.
+ *
+ * @example Basic usage
+ * <bcm-switch label="Enable notifications"></bcm-switch>
+ *
+ * @example With error state
+ * <bcm-switch
+ *   label="Accept terms"
+ *   error={true}
+ *   caption="You must accept the terms to continue">
+ * </bcm-switch>
+ *
+ * @example Disabled state
+ * <bcm-switch
+ *   label="Advanced features"
+ *   disabled={true}>
+ * </bcm-switch>
+ *
+ * @example With custom size and label position
+ * <bcm-switch
+ *   label="Dark mode"
+ *   size="large"
+ *   labelPosition="left">
+ * </bcm-switch>
+ */
+export declare class BcmSwitch implements ComponentInterface {
+    /** Reference to the host element */
+    el: HTMLElement;
+    /** Whether the switch is checked or not */
+    checked: boolean;
+    /** Whether the switch is disabled */
+    disabled: boolean;
+    /** The name attribute for the hidden input element */
+    name: string;
+    /** The value attribute for the hidden input element */
+    value: string;
+    /** Text label for the switch */
+    label: string;
+    /** Position of the label relative to the switch */
+    labelPosition: 'left' | 'right';
+    /** Whether to display the switch in an error state */
+    error: boolean;
+    /** Text to display as an error message when error is true */
+    caption?: string;
+    /** Size variant of the switch */
+    size: 'small' | 'medium' | 'large';
+    /** Whether the switch is in readonly mode */
+    readonly: boolean;
+    /** Whether the switch is required in a form */
+    required: boolean;
+    /** Emitted when the switch state changes */
+    bcmSwitchChange: EventEmitter<boolean>;
+    private switchId;
+    private toggleSwitch;
+    private switchStyle;
+    private switchClass;
+    render(): any;
+}

package/dist/types/components/tabs/tabs-content.component.d.ts

@@ -0,0 +1,13 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @description Tab content panel component that displays when its corresponding tab is selected
+ * @slot - Default slot for the tab panel content
+ */
+export declare class BcmTabsContent implements ComponentInterface {
+    /**
+     * Unique identifier that matches a tab trigger's value
+     * Used to associate this content with its corresponding tab
+     */
+    value: string;
+    render(): any;
+}

package/dist/types/components/tabs/tabs-list.component.d.ts

@@ -0,0 +1,12 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @description Container component for tab triggers that includes the sliding indicator (inkbar)
+ * @slot - Default slot for tab trigger elements
+ */
+export declare class BcmTabsList implements ComponentInterface {
+    /**
+     * Tailwind variants configuration for styling the tabs list container and inkbar
+     */
+    private class;
+    render(): any;
+}

package/dist/types/components/tabs/tabs-trigger.component.d.ts

@@ -0,0 +1,41 @@
+import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @description Tab trigger component that functions as a clickable tab button
+ * @slot - Default slot for tab label content
+ */
+export declare class BcmTabsTrigger implements ComponentInterface {
+    /**
+     * Reference to the host element
+     */
+    el: HTMLElement;
+    /**
+     * Unique identifier value for the tab
+     */
+    value: string;
+    /**
+     * Whether the tab is currently active
+     */
+    active: boolean;
+    /**
+     * Size of the tab
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Whether the tab is disabled
+     */
+    disabled: boolean;
+    /**
+     * Event emitted when this tab is selected
+     */
+    bcmTabSelected: EventEmitter<string>;
+    /**
+     * Handles click events on the tab
+     * Emits bcmTabSelected event with tab value if not disabled
+     */
+    private handleClick;
+    /**
+     * Tailwind variants configuration for styling
+     */
+    private class;
+    render(): any;
+}

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

@@ -0,0 +1,88 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @description Tab interface component
+ * @slot - Default slot for content area
+ * @slot tabs-list - Special slot for tab list
+ */
+export declare class BcmTabs implements ComponentInterface {
+    el: HTMLElement;
+    /**
+     * Default active tab value
+     */
+    defaultValue: string;
+    /**
+     * Tab size
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Triggers when tab changes
+     */
+    bcmTabChange: EventEmitter<{
+        activeTab: string;
+        element: HTMLBcmTabsTriggerElement;
+        previousTab?: string;
+    }>;
+    /**
+     * Active tab value
+     */
+    activeTab: string;
+    /**
+     * Previous active tab value
+     */
+    previousTab: string;
+    private triggers;
+    private contents;
+    private tabsList;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * Refreshes DOM element references
+     */
+    private refreshElementReferences;
+    /**
+     * Establishes relationships between tabs and content
+     */
+    private setupRelations;
+    private updateTriggerProperties;
+    handleSizeChange(): void;
+    disableTab(value: string): Promise<void>;
+    enableTab(value: string): Promise<void>;
+    /**
+     * Disables all tabs
+     */
+    disableAllTabs(): Promise<void>;
+    /**
+     * Enables all tabs
+     */
+    enableAllTabs(): Promise<void>;
+    /**
+     * Returns the active tab value
+     */
+    getActiveTab(): Promise<string>;
+    /**
+     * Sets the active tab
+     */
+    setActiveTab(value: string): Promise<void>;
+    /**
+     * Updates tab status
+     */
+    private updateTabStatus;
+    handleResize(): void;
+    /**
+     * Triggered when a tab is selected
+     */
+    handleTabSelected(event: CustomEvent<string>): void;
+    /**
+     * Updates content visibility
+     */
+    private updateContentVisibility;
+    /**
+     * Updates inkbar position
+     */
+    private updateInkbar;
+    /**
+     * Tab container class
+     */
+    private tabClass;
+    render(): any;
+}

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

@@ -0,0 +1,86 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @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.
+ *
+ * @example Basic Hover Tooltip
+ * <bcm-tooltip trigger="hover" size="medium" placement="top" message="This is a tooltip.">
+ *   <bcm-button>Hover Me</bcm-button>
+ * </bcm-tooltip>
+ *
+ * @example Click Tooltip with Programmatic Control
+ * <bcm-tooltip id="my-tooltip" trigger="click" message="Controlled tooltip.">
+ *   <bcm-button>Click Me</bcm-button>
+ * </bcm-tooltip>
+ * <script>
+ *   const tooltip = document.querySelector('#my-tooltip');
+ *   tooltip.openTooltip(); // Opens the tooltip
+ *   tooltip.closeTooltip(); // Closes the tooltip
+ * </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
+ */
+export declare class Tooltip implements ComponentInterface {
+    el: HTMLElement;
+    /**
+     * @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'
+     */
+    trigger: 'click' | 'hover';
+    /**
+     * @prop {('top' | 'right' | 'bottom' | 'left')} placement - Defines the position of the tooltip relative to the target element.
+     * Default: 'top'
+     */
+    placement: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * @prop {('small' | 'medium' | 'large')} size - Defines the size of the tooltip.
+     * Controls the text size and padding of the tooltip content.
+     * Default: 'medium'
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * @prop {string} message - Custom text for the tooltip content.
+     * Used as fallback content if the 'tooltip' slot is not provided.
+     */
+    message: string;
+    /**
+     * @prop {number} showDelay - Delay in milliseconds before showing or hiding the tooltip.
+     * Helps prevent flickering on quick mouse movements.
+     * Default: 150
+     */
+    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.
+     */
+    openTooltip(): Promise<void>;
+    /**
+     * @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.
+     */
+    closeTooltip(): Promise<void>;
+    private handleSlotChange;
+    private handleOutsideClick;
+    private updatePosition;
+    private tooltipClass;
+    render(): any;
+}