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

package/dist/types/components/forms/bds-checkbox/bds-checkbox-group/types/ICheckboxGroup.d.ts

@@ -0,0 +1,27 @@
+import { Orientation } from "../../../../../types/index";
+import { CheckboxGroupType } from './types';
+/**
+ * Event detail emitted when checkbox selection changes.
+ * Contains the updated array of selected values.
+ */
+export interface CheckboxGroupChangeDetail {
+    value: string[];
+}
+/**
+ * Public API surface for the checkbox group component.
+ * Defines all configurable properties for checkbox group behavior and presentation.
+ */
+export interface ICheckboxGroup {
+    name: string;
+    value: string[];
+    label: string;
+    helperText: string;
+    errorMessage: string;
+    info: string;
+    orientation: Orientation;
+    disabled: boolean;
+    required: boolean;
+    error: boolean;
+    type: CheckboxGroupType;
+}
+//# sourceMappingURL=ICheckboxGroup.d.ts.map

package/dist/types/components/forms/bds-checkbox/bds-checkbox-group/types/enum.d.ts

@@ -0,0 +1,6 @@
+export declare const CHECKBOX_GROUP_TYPES: {
+    readonly CHECKBOX: "checkbox";
+    readonly CHECKBOX_BUTTON: "checkboxbutton";
+    readonly CHECKBOX_CARD: "checkboxcard";
+};
+//# sourceMappingURL=enum.d.ts.map

package/dist/types/components/forms/bds-checkbox/bds-checkbox-group/types/index.d.ts

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

package/dist/types/components/forms/bds-checkbox/bds-checkbox-group/types/types.d.ts

@@ -0,0 +1,4 @@
+import { CHECKBOX_GROUP_TYPES } from './enum';
+export type CheckboxGroupType = (typeof CHECKBOX_GROUP_TYPES)[keyof typeof CHECKBOX_GROUP_TYPES];
+export type LeafElement = HTMLBdsCheckboxElement | HTMLBdsCheckboxCardElement | HTMLBdsCheckboxButtonElement;
+//# sourceMappingURL=types.d.ts.map

package/dist/types/components/forms/bds-checkbox/types/ICheckbox.d.ts

@@ -1,36 +1,21 @@
 import type { EventEmitter } from '../../../../stencil-public-runtime';
-/**
- * Payload emitted by the `bdsChange` event when the user toggles the checkbox.
- *
- * Exported so consumers can type their event handlers:
- * ```typescript
- * import type { CheckboxChangeDetail } from '@telesign/boreal-web-components';
- *
- * checkbox.addEventListener('bdsChange', (e: CustomEvent<CheckboxChangeDetail>) => {
- *   console.log(e.detail.checked, e.detail.value);
- * });
- * ```
- */
 export interface CheckboxChangeDetail {
-    /** Whether the checkbox is now checked. */
     checked: boolean;
-    /** The value associated with the checkbox. */
     value: string;
 }
 export interface ICheckbox {
-    /** Current checked state. */
+    name: string;
     checked: boolean;
-    /** Indeterminate visual state (neither fully checked nor unchecked). */
-    indeterminate: boolean;
-    /** Shows error styling. */
+    indeterminate?: boolean;
+    required: boolean;
     error: boolean;
-    /** Value submitted with the form when checked. */
     value: string;
-    /** Label text. If not provided, use the default slot. */
     label: string;
-    /** Emitted on every checked change. */
     valueChange: EventEmitter<boolean>;
-    /** Emitted when the user toggles the checkbox. */
     bdsChange: EventEmitter<CheckboxChangeDetail>;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    el: HTMLBdsCheckboxElement | HTMLBdsCheckboxCardElement | HTMLBdsCheckboxButtonElement;
+    internals: ElementInternals;
 }
 //# sourceMappingURL=ICheckbox.d.ts.map

package/dist/types/components/forms/bds-checkbox/utils/checkbox-form-association.d.ts

@@ -0,0 +1,10 @@
+import { IFormControl } from "../../../../mixins/index";
+import { ICheckbox } from '../types/ICheckbox';
+export declare function useFormCheckbox(component: ICheckbox & IFormControl<boolean>, value: string): {
+    syncFormValue: () => void;
+    formAssociatedCallback: () => void;
+    formResetCallback: () => void;
+    formStateRestoreCallback: (restoreState: string) => void;
+    formDisabledCallback: (disabled: boolean) => void;
+};
+//# sourceMappingURL=checkbox-form-association.d.ts.map

