@limetech/lime-elements
Version:
103 lines • 3.9 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
import { ListSeparator } from '../list/list-item.types';
import { OpenDirection } from '../menu/menu.types';
import { ActionBarItem } from './action-bar.types';
import { Languages } from './../date-picker/date.types';
/**
* An action bar is a user interface element commonly found in software applications and websites.
* It typically appears at the top of the screen or within a specific section
* and serves as a centralized hub for accessing various actions and commands
* relevant to the current context or page.
*
* The action bar often contains a set of clickable icons or buttons (icons + labels)
* that represent specific actions, such as saving, deleting, editing, sharing,
* or bulk operations for selected items.
*
* The purpose of an action bar is to provide quick and convenient access to
* frequently used functionalities, enabling users to perform common tasks efficiently.
* It enhances usability by organizing important actions in a visually prominent and easily accessible location.
*
* The action bar's design and layout can vary based on the platform or application,
* but its primary goal remains consistent—to
* empower users to interact with the software and perform desired actions effortlessly.
*
* @exampleComponent limel-example-action-bar-basic
* @exampleComponent limel-example-action-bar-overflow-menu
* @exampleComponent limel-example-action-bar-selected-item
* @exampleComponent limel-example-action-bar-colors
* @exampleComponent limel-example-action-bar-floating
* @exampleComponent limel-example-action-bar-floating-expand
* @exampleComponent limel-example-action-bar-styling
* @exampleComponent limel-example-action-bar-as-primary-component
* @exampleComponent limel-example-action-bar-icon-title
*/
export declare class ActionBar {
/**
* Items that are placed in the action bar.
* These represent primary actions.
*/
actions: Array<ActionBarItem | ListSeparator>;
/**
* Defines the language for translations.
*/
language: Languages;
/**
* A label used to describe the purpose of the element to users
* of assistive technologies, like screen readers.
* Example value: "toolbar"
*/
accessibleLabel?: string;
/**
* - When set to `fullWidth`, the component will take the
* entire width of its container.
* - When set to `floating`, the component will get basic stylings
* to visualize the floating state.
* :::note
* You should still properly position the component
* according to the structure of your user interface.
* For example, use an `absolute` or `fixed` position.
* :::
*/
layout?: 'fullWidth' | 'floating';
/**
* When set to `true`, the action bar will be collapsible.
*/
collapsible: boolean;
/**
* Defines the location that the content of the overflow menu
* appears, in relation to its trigger.
*/
openDirection: OpenDirection;
/**
* Fired when a action bar item has been clicked.
* @public
*/
itemSelected: EventEmitter<ActionBarItem>;
private readonly host;
private overflowCutoff;
/**
* Indicates whether the action bar is currently in a collapsed state.
*/
private actionBarIsShrunk;
private hasRendered;
private intersectionObserver;
private isFirstIntersectionCheck;
private actionBarItems;
connectedCallback(): void;
componentDidRender(): void;
disconnectedCallback(): void;
render(): any;
private readonly renderActionBarItem;
private readonly renderOverflowMenu;
private renderCollapseExpandButton;
private handleCollapseExpandClick;
private isVisible;
private readonly handleSelect;
private get tooltipLabel();
private getTranslation;
private readonly handleIntersection;
private createIntersectionObserver;
private observe;
private haveItemsChanged;
}
//# sourceMappingURL=action-bar.d.ts.map