@fluid-topics/ft-tabs 0.3.31 → 0.3.32

package/build/ft-tabs.css.js

@@ -62,10 +62,15 @@ export const styles = css `
         color: ${FtTabsCssVariables.colorOnSurfaceDisabled};
     }
 
-    .ft-tabs--align-justify [role='tab'] {
+    .ft-tabs--align-justify [role='tab'],
+    .ft-tabs--align-justify .ft-tabs--tab-tooltip {
         flex-grow: 1;
     }
 
+    .ft-tabs--align-justify .ft-tabs--tab-tooltip [role='tab'] {
+        width: 100%;
+    }
+
     [role='tab'] .ft-tabs--tab-label {
         width: 100%;
         white-space: nowrap;

package/build/ft-tabs.d.ts

@@ -1,4 +1,4 @@
-import { PropertyValues } from "lit";
+import { PropertyValues, TemplateResult } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTabsAlignment, FtTabsProperties } from "./ft-tabs.properties";
 export declare class IndexChangeEvent extends CustomEvent<number> {
@@ -15,7 +15,7 @@ export declare class FtTabs extends FtLitElement implements FtTabsProperties {
     private activeTab?;
     private activeTabIndicator?;
     activeIndex: number;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): TemplateResult<1>;
     private updateDebouncer;
     private scheduleRequestUpdate;
     private onContentChange;
@@ -24,5 +24,6 @@ export declare class FtTabs extends FtLitElement implements FtTabsProperties {
     protected contentAvailableCallback(props: PropertyValues): void;
     private placeIndicator;
     private updateTabs;
+    private addTooltipIfNecessary;
 }
 //# sourceMappingURL=ft-tabs.d.ts.map

package/build/ft-tabs.js

@@ -15,6 +15,7 @@ import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography"
 import { FtIcon } from "@fluid-topics/ft-icon";
 import { FtTabsAlignment } from "./ft-tabs.properties";
 import { styles } from "./ft-tabs.css";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
 export class IndexChangeEvent extends CustomEvent {
     constructor(index) {
         super("index-change", { detail: index });
@@ -41,12 +42,11 @@ export class FtTabs extends FtLitElement {
         return html `
             <div class="${classMap(classes)}" part="container">
                 <div class="ft-tabs--align-${this.alignTabs}" role="tablist" part="tablist">
-                    ${repeat(this.ftTabs, (tab, index) => html `
+                    ${repeat(this.ftTabs, (tab, index) => this.addTooltipIfNecessary(tab, html `
                                 <button class="${classMap({
             "ft-tabs--tab-with-icon": !!tab.icon,
             "ft-tabs--tab-with-label": !!tab.label,
         })}"
-                                        title="${tab.label}"
                                         ?disabled=${tab.disabled}
                                         @click=${() => this.activeIndex = index}
                                         role="tab"
@@ -67,7 +67,7 @@ export class FtTabs extends FtLitElement {
                                         ${tab.label}
                                     </ft-typography>
                                 </button>
-                            `)}
+                            `))}
                     <div class="ft-tabs--active-tab-indicator" part="active-tab-indicator"></div>
                 </div>
                 <div class="ft-tabs--content" part="content">
@@ -102,15 +102,16 @@ export class FtTabs extends FtLitElement {
         this.placeIndicator();
     }
     placeIndicator() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (this.activeTabIndicator) {
-            this.activeTabIndicator.style.width = ((_b = (_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0) + "px";
-            this.activeTabIndicator.style.left = ((_d = (_c = this.activeTab) === null || _c === void 0 ? void 0 : _c.offsetLeft) !== null && _d !== void 0 ? _d : 0) + "px";
+            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.activeTabIndicator.style.width = ((_c = target === null || target === void 0 ? void 0 : target.clientWidth) !== null && _c !== void 0 ? _c : 0) + "px";
+            this.activeTabIndicator.style.left = ((_d = target === null || target === void 0 ? void 0 : target.offsetLeft) !== null && _d !== void 0 ? _d : 0) + "px";
             if (this.contentBefore) {
-                this.activeTabIndicator.style.top = ((_f = (_e = this.activeTab) === null || _e === void 0 ? void 0 : _e.offsetTop) !== null && _f !== void 0 ? _f : 0) + "px";
+                this.activeTabIndicator.style.top = ((_e = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _e !== void 0 ? _e : 0) + "px";
             }
             else {
-                this.activeTabIndicator.style.top = (((_h = (_g = this.activeTab) === null || _g === void 0 ? void 0 : _g.offsetTop) !== null && _h !== void 0 ? _h : 0) + ((_k = (_j = this.activeTab) === null || _j === void 0 ? void 0 : _j.clientHeight) !== null && _k !== void 0 ? _k : 0) - this.activeTabIndicator.clientHeight) + "px";
+                this.activeTabIndicator.style.top = (((_f = target === null || target === void 0 ? void 0 : target.offsetTop) !== null && _f !== void 0 ? _f : 0) + ((_g = target === null || target === void 0 ? void 0 : target.clientHeight) !== null && _g !== void 0 ? _g : 0) - this.activeTabIndicator.clientHeight) + "px";
             }
         }
     }
@@ -119,10 +120,24 @@ export class FtTabs extends FtLitElement {
             tab.active = index == this.activeIndex;
         });
     }
+    addTooltipIfNecessary(tab, button) {
+        if (this.dense && tab.label && tab.icon) {
+            return html `
+                <ft-tooltip class="ft-tabs--tab-tooltip"
+                            part="tab-tooltip"
+                            text="${tab.label}"
+                            position="${this.contentBefore ? "top" : "bottom"}">
+                    ${button}
+                </ft-tooltip>
+            `;
+        }
+        return button;
+    }
 }
 FtTabs.elementDefinitions = {
     "ft-tab": FtTab,
     "ft-ripple": FtRipple,
+    "ft-tooltip": FtTooltip,
     "ft-typography": FtTypography,
     "ft-icon": FtIcon,
 };