wj-elements/dist/packages/wje-breadcrumb/breadcrumb.element.d.ts

WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.

import { default as WJElement } from '../wje-element/element.js';
/**
 * @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.
 * @documentation https://elements.webjet.sk/components/breadcrumb
 * @status stable
 * @augments WJElement
 * @slot - The main content of the breadcrumb.
 * @slot start - Slot for content at the start of the breadcrumb.
 * @slot end - Slot for content at the end of the breadcrumb.
 * @slot separator - Slot for a custom separator between breadcrumb items.
 * @csspart native - The native wrapper of the breadcrumb component.
 * @csspart separator - The separator between breadcrumb items.
 * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.
 * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.
 * @cssproperty [--wje-breadcrumb-line-height=1.5] - Controls the vertical rhythm of breadcrumb text.
 * @cssproperty [--wje-breadcrumb-native-line-height=var(--wje-breadcrumb-line-height)] - Controls the line height of the native breadcrumb wrapper.
 * @cssproperty [--wje-breadcrumb-native-margin=0] - Sets outer spacing around the native breadcrumb wrapper.
 * @cssproperty [--wje-breadcrumb-native-padding=0.25rem 0.75rem] - Sets inner spacing inside the native breadcrumb wrapper.
 * @cssproperty [--wje-breadcrumb-margin=var(--wje-breadcrumb-native-margin)] - Backwards-compatible alias for native breadcrumb margin.
 * @cssproperty [--wje-breadcrumb-padding=var(--wje-breadcrumb-native-padding)] - Backwards-compatible alias for native breadcrumb padding.
 * @tag wje-breadcrumb
 */
export default class Breadcrumb extends WJElement {
    /**
     * Get CSS stylesheet for the Breadcrumb element.
     * @static
     * @returns {object} styles - The CSS styles
     */
    static get cssStyleSheet(): object;
    /**
     * Get observed attributes for the Breadcrumb element.
     * @static
     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.
     */
    static get observedAttributes(): Array<string>;
    _showSeparator: boolean;
    _showCollapsedIndicator: boolean;
    handleNativeClick: (e: any) => void;
    /**
     * Sets the breadcrumb link URL.
     * @param {string|null} value Link URL.
     */
    set href(value: string | null);
    /**
     * Gets the breadcrumb link URL.
     * @returns {string|null}
     */
    get href(): string | null;
    /**
     * Sets the disabled state.
     * @param {boolean} value Disabled state.
     */
    set disabled(value: boolean);
    /**
     * Gets the disabled state.
     * @returns {boolean}
     */
    get disabled(): boolean;
    /**
     * Set show separator flag.
     * @param {boolean} value The value to set
     */
    set showSeparator(value: boolean);
    /**
     * Get show separator flag.
     * @returns {boolean} showSeparator - The show separator flag
     */
    get showSeparator(): boolean;
    /**
     * Set collapsed variant.
     * @param {string} value The value to set
     */
    set collapsedVariant(value: string);
    /**
     * Get collapsed variant.
     * @returns {string} The collapsed variant value in uppercase.
     */
    get collapsedVariant(): string;
    _collapsedVariant: string;
    /**
     * Get collapsed variant token.
     * @returns {string}
     */
    get collapsedVariantName(): string;
    /**
     * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.
     * @param {string} name The name of the attribute that was changed.
     * @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.
     * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.
     */
    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
    active: boolean;
    syncAria(): void;
    /**
     * Draw method for the Breadcrumb element.
     * @returns {object} fragment - The document fragment
     */
    draw(): object;
    native: HTMLAnchorElement;
    /**
     * Returns whether the separator should be visible after this breadcrumb.
     * @returns {boolean}
     */
    shouldRenderSeparator(): boolean;
    /**
     * Returns whether any later breadcrumb is still visible in the rendered trail.
     * @returns {boolean}
     */
    hasVisibleBreadcrumbAfter(): boolean;
    /**
     * Returns whether a breadcrumb is visible in the rendered trail.
     * @param {Element} breadcrumb Breadcrumb element to inspect.
     * @returns {boolean}
     */
    isBreadcrumbVisibleInTrail(breadcrumb: Element): boolean;
    /**
     * Synchronizes host attributes to the internal anchor.
     */
    syncNativeAttributes(): void;
    /**
     * Sets up native anchor listeners after render.
     */
    afterDraw(): void;
    /**
     * Prevents disabled breadcrumbs from navigating or bubbling click handlers.
     * @param {MouseEvent} e Click event.
     */
    handleDisabledNativeClick(e: MouseEvent): void;
    /**
     * Renders the collapsed indicator based on the current collapsed variant.
     * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.
     * Mobile breakpoint variants render compact breadcrumb summaries, otherwise the default button is used.
     * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.
     */
    drawCollapsedIndicator(): any;
    /**
     * Returns whether the current collapsed variant is a compact mobile layout.
     * @returns {boolean}
     */
    isMobileCollapsedVariant(): boolean;
    /**
     * Creates and returns a dropdown UI component for collapsed breadcrumbs.
     * This method generates a dropdown element with a button trigger and a menu populated with items corresponding
     * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that
     * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding
     * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.
     * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.
     */
    collapseDropdown(): HTMLElement;
    /**
     * Creates a dropdown containing breadcrumb menu items.
     * @param {object} options Configuration for the dropdown shell.
     * @param {Array<HTMLElement>} options.breadcrumbs Breadcrumb elements to mirror in the menu.
     * @param {HTMLElement} options.trigger Element assigned to the dropdown trigger slot.
     * @param {string} options.placement Floating UI placement token for the popup.
     * @returns {HTMLElement}
     */
    createBreadcrumbDropdown({ breadcrumbs, trigger, placement }: {
        breadcrumbs: Array<HTMLElement>;
        trigger: HTMLElement;
        placement: string;
    }): HTMLElement;
    /**
     * Creates the menu used by collapsed dropdown variants.
     * @param {Array<HTMLElement>} breadcrumbs Breadcrumb items represented by menu items.
     * @returns {HTMLElement}
     */
    createCollapsedBreadcrumbMenu(breadcrumbs: Array<HTMLElement>): HTMLElement;
    /**
     * Returns breadcrumbs that should be exposed in a collapsed menu.
     * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.
     * @returns {Array<HTMLElement>}
     */
    getCollapsedMenuBreadcrumbs(isBreakpointMenuIndicator: boolean): Array<HTMLElement>;
    /**
     * Renders one of the compact mobile breakpoint variants.
     * @param {string} variant Normalized uppercase variant token.
     * @returns {HTMLElement}
     */
    collapseMobileVariant(variant: string): HTMLElement;
    /**
     * Renders only the current breadcrumb title.
     * @returns {HTMLElement}
     */
    collapseMobileText(): HTMLElement;
    /**
     * Renders a parent back action above the current title.
     * @returns {HTMLElement}
     */
    collapseMobileBack(): HTMLElement;
    /**
     * Renders parent context above the current title.
     * @returns {HTMLElement}
     */
    collapseMobileParentTitle(): HTMLElement;
    /**
     * Renders a menu trigger with the current title.
     * @returns {HTMLElement}
     */
    collapseMobileMenuTitle(): HTMLElement;
    /**
     * Renders the future sheet variant using the dropdown fallback for now.
     * @returns {HTMLElement}
     */
    collapseMobileSheet(): HTMLElement;
    /**
     * Creates a dropdown fallback for mobile menu-like variants.
     * @param {HTMLElement} trigger Element that opens the fallback dropdown.
     * @returns {HTMLElement}
     */
    createMobileDropdown(trigger: HTMLElement): HTMLElement;
    /**
     * Creates a compact mobile dropdown trigger.
     * @param {object} options Visual settings for the compact trigger.
     * @param {string} options.icon Icon shown next to the title.
     * @param {string} options.iconPosition Whether the icon renders at the start or end.
     * @param {string} options.label Current breadcrumb label shown beside the icon.
     * @param {string} options.ariaLabel Accessible name for the dropdown trigger.
     * @param {string} options.className Variant-specific class applied to the trigger.
     * @returns {HTMLElement}
     */
    createMobileDropdownTrigger({ icon, iconPosition, label, ariaLabel, className }: {
        icon: string;
        iconPosition: string;
        label: string;
        ariaLabel: string;
        className: string;
    }): HTMLElement;
    /**
     * Creates a wrapper for compact mobile breadcrumb variants.
     * @param {string} className Variant class.
     * @returns {HTMLElement}
     */
    createMobileContainer(className: string): HTMLElement;
    /**
     * Creates a text or button control for a breadcrumb.
     * @param {HTMLElement|null} breadcrumb Source breadcrumb.
     * @param {string} className Class applied to the created control.
     * @param {object} options Behavior and accessibility settings for the control.
     * @param {boolean} options.actionable Whether clicks should forward to the source breadcrumb.
     * @param {boolean} options.ariaCurrent Whether the control marks the current page.
     * @param {string} options.ariaLabel Accessible name for action controls.
     * @param {string} options.icon Optional icon shown before the label.
     * @returns {HTMLElement}
     */
    createMobileBreadcrumbControl(breadcrumb: HTMLElement | null, className: string, { actionable, ariaCurrent, ariaLabel, icon }?: {
        actionable: boolean;
        ariaCurrent: boolean;
        ariaLabel: string;
        icon: string;
    }): HTMLElement;
    /**
     * Returns the full trail of sibling breadcrumbs.
     * @returns {Array<HTMLElement>}
     */
    getTrailBreadcrumbs(): Array<HTMLElement>;
    /**
     * Returns the current breadcrumb item.
     * @returns {HTMLElement|null}
     */
    getCurrentBreadcrumb(): HTMLElement | null;
    /**
     * Returns the parent breadcrumb item.
     * @returns {HTMLElement|null}
     */
    getParentBreadcrumb(): HTMLElement | null;
    /**
     * Returns whether a breadcrumb has a known action to forward.
     * @param {HTMLElement|null} breadcrumb Breadcrumb to inspect.
     * @returns {boolean}
     */
    isBreadcrumbActionable(breadcrumb: HTMLElement | null): boolean;
    /**
     * Forwards a compact control or menu item click to the original breadcrumb.
     * @param {HTMLElement|null} breadcrumb Source breadcrumb.
     */
    forwardBreadcrumbClick(breadcrumb: HTMLElement | null): void;
    /**
     * Creates the dropdown trigger for collapsed breadcrumbs.
     * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.
     * @returns {HTMLElement}
     */
    createCollapsedDropdownTrigger(isBreakpointMenuIndicator: boolean): HTMLElement;
    /**
     * Resolves the icon used by the default dropdown trigger.
     * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu.
     * @returns {string}
     */
    getCollapsedDropdownIcon(isBreakpointMenuIndicator: boolean): string;
    /**
     * Copies breadcrumb content into a collapsed menu item.
     * @param {HTMLElement} menuItem Menu item receiving the content.
     * @param {HTMLElement} breadcrumb Source breadcrumb.
     */
    populateCollapsedMenuItem(menuItem: HTMLElement, breadcrumb: HTMLElement): void;
    /**
     * Resolves a readable label for a breadcrumb item.
     * @param {HTMLElement|null} breadcrumb Source breadcrumb.
     * @returns {string}
     */
    getBreadcrumbLabel(breadcrumb: HTMLElement | null): string;
    /**
     * Resolves a readable label for icon-only collapsed menu items.
     * @param {HTMLElement} breadcrumb Source breadcrumb.
     * @returns {string}
     */
    getCollapsedMenuItemLabel(breadcrumb: HTMLElement): string;
    /**
     * Turns a URL segment into a readable menu label.
     * @param {string} value URL segment.
     * @returns {string}
     */
    humanizeCollapsedMenuItemLabel(value: string): string;
    /**
     * Returns whether this collapsed indicator represents the full breakpoint menu.
     * @returns {boolean}
     */
    isBreakpointMenuIndicator(): boolean;
    /**
     * Creates a button element that expands hidden breadcrumbs when clicked.
     * The button is set with appropriate attributes and event listeners to handle
     * the expanding of hidden breadcrumb elements. Clicking the button will remove
     * the button itself, reveal hidden breadcrumbs, and stop the current event
     * propagation.
     * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.
     */
    collapseButton(): HTMLButtonElement;
    /**
     * Retrieves the breadcrumb trail for the current element by returning its parent element.
     * @returns {Element} The parent element representing the breadcrumb trail.
     */
    getBreadcrumbs(): Element;
}