@fluid-topics/ft-tabs 1.1.80 → 1.1.82

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

@@ -1,5 +1,6 @@
 import { PropertyValues, TemplateResult } from "lit";
 import { ElementDefinitionsMap, FtLitElement, Optional } from "@fluid-topics/ft-wc-utils";
+import { FtTab } from "./ft-tab";
 import { ClassInfo } from "lit/directives/class-map";
 export declare enum FtTabsAlignment {
     left = "left",
@@ -9,10 +10,6 @@ export declare enum FtTabsAlignment {
     justify = "justify"
 }
 export interface FtBaseTabsProperties {
-    dense: boolean;
-    collapsible: boolean;
-    horizontal: boolean;
-    contentBefore: boolean;
     activeIndex?: number;
     alignTabs: FtTabsAlignment;
 }
@@ -21,10 +18,6 @@ export declare class IndexChangeEvent extends CustomEvent<Optional<number>> {
 }
 export declare abstract class FtBaseTabs extends FtLitElement implements FtBaseTabsProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    dense: boolean;
-    collapsible: boolean;
-    horizontal: boolean;
-    contentBefore: boolean;
     alignTabs: FtTabsAlignment;
     private ftTabs;
     private tabsContainer?;
@@ -40,7 +33,8 @@ export declare abstract class FtBaseTabs extends FtLitElement implements FtBaseT
     private resizeObserver;
     protected contentAvailableCallback(props: PropertyValues): void;
     private placeIndicator;
-    private toggleTab;
+    protected placeActiveTabIndicator(activeTabIndicator?: HTMLDivElement, activeTab?: HTMLButtonElement): void;
+    protected toggleTab(index: number): void;
     private updateTabs;
-    private addTooltipIfNecessary;
+    protected addTooltipIfNecessary(tab: FtTab, button: TemplateResult): TemplateResult;
 }

package/build/ft-base-tabs.js

@@ -30,10 +30,6 @@ export class IndexChangeEvent extends CustomEvent {
 class FtBaseTabs extends FtLitElement {
     constructor() {
         super(...arguments);
-        this.dense = false;
-        this.collapsible = false;
-        this.horizontal = false;
-        this.contentBefore = false;
         this.alignTabs = FtTabsAlignment.justify;
         this.ftTabs = [];
         this.activeIndex = 0;
@@ -123,43 +119,28 @@ class FtBaseTabs extends FtLitElement {
         this.placeIndicator();
     }
     placeIndicator() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        if (this.activeTabIndicator) {
-            const target = (_b = (_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.closest(".ft-tabs--tab-tooltip")) !== null && _b !== void 0 ? _b : this.activeTab;
+        this.placeActiveTabIndicator(this.activeTabIndicator, this.activeTab);
+    }
+    placeActiveTabIndicator(activeTabIndicator, activeTab) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        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 = (_d = (_c = target === null || target === void 0 ? void 0 : target.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0;
-                const targetWidth = (_f = (_e = target === null || target === void 0 ? void 0 : target.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.width) !== null && _f !== void 0 ? _f : 0;
-                if (this.horizontal) {
-                    this.activeTabIndicator.style.height = targetHeight + "px";
-                    this.activeTabIndicator.style.width = "3px";
-                    this.activeTabIndicator.style.top = ((_g = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _g !== void 0 ? _g : 0) + "px";
-                    if (this.contentBefore) {
-                        this.activeTabIndicator.style.left = ((_h = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _h !== void 0 ? _h : 0) + "px";
-                    }
-                    else {
-                        this.activeTabIndicator.style.left = (((_j = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _j !== void 0 ? _j : 0) + targetWidth - 3) + "px";
-                    }
-                }
-                else {
-                    this.activeTabIndicator.style.height = "3px";
-                    this.activeTabIndicator.style.width = targetWidth + "px";
-                    this.activeTabIndicator.style.left = ((_k = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _k !== void 0 ? _k : 0) + "px";
-                    if (this.contentBefore) {
-                        this.activeTabIndicator.style.top = ((_l = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _l !== void 0 ? _l : 0) + "px";
-                    }
-                    else {
-                        this.activeTabIndicator.style.top = (((_m = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _m !== void 0 ? _m : 0) + targetHeight - 3) + "px";
-                    }
-                }
+                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";
             }
             else {
-                this.activeTabIndicator.style.height = "0px";
-                this.activeTabIndicator.style.width = "0px";
+                activeTabIndicator.style.height = "0px";
+                activeTabIndicator.style.width = "0px";
             }
         }
     }
     toggleTab(index) {
-        this.activeIndex = this.collapsible && index === this.activeIndex ? undefined : index;
+        this.activeIndex = index;
     }
     updateTabs() {
         this.ftTabs.forEach((tab, index) => {
@@ -167,19 +148,6 @@ class FtBaseTabs extends FtLitElement {
         });
     }
     addTooltipIfNecessary(tab, button) {
-        if (tab.label && tab.icon && (this.dense || this.horizontal)) {
-            let tooltipPosition = this.horizontal
-                ? this.contentBefore ? "left" : "right"
-                : this.contentBefore ? "top" : "bottom";
-            return html `
-                <ft-tooltip class="ft-tabs--tab-tooltip"
-                            part="tab-tooltip"
-                            text="${tab.label}"
-                            position="${tooltipPosition}">
-                    ${button}
-                </ft-tooltip>
-            `;
-        }
         return button;
     }
 }
@@ -190,18 +158,6 @@ FtBaseTabs.elementDefinitions = {
     "ft-typography": FtTypography,
     "ft-icon": FtIcon,
 };
-__decorate([
-    property({ type: Boolean })
-], FtBaseTabs.prototype, "dense", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseTabs.prototype, "collapsible", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseTabs.prototype, "horizontal", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseTabs.prototype, "contentBefore", void 0);
 __decorate([
     property()
 ], FtBaseTabs.prototype, "alignTabs", void 0);

package/build/ft-tabs.d.ts

@@ -1,6 +1,21 @@
 import { ClassInfo } from "lit/directives/class-map";
-import { FtBaseTabs } from "./ft-base-tabs";
-export declare class FtTabs extends FtBaseTabs {
+import { FtBaseTabs, FtBaseTabsProperties } from "./ft-base-tabs";
+import { FtTab } from "./ft-tab";
+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;
+    protected placeActiveTabIndicator(activeTabIndicator?: HTMLDivElement, activeTab?: HTMLButtonElement): void;
+    protected toggleTab(index: number): void;
+    protected addTooltipIfNecessary(tab: FtTab, button: TemplateResult): TemplateResult;
 }

package/build/ft-tabs.js

@@ -1,7 +1,22 @@
+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;
+};
 import { FtBaseTabs } from "./ft-base-tabs";
 import { safariEllipsisFix } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-tabs.styles";
+import { property } from "lit/decorators.js";
+import { html } from "lit";
 class FtTabs extends FtBaseTabs {
+    constructor() {
+        super(...arguments);
+        this.dense = false;
+        this.collapsible = false;
+        this.horizontal = false;
+        this.contentBefore = false;
+    }
     get tabsClasses() {
         return {
             "ft-tabs": true,
@@ -12,9 +27,76 @@ class FtTabs extends FtBaseTabs {
             ["ft-tabs--align-" + this.alignTabs]: true
         };
     }
+    placeActiveTabIndicator(activeTabIndicator, activeTab) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        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;
+                if (this.horizontal) {
+                    activeTabIndicator.style.height = targetHeight + "px";
+                    activeTabIndicator.style.width = "3px";
+                    activeTabIndicator.style.top = ((_f = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _f !== void 0 ? _f : 0) + "px";
+                    if (this.contentBefore) {
+                        activeTabIndicator.style.left = ((_g = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _g !== void 0 ? _g : 0) + "px";
+                    }
+                    else {
+                        activeTabIndicator.style.left = (((_h = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _h !== void 0 ? _h : 0) + targetWidth - 3) + "px";
+                    }
+                }
+                else {
+                    activeTabIndicator.style.height = "3px";
+                    activeTabIndicator.style.width = targetWidth + "px";
+                    activeTabIndicator.style.left = ((_j = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _j !== void 0 ? _j : 0) + "px";
+                    if (this.contentBefore) {
+                        activeTabIndicator.style.top = ((_k = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _k !== void 0 ? _k : 0) + "px";
+                    }
+                    else {
+                        activeTabIndicator.style.top = (((_l = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _l !== void 0 ? _l : 0) + targetHeight - 3) + "px";
+                    }
+                }
+            }
+            else {
+                activeTabIndicator.style.height = "0px";
+                activeTabIndicator.style.width = "0px";
+            }
+        }
+    }
+    toggleTab(index) {
+        this.activeIndex = this.collapsible && index === this.activeIndex ? undefined : index;
+    }
+    addTooltipIfNecessary(tab, button) {
+        if (tab.label && tab.icon && (this.dense || this.horizontal)) {
+            let tooltipPosition = this.horizontal
+                ? this.contentBefore ? "left" : "right"
+                : this.contentBefore ? "top" : "bottom";
+            return html `
+                <ft-tooltip class="ft-tabs--tab-tooltip"
+                            part="tab-tooltip"
+                            text="${tab.label}"
+                            position="${tooltipPosition}">
+                    ${button}
+                </ft-tooltip>
+            `;
+        }
+        return button;
+    }
 }
 FtTabs.styles = [
     safariEllipsisFix,
     styles
 ];
+__decorate([
+    property({ type: Boolean })
+], FtTabs.prototype, "dense", void 0);
+__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);
 export { FtTabs };