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.
108 lines (107 loc) • 4.56 kB
TypeScript
import { default as WJElement } from '../wje-element/element.js';
/**
* `TabGroup` is a custom web component that represents a group of tabs.
* @summary This element represents a group of tabs.
* @documentation https://elements.webjet.sk/components/tab-group
* @status stable
* @augments WJElement
* @param {string} type The type of the tab group. Can be either 'panel' or 'route'.
* @slot - The default slot for the tab group.
* @slot nav - Slot for the navigation of the tab group.
* @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).
* @tag wje-tab-group
*/
export default class TabGroup extends WJElement {
/**
* Returns the CSS styles for the component.
* @static
* @returns {CSSStyleSheet}
*/
static get cssStyleSheet(): CSSStyleSheet;
/**
* Sets the 'type' attribute of the element to the specified value.
* @param {string} value The value to set for the 'type' attribute.
*/
set type(value: string);
/**
* Retrieves the `type` attribute of the element.
* If the `type` attribute is not set, it defaults to `'panel'`.
* @returns {string} The value of the `type` attribute or the default value `'panel'`.
*/
get type(): string;
/**
* Sets up the event listeners before the component is drawn.
* This method is called before the component is drawn.
* It is used to set up event listeners.
*/
beforeDraw(): void;
/**
* Creates and returns a document fragment containing a structured layout for a tab group.
* The tab group layout includes a `header` section with navigational elements,
* a `section` element for tab panels, and slots for customization such as additional navigation items,
* dropdowns, and more.
* The structure comprises:
* - A `div` container with relevant styling and part attributes.
* - A `header` for tabs, including a slot for navigation (`nav`) and additional tabs in a dropdown (`moreDropdown`).
* - A `section` for tab panels with a customizable `slot`.
* This function also initializes the `nav` and `moreDropdown` properties for external use.
* @returns {DocumentFragment} The completed document fragment containing the tab group layout.
*/
draw(): DocumentFragment;
nav: HTMLElement;
moreDropdown: HTMLElement;
/**
* Executes necessary initializations and attaches event listeners after a drawing operation.
* Handles active tab selection, 'wje-tab:change' event binding, and window resize event for overflow checking.
* @returns {void} Does not return a value.
*/
afterDraw(): void;
/**
* Checks if the tabs within a navigation bar overflow the available space.
* Moves overflowing tabs into a dropdown menu and updates their state accordingly.
* @returns {void} This method does not return a value.
*/
checkOverflow(): void;
/**
* Removes the 'active' class from all panel and tab elements.
* @returns {void} This method does not return a value.
*/
removeActiveTab(): void;
/**
* Sets the active tab and panel.
* @param {string} tab The name of the tab to set as active.
*/
setActiveTab(tab: string): void;
/**
* Returns the currently active tab.
* @returns {Element|null} The active tab, or null if no tab is active.
*/
getActiveTab(): Element | null;
/**
* Returns all tabs.
* @returns {Array<Element>} An array of all tabs.
*/
getTabAll(): Array<Element>;
/**
* Returns all panels.
* @returns {Array<Element>} An array of all panels.
*/
getPanelAll(): Array<Element>;
/**
* Returns the names of all tabs.
* @returns {Array<string>} An array of all tab names.
*/
getPanelAllName(): Array<string>;
/**
* Toggles the visibility of the "more" dropdown based on the presence of tabs in the "more" slot.
* @returns {void} Does not return a value.
*/
toggleMoreVisibility(): void;
/**
* Toggles the "dropdown-active" class on the element based on its "active" status
* and the value of its "slot" attribute.
* @param {HTMLElement} el The HTML element to evaluate and apply the toggle logic.
* @returns {void} This method does not return any value.
*/
dropdownActive(el: HTMLElement): void;
}