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

package/dist/types/components/forms/bds-flag/types/Shape.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The shape of the flag.
+ * The Shape object defines the possible values for the shape, which can be 'circle', 'square', or 'rectangle'.
+ * The default value is 'rectangle'.
+ */
+export declare const Shape: {
+    readonly CIRCLE: "circle";
+    readonly SQUARE: "square";
+    readonly RECTANGLE: "rectangle";
+};
+export type Shape = (typeof Shape)[keyof typeof Shape];
+//# sourceMappingURL=Shape.d.ts.map

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

@@ -0,0 +1,3 @@
+export * from './Flag';
+export * from './Shape';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/forms/bds-text-field/bds-text-field.d.ts

@@ -0,0 +1,196 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { type IFormControl } from "../../../mixins/index";
+import type { IFormValidator } from "../../../types/index";
+import { ITextField, TextFieldType, TextFieldVariant, TextFieldValidationTiming } from './types';
+declare const BdsTextField_base: abstract new (...args: any[]) => {
+    formDisabledCallback(disabled: boolean): void;
+};
+/**
+ * Text field component for user input with validation and form integration.
+ *
+ * @summary Single-line text input with label, validation, password toggle, and clear action.
+ *
+ * @slot prefix - Inline content rendered before the input (e.g. icon or status indicator). Intended for single-line elements only; multi-line content will be clipped.
+ *
+ * @attr {string} name - The name submitted with the form.
+ * @attr {string} value - The current value of the input.
+ * @attr {boolean} disabled - Disables the input.
+ * @attr {boolean} required - Marks the input as required.
+ * @attr {boolean} error - Applies the error visual state.
+ * @attr {"text"|"password"} type - Input type.
+ * @attr {"outline"|"plain"} variant - Visual style of the container.
+ * @attr {boolean} readonly - Makes the input read-only. The value is still submitted with the form.
+ *
+ * @property {string} label - Label text rendered above the input.
+ * @property {string} sublabel - Sublabel rendered inside the input container, before the text area.
+ * @property {string} placeholder - Native placeholder forwarded to the inner `<input>`.
+ * @property {string} helperText - Assistive text shown below the input when there is no error.
+ * @property {string} errorMessage - Error message shown below the input when `error` is `true`. Replaces `helperText`.
+ * @property {string} info - Tooltip content attached to the label.
+ * @property {string} icon - Icon font class rendered beside the sublabel inside the container (e.g. `bds-icon-settings`).
+ * @property {boolean} clearable - Shows a clear button when the input has a value.
+ * @property {boolean} clearOnHover - Shows a clear button that is hidden at rest and revealed on hover.
+ * @property {boolean} readOnly - Makes the input readonly. The value is still submitted with the form.
+ * @property {string} autocomplete - Native `autocomplete` attribute forwarded to the inner `<input>`.
+ * @property {string} pattern - Native `pattern` attribute forwarded to the inner `<input>`.
+ * @property {number} minLength - Minimum character count. `0` means no minimum.
+ * @property {number} maxLength - Maximum character count. `0` means no maximum.
+ * @property {boolean} counter - Enables the character counter in the footer. Requires `charCount`.
+ * @property {number} charCount - Maximum character count shown in the footer counter (e.g. `120` → `"45/120"`). Requires `counter`.
+ * @property {IFormValidator[]} customValidators - Additional validators merged with the built-in ones.
+ * @property {"blur"|"input"|"submit"|"change"} validationTiming - When built-in validation runs.
+ * @property {string} pattern - Regex the value must match to pass `patternMismatch` validation. Also forwarded as the native `pattern` attribute to the inner `<input>`. Empty string disables pattern validation.
+ * @property {string} customWidth - Sets a custom width via the `--bds-text-field-width` CSS custom property.
+ *
+ * @fires valueChange - Emitted on every value change; used for framework 2-way binding.
+ * @fires bdsInput - Emitted on every keystroke with `{ value, event }`.
+ * @fires bdsChange - Emitted when focus leaves after the value changed, with `{ value, event }`.
+ * @fires bdsFocus - Emitted when the input gains focus, with `{ event }`.
+ * @fires bdsBlur - Emitted when the input loses focus, with `{ event }`.
+ * @fires bdsClear - Emitted when the user activates the clear button.
+ * @fires bdsValidationChange - Emitted after each validation run with `{ valid, validity, value, touched, dirty }`.
+ *
+ * @cssprop --bds-text-field-width - Sets a custom width for the component.
+ */
+export declare class BdsTextField extends BdsTextField_base implements ITextField, IFormControl<string> {
+    el: HTMLBdsTextFieldElement;
+    internals: ElementInternals;
+    /** The name submitted with the form. */
+    readonly name: string;
+    /** Disables the input. Also toggled by `formDisabledCallback` via the mixin. */
+    readonly disabled: boolean;
+    /** Marks the input as required for form validation. */
+    readonly required: boolean;
+    /** Mirrors `disabled` and the FACE `formDisabledCallback` result. Drives all disabled UI. */
+    private isDisabled;
+    /** The current value of the input. */
+    value: string;
+    /** When `true`, applies the error visual state. */
+    readonly error: boolean;
+    /** Message shown below the input when `error` is `true`. Replaces `helperText`. */
+    readonly errorMessage: string;
+    /** Additional validators merged with the built-in ones. */
+    readonly customValidators: IFormValidator[];
+    /** Controls when built-in validation runs: `'blur'` | `'input'` | `'submit'` | `'change'`. */
+    readonly validationTiming: TextFieldValidationTiming;
+    /** The input type. Use `'password'` to enable the visibility toggle. */
+    readonly type: TextFieldType;
+    /** Visual style of the input container. `'outline'` shows a border; `'plain'` hides it at rest. */
+    readonly variant: TextFieldVariant;
+    /** Native `placeholder` attribute forwarded to the inner `<input>`. */
+    readonly placeholder: string;
+    /** Makes the input read-only. The value is still submitted with the form. */
+    readonly readOnly: boolean;
+    /** Native `autocomplete` attribute forwarded to the inner `<input>`. */
+    readonly autocomplete: string;
+    /** Regex the value must match to pass `patternMismatch` validation. Also forwarded as the native `pattern` attribute to the inner `<input>`. Empty string disables pattern validation. */
+    readonly pattern: string;
+    /** Minimum character count. `0` means no minimum. */
+    readonly minLength: number;
+    /** Maximum character count. `0` means no maximum. */
+    readonly maxLength: number;
+    /** Label text rendered above the input. */
+    readonly label: string;
+    /** Sublabel rendered inside the input container, before the text area. */
+    readonly sublabel: string;
+    /** Icon font class rendered beside the sublabel inside the container (e.g. `bds-icon-settings`). */
+    readonly icon: string;
+    /** Helper text shown below the input when there is no error. */
+    readonly helperText: string;
+    /** Tooltip content attached to the label. Rendered via `bds-typography` `tooltipText` prop. */
+    readonly info: string;
+    /** Shows a clear button when the input has a value. */
+    readonly clearable: boolean;
+    /** Shows a clear button that is hidden at rest and revealed when the user hovers over the field. */
+    readonly clearOnHover: boolean;
+    /** Maximum character count shown in the footer counter (e.g. `120` → `"45/120"`). Requires `counter`. */
+    readonly charCount: number;
+    /** Enables the character counter in the footer. Requires `charCount` to be set. */
+    readonly counter: boolean;
+    /** Sets a custom width via the `--bds-text-field-width` CSS custom property. */
+    readonly customWidth: string;
+    /** Tracks focus state to drive the `bds-text-field--focused` CSS modifier. */
+    private focused;
+    /** Controls whether the password input renders as plain text. */
+    private showPassword;
+    /** `true` after the user has blurred the input at least once. */
+    private touched;
+    /** `true` once the value has been modified by the user. */
+    private dirty;
+    /** Live character count of the current value. */
+    private currentCharCount;
+    /** `true` when the last triggered validation run returned invalid. Drives the error visual state. */
+    private validationError;
+    /** Error message from the last failed validator. Shown in the footer when `validationError` is `true`. */
+    private validationMessage;
+    /** Emitted whenever the value changes. Used by framework wrappers for 2-way binding. */
+    valueChange: EventEmitter<string>;
+    /** Emitted on every keystroke with the current value and the originating event. */
+    bdsInput: EventEmitter<{
+        value: string;
+        event: InputEvent;
+    }>;
+    /** Emitted when the input loses focus after the value has changed. */
+    bdsChange: EventEmitter<{
+        value: string;
+        event: Event;
+    }>;
+    /** Emitted when the input gains focus. */
+    bdsFocus: EventEmitter<{
+        event: FocusEvent;
+    }>;
+    /** Emitted when the input loses focus. */
+    bdsBlur: EventEmitter<{
+        event: FocusEvent;
+    }>;
+    /** Emitted when the user activates the clear button. */
+    bdsClear: EventEmitter<void>;
+    /** Emitted after each validation run with the full validity snapshot. */
+    bdsValidationChange: EventEmitter<{
+        valid: boolean;
+        validity: ValidityState;
+        value: string;
+        touched: boolean;
+        dirty: boolean;
+    }>;
+    /**
+     * Returns `true` if the element's value passes all constraints; `false` otherwise.
+     * Also fires an `invalid` event if constraints are violated.
+     */
+    checkValidity(): Promise<boolean>;
+    /**
+     * Returns `true` if the element's value passes all constraints; `false` otherwise.
+     * Shows the browser's native validation UI when constraints are violated.
+     */
+    reportValidity(): Promise<boolean>;
+    private _valueAtFocus;
+    private readonly _id;
+    onDisabledChange(next: boolean): void;
+    checkPropValues(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onCustomValidatorsChange(): void;
+    onValueChange(next: string): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: unknown, _mode: string): void;
+    private updateValidity;
+    private invalidHandler;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    private handleShowPassword;
+    private handleClear;
+    private handleMouseDown;
+    private get validators();
+    private get effectiveMaxLength();
+    private get classMap();
+    private get hostStyle();
+    private get iconClear();
+    private get showPasswordIcon();
+    render(): any;
+}
+export {};
+//# sourceMappingURL=bds-text-field.d.ts.map

package/dist/types/components/forms/bds-text-field/types/ITextField.d.ts

@@ -0,0 +1,31 @@
+import type { IFormValidator } from "../../../../types/form";
+import type { TextFieldType, TextFieldVariant, TextFieldValidationTiming } from './types';
+export interface ITextField {
+    name: string;
+    value: string;
+    disabled: boolean;
+    required: boolean;
+    readOnly: boolean;
+    error: boolean;
+    errorMessage: string;
+    customValidators: IFormValidator[];
+    type: TextFieldType;
+    variant: TextFieldVariant;
+    placeholder: string;
+    autocomplete: string;
+    pattern: string;
+    minLength: number;
+    maxLength: number;
+    label: string;
+    sublabel: string;
+    helperText: string;
+    info: string;
+    icon: string;
+    clearable: boolean;
+    clearOnHover: boolean;
+    validationTiming: TextFieldValidationTiming;
+    charCount: number;
+    counter: boolean;
+    customWidth: string;
+}
+//# sourceMappingURL=ITextField.d.ts.map

package/dist/types/components/forms/bds-text-field/types/enum.d.ts

@@ -0,0 +1,15 @@
+export declare const TEXT_FIELD_TYPES: {
+    readonly TEXT: "text";
+    readonly PASSWORD: "password";
+};
+export declare const TEXT_FIELD_VARIANTS: {
+    readonly OUTLINE: "outline";
+    readonly PLAIN: "plain";
+};
+export declare const TEXT_FIELD_VALIDATION_TIMING: {
+    readonly BLUR: "blur";
+    readonly CHANGE: "change";
+    readonly INPUT: "input";
+    readonly SUBMIT: "submit";
+};
+//# sourceMappingURL=enum.d.ts.map

package/dist/types/components/forms/bds-text-field/types/index.d.ts

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

package/dist/types/components/forms/bds-text-field/types/types.d.ts

@@ -0,0 +1,5 @@
+import { TEXT_FIELD_TYPES, TEXT_FIELD_VARIANTS, TEXT_FIELD_VALIDATION_TIMING } from './enum';
+export type TextFieldType = (typeof TEXT_FIELD_TYPES)[keyof typeof TEXT_FIELD_TYPES];
+export type TextFieldVariant = (typeof TEXT_FIELD_VARIANTS)[keyof typeof TEXT_FIELD_VARIANTS];
+export type TextFieldValidationTiming = (typeof TEXT_FIELD_VALIDATION_TIMING)[keyof typeof TEXT_FIELD_VALIDATION_TIMING];
+//# 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>;
+    get isHeaderLeftVisible(): string | true;
+    get isHeaderRightVisible(): boolean;
+    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