wj-elements
Version:
WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.
192 lines (191 loc) • 6.05 kB
TypeScript
import { default as WJElement } from '../wje-element/element.js';
/**
* `ToolbarAction` is a custom web component that represents a toolbar action.
* @summary This element represents a toolbar action.
* @documentation https://elements.webjet.sk/components/toolbar-action
* @status stable
* @augments {WJElement}
* @csspart native - The native toolbar action wrapper.
* @slot - The default slot for the toolbar action.
* @tag wje-toolbar-action
*/
export default class ToolbarAction extends WJElement {
static BREAKPOINTS: {
sm: number;
md: number;
lg: number;
xl: number;
'2xl': number;
xxl: number;
};
/**
* 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[];
_managedHiddenActions: WeakSet<WeakKey>;
_isCollapsedByBreakpoint: any;
_managedOverflowNodes: WeakSet<WeakKey>;
_overflowRetryFrame: any;
_applyOverflowFrame: any;
_observedDropdown: any;
/**
* Sets the collapse breakpoint token or value.
* @param {string} value Breakpoint token or CSS size.
*/
set breakpoint(value: string);
/**
* Gets the collapse breakpoint token or value.
* @returns {string}
*/
get breakpoint(): string;
/**
* Sets the maximum number of visible actions.
* @param {number|string} value The maximum number of visible actions.
*/
set maxItems(value: number | string);
/**
* Gets the maximum number of visible actions.
* @returns {number}
*/
get maxItems(): number;
/**
* Sets the responsive visible action count.
* @param {number|string} value The visible action count.
*/
set visibleItems(value: number | string);
/**
* Gets the responsive visible action count.
* @returns {number|null}
*/
get visibleItems(): number | null;
/**
* Draws the component for the toolbar action.
* @returns {object} Document fragment
*/
draw(): object;
defaultSlot: HTMLSlotElement;
native: HTMLDivElement;
moreDropdown: HTMLElement;
moreMenu: HTMLElement;
/**
* Applies the current visible action limit after the component is drawn.
*/
afterDraw(): void;
onSlotChange: () => void;
handleResize: () => void;
_dropdownObserver: MutationObserver;
/**
* Schedules overflow application after layout settles.
* @param {boolean} [doubleFrame] Wait an extra frame for initial render/hydration.
*/
scheduleOverflow(doubleFrame?: boolean): void;
/**
* Returns the actions for the toolbar action.
* @returns {Array<HTMLElement>} Managed toolbar actions.
*/
getActions(): Array<HTMLElement>;
/**
* Returns direct children assigned to the default slot.
* @returns {Array<HTMLElement>}
*/
getAssignedElements(): Array<HTMLElement>;
/**
* Returns an existing top-level dropdown if present.
* @returns {HTMLElement|null}
*/
getExistingDropdown(): HTMLElement | null;
/**
* Observes the external dropdown for late menu/content changes.
*/
observeExistingDropdown(): void;
/**
* Returns the dropdown that should receive overflow items.
* @returns {HTMLElement}
*/
getOverflowDropdown(): HTMLElement;
/**
* Returns the menu used for overflow items.
* @returns {HTMLElement|null}
*/
getOverflowMenu(): HTMLElement | null;
/**
* Gets the number of actions that should stay visible.
* @returns {number}
*/
getVisibleLimit(): number;
/**
* Returns whether the toolbar action should collapse based on the configured breakpoint.
* @returns {boolean}
*/
shouldCollapseByBreakpoint(): boolean;
/**
* Returns the cached breakpoint collapse state.
* @returns {boolean}
*/
isCollapsedByBreakpoint(): boolean;
/**
* Reacts to viewport resize only when the breakpoint mode actually changes.
* @returns {void}
*/
handleBreakpointResize(): void;
/**
* Resolves the configured breakpoint to a pixel width.
* @returns {number|null}
*/
getBreakpointWidth(): number | null;
/**
* Updates visible actions and the overflow dropdown.
* @returns {void}
*/
applyOverflow(): void;
/**
* Restores buttons hidden by this component.
* @param {Array<HTMLElement>} actions Toolbar buttons.
*/
restoreManagedActions(actions?: Array<HTMLElement>): void;
/**
* Removes overflow menu nodes that were previously injected by this component.
*/
restoreManagedOverflowContent(): void;
/**
* Creates a dropdown menu proxy for an overflowed button.
* @param {HTMLElement} action The original action button.
* @returns {HTMLElement}
*/
createMenuItem(action: HTMLElement): HTMLElement;
/**
* Creates a divider separating existing dropdown actions from responsive overflow actions.
* @returns {HTMLElement}
*/
createOverflowDivider(): HTMLElement;
/**
* Forwards menu item activation to the original button.
* @param {Event} e The menu event.
* @param {HTMLElement} action The original action button.
*/
handleMenuItemClick(e: Event, action: HTMLElement): void;
/**
* Measures action widths while preserving current overflow state.
* @returns {{count: number, widths: number[], gap: number, moreWidth: number, getWidthForCount: Function}}
*/
measureActionMetrics(): {
count: number;
widths: number[];
gap: number;
moreWidth: number;
getWidthForCount: Function;
};
/**
* Measures the overflow dropdown trigger.
* @returns {number}
*/
measureMoreWidth(): number;
}