225 lines
7.9 KiB
TypeScript
225 lines
7.9 KiB
TypeScript
// Compatibility file for non-module typescript compiles without adjustments.
|
|
// Use the following line for modern code (needs adjustments to tsconfig.json#configOptions/paths)
|
|
// import { TcHmiControl } from "Beckhoff.TwinCAT.HMI.Framework/index.esm.js";
|
|
// ***************************************************************************
|
|
/**
|
|
* How to use
|
|
* HTML example
|
|
<tchmi-content-tabs>
|
|
<tchmi-tab-links>
|
|
<tchmi-tab-link active ref="Tab2">Header 2</tchmi-tab-link>
|
|
<tchmi-tab-link ref="Tab1">Header 1</tchmi-tab-link>
|
|
</tchmi-tab-links>
|
|
<tchmi-tab-contents>
|
|
<tchmi-tab-content name="Tab1">Content 1</tchmi-tab-content>
|
|
<tchmi-tab-content active name="Tab2">Content 2</tchmi-tab-content>
|
|
<tchmi-tab-content name="Unused"></tchmi-tab-content>
|
|
</tchmi-tab-contents>
|
|
</tchmi-content-tabs>
|
|
**/
|
|
export declare class ContentTabs extends HTMLElement {
|
|
#private;
|
|
constructor();
|
|
connectedCallback(): void;
|
|
disconnectedCallback(): void;
|
|
/**
|
|
* Add ContentTab.
|
|
* @param name Name of ContentTab to add.
|
|
* @param link HTMLElement to click on to open the content of the tab.
|
|
* @param content HTMLElement which is shown when tab is active.
|
|
*/
|
|
addContentTab(name: string, link: HTMLElement, content: HTMLElement): void;
|
|
/**
|
|
* Arrange displayed tabs and the tab link overflow element.
|
|
*/
|
|
arrangeTabLinks(): void;
|
|
/**
|
|
* Remove ContentTab.
|
|
* @param name Name of ContentTab to remove.
|
|
*/
|
|
removeContentTab(name: string): void;
|
|
/**
|
|
* Opens a tab by its name.
|
|
* @param nameOfTabToOpen Name of tab which should be opened. If no tab name is specified, the active tab is selected. If this is also not known, the first tab is opened.
|
|
*/
|
|
openTab(nameOfTabToOpen?: string): void;
|
|
/**
|
|
* Show dropdown element in top most layer
|
|
*/
|
|
private __openDropdown;
|
|
/**
|
|
* Resize the dropdown element
|
|
*/
|
|
private __resizeDropdown;
|
|
/**
|
|
* Get tab by name.
|
|
* @param tabName name of tab which should be returned.
|
|
**/
|
|
getTab(tabName: string): _ContentTabs.Tab | undefined;
|
|
/**
|
|
* Returns name of active tab.
|
|
*/
|
|
get activeTab(): string | undefined;
|
|
/**
|
|
* Enable a tab. Tab is enabled by default.
|
|
* @param tabName name of tab which should be enabled.
|
|
**/
|
|
enableTab(tabName: string): void;
|
|
/**
|
|
* Disable a tab. Tab is enabled by default.
|
|
* @param tabName name of tab which should be disabled.
|
|
**/
|
|
disableTab(tabName: string): void;
|
|
/**
|
|
* Disables the content tabs element.
|
|
*/
|
|
disableContentTabs(): void;
|
|
/**
|
|
* Enables the content tabs element.
|
|
*/
|
|
enableContentTabs(): void;
|
|
/**
|
|
* Add the attribute 'use-max-content' to the TabContentsWrapper
|
|
* to prevent the size of the container from jumping back and forth
|
|
* => content container always assumes the size of the largest content
|
|
*/
|
|
useMaxContent(): void;
|
|
/**
|
|
* Remove the attribute 'use-max-content' from the TabContentsWrapper
|
|
* that prevent the size of the container from jumping back and forth
|
|
* => this means that the content container only ever has the size of the visible content
|
|
**/
|
|
doNotUseMaxContent(): void;
|
|
/**
|
|
* Add callback, which is fired on tab change.
|
|
* @param cb Function which is fired on tab change. Parameter contains the name of the new tab.
|
|
*/
|
|
addTabChangeCallback(cb: (newTabName: string) => void): void;
|
|
/**
|
|
* Remove callback, which is fired on tab change.
|
|
* @param cb Function which is fired on tab change. Parameter contains the name of the new tab.
|
|
*/
|
|
removeTabChangeCallback(cb: (newTabName: string) => void): void;
|
|
/**
|
|
* Set the alignment of the tabs.
|
|
* @param tabAlignment the new alignment of the tabs.
|
|
*/
|
|
setTabAlignment(tabAlignment: ContentTabs.TabAlignment): void;
|
|
private __getTabLinksWrapper;
|
|
private __getTabContentsWrapper;
|
|
private __appendTabLinksOverflowElement;
|
|
private __removeTabLinksOverflowElement;
|
|
private __updateLinksAndContents;
|
|
/**
|
|
* Add openTab event on all tchmi-tab-link.
|
|
*/
|
|
private __addEvents;
|
|
/**
|
|
* Remove openTab event on all tchmi-tab-link.
|
|
*/
|
|
private __removeEvents;
|
|
/**
|
|
* Finds the first active tab, marks all other tabs as inactive and
|
|
* synchronizes the active attribute between link and content.
|
|
*/
|
|
private __findActiveTab;
|
|
/**
|
|
* Sets the tabOverflowMode value.
|
|
* @param valueNew The new value for tabOverflowMode.
|
|
*/
|
|
setTabOverflowMode(valueNew: ContentTabs.TabOverflowMode): void;
|
|
/**
|
|
* Processes the tab overflow mode.
|
|
*/
|
|
private __processTabOverflowMode;
|
|
/**
|
|
* Event handler for scroll events on the tab links wrapper.
|
|
*/
|
|
private __onScroll;
|
|
/**
|
|
* Enables or disables the scroll elements based on the current scroll position.
|
|
* @returns {void}
|
|
*/
|
|
private __enableOrDisableScrollElements;
|
|
/**
|
|
* Event handler for scrolling the tab links wrapper to the right.
|
|
*/
|
|
private __onScrollElementRight;
|
|
/**
|
|
* Event handler for scrolling the tab links wrapper to the left.
|
|
*/
|
|
private __onScrollElementLeft;
|
|
/**
|
|
* Event handler for the wheel event on the tab links wrapper.
|
|
* This allows horizontal scrolling using vertical wheel movements.
|
|
* @param e The WheelEvent object.
|
|
*/
|
|
private __onWheel;
|
|
/**
|
|
* Creates a scroll element for the tab links.
|
|
* @param direction The direction of the scroll element, either 'left' or 'right'.
|
|
* @returns The SVG element representing the scroll arrow.
|
|
*/
|
|
private __createTabLinkScrollElement;
|
|
/** Returns true if container is scrolled all the way left (or empty)
|
|
* @param tolerance Optional tolerance in pixels to consider the left edge as "scrolled to left"
|
|
* @returns {boolean} True if the container is scrolled to the left edge, false otherwise.
|
|
*/
|
|
private __isScrolledToLeftByRects;
|
|
/** Returns true if container is scrolled all the way right (or empty)
|
|
* @param tolerance Optional tolerance in pixels to consider the right edge as "scrolled to right"
|
|
* @returns {boolean} True if the container is scrolled to the right edge, false otherwise.
|
|
*/
|
|
private __isScrolledToRightByRects;
|
|
/**
|
|
* Map of all valid Tabs including content and link
|
|
* Key is the name of the tab
|
|
*/
|
|
private __tabs;
|
|
private __activeTab?;
|
|
/**
|
|
* The elements that are used to scroll the tab links left or right.
|
|
*/
|
|
private __scrollElementLeft;
|
|
private __scrollElementRight;
|
|
private __resizeObserver;
|
|
/**
|
|
* The element that contains the tab links that are hidden due to less space.
|
|
*/
|
|
private __tabLinksOverflowElement;
|
|
/**
|
|
* The element that contains the tab links that are hidden due to less space.
|
|
*/
|
|
private __tabLinkDropdown;
|
|
private __tabAlignment;
|
|
/** The overflow mode of the tabs */
|
|
protected __tabOverflowMode: ContentTabs.TabOverflowMode;
|
|
/**
|
|
* Contains all functions which are fired on tab change.
|
|
*/
|
|
private __tabChangeCallbacks;
|
|
}
|
|
export declare namespace ContentTabs {
|
|
interface Tab {
|
|
link: HTMLElement;
|
|
content: HTMLElement;
|
|
openTabHandler: () => void;
|
|
disabled: boolean;
|
|
dropdown: boolean;
|
|
}
|
|
type TabAlignment = 'Top' | 'Right' | 'Bottom' | 'Left';
|
|
type TabOverflowMode = 'Popup' | 'Scroll';
|
|
}
|
|
import _ContentTabs = ContentTabs;
|
|
declare global {
|
|
namespace TcHmi.Controls.Helpers {
|
|
let ContentTabs: typeof _ContentTabs;
|
|
type ContentTabs = _ContentTabs;
|
|
namespace ContentTabs {
|
|
type Tab = _ContentTabs.Tab;
|
|
type TabAlignment = _ContentTabs.TabAlignment;
|
|
type TabOverflowMode = _ContentTabs.TabOverflowMode;
|
|
}
|
|
}
|
|
}
|