import { default as WJElement } from '../wje-element/element.js'; /** * `Toolbar` is a custom web component that represents a toolbar. * @summary This element represents a toolbar. * @documentation https://elements.webjet.sk/components/toolbar * @status stable * @augments {WJElement} * @csspart native - The native toolbar wrapper. * @slot start - The start slot for the toolbar. * @slot end - The end slot for the toolbar. * @cssproperty [--wje-toolbar-background=var(--wje-background)] - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`. * @cssproperty [--wje-toolbar-height=auto] - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content. * @cssproperty [--wje-toolbar-min-height=70px] - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size. * @cssproperty [--wje-toolbar-padding-top=1rem] - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit. * @cssproperty [--wje-toolbar-padding-bottom=1rem] - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge. * @cssproperty [--wje-toolbar-padding-inline=1.5rem] - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides. * @cssproperty [--wje-toolbar-border-color=var(--wje-border-color)] - Sets the color of the toolbar's border. Accepts any valid CSS color value. * @cssproperty [--wje-toolbar-top=0] - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars. * @tag wje-toolbar */ export default class Toolbar extends WJElement { /** * Returns the CSS stylesheet for the component. * @static * @returns {CSSStyleSheet} The CSS stylesheet */ static get cssStyleSheet(): CSSStyleSheet; /** * Returns the list of observed attributes. * @static * @returns {Array} An empty array */ static get observedAttributes(): any[]; _breadcrumbState: WeakMap; _responsiveFrame: any; /** * Draws the component for the toolbar. * @returns {object} Document fragment */ draw(): object; native: HTMLDivElement; startSlot: HTMLSlotElement; endSlot: HTMLSlotElement; /** * Initializes responsive layout observers. */ afterDraw(): void; onSlotChange: () => void; _resizeObserver: ResizeObserver; /** * Sync ARIA attributes on host. */ syncAria(): void; /** * Schedules responsive layout recalculation. */ scheduleResponsiveLayout(): void; /** * Updates slotted breadcrumbs and actions to fit the toolbar width. * @returns {Promise} */ updateResponsiveLayout(): Promise; /** * Measures breadcrumbs in their full state. * @param {HTMLElement} breadcrumbs Breadcrumbs component. * @returns {Promise<{count: number, fullWidth: number, compactWidth: number}>} */ measureBreadcrumbs(breadcrumbs: HTMLElement): Promise<{ count: number; fullWidth: number; compactWidth: number; }>; /** * Stores original breadcrumb settings used as responsive compact target. * @param {HTMLElement} breadcrumbs Breadcrumbs component. * @param {number} count Number of breadcrumb elements currently in the trail. * @returns {{compactMaxItems: number}} */ ensureBreadcrumbState(breadcrumbs: HTMLElement, count: number): { compactMaxItems: number; }; /** * Applies the compact or full breadcrumb state. * @param {HTMLElement|null} breadcrumbs Breadcrumbs component. * @param {boolean} compact Whether compact mode should be used. */ setBreadcrumbCompactState(breadcrumbs: HTMLElement | null, compact: boolean): void; /** * Sets breadcrumb max-items only when it changed. * @param {HTMLElement} breadcrumbs Breadcrumbs component. * @param {number} value The max item count. */ setBreadcrumbMaxItems(breadcrumbs: HTMLElement, value: number): void; /** * Finds how many actions fit into the available width. * @param {object} actionMetrics Measured action metrics. * @param {number} width Available width. * @returns {number} */ getVisibleActionsForWidth(actionMetrics: object, width: number): number; /** * Applies visible action count. * @param {HTMLElement|null} action Toolbar action component. * @param {number} count Visible action count. */ setVisibleActions(action: HTMLElement | null, count: number): void; /** * Clears toolbar-managed visible action state when actions manage themselves. * @param {HTMLElement|null} action Toolbar action component. */ clearVisibleActions(action: HTMLElement | null): void; /** * Returns the slotted toolbar action. * @returns {HTMLElement|null} */ getToolbarAction(): HTMLElement | null; /** * Returns the slotted breadcrumbs. * @returns {HTMLElement|null} */ getBreadcrumbs(): HTMLElement | null; /** * Returns whether toolbar actions are managed by their own breakpoint logic. * @param {HTMLElement|null} action Toolbar action component. * @returns {boolean} */ isSelfManagedAction(action: HTMLElement | null): boolean; /** * Returns whether breadcrumb collapse is managed by its own breakpoint logic. * @param {HTMLElement|null} breadcrumbs Breadcrumbs component. * @returns {boolean} */ isSelfManagedBreadcrumbs(breadcrumbs: HTMLElement | null, action: any): boolean; /** * Waits for one animation frame. * @returns {Promise} */ nextFrame(): Promise; }