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} - The observed attributes array for the Breadcrumb element. */ static get observedAttributes(): Array; _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} 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; trigger: HTMLElement; placement: string; }): HTMLElement; /** * Creates the menu used by collapsed dropdown variants. * @param {Array} breadcrumbs Breadcrumb items represented by menu items. * @returns {HTMLElement} */ createCollapsedBreadcrumbMenu(breadcrumbs: Array): HTMLElement; /** * Returns breadcrumbs that should be exposed in a collapsed menu. * @param {boolean} isBreakpointMenuIndicator Whether this trigger controls the full breakpoint menu. * @returns {Array} */ getCollapsedMenuBreadcrumbs(isBreakpointMenuIndicator: boolean): Array; /** * 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} */ getTrailBreadcrumbs(): Array; /** * 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; }