@sapudex/web-components 0.111.0

package/config/dist/TabNavigation.js

@@ -0,0 +1,650 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var UDExTabNavigation_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import { isUp, isDown, isRight, isLeft, isEnter, isSpace, isEscape, isTabNext, isTabPrevious, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import { MORE } from "./generated/i18n/i18n-defaults.js";
+// Templates
+import TabNavigationTemplate from "./generated/templates/TabNavigationTemplate.lit.js";
+import TabNavigationPopover from "./generated/templates/TabNavigationPopoverTemplate.lit.js";
+// Styles
+import TabNavigationCss from "./generated/themes/TabNavigation.css.js";
+const staticAreaTabStyles = [];
+export var SizeMoreButton;
+(function (SizeMoreButton) {
+    SizeMoreButton["Small"] = "Small";
+    SizeMoreButton["Medium"] = "Medium";
+})(SizeMoreButton || (SizeMoreButton = {}));
+export var Mode;
+(function (Mode) {
+    Mode["Light"] = "Light";
+    Mode["Dark"] = "Dark";
+})(Mode || (Mode = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-tab-navigation</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/TabNavigation.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.web-components.UDExTabNavigation
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname udex-tab-navigation
+ * @public
+ */
+let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI5Element {
+    constructor() {
+        super();
+        this._maxTitleLength = 25;
+        this._maxTitleLengthInSecondLines = this._maxTitleLength * 2;
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    static async onDefine() {
+        UDExTabNavigation_1.i18nBundle = await getI18nBundle("udex-tab-navigation");
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this.getHeader(), this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this.getHeader(), this._handleResizeBound);
+    }
+    _handleResize() {
+        this.handleClosePopover();
+        this._width = this.offsetWidth;
+    }
+    emitClickEvent(pageIndex) {
+        this.fireEvent("click", { currentPage: pageIndex });
+    }
+    onBeforeRendering() {
+        this.setSelectedTab();
+    }
+    setSelectedTab() {
+        if (!this.items.length) {
+            return;
+        }
+        this.resetSelectedTabs();
+        this.setCurrentSelectedTab();
+        this.setRealTabToItems();
+        this.setElementInHeader();
+    }
+    resetSelectedTabs() {
+        this.items.forEach(tab => {
+            tab._selected = false;
+        });
+    }
+    setCurrentSelectedTab() {
+        const selectedTabs = this.items.filter(tab => tab.selected);
+        this._selectedTab = selectedTabs.length ? selectedTabs[0] : this.items[0];
+        this._selectedTab._selected = Boolean(selectedTabs.length ? selectedTabs.length : this.items[0]);
+    }
+    setRealTabToItems() {
+        const contentId = this.__id;
+        this.items.forEach((tab, index, arr) => {
+            tab._iconWithoutBackground = this.iconWithoutBackground;
+            tab._posinset = index + 1;
+            tab._setsize = arr.length;
+            tab._contentId = `udex-${contentId}-content`;
+            tab._realTab = this._selectedTab;
+        });
+    }
+    setElementInHeader() {
+        this.items.forEach(item => {
+            item.getElementInHeader = () => this.getDomRef().querySelector(`[id="${item.__id}"]`);
+        });
+    }
+    onAfterRendering() {
+        if (this.items.length) {
+            this.setItemsInHeader();
+            this.initOutsideClick();
+            this.setVisibleTabs();
+            this.applyTabIndex();
+        }
+        else {
+            throw new Error("You have to add the 'udex-tab' as a default slot to the udex-tab-navigation.");
+        }
+    }
+    initOutsideClick() {
+        if (this._responsivePopover?.opened) {
+            this.handleOutsideClick();
+        }
+    }
+    handleOutsideClick() {
+        document.addEventListener("click", () => {
+            if (this.getMoreButton()) {
+                this.getMoreButton().classList.remove("udex-tab-navigation__button-more--toggled");
+            }
+        });
+    }
+    onTabClick(e) {
+        const tab = this.getTab(e.target);
+        if (!tab) {
+            return;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        const selectedTabIndex = this.items.findIndex(item => item.__id === tab.id);
+        this._selectedTab = this.items[selectedTabIndex];
+        this.updateSelectedTab(selectedTabIndex);
+        this.emitClickEvent(selectedTabIndex + 1);
+    }
+    getTab(el) {
+        while (el) {
+            if (el.localName === "button" && el.getAttribute("role") === "tab") {
+                return el;
+            }
+            el = el.parentElement;
+        }
+        return false;
+    }
+    updateSelectedTab(selectedTabIndex) {
+        this.items.forEach((item, index) => {
+            item.selected = selectedTabIndex === index;
+            if (item._selected) {
+                item._selected = false;
+            }
+        });
+        this.setTabsIndex(selectedTabIndex);
+    }
+    setItemsInHeader() {
+        const tabHeader = this.getTabHeader();
+        let allItemsWidth = 0;
+        if (!this._selectedTab) {
+            return;
+        }
+        const itemsDomRefs = this.items.map(item => item.getTabInHeaderDomRef());
+        this.getMoreButton()?.setAttribute("hidden", "");
+        this.removeHiddenAttributeInAllTabs(itemsDomRefs);
+        allItemsWidth += this.getTotalItemsWidth(itemsDomRefs);
+        const hasOverflow = tabHeader.offsetWidth < allItemsWidth;
+        if (!hasOverflow) {
+            return;
+        }
+        this.getMoreButton()?.removeAttribute("hidden");
+        this.hideLastVisibleTab(itemsDomRefs);
+    }
+    getTabHeader() {
+        return this.shadowRoot.querySelector(`#${this.__id}-header-tabs`);
+    }
+    removeHiddenAttributeInAllTabs(itemsDomRefs) {
+        for (let i = 0; i < itemsDomRefs.length; i++) {
+            itemsDomRefs[i]?.removeAttribute("hidden");
+        }
+    }
+    getTotalItemsWidth(itemsDomRefs) {
+        let totalItemsWidth = 0;
+        itemsDomRefs.forEach(item => {
+            totalItemsWidth += this.getItemWidth(item);
+        });
+        return totalItemsWidth;
+    }
+    getItemWidth(itemDomRef) {
+        const tabTitle = itemDomRef.innerText;
+        const context = this.getItemContext();
+        const { indentation, marginInlineEnd } = this.getItemIndentation(itemDomRef);
+        if (tabTitle.length > this._maxTitleLength && tabTitle.length <= this._maxTitleLengthInSecondLines) {
+            const maxWidth = this.getMaxWidthItemTitle(tabTitle, context, indentation);
+            this.setItemWidth(itemDomRef, maxWidth, marginInlineEnd);
+            return maxWidth;
+        }
+        if (tabTitle.length > this._maxTitleLengthInSecondLines) {
+            const maxWidth = this.getOverloadMaxWidthItemTitle(tabTitle, context, indentation);
+            this.setItemWidth(itemDomRef, maxWidth, marginInlineEnd);
+            return maxWidth;
+        }
+        const textWidth = context.measureText(tabTitle).width;
+        return Math.ceil(textWidth) + indentation;
+    }
+    setItemWidth(itemDomRef, maxWidth, marginInlineEnd) {
+        itemDomRef.style.maxWidth = `${maxWidth - marginInlineEnd}px`;
+    }
+    getItemContext() {
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("2d");
+        context.font = "700 16px '72 Brand Variable'";
+        return context;
+    }
+    getItemIndentation(itemDomRef) {
+        const styles = window.getComputedStyle(itemDomRef);
+        const paddingInlineStart = Number.parseInt(styles.paddingInlineStart);
+        const paddingInlineEnd = Number.parseInt(styles.paddingInlineEnd);
+        const marginInlineEnd = Number.parseInt(styles.marginInlineEnd);
+        const indentation = paddingInlineStart + paddingInlineEnd + marginInlineEnd;
+        return { indentation, marginInlineEnd };
+    }
+    getMaxWidthItemTitle(tabTitle, context, indentation) {
+        const slicedFirstLineText = tabTitle.slice(0, this._maxTitleLength);
+        return this.getItemTitleWidth(slicedFirstLineText, context, tabTitle, indentation);
+    }
+    getOverloadMaxWidthItemTitle(tabTitle, context, indentation) {
+        const slicedFirstLineText = tabTitle.slice(0, Math.ceil(tabTitle.length / 2));
+        return this.getItemTitleWidth(slicedFirstLineText, context, tabTitle, indentation);
+    }
+    getItemTitleWidth(slicedFirstLineText, context, tabTitle, indentation) {
+        const findLastSpaceIndex = slicedFirstLineText.lastIndexOf(" ");
+        const firstLineText = slicedFirstLineText.slice(0, findLastSpaceIndex);
+        const firstLineWidth = Math.ceil(context.measureText(firstLineText).width);
+        const secondLineText = tabTitle.slice(findLastSpaceIndex, tabTitle.length);
+        const secondLineWidth = Math.ceil(context.measureText(secondLineText).width);
+        return firstLineWidth > secondLineWidth ? firstLineWidth + indentation : secondLineWidth + indentation;
+    }
+    hideLastVisibleTab(itemsDomRefs) {
+        const selectedTab = this.getRootTab(this._selectedTab);
+        const selectedTabDomRef = selectedTab.getTabInHeaderDomRef();
+        const containerWidth = this.getTabHeader().offsetWidth;
+        const selectedItemWidth = this.getSelectedItemWidth(itemsDomRefs, selectedTabDomRef);
+        const lastVisibleTabIndex = this.findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemWidth);
+        this.hideInappropriateTabs(lastVisibleTabIndex, itemsDomRefs);
+    }
+    getRootTab(tab) {
+        while (tab.hasAttribute("udex-tab")) {
+            if (tab.parentElement.hasAttribute("udex-tab-navigation")) {
+                break;
+            }
+            tab = tab.parentElement;
+        }
+        return tab;
+    }
+    getSelectedItemWidth(itemsDomRefs, selectedTabDomRef) {
+        const index = itemsDomRefs.indexOf(selectedTabDomRef);
+        const width = this.getItemWidth(selectedTabDomRef);
+        itemsDomRefs.splice(index, 1);
+        return width;
+    }
+    findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemWidth, startIndex = 0) {
+        let lastVisibleIndex = startIndex - 1;
+        let index = startIndex;
+        for (; index < itemsDomRefs.length; index++) {
+            const itemWidth = this.getItemWidth(itemsDomRefs[index]);
+            if (containerWidth < selectedItemWidth + itemWidth) {
+                break;
+            }
+            selectedItemWidth += itemWidth;
+            lastVisibleIndex = index;
+        }
+        return lastVisibleIndex;
+    }
+    hideInappropriateTabs(lastVisibleTabIndex, itemsDomRefs) {
+        for (let i = lastVisibleTabIndex + 1; i < itemsDomRefs.length; i++) {
+            itemsDomRefs[i].setAttribute("hidden", "");
+        }
+    }
+    setVisibleTabs() {
+        this._visibleTabs = this.items.map(tab => tab.getTabInHeaderDomRef())
+            .filter(tab => !tab.hasAttribute("hidden"));
+        if (!this.getMoreButton().hasAttribute("hidden")) {
+            this._visibleTabs.push(this.getMoreButton());
+        }
+    }
+    applyTabIndex() {
+        if (!this.shadowRoot.contains(document.activeElement)) {
+            const itemsDomRefs = this.getRootTab(this._selectedTab);
+            const currentIndex = this.items.indexOf(itemsDomRefs);
+            this.setTabsIndex(currentIndex);
+        }
+    }
+    setTabsIndex(currentIndex) {
+        this.items.forEach((tab, index) => {
+            tab._tabIndex = index === currentIndex ? "0" : "-1";
+        });
+    }
+    handleOverflowItemClick(e) {
+        if (e.target.localName === "button") {
+            e.preventDefault();
+            this.onItemSelect(e.target.id);
+        }
+        this.handleClosePopover();
+    }
+    onItemSelect(selectedId) {
+        const [selectedTab] = this.items.filter(item => item.__id === selectedId);
+        let selectedTabIndex = 0;
+        this._selectedTab = selectedTab;
+        this.items.forEach((item, index) => {
+            item.selected = item.__id === selectedId;
+            if (item.__id === selectedId) {
+                selectedTabIndex = index;
+            }
+        });
+        this.setVisibleTabs();
+        this.setTabsIndex(selectedTabIndex);
+        this.emitClickEvent(selectedTabIndex + 1);
+    }
+    getMoreButton() {
+        return this.shadowRoot.querySelector(".udex-tab-navigation__button-more");
+    }
+    getHeader() {
+        return this.shadowRoot.querySelector(`#${this.__id}-header`);
+    }
+    async handleMoreButton() {
+        this._responsivePopover = await this.getResponsePopover();
+        this.updateOverflowItems();
+        this.handleTogglePopover();
+    }
+    updateOverflowItems() {
+        this._overflowItems = this.items.filter(item => {
+            const headerRef = item.getTabInHeaderDomRef();
+            return headerRef && headerRef.hasAttribute("hidden");
+        });
+    }
+    handleTogglePopover() {
+        if (this._responsivePopover?.opened) {
+            this.handleClosePopover();
+        }
+        else {
+            this.handleOpenPopover();
+        }
+    }
+    handleClosePopover() {
+        if (this._responsivePopover?.opened) {
+            this._responsivePopover.close();
+            this.getMoreButton().classList.remove("udex-tab-navigation__button-more--toggled");
+            this._isExpanded = false;
+        }
+    }
+    async handleOpenPopover() {
+        if (!this._responsivePopover?.opened) {
+            await this._responsivePopover.showAt(this.getMoreButton());
+            this.getMoreButton().classList.add("udex-tab-navigation__button-more--toggled");
+            this._isExpanded = true;
+        }
+    }
+    handleKeyDown(e) {
+        this.handleRightArrow(e);
+        this.handleLeftArrow(e);
+        this.handleTabNext(e);
+        this.handleTabPrevious(e);
+        this.handleHomeKey(e);
+        this.handleEndKey(e);
+    }
+    handleRightArrow(e) {
+        if (isRight(e)) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.onFocusRightItem(e.target);
+        }
+    }
+    onFocusRightItem(target) {
+        const previousSelectedIndex = this.getTabIndexById(target.id);
+        const lastIndex = this._visibleTabs.length;
+        const nextSelectIndex = previousSelectedIndex + 1 < lastIndex ? previousSelectedIndex + 1 : 0;
+        this._visibleTabs[nextSelectIndex].focus();
+    }
+    getTabIndexById(id) {
+        return this._visibleTabs.findIndex(tab => tab.id === id);
+    }
+    handleLeftArrow(e) {
+        if (isLeft(e)) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.onFocusLeftItem(e.target);
+        }
+    }
+    onFocusLeftItem(target) {
+        const previousSelectedIndex = this.getTabIndexById(target.id);
+        const lastIndex = this._visibleTabs.length - 1;
+        const previousSelectIndex = previousSelectedIndex - 1 < 0 ? lastIndex : previousSelectedIndex - 1;
+        this._visibleTabs[previousSelectIndex].focus();
+    }
+    handleTabNext(e) {
+        if (isTabNext(e)) {
+            const previousSelectedIndex = this.getTabIndexById(e.target.id);
+            this.onTabNext(e, previousSelectedIndex);
+        }
+    }
+    onTabNext(e, previousSelectedIndex) {
+        const isMoreButton = this._visibleTabs[this._visibleTabs.length - 1] === this.getMoreButton();
+        const nextSelectIndex = previousSelectedIndex + 1;
+        if (nextSelectIndex < this._visibleTabs.length || (isMoreButton && nextSelectIndex < this._visibleTabs.length)) {
+            e.preventDefault();
+            this._visibleTabs[nextSelectIndex].focus();
+        }
+    }
+    handleTabPrevious(e) {
+        if (isTabPrevious(e)) {
+            const previousSelectedIndex = this.getTabIndexById(e.target.id);
+            this.onTabPrevious(e, previousSelectedIndex);
+        }
+    }
+    onTabPrevious(e, previousSelectedIndex) {
+        const previousSelectIndex = previousSelectedIndex - 1;
+        if (previousSelectIndex >= 0) {
+            e.preventDefault();
+            this._visibleTabs[previousSelectIndex].focus();
+        }
+    }
+    handleHomeKey(e) {
+        if (isHome(e)) {
+            this._visibleTabs[0].focus();
+        }
+    }
+    handleEndKey(e) {
+        if (isEnd(e)) {
+            this.onEndKey();
+        }
+    }
+    onEndKey() {
+        if (!this.getMoreButton().hasAttribute("hidden")) {
+            this.getMoreButton().focus();
+        }
+        else {
+            const lastVisibleTab = this._visibleTabs.length - 1;
+            this._visibleTabs[lastVisibleTab].focus();
+        }
+    }
+    async handleFocusMoreButton(e) {
+        await this.handleUpMoreButton(e);
+        await this.handleDownMoreButton(e);
+        this.handleTabPreviouMoreButton(e);
+        this.handleHomeKeyMoreButton(e);
+        this.handleEnterKeyMoreButton(e);
+    }
+    async handleUpMoreButton(e) {
+        if (isUp(e)) {
+            e.preventDefault();
+            e.stopPropagation();
+            this._responsivePopover = await this.getResponsePopover();
+            await this.handleOpenPopover();
+            this.updateOverflowItems();
+            this.onFocusLastItemPopover();
+        }
+    }
+    async onFocusLastItemPopover() {
+        if (this._responsivePopover?.opened) {
+            const popoverItems = await this.getItemsFromPopover();
+            const lastOverflowTabIndex = popoverItems.length - 1;
+            popoverItems[lastOverflowTabIndex].focus();
+        }
+    }
+    handleTabPreviouMoreButton(e) {
+        if (isTabPrevious(e)) {
+            e.preventDefault();
+            e.stopPropagation();
+            const lastVisibleTab = this._visibleTabs.length - 2;
+            this._visibleTabs[lastVisibleTab].focus();
+        }
+    }
+    handleHomeKeyMoreButton(e) {
+        if (isHome(e)) {
+            e.preventDefault();
+            e.stopPropagation();
+            this._visibleTabs[0].focus();
+        }
+    }
+    async handleEnterKeyMoreButton(e) {
+        if (isEnter(e)) {
+            e.preventDefault();
+            this._responsivePopover = await this.getResponsePopover();
+            this.updateOverflowItems();
+            this.handleOpenPopover();
+        }
+    }
+    onOpenPopover() {
+        if (!this._responsivePopover?.opened) {
+            this.handleMoreButton();
+        }
+    }
+    async handleDownMoreButton(e) {
+        if (isDown(e) || isEnter(e)) {
+            this._responsivePopover = await this.getResponsePopover();
+            await this.handleOpenPopover();
+            this.updateOverflowItems();
+            this.onFocusFirstItemPopover();
+        }
+    }
+    async onFocusFirstItemPopover() {
+        if (this._responsivePopover?.opened) {
+            const popoverItems = await this.getItemsFromPopover();
+            popoverItems[0].focus();
+        }
+    }
+    handleFocusPopover(e) {
+        e.stopPropagation();
+        this.handleUp(e);
+        this.handleDown(e);
+        this.handleEnterOrSpace(e);
+        this.handleEscape(e);
+        this.handleHome(e);
+        this.handleEnd(e);
+    }
+    handleUp(e) {
+        if (isUp(e)) {
+            this.onPreviousItemInPopover(e.target);
+        }
+    }
+    async onPreviousItemInPopover(target) {
+        const popoverItems = await this.getItemsFromPopover();
+        const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
+        const previousSelectIndex = currentSelectedTabIndex - 1 < 0 ? popoverItems.length - 1 : currentSelectedTabIndex - 1;
+        popoverItems[previousSelectIndex].focus();
+    }
+    async getItemsFromPopover() {
+        const responsivePopover = await this.getResponsePopover();
+        const [contentFromPopover] = responsivePopover.content;
+        return Array.from(contentFromPopover.children);
+    }
+    getPopoverTabIndexById(popoverItems, id) {
+        return popoverItems.findIndex(tab => tab.id === id);
+    }
+    handleDown(e) {
+        if (isDown(e)) {
+            this.onNextItemInPopover(e.target);
+        }
+    }
+    async onNextItemInPopover(target) {
+        const popoverItems = await this.getItemsFromPopover();
+        const currentSelectedTabIndex = this.getPopoverTabIndexById(popoverItems, target.id);
+        const nextSelectIndex = currentSelectedTabIndex + 1 > popoverItems.length - 1 ? 0 : currentSelectedTabIndex + 1;
+        popoverItems[nextSelectIndex].focus();
+    }
+    handleEnterOrSpace(e) {
+        if (isEnter(e) || isSpace(e)) {
+            e.preventDefault();
+            this.onItemSelect(e.target.id);
+            this.handleClosePopover();
+        }
+    }
+    handleEscape(e) {
+        if (isEscape(e)) {
+            e.preventDefault();
+            this.handleClosePopover();
+            this._visibleTabs[this._visibleTabs.length - 1].focus();
+        }
+    }
+    async handleHome(e) {
+        if (isHome(e)) {
+            e.preventDefault();
+            const popoverItems = await this.getItemsFromPopover();
+            popoverItems[0].focus();
+        }
+    }
+    async handleEnd(e) {
+        if (isEnd(e)) {
+            e.preventDefault();
+            const popoverItems = await this.getItemsFromPopover();
+            popoverItems[popoverItems.length - 1].focus();
+        }
+    }
+    async getResponsePopover() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return staticAreaItem.querySelector(`#${this.__id}-overflow-popover`);
+    }
+    get moreButtonText() {
+        return UDExTabNavigation_1.i18nBundle.getText(MORE);
+    }
+    static registerStaticAreaTabStyles(styles) {
+        staticAreaTabStyles.push(styles);
+    }
+};
+__decorate([
+    property({ type: SizeMoreButton, defaultValue: "Small" })
+], UDExTabNavigation.prototype, "sizeMoreButton", void 0);
+__decorate([
+    property({ type: Mode, defaultValue: "Light" })
+], UDExTabNavigation.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExTabNavigation.prototype, "iconWithoutBackground", void 0);
+__decorate([
+    property({ type: Object })
+], UDExTabNavigation.prototype, "_selectedTab", void 0);
+__decorate([
+    property({ validator: Integer, noAttribute: true })
+], UDExTabNavigation.prototype, "_width", void 0);
+__decorate([
+    property({ type: Object, multiple: true })
+], UDExTabNavigation.prototype, "_overflowItems", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+        individualSlots: true,
+    })
+], UDExTabNavigation.prototype, "items", void 0);
+UDExTabNavigation = UDExTabNavigation_1 = __decorate([
+    customElement({
+        tag: "udex-tab-navigation",
+        renderer: litRender,
+        styles: TabNavigationCss,
+        template: TabNavigationTemplate,
+        staticAreaTemplate: TabNavigationPopover,
+        staticAreaStyles: [staticAreaTabStyles],
+        dependencies: [ResponsivePopover],
+    })
+    /**
+     * Fires when the tab was clicked.
+     *
+     * @allowPreventDefault
+     * @param { Number }
+     * @public
+     */
+    ,
+    event("click", {
+        detail: {
+            currentPage: { type: Number },
+        },
+    })
+], UDExTabNavigation);
+UDExTabNavigation.define();
+export default UDExTabNavigation;
+//# sourceMappingURL=TabNavigation.js.map