@fluid-topics/ft-tabs 1.2.5 → 1.2.7

package/build/ft-base-tabs.d.ts

@@ -23,6 +23,7 @@ export declare abstract class FtBaseTabs extends FtLitElement implements FtBaseT
     private tabsContainer?;
     private activeTab?;
     private activeTabIndicator?;
+    horizontal: boolean;
     activeIndex?: number;
     abstract get tabsClasses(): ClassInfo;
     protected render(): TemplateResult<1>;

package/build/ft-base-tabs.js

@@ -32,6 +32,7 @@ class FtBaseTabs extends FtLitElement {
         super(...arguments);
         this.alignTabs = FtTabsAlignment.justify;
         this.ftTabs = [];
+        this.horizontal = false;
         this.activeIndex = 0;
         this.updateDebouncer = new Debouncer(2);
         this.onTabUpdated = () => this.updateDebouncer.run(() => {
@@ -122,16 +123,24 @@ class FtBaseTabs extends FtLitElement {
         this.placeActiveTabIndicator(this.activeTabIndicator, this.activeTab);
     }
     placeActiveTabIndicator(activeTabIndicator, activeTab) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (activeTabIndicator) {
             const target = (_a = activeTab === null || activeTab === void 0 ? void 0 : activeTab.closest(".ft-tabs--tab-tooltip")) !== null && _a !== void 0 ? _a : activeTab;
             if (target) {
                 const targetHeight = (_c = (_b = target === null || target === void 0 ? void 0 : target.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 0;
                 const targetWidth = (_e = (_d = target === null || target === void 0 ? void 0 : target.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.width) !== null && _e !== void 0 ? _e : 0;
-                activeTabIndicator.style.height = "3px";
-                activeTabIndicator.style.width = targetWidth + "px";
-                activeTabIndicator.style.left = ((_f = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _f !== void 0 ? _f : 0) + "px";
-                activeTabIndicator.style.top = (((_g = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _g !== void 0 ? _g : 0) + targetHeight - 3) + "px";
+                if (this.horizontal) {
+                    activeTabIndicator.style.height = targetHeight + "px";
+                    activeTabIndicator.style.width = "3px";
+                    activeTabIndicator.style.left = ((_f = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _f !== void 0 ? _f : 0) + targetWidth - 3 + "px";
+                    activeTabIndicator.style.top = ((_g = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _g !== void 0 ? _g : 0) + "px";
+                }
+                else {
+                    activeTabIndicator.style.height = "3px";
+                    activeTabIndicator.style.width = targetWidth + "px";
+                    activeTabIndicator.style.left = ((_h = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _h !== void 0 ? _h : 0) + "px";
+                    activeTabIndicator.style.top = (((_j = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _j !== void 0 ? _j : 0) + targetHeight - 3) + "px";
+                }
             }
             else {
                 activeTabIndicator.style.height = "0px";
@@ -173,6 +182,9 @@ __decorate([
 __decorate([
     query(".ft-tabs--active-tab-indicator")
 ], FtBaseTabs.prototype, "activeTabIndicator", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtBaseTabs.prototype, "horizontal", void 0);
 __decorate([
     optionalNumberProperty({ reflect: true })
 ], FtBaseTabs.prototype, "activeIndex", void 0);

package/build/ft-tab.properties.d.ts

@@ -6,4 +6,5 @@ export interface FtTabProperties {
     color?: string;
     rippleColor?: string;
     iconVariant?: FtIconVariants;
+    horizontal?: boolean;
 }

package/build/ft-tabs.d.ts

@@ -5,13 +5,11 @@ import { TemplateResult } from "lit";
 export interface FtTabsProperties extends FtBaseTabsProperties {
     dense: boolean;
     collapsible: boolean;
-    horizontal: boolean;
     contentBefore: boolean;
 }
 export declare class FtTabs extends FtBaseTabs implements FtTabsProperties {
     dense: boolean;
     collapsible: boolean;
-    horizontal: boolean;
     contentBefore: boolean;
     static styles: import("lit").CSSResult[];
     get tabsClasses(): ClassInfo;

package/build/ft-tabs.js

@@ -14,7 +14,6 @@ class FtTabs extends FtBaseTabs {
         super(...arguments);
         this.dense = false;
         this.collapsible = false;
-        this.horizontal = false;
         this.contentBefore = false;
     }
     get tabsClasses() {
@@ -93,9 +92,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtTabs.prototype, "collapsible", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtTabs.prototype, "horizontal", void 0);
 __decorate([
     property({ type: Boolean })
 ], FtTabs.prototype, "contentBefore", void 0);