package/dist/types/components/forms/bds-checkbox/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './checkbox-form-association';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/forms/bds-radio/bds-radio/bds-radio.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import type { IRadio, RadioChangeDetail } from './types/IRadio';
+/**
+ * Radio button component for single-selection within a group.
+ * Use inside `bds-radio-group` for managed selection and form binding.
+ * Can also be used standalone with the `name`, `value`, and `checked` props.
+ *
+ * @slot - Label content when no `label` prop is provided.
+ * @slot icon - Optional icon rendered to the left of the label.
+ */
+export declare class BdsRadio implements IRadio {
+    el: HTMLBdsRadioElement;
+    /** Whether this radio is selected. Managed by bds-radio-group; can be set directly when used standalone. */
+    checked: boolean;
+    /** Disables the radio, preventing interaction and selection. */
+    readonly disabled: boolean;
+    /** Value submitted with the form when this radio is selected. */
+    readonly value: string;
+    /** Name attribute stamped by the parent bds-radio-group via setAttribute. Set directly when used standalone. */
+    readonly name: string;
+    /** Label text displayed next to the radio indicator. Falls back to the default slot when empty. */
+    readonly label: string;
+    /** Shows error styling on the radio indicator. Propagated by bds-radio-group. */
+    readonly error: boolean;
+    /** Tooltip text shown on an info icon next to the label. */
+    readonly info: string;
+    /** Emitted when the user selects this radio. Listened to by the parent bds-radio-group to enforce single selection. */
+    bdsChange: EventEmitter<RadioChangeDetail>;
+    componentDidLoad(): void;
+    private select;
+    private handleClick;
+    private handleKeyDown;
+    private get classMap();
+    render(): any;
+}
+//# sourceMappingURL=bds-radio.d.ts.map

package/dist/types/components/forms/bds-radio/bds-radio/types/IRadio.d.ts

@@ -0,0 +1,13 @@
+export interface RadioChangeDetail {
+    checked: boolean;
+    value: string;
+}
+export interface IRadio {
+    checked: boolean;
+    disabled: boolean;
+    error: boolean;
+    value: string;
+    name: string;
+    label: string;
+}
+//# sourceMappingURL=IRadio.d.ts.map

package/dist/types/components/forms/bds-radio/bds-radio-button/bds-radio-button.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import type { IRadioButton, RadioButtonChangeDetail } from './types/IRadioButton';
+/**
+ * Button-shaped radio option for use inside `bds-radio-group[type="radiobutton"]`.
+ * Creates a segmented control appearance when grouped. Not form-associated — the parent
+ * `bds-radio-group` owns form state and single-selection enforcement.
+ *
+ * @slot - Label content when no `label` prop is provided.
+ * @slot icon - Optional icon rendered to the left of the label.
+ */
+export declare class BdsRadioButton implements IRadioButton {
+    el: HTMLBdsRadioButtonElement;
+    /** Whether this button is selected. Managed by bds-radio-group; can be set directly when used standalone. */
+    checked: boolean;
+    /** Disables the button, preventing interaction and selection. */
+    readonly disabled: boolean;
+    /** Shows error styling on the button. Propagated by bds-radio-group. */
+    readonly error: boolean;
+    /** Value submitted with the form when this button is selected. */
+    readonly value: string;
+    /** Name attribute stamped by the parent bds-radio-group via setAttribute. Set directly when used standalone. */
+    readonly name: string;
+    /** Label text displayed inside the button. Falls back to the default slot when empty. */
+    readonly label: string;
+    /** Tooltip text shown on an info icon next to the label. */
+    readonly info: string;
+    /** Emitted when the user selects this button. Listened to by the parent bds-radio-group to enforce single selection. */
+    bdsChange: EventEmitter<RadioButtonChangeDetail>;
+    componentDidLoad(): void;
+    private select;
+    private handleClick;
+    private handleKeyDown;
+    private get classMap();
+    render(): any;
+}
+//# sourceMappingURL=bds-radio-button.d.ts.map

package/dist/types/components/forms/bds-radio/bds-radio-button/types/IRadioButton.d.ts

@@ -0,0 +1,14 @@
+export interface RadioButtonChangeDetail {
+    checked: boolean;
+    value: string;
+}
+export interface IRadioButton {
+    name: string;
+    value: string;
+    label: string;
+    info: string;
+    checked: boolean;
+    disabled: boolean;
+    error: boolean;
+}
+//# sourceMappingURL=IRadioButton.d.ts.map

package/dist/types/components/forms/bds-radio/bds-radio-card/bds-radio-card.d.ts

@@ -0,0 +1,57 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { IRadioCard, RadioCardChangeDetail } from './types/IRadioCard';
+/**
+ * Radio card component is a selectable card-based radio option.
+ * It presents a mutually exclusive choice with optional descriptive text and icon,
+ * designed for integration with bds-radio-group for orchestration.
+ * Can also be used standalone with the `name`, `value`, and `checked` props.
+ *
+ * @slot - Label content when no `label` prop is provided.
+ * @slot icon - Optional icon rendered to the left of the label.
+ * @slot description - Optional descriptive text rendered below the label.
+ *
+ * @fires bdsChange - Emitted when the user selects this radio card. Listened to by the parent bds-radio-group to enforce single selection.
+ */
+export declare class BdsRadioCard implements IRadioCard {
+    el: HTMLBdsRadioCardElement;
+    /**
+     * Value submitted with the form when this radio is selected.
+     */
+    readonly value: IRadioCard['value'];
+    /**
+     * Tooltip content attached to the radio card content. If empty, the info icon will not be rendered.
+     */
+    readonly info: IRadioCard['info'];
+    /**
+     * Name attribute stamped by the parent bds-radio-group. Set directly when used standalone.
+     */
+    readonly name: IRadioCard['name'];
+    /**
+     * Label text displayed next to the radio indicator. Falls back to the default slot when empty.
+     */
+    readonly label: IRadioCard['label'];
+    /**
+     * Whether this radio card is selected. Managed by bds-radio-group; can be set directly when used standalone.
+     */
+    checked: IRadioCard['checked'];
+    /**
+     * Disables the radio card, preventing it from being selected and interacted with.
+     */
+    readonly disabled: IRadioCard['disabled'];
+    /**
+     * Whether the radio card is in an error state.
+     */
+    readonly error: IRadioCard['error'];
+    /**
+     * Emitted when the user selects this radio. Listened to by the parent bds-radio-group to enforce single selection.
+     */
+    bdsChange: EventEmitter<RadioCardChangeDetail>;
+    private select;
+    private handleClick;
+    private handleKeyDown;
+    componentDidLoad(): void;
+    private get isError();
+    private get hostClasses();
+    render(): any;
+}
+//# sourceMappingURL=bds-radio-card.d.ts.map

package/dist/types/components/forms/bds-radio/bds-radio-card/types/IRadioCard.d.ts

@@ -0,0 +1,14 @@
+export interface RadioCardChangeDetail {
+    checked: boolean;
+    value: string;
+}
+export interface IRadioCard {
+    checked: boolean;
+    disabled: boolean;
+    error: boolean;
+    value: string;
+    name: string;
+    info: string;
+    label: string;
+}
+//# sourceMappingURL=IRadioCard.d.ts.map

package/dist/types/components/forms/bds-radio/bds-radio-group/bds-radio-group.d.ts

@@ -0,0 +1,85 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import type { IRadioGroup, RadioGroupChangeDetail } from './types/IRadioGroup';
+import { type IFormControl } from "../../../../mixins/form-associated.mixin";
+import { Orientation } from "../../../../types/index";
+import { RadioGroupType } from './types/types';
+declare const BdsRadioGroup_base: abstract new (...args: any[]) => {
+    formDisabledCallback(disabled: boolean): void;
+};
+/**
+ * Radio group component that orchestrates single-selection across a set of `bds-radio` children.
+ *
+ * @slot - Default slot for `bds-radio` child elements.
+ */
+export declare class BdsRadioGroup extends BdsRadioGroup_base implements IRadioGroup, IFormControl<string> {
+    private readonly _id;
+    internals: ElementInternals;
+    el: HTMLBdsRadioGroupElement;
+    /** Internal mirror of the `disabled` prop, kept in sync via `@Watch` and `formDisabledCallback`. */
+    private isDisabled;
+    /** Set to true when native form validation fires the `invalid` event; cleared on reset or when value becomes valid. */
+    private isInvalid;
+    /** Disables all child radios and prevents selection. Also mirrored to isDisabled @State for form-level disable support. */
+    readonly disabled: boolean;
+    /** Shows error styling on the group helper text. Propagated to all child radios. */
+    readonly error: boolean;
+    /** Error message rendered below the radio options when error is true. Replaces helperText. */
+    readonly errorMessage: string;
+    /** Helper text rendered below the radio options. Shown in default state; replaced by errorMessage in error state. */
+    readonly helperText: string;
+    /** Tooltip text shown on the group label info icon. */
+    readonly info: string;
+    /** Group label rendered above the radio options. */
+    readonly label: string;
+    /** Name of the form control; submitted as the field key in FormData. */
+    readonly name: string;
+    /** Layout direction of the radio options. */
+    readonly orientation: Orientation;
+    /** Marks the group as required for form submission. Triggers validity error when no radio is selected. */
+    readonly required: boolean;
+    /** Identifies this group variant. 'radio' renders circular bds-radio children; 'radiobutton' renders bds-radio-button segmented control; 'radiocard' renders bds-radio-card element. */
+    readonly type: RadioGroupType;
+    /** Currently selected radio value. Synced to children on change. */
+    value: string;
+    /** Hides the divider between radio buttons when type is 'radiobutton'. */
+    readonly joined: boolean;
+    onJoinedChange(): void;
+    checkPropValues(): void;
+    onDisabledChange(next: boolean): void;
+    onErrorChange(val: boolean): void;
+    onValueChange(val: string): void;
+    /** Emitted when the selected radio changes. Payload includes the new value. */
+    bdsChange: EventEmitter<RadioGroupChangeDetail>;
+    /** Emitted when the selected radio changes. Used for v-model two-way binding in Vue. */
+    valueChange: EventEmitter<string>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: unknown, _mode: string): void;
+    formDisabledCallback(disabled: boolean): void;
+    handleRadioChange(event: CustomEvent<{
+        checked: boolean;
+        value: string;
+    }>): void;
+    handleInvalid(event: Event): void;
+    private handleKeyDown;
+    private handleSlotChange;
+    /** Returns whether the group's current value satisfies the browser's built-in constraint validation. */
+    checkValidity(): Promise<boolean>;
+    /** Reports the group's validity state to the user, showing native validation UI if invalid. */
+    reportValidity(): Promise<boolean>;
+    private navigateTo;
+    private _buttonCount;
+    private insertDividers;
+    private get radioElements();
+    private syncFormValue;
+    private updateFormValidity;
+    private updateLayoutCount;
+    private updateTabIndexes;
+    private get isError();
+    private get classMap();
+    render(): any;
+}
+export {};
+//# sourceMappingURL=bds-radio-group.d.ts.map

package/dist/types/components/forms/bds-radio/bds-radio-group/types/IRadioGroup.d.ts

@@ -0,0 +1,20 @@
+import { Orientation } from "../../../../../types/index";
+import { RadioGroupType } from './types';
+export interface RadioGroupChangeDetail {
+    value: string;
+}
+export interface IRadioGroup {
+    name: string;
+    value?: string;
+    label?: string;
+    helperText?: string;
+    errorMessage?: string;
+    info?: string;
+    joined?: boolean;
+    orientation?: Orientation;
+    type?: RadioGroupType;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+}
+//# sourceMappingURL=IRadioGroup.d.ts.map

package/dist/types/components/forms/bds-radio/bds-radio-group/types/enum.d.ts

@@ -0,0 +1,6 @@
+export declare const RADIO_GROUP_TYPES: {
+    readonly RADIO: "radio";
+    readonly RADIO_BUTTON: "radiobutton";
+    readonly RADIO_CARD: "radiocard";
+};
+//# sourceMappingURL=enum.d.ts.map

package/dist/types/components/forms/bds-radio/bds-radio-group/types/types.d.ts

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

package/dist/types/components/forms/bds-select/bds-select.d.ts

@@ -0,0 +1,98 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { ISelect } from './types/ISelect';
+/**
+ * Component representing a select dropdown, allowing users to choose an option from a list.
+ * It consists of a text field that triggers the dropdown and a list menu that contains the options.
+ * The component supports both single selection and searchable functionality.
+ *
+ * @slot field - The text field element that triggers the select dropdown. It should be a `bds-text-field` component.
+ * @slot list - The list menu element that contains the options for the select dropdown. It should be a `bds-list-menu` component.
+ */
+export declare class BdsSelect implements ISelect {
+    el: HTMLBdsSelectElement;
+    private inheritedAttributes;
+    private hostForm;
+    /** The value of the select component. */
+    value: string;
+    /** Prop to define if its searchable. It allows to write and filter the options */
+    readonly searchable: boolean;
+    /** Name to assign in form */
+    readonly name: string;
+    /** The string representation of the value. */
+    valueString: string;
+    /** state to manage popover visibility */
+    popoverVisible: boolean;
+    /** Emitted when the selection change the value */
+    bdsChange: EventEmitter<string>;
+    /** Emit value Change for vue implementation */
+    valueChange: EventEmitter<string>;
+    /** State for id components for aria controls */
+    private listId;
+    /** Flag to suppress focus-triggered open when focus originated from a mousedown inside the component */
+    private _preventFocusOpen;
+    /** Watch popover visible */
+    watchPopoverVisible(newValue: boolean): void;
+    /** Watch value */
+    watchValue(): void;
+    /** Watch valueString */
+    watchValueString(newValue: string): void;
+    /** Lifecycle method called before the component is loaded */
+    componentWillLoad(): void;
+    /** Lifecycle method called after the component has loaded. */
+    componentDidLoad(): void;
+    /** Lifecycle method called when the component is disconnected from the DOM */
+    disconnectedCallback(): void;
+    /** Get for the list menu element in runtime */
+    private get bdsList();
+    /** Get for the text field element in runtime */
+    private get bdsField();
+    /** Get for the input element inside the text field in runtime */
+    private get bdsInput();
+    /** Get for the popover element in runtime */
+    private get bdsPopover();
+    /** Assigns event listeners to the relevant elements. */
+    private assignListeners;
+    /** Removes event listeners from the relevant elements. */
+    private removeListeners;
+    /** Loads the default properties for the select component. */
+    private loadDefaultProps;
+    /** load default props for textfield */
+    private loadDefaultTextFieldProps;
+    /** load default props to list menu */
+    private loadDefaultListMenuProps;
+    /** set value emitting event */
+    private setValue;
+    /** Listens for changes in the list menu. */
+    private listenListMenu;
+    /** Listen clear input */
+    private listenClearInput;
+    /** Listens for changes in the text field. When is clear and input is empty, resets the child elements. */
+    private listenField;
+    /** Listen blur input to reset on leave */
+    private listenBlurInput;
+    /** Intercepts Tab while the popover is open and moves focus to the selected item, or first available item */
+    private listenKeydown;
+    /** Sets the flag that suppresses focus-open when focus was caused by a mousedown inside the component */
+    private listenMouseDown;
+    /** Opens the popover when the searchable input receives focus from keyboard (Tab), not from click */
+    private listenFocusInput;
+    /** Prevents bds-text-field's own valueChange from bubbling up — bds-select emits its own */
+    private stopFieldValueChange;
+    /** Resets component state when the parent form is reset */
+    private listenFormReset;
+    /** Listens for changes in the popover visibility and updates the state accordingly. */
+    private listenPopOver;
+    /** Resets the value field */
+    private resetValueField;
+    /** Searches for elements in the list menu based on the input text. */
+    private searcherElement;
+    /** Shows the parent label of a given item. */
+    private showParentLabel;
+    /** Resets the children elements of the list menu, making them all visible. */
+    private resetChildren;
+    /** Load value */
+    private loadValue;
+    /** Main Render */
+    render(): any;
+}
+//# sourceMappingURL=bds-select.d.ts.map

package/dist/types/components/forms/bds-select/types/ISelect.d.ts

@@ -0,0 +1,6 @@
+export interface ISelect {
+    value: string;
+    searchable: boolean;
+    name: string;
+}
+//# sourceMappingURL=ISelect.d.ts.map