smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
913 lines (906 loc) • 50.8 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.tabs';
import { __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
class TabsComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered when the addNewTab feature is enabled and the corresponding button or interface element is clicked by the user.
* @param event. The custom event. */
this.onAddNewTabClick = new EventEmitter();
/** @description This event is triggered whenever the user selects a different tab, indicating that the active tab has changed. It allows you to respond to tab selection changes, such as updating content or executing specific logic based on the newly selected tab.
* @param event. The custom event. Custom event was created with: event.detail( index, oldIndex)
* index - The tab's index.
* oldIndex - The tab's old index.
*/
this.onChange = new EventEmitter();
/** @description This event is triggered whenever a user closes a browser tab. It allows you to execute custom actions or clean up resources associated with that tab right before it is removed from the browser. The event provides details about the closed tab, such as its identifier and any relevant data, enabling you to manage your application's state accordingly.
* @param event. The custom event. Custom event was created with: event.detail( index)
* index - The tab's index.
*/
this.onClose = new EventEmitter();
/** @description This event is dispatched immediately before a tab is closed, giving you an opportunity to intercept the closure. By calling event.preventDefault() within the event handler, you can cancel the default close action and prevent the tab from closing. This allows you to perform actions such as prompting the user to save changes or confirming the close operation before proceeding.
* @param event. The custom event. Custom event was created with: event.detail( index)
* index - The tab's index.
*/
this.onClosing = new EventEmitter();
/** @description This event is triggered when a user completes a drag operation, signaling that the dragged element has been released and the drag sequence has finished. It allows you to perform cleanup actions, update UI elements, or handle any final logic after dragging is concluded.
* @param event. The custom event. Custom event was created with: event.detail( left, top, index, label)
* left - The tab's left position.
* top - The tab's top position.
* index - The tab's index.
* label - The tab's label.
*/
this.onDragEnd = new EventEmitter();
/** @description This event is fired when a user initiates a drag operation, typically by clicking and beginning to move a draggable element. It marks the beginning of the drag-and-drop sequence, allowing you to set up any necessary data or visual feedback for the dragged item.
* @param event. The custom event. Custom event was created with: event.detail( left, top, index, label)
* left - The tab's left position.
* top - The tab's top position.
* index - The tab's index.
* label - The tab's label.
*/
this.onDragStart = new EventEmitter();
/** @description This event is triggered whenever the order of tabs within a tab group changes, such as when a user drags and drops a tab to a new position. It allows you to respond to tab reordering actions, enabling features like updating your application's state or saving the new tab arrangement.
* @param event. The custom event. Custom event was created with: event.detail( index, oldIndex)
* index - The tab's index.
* oldIndex - The tab's old index.
*/
this.onReorder = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-tabs');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Determines whether the "Add new tab" button (typically represented by a plus sign "+") is visible in the user interface. When set to true, the button is displayed, allowing users to add new tabs; when set to false, the button is hidden. This property can be used to both retrieve the current visibility status or control the display of the button. */
get addNewTab() {
return this.nativeElement ? this.nativeElement.addNewTab : undefined;
}
set addNewTab(value) {
this.nativeElement ? this.nativeElement.addNewTab = value : undefined;
}
/** @description Enables toggle functionality for tab selection. When set to true, the selectedIndex property can be assigned a value of null, indicating that no tab is currently selected. This allows users to deselect any active tab, leaving the tab interface with no selected tab. */
get allowToggle() {
return this.nativeElement ? this.nativeElement.allowToggle : undefined;
}
set allowToggle(value) {
this.nativeElement ? this.nativeElement.allowToggle = value : undefined;
}
/** @description Configures or retrieves the current animation mode. When set to 'none', all animations are disabled, resulting in immediate transitions without animation effects. Use other valid values to enable or customize animation behavior as needed. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Configures or retrieves the display mode of the close button. This property determines how the close button appears or behaves within the user interface, such as being always visible, visible on hover, or hidden. */
get closeButtonMode() {
return this.nativeElement ? this.nativeElement.closeButtonMode : undefined;
}
set closeButtonMode(value) {
this.nativeElement ? this.nativeElement.closeButtonMode = value : undefined;
}
/** @description Controls whether close buttons are shown in the user interface. Setting this property to true will display close buttons; setting it to false will hide them. You can also retrieve the current state to determine if close buttons are visible. */
get closeButtons() {
return this.nativeElement ? this.nativeElement.closeButtons : undefined;
}
set closeButtons(value) {
this.nativeElement ? this.nativeElement.closeButtons = value : undefined;
}
/** @description Determines whether the content section of the Tabs component is expanded or collapsed. When set to 'true', the content section is hidden (collapsed); when set to 'false', the content is visible (expanded). This property can be used to programmatically control or retrieve the collapsed state of the Tabs content. */
get collapsed() {
return this.nativeElement ? this.nativeElement.collapsed : undefined;
}
set collapsed(value) {
this.nativeElement ? this.nativeElement.collapsed = value : undefined;
}
/** @description Controls whether the collapsible functionality is active, allowing content sections to expand or collapse when enabled. When disabled, all content sections remain fully expanded and cannot be collapsed. */
get collapsible() {
return this.nativeElement ? this.nativeElement.collapsible : undefined;
}
set collapsible(value) {
this.nativeElement ? this.nativeElement.collapsible = value : undefined;
}
/** @description Specifies the data source from which the content for each tab will be retrieved and displayed. This property defines what data will populate the individual tabs when the Tabs component is rendered. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Determines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element becomes non-interactive and typically appears visually muted to indicate its inactive state. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Allows users to scroll horizontally through tab labels in the tab strip using the mouse wheel when the tabs exceed the visible area (i.e., when the tab strip overflows). Enabling this option lets users navigate through hidden tabs by scrolling, while disabling it prevents mouse wheel scrolling in the tab strip. */
get enableMouseWheelAction() {
return this.nativeElement ? this.nativeElement.enableMouseWheelAction : undefined;
}
set enableMouseWheelAction(value) {
this.nativeElement ? this.nativeElement.enableMouseWheelAction = value : undefined;
}
/** @description Sets or retrieves the 'unlockKey' value, a unique key or code required to unlock and gain access to the product’s features or content. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Specifies or retrieves the current locale setting, which determines language and regional formatting. This property works together with the messages property to display localized content or translations based on the selected locale. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback function associated with the localization module, typically invoked during processes such as language selection, text translation, or locale updates to handle localization-specific behavior. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or retrieves an object containing key-value pairs of strings used throughout the widget’s interface. These strings can be customized for different languages, enabling localization of the widget’s text content. This property is typically used alongside the locale property to display the widget’s labels, messages, and prompts in the selected language. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Gets the current name of the widget, or assigns a new name to the widget when provided a value. The name uniquely identifies the widget instance within the application. */
get name() {
return this.nativeElement ? this.nativeElement.name : undefined;
}
set name(value) {
this.nativeElement ? this.nativeElement.name = value : undefined;
}
/** @description Specifies or retrieves the behavior of the scroll buttons for the Tabs component. This property is relevant only when the tabLayout is set to 'scroll', allowing navigation through tab items that exceed the visible area. Use this option to control how scroll buttons appear and function when there are more tabs than can be displayed at once. */
get overflow() {
return this.nativeElement ? this.nativeElement.overflow : undefined;
}
set overflow(value) {
this.nativeElement ? this.nativeElement.overflow = value : undefined;
}
/** @description Prevents all user interactions with the element, making it unresponsive to mouse, keyboard, and touch events such as clicking, dragging, or typing. This means the element cannot be activated, focused, or interacted with in any way by the user. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Controls whether the tab reordering feature is enabled or disabled. When enabled, users can rearrange the tabs by dragging a tab and dropping it onto a new position within the tab list. This allows for dynamic reordering of tabs based on the user's preference. When disabled, tabs remain in their original order and cannot be moved by the user. */
get reorder() {
return this.nativeElement ? this.nativeElement.reorder : undefined;
}
set reorder(value) {
this.nativeElement ? this.nativeElement.reorder = value : undefined;
}
/** @description Determines whether users can resize tab labels by clicking and dragging them with the mouse. When enabled, this allows tab labels to be adjusted interactively by the user. When disabled, tab label sizes remain fixed and cannot be changed through mouse actions. This setting can be used to either retrieve the current resizability state or update it. */
get resize() {
return this.nativeElement ? this.nativeElement.resize : undefined;
}
set resize(value) {
this.nativeElement ? this.nativeElement.resize = value : undefined;
}
/** @description Gets or sets a value that determines whether the element’s text direction is set to right-to-left (RTL) alignment, ensuring proper display and support for languages and locales that read from right to left, such as Arabic or Hebrew. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Configures or retrieves the position of the scroll buttons within the component, allowing you to specify where the scroll controls appear (for example, at the start, end, or both ends of the scrollable area). This property enables precise placement of navigation controls for improved user experience. */
get scrollButtonsPosition() {
return this.nativeElement ? this.nativeElement.scrollButtonsPosition : undefined;
}
set scrollButtonsPosition(value) {
this.nativeElement ? this.nativeElement.scrollButtonsPosition = value : undefined;
}
/** @description Specifies or retrieves how the tab strip responds when users interact with the scroll buttons. Determines the scrolling behavior—such as the distance the tab strip moves or whether scrolling is smooth or immediate—when the left or right scroll buttons are clicked. */
get scrollMode() {
return this.nativeElement ? this.nativeElement.scrollMode : undefined;
}
set scrollMode(value) {
this.nativeElement ? this.nativeElement.scrollMode = value : undefined;
}
/** @description Gets the index or identifier of the currently selected tab, or allows you to specify which tab should be selected. */
get selectedIndex() {
return this.nativeElement ? this.nativeElement.selectedIndex : undefined;
}
set selectedIndex(value) {
this.nativeElement ? this.nativeElement.selectedIndex = value : undefined;
}
/** @description Specifies how users can navigate or switch between different tabs, such as by clicking, keyboard shortcuts, or swipe gestures. This setting defines the interaction method for moving from one tab to another within the tabbed interface. */
get selectionMode() {
return this.nativeElement ? this.nativeElement.selectionMode : undefined;
}
set selectionMode(value) {
this.nativeElement ? this.nativeElement.selectionMode = value : undefined;
}
/** @description Determines how the component handles situations where the element’s width is insufficient to display all tab labels. Offers four configurable behaviors for managing tab overflow, such as scrolling, collapsing, fading, or displaying an overflow menu. */
get tabLayout() {
return this.nativeElement ? this.nativeElement.tabLayout : undefined;
}
set tabLayout(value) {
this.nativeElement ? this.nativeElement.tabLayout = value : undefined;
}
/** @description Specifies or retrieves the position of the tab strip within the user interface, determining where the tab strip is displayed (e.g., top, bottom, left, or right) relative to the main content area. */
get tabPosition() {
return this.nativeElement ? this.nativeElement.tabPosition : undefined;
}
set tabPosition(value) {
this.nativeElement ? this.nativeElement.tabPosition = value : undefined;
}
/** @description Specifies or retrieves the direction in which the text is displayed within the tabs, such as horizontal or vertical orientation. This property allows you to control whether tab labels are arranged from left to right, top to bottom, or in another supported direction. */
get tabTextOrientation() {
return this.nativeElement ? this.nativeElement.tabTextOrientation : undefined;
}
set tabTextOrientation(value) {
this.nativeElement ? this.nativeElement.tabTextOrientation = value : undefined;
}
/** @description Specifies the theme to be applied, which controls the visual style, color scheme, and overall appearance of the element. The selected theme determines how the element is displayed to users. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to interact with it using tab navigation or other focus-related actions. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Expands or collapses the content section, allowing users to toggle the visibility of its contents for improved usability and a cleaner interface.
*/
collapse() {
if (this.nativeElement.isRendered) {
this.nativeElement.collapse();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.collapse();
});
}
}
/** @description Retrieves the label (displayed title) of the Tab located at the specified index within the Tab collection. The index parameter is zero-based, meaning 0 refers to the first Tab.
* @param {number} index. The index of the tab.
* @returns {string}
*/
getTabLabel(index) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getTabLabel(index);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getTabLabelSync(index) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getTabLabel(index);
}
return null;
}
/** @description Retrieves and returns the content associated with the Tab located at the specified index within the Tab component. This allows access to the data or elements currently displayed in the selected Tab.
* @param {number} index. The index of the tab.
* @returns {HTMLElement}
*/
getTabContent(index) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getTabContent(index);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getTabContentSync(index) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getTabContent(index);
}
return null;
}
/** @description Ensures the specified tab is brought into view within its container by automatically scrolling the container so that the entire tab is visible to the user.
* @param {number} index. The index of the tab to scroll to.
*/
ensureVisible(index) {
if (this.nativeElement.isRendered) {
this.nativeElement.ensureVisible(index);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.ensureVisible(index);
});
}
}
/** @description Expands the content section to reveal additional information or elements that are initially hidden, providing users with more detailed content or options within this area.
*/
expand() {
if (this.nativeElement.isRendered) {
this.nativeElement.expand();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.expand();
});
}
}
/** @description Returns an array containing all TabItem objects that are child elements of the specified element. Each TabItem in the array represents a tab within the tabbed interface, allowing you to programmatically access and manipulate individual tabs.
* @returns {any}
*/
getTabs() {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getTabs();
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getTabsSync() {
if (this.nativeElement.isRendered) {
return this.nativeElement.getTabs();
}
return null;
}
/** @description Returns the distance, in pixels, between the edge of the tab item container (the smart-tab-item element) and the corresponding edge of the parent smart-tabs element where the tab strip is located. This offset indicates how far the tab item container is positioned from the start of the tab strip within the tabs component, allowing for precise alignment and positioning calculations.
* @param {number} index. The index of the tab item.
* @returns {number}
*/
getOffsetFromEdgeOfElement(index) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getOffsetFromEdgeOfElement(index);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getOffsetFromEdgeOfElementSync(index) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getOffsetFromEdgeOfElement(index);
}
return null;
}
/** @description Adds a new tab to the tab navigation interface and creates a corresponding content section. The new tab becomes selectable, allowing users to view and interact with its associated content when it is active.
* @param {number} index. The index to insert a new tab at.
* @param {any} details. An Object with the fields "label", "labelSize", "content" and "group".
*/
insert(index, details) {
if (this.nativeElement.isRendered) {
this.nativeElement.insert(index, details);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.insert(index, details);
});
}
}
/** @description Refreshes the Tabs header section to ensure it displays correctly. This is particularly useful when the header contains elements—such as images or dynamic content—that may load after the initial rendering of the Tabs. By calling this function, you can re-render or update the header layout to accommodate any late-loaded or dynamically updated elements, ensuring alignment and visual consistency.
*/
refreshTabHeader() {
if (this.nativeElement.isRendered) {
this.nativeElement.refreshTabHeader();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.refreshTabHeader();
});
}
}
/** @description Removes the specified tab along with its corresponding content section from the user interface, ensuring that both the tab header and its related content are deleted and no longer accessible to the user.
* @param {number} index. The index of the tab to remove.
*/
removeAt(index) {
if (this.nativeElement.isRendered) {
this.nativeElement.removeAt(index);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.removeAt(index);
});
}
}
/** @description Programmatically activates the specified tab in a tabbed interface, making its associated content visible while hiding content from other tabs.
* @param {number} index. The index of the tab to select.
*/
select(index) {
if (this.nativeElement.isRendered) {
this.nativeElement.select(index);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.select(index);
});
}
}
/** @description Updates a specific tab along with its corresponding content section, ensuring that both the tab interface and its related content are synchronized and reflect the latest changes.
* @param {number} index. The index of the tab to update.
* @param {string} label. The new label of the tab. The value can be the id of an HTMLTemplateElement
* @param {string | HTMLElement} content. The new content of the tab.
*/
update(index, label, content) {
if (this.nativeElement.isRendered) {
this.nativeElement.update(index, label, content);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.update(index, label, content);
});
}
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
this.listen();
}
ngOnDestroy() {
this.unlisten();
}
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
/** @description Add event listeners. */
listen() {
const that = this;
that.eventHandlers['addNewTabClickHandler'] = (event) => { that.onAddNewTabClick.emit(event); };
that.nativeElement.addEventListener('addNewTabClick', that.eventHandlers['addNewTabClickHandler']);
that.eventHandlers['changeHandler'] = (event) => { that.onChange.emit(event); };
that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
that.eventHandlers['closeHandler'] = (event) => { that.onClose.emit(event); };
that.nativeElement.addEventListener('close', that.eventHandlers['closeHandler']);
that.eventHandlers['closingHandler'] = (event) => { that.onClosing.emit(event); };
that.nativeElement.addEventListener('closing', that.eventHandlers['closingHandler']);
that.eventHandlers['dragEndHandler'] = (event) => { that.onDragEnd.emit(event); };
that.nativeElement.addEventListener('dragEnd', that.eventHandlers['dragEndHandler']);
that.eventHandlers['dragStartHandler'] = (event) => { that.onDragStart.emit(event); };
that.nativeElement.addEventListener('dragStart', that.eventHandlers['dragStartHandler']);
that.eventHandlers['reorderHandler'] = (event) => { that.onReorder.emit(event); };
that.nativeElement.addEventListener('reorder', that.eventHandlers['reorderHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['addNewTabClickHandler']) {
that.nativeElement.removeEventListener('addNewTabClick', that.eventHandlers['addNewTabClickHandler']);
}
if (that.eventHandlers['changeHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
}
if (that.eventHandlers['closeHandler']) {
that.nativeElement.removeEventListener('close', that.eventHandlers['closeHandler']);
}
if (that.eventHandlers['closingHandler']) {
that.nativeElement.removeEventListener('closing', that.eventHandlers['closingHandler']);
}
if (that.eventHandlers['dragEndHandler']) {
that.nativeElement.removeEventListener('dragEnd', that.eventHandlers['dragEndHandler']);
}
if (that.eventHandlers['dragStartHandler']) {
that.nativeElement.removeEventListener('dragStart', that.eventHandlers['dragStartHandler']);
}
if (that.eventHandlers['reorderHandler']) {
that.nativeElement.removeEventListener('reorder', that.eventHandlers['reorderHandler']);
}
}
}
TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
TabsComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: TabsComponent, selector: "smart-tabs, [smart-tabs]", inputs: { addNewTab: "addNewTab", allowToggle: "allowToggle", animation: "animation", closeButtonMode: "closeButtonMode", closeButtons: "closeButtons", collapsed: "collapsed", collapsible: "collapsible", dataSource: "dataSource", disabled: "disabled", enableMouseWheelAction: "enableMouseWheelAction", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", name: "name", overflow: "overflow", readonly: "readonly", reorder: "reorder", resize: "resize", rightToLeft: "rightToLeft", scrollButtonsPosition: "scrollButtonsPosition", scrollMode: "scrollMode", selectedIndex: "selectedIndex", selectionMode: "selectionMode", tabLayout: "tabLayout", tabPosition: "tabPosition", tabTextOrientation: "tabTextOrientation", theme: "theme", unfocusable: "unfocusable" }, outputs: { onAddNewTabClick: "onAddNewTabClick", onChange: "onChange", onClose: "onClose", onClosing: "onClosing", onDragEnd: "onDragEnd", onDragStart: "onDragStart", onReorder: "onReorder" }, exportAs: ["smart-tabs"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TabsComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-tabs', selector: 'smart-tabs, [smart-tabs]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { addNewTab: [{
type: Input
}], allowToggle: [{
type: Input
}], animation: [{
type: Input
}], closeButtonMode: [{
type: Input
}], closeButtons: [{
type: Input
}], collapsed: [{
type: Input
}], collapsible: [{
type: Input
}], dataSource: [{
type: Input
}], disabled: [{
type: Input
}], enableMouseWheelAction: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], name: [{
type: Input
}], overflow: [{
type: Input
}], readonly: [{
type: Input
}], reorder: [{
type: Input
}], resize: [{
type: Input
}], rightToLeft: [{
type: Input
}], scrollButtonsPosition: [{
type: Input
}], scrollMode: [{
type: Input
}], selectedIndex: [{
type: Input
}], selectionMode: [{
type: Input
}], tabLayout: [{
type: Input
}], tabPosition: [{
type: Input
}], tabTextOrientation: [{
type: Input
}], theme: [{
type: Input
}], unfocusable: [{
type: Input
}], onAddNewTabClick: [{
type: Output
}], onChange: [{
type: Output
}], onClose: [{
type: Output
}], onClosing: [{
type: Output
}], onDragEnd: [{
type: Output
}], onDragStart: [{
type: Output
}], onReorder: [{
type: Output
}] } });
class TabItemComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-tab-item');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description "Represents the visual and interactive state of the close button within a tab item. This can include states such as default, hovered, focused, active (pressed), or disabled, and determines how the close button appears and responds to user actions." */
get closeButtonHidden() {
return this.nativeElement ? this.nativeElement.closeButtonHidden : undefined;
}
set closeButtonHidden(value) {
this.nativeElement ? this.nativeElement.closeButtonHidden = value : undefined;
}
/** @description Prevents the Tab item from being interacted with or selected by the user. When disabled, the Tab item appears visually inactive and cannot be activated through mouse, touch, or keyboard navigation. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description "Indicates the numerical position of an individual tab item within a tabbed navigation component, starting from zero. Used to identify, activate, or manage specific tabs based on their sequence in the tab list." */
get index() {
return this.nativeElement ? this.nativeElement.index : undefined;
}
set index(value) {
this.nativeElement ? this.nativeElement.index = value : undefined;
}
/** @description Indicates the visual state and styling applied to a tab item when it is currently selected or active, signaling to users which tab is in focus and displaying its associated content. */
get selected() {
return this.nativeElement ? this.nativeElement.selected : undefined;
}
set selected(value) {
this.nativeElement ? this.nativeElement.selected = value : undefined;
}
/** @description Label text displayed on a navigation tab within a tabbed interface. Used to identify and differentiate each tab for the user. */
get label() {
return this.nativeElement ? this.nativeElement.label : undefined;
}
set label(value) {
this.nativeElement ? this.nativeElement.label = value : undefined;
}
/** @description Content displayed within a tab panel, representing the information or elements associated with a specific tab item in a tabbed interface. */
get content() {
return this.nativeElement ? this.nativeElement.content : undefined;
}
set content(value) {
this.nativeElement ? this.nativeElement.content = value : undefined;
}
/** @description Specifies the font size of the label text displayed on each tab item. */
get labelSize() {
return this.nativeElement ? this.nativeElement.labelSize : undefined;
}
set labelSize(value) {
this.nativeElement ? this.nativeElement.labelSize = value : undefined;
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
}
ngOnDestroy() { }
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
}
TabItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TabItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
TabItemComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: TabItemComponent, selector: "smart-tab-item, [smart-tab-item]", inputs: { closeButtonHidden: "closeButtonHidden", disabled: "disabled", index: "index", selected: "selected", label: "label", content: "content", labelSize: "labelSize" }, exportAs: ["smart-tab-item"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TabItemComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-tab-item', selector: 'smart-tab-item, [smart-tab-item]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { closeButtonHidden: [{
type: Input
}], disabled: [{
type: Input
}], index: [{
type: Input
}], selected: [{
type: Input
}], label: [{
type: Input
}], content: [{
type: Input
}], labelSize: [{
type: Input
}] } });
class TabItemsGroupComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-tab-items-group');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description */
get label() {
return this.nativeElement ? this.nativeElement.label : undefined;
}
set label(value) {
this.nativeElement ? this.nativeElement.label = value : undefined;
}
/** @description */
get labelSize() {
return this.nativeElement ? this.nativeElement.labelSize : undefined;
}
set labelSize(value) {
this.nativeElement ? this.nativeElement.labelSize = value : undefined;
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
}
ngOnDestroy() { }
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
}
TabItemsGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TabItemsGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
TabItemsGroupComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: TabItemsGroupComponent, selector: "smart-tab-items-group, [smart-tab-items-group]", inputs: { label: "label", labelSize: "labelSize" }, exportAs: ["smart-tab-items-group"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TabItemsGroupComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-tab-items-group', selector: 'smart-tab-items-group, [smart-tab-items-group]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { label: [{
type: Input
}], labelSize: [{
type: Input
}] } });
class TabsModule {
}
TabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TabsModule, declarations: [TabsComponent, TabItemComponent, TabItemsGroupComponent], exports: [TabsComponent, TabItemComponent, TabItemsGroupComponent