wj-elements/dist/packages/wje-toolbar/toolbar.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';
/**
 * `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<WeakKey, any>;
    _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<void>}
     */
    updateResponsiveLayout(): Promise<void>;
    /**
     * 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<void>}
     */
    nextFrame(): Promise<void>;
}