@fluid-topics/ft-tabs 0.2.22 → 0.3.0

package/build/ft-tab.d.ts

@@ -1,22 +1,22 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { PropertyValues } from "lit";
-export declare enum FtTabPosition {
-    before = "before",
-    current = "current",
-    after = "after"
-}
+import { FtIconVariants } from "@fluid-topics/ft-icon";
 export interface FtTabProperties {
-    label: string;
-    icon: string;
-    disabled: boolean;
+    label?: string;
+    icon?: string;
+    disabled?: boolean;
+    iconVariant?: FtIconVariants;
 }
 export declare class FtTab extends FtLitElement implements FtTabProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    static get styles(): import("lit").CSSResult;
     label: string;
     icon: string;
-    visible: boolean;
+    iconVariant: FtIconVariants;
+    active: boolean;
     disabled: boolean;
+    readonly uniqueId: string;
+    readonly id: string;
+    readonly ariaLabelledBy: string;
     protected render(): unknown;
     protected updated(props: PropertyValues): void;
 }

package/build/ft-tab.js

@@ -5,36 +5,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { css, html, unsafeCSS } from "lit";
+import { html, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
-export var FtTabPosition;
-(function (FtTabPosition) {
-    FtTabPosition["before"] = "before";
-    FtTabPosition["current"] = "current";
-    FtTabPosition["after"] = "after";
-})(FtTabPosition || (FtTabPosition = {}));
+import { FtIconVariants } from "@fluid-topics/ft-icon";
 export class FtTab extends FtLitElement {
     constructor() {
         super(...arguments);
         this.label = "";
         this.icon = "";
-        this.visible = false;
+        this.iconVariant = FtIconVariants.material;
+        this.active = false;
         this.disabled = false;
-    }
-    static get styles() {
-        // language=CSS
-        return css `
-            :host {
-                width: 100%;
-                position: absolute;
-            }
-        `;
+        this.uniqueId = ("" + Math.floor(Math.random() * 100000)).padStart(5, "0");
+        this.id = "tab-content-" + this.uniqueId;
+        this.ariaLabelledBy = "tab-" + this.uniqueId;
     }
     render() {
         return html `
             <style>
                 :host {
-                    display: ${unsafeCSS(this.visible ? "block" : "none")};
+                    display: ${unsafeCSS(this.active ? "block" : "none")};
                 }
             </style>
             <slot></slot>
@@ -52,10 +42,19 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FtTab.prototype, "icon", void 0);
+__decorate([
+    property()
+], FtTab.prototype, "iconVariant", void 0);
 __decorate([
     property({ type: Boolean })
-], FtTab.prototype, "visible", void 0);
+], FtTab.prototype, "active", void 0);
 __decorate([
     property({ type: Boolean })
 ], FtTab.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], FtTab.prototype, "id", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: "aria-labelledby" })
+], FtTab.prototype, "ariaLabelledBy", void 0);
 //# sourceMappingURL=ft-tab.js.map

package/build/ft-tabs.d.ts

@@ -1,15 +1,21 @@
 import { PropertyValues } from "lit";
-import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+export declare enum FtTabsAlignment {
+    left = "left",
+    right = "right",
+    justify = "justify"
+}
 export interface FtTabsProperties {
     dense: boolean;
     contentBefore: boolean;
     activeIndex: number;
+    alignTabs: FtTabsAlignment;
 }
 export declare const FtTabsCssVariables: {
-    colorSurface: FtCssVariable;
-    colorPrimary: FtCssVariable;
-    colorOnSurfaceMedium: FtCssVariable;
-    colorOnSurfaceDisabled: FtCssVariable;
+    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurfaceMedium: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnSurfaceDisabled: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
 export declare class IndexChangeEvent extends CustomEvent<number> {
     constructor(index: number);
@@ -19,18 +25,20 @@ export declare class FtTabs extends FtLitElement implements FtTabsProperties {
     static styles: import("lit").CSSResult;
     dense: boolean;
     contentBefore: boolean;
-    private tabs;
+    alignTabs: FtTabsAlignment;
+    private ftTabs;
+    private tabsContainer?;
+    private activeTab?;
+    private activeTabIndicator?;
     activeIndex: number;
-    private resizable?;
-    private get currentTab();
-    private resizeObserver;
     protected render(): import("lit-html").TemplateResult<1>;
-    private onTabChange;
     private updateDebouncer;
+    private scheduleRequestUpdate;
     private onContentChange;
     protected updated(props: PropertyValues): void;
-    private placeTabs;
-    private resizeDebouncer;
-    private resize;
+    private resizeObserver;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    private placeIndicator;
+    private updateTabs;
 }
 //# sourceMappingURL=ft-tabs.d.ts.map

package/build/ft-tabs.js

@@ -8,15 +8,22 @@ import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
-import { Debouncer, designSystemVariables, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, designSystemVariables, FtCssVariableFactory, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTab } from "./ft-tab";
-import { Tab } from "@material/mwc-tab";
-import { TabBar } from "@material/mwc-tab-bar";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtIcon } from "@fluid-topics/ft-icon";
+export var FtTabsAlignment;
+(function (FtTabsAlignment) {
+    FtTabsAlignment["left"] = "left";
+    FtTabsAlignment["right"] = "right";
+    FtTabsAlignment["justify"] = "justify";
+})(FtTabsAlignment || (FtTabsAlignment = {}));
 export const FtTabsCssVariables = {
-    colorSurface: FtCssVariable.external(designSystemVariables.colorSurface, "Design system"),
-    colorPrimary: FtCssVariable.external(designSystemVariables.colorPrimary, "Design system"),
-    colorOnSurfaceMedium: FtCssVariable.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
-    colorOnSurfaceDisabled: FtCssVariable.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
+    colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
+    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
+    colorOnSurfaceMedium: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
+    colorOnSurfaceDisabled: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
 };
 export class IndexChangeEvent extends CustomEvent {
     constructor(index) {
@@ -28,79 +35,103 @@ export class FtTabs extends FtLitElement {
         super(...arguments);
         this.dense = false;
         this.contentBefore = false;
-        this.tabs = [];
+        this.alignTabs = FtTabsAlignment.justify;
+        this.ftTabs = [];
         this.activeIndex = 0;
-        this.resizeObserver = new ResizeObserver(() => this.resize());
         this.updateDebouncer = new Debouncer(20);
-        this.resizeDebouncer = new Debouncer(50);
-    }
-    get currentTab() {
-        return this.tabs[this.activeIndex];
+        this.scheduleRequestUpdate = () => this.updateDebouncer.run(() => this.requestUpdate());
+        this.resizeObserver = new ResizeObserver(() => this.placeIndicator());
     }
     render() {
         const classes = {
             "ft-tabs": true,
             "ft-tabs--reverse": this.contentBefore,
+            "ft-tabs--dense": this.dense,
         };
         return html `
             <div class="${classMap(classes)}">
-                <mwc-tab-bar @MDCTabBar:activated=${this.onTabChange} .activeIndex=${this.activeIndex}>
-                    ${repeat(this.tabs, tab => html `
-                                <mwc-tab label="${this.dense && tab.icon ? "" : tab.label}"
-                                         title="${this.dense && tab.icon ? tab.label : ""}"
-                                         aria-label="${tab.label}"
-                                         icon="${tab.icon}"
-                                         ?stacked=${!this.dense}
-                                         ?disabled=${tab.disabled}></mwc-tab>
+                <div class="ft-tabs--align-${this.alignTabs}" role="tablist">
+                    ${repeat(this.ftTabs, (tab, index) => 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"
+                                        id="${tab.ariaLabelledBy}"
+                                        aria-label="${tab.label}"
+                                        aria-selected="${tab.active ? "true" : "false"}"
+                                        tabindex="${tab.disabled ? "-1" : "0"}"
+                                        aria-controls="${tab.id}"
+                                >
+                                    <ft-ripple primary ?disabled=${tab.disabled}></ft-ripple>
+                                    <ft-icon class="ft-tabs--tab-icon" variant="${tab.iconVariant}">
+                                        ${tab.icon}
+                                    </ft-icon>
+                                    <ft-typography class="ft-tabs--tab-label" variant="${FtTypographyVariants.body2}">
+                                        ${tab.label}
+                                    </ft-typography>
+                                </button>
                             `)}
-                </mwc-tab-bar>
+                    <div class="ft-tabs--active-tab-indicator"></div>
+                </div>
                 <div class="ft-tabs--content">
-                    <div class="ft-tabs--resizable">
-                        <slot @slotchange=${this.onContentChange}></slot>
-                    </div>
+                    <slot @slotchange=${this.onContentChange}></slot>
                 </div>
             </div>
         `;
     }
-    onTabChange(e) {
-        this.activeIndex = e.detail.index;
-    }
     onContentChange(e) {
         const slot = e.composedPath()[0];
-        this.tabs = slot.assignedElements().map(n => n);
-        this.resizeObserver.disconnect();
-        this.tabs.forEach(tab => {
-            this.resizeObserver.observe(tab);
-            tab.addEventListener("updated", () => this.updateDebouncer.run(() => this.requestUpdate()));
+        this.ftTabs = slot.assignedElements().map(n => n);
+        this.ftTabs.forEach(tab => {
+            tab.removeEventListener("updated", this.scheduleRequestUpdate);
+            tab.addEventListener("updated", this.scheduleRequestUpdate);
         });
+        this.updateTabs();
     }
     updated(props) {
         super.updated(props);
         if (props.has("tabs") || props.has("activeIndex")) {
-            this.placeTabs();
+            this.updateTabs();
         }
         if (props.has("activeIndex")) {
             this.dispatchEvent(new IndexChangeEvent(this.activeIndex));
         }
     }
-    placeTabs() {
-        this.tabs.forEach((tab, index) => {
-            tab.visible = index == this.activeIndex;
-        });
-        this.resize();
+    contentAvailableCallback(props) {
+        super.contentAvailableCallback(props);
+        if (this.tabsContainer) {
+            this.resizeObserver.observe(this.tabsContainer);
+        }
+        this.placeIndicator();
     }
-    resize() {
-        this.resizeDebouncer.run(() => {
-            if (this.resizable && this.currentTab) {
-                this.resizable.style.height = this.currentTab.scrollHeight + "px";
+    placeIndicator() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        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";
+            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";
+            }
+            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";
             }
+        }
+    }
+    updateTabs() {
+        this.ftTabs.forEach((tab, index) => {
+            tab.active = index == this.activeIndex;
         });
     }
 }
 FtTabs.elementDefinitions = {
     "ft-tab": FtTab,
-    "mwc-tab": Tab,
-    "mwc-tab-bar": TabBar,
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+    "ft-icon": FtIcon,
 };
 // language=CSS
 FtTabs.styles = css `
@@ -115,29 +146,81 @@ FtTabs.styles = css `
             flex-direction: column-reverse;
         }
 
-        mwc-tab-bar {
-            display: block;
+        [role="tablist"] {
             flex-shrink: 0;
             flex-grow: 0;
-            --mdc-theme-primary: ${FtTabsCssVariables.colorPrimary};
-            --mdc-tab-color-default: ${FtTabsCssVariables.colorOnSurfaceMedium};
+            display: flex;
+            position: relative;
+            flex-wrap: wrap;
         }
 
-        .ft-tabs--content {
-            flex-shrink: 1;
-            flex-grow: 1;
-            overflow: auto;
+        .ft-tabs--align-right {
+            justify-content: flex-end;
         }
 
-        .ft-tabs--resizable {
+        .ft-tabs--align-justify {
+            justify-content: space-evenly;
+        }
+
+        [role='tab'] {
             position: relative;
+            display: flex;
             overflow: hidden;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 16px;
+            background: none;
+            box-shadow: 0px 0px 0px transparent;
+            border: 0px solid transparent;
+            text-shadow: 0px 0px 0px transparent;
+            cursor: pointer;
+            outline: none;
+            font-size: 16px;
+            line-height: 1;
+            color: ${FtTabsCssVariables.colorOnSurfaceMedium};
+        }
+
+        [role='tab'][aria-selected='true'] {
+            color: ${FtTabsCssVariables.colorPrimary};
+        }
+
+        [role='tab'][disabled] {
+            color: ${FtTabsCssVariables.colorOnSurfaceDisabled};
+        }
+
+        .ft-tabs--align-justify [role='tab'] {
+            flex-grow: 1;
+        }
+
+        [role='tab'] .ft-tabs--tab-label {
             width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
-        mwc-tab[disabled] {
-            pointer-events: none;
-            --mdc-tab-color-default: ${FtTabsCssVariables.colorOnSurfaceDisabled};
+        [role='tab']:not(.ft-tabs--tab-with-label) .ft-tabs--tab-label,
+        .ft-tabs--dense .ft-tabs--tab-with-icon .ft-tabs--tab-label {
+            display: none;
+        }
+
+        [role='tab']:not(.ft-tabs--tab-with-icon) .ft-tabs--tab-icon {
+            display: none;
+        }
+
+        .ft-tabs--active-tab-indicator {
+            position: absolute;
+            height: 3px;
+            border-radius: 2px;
+            background-color: ${FtTabsCssVariables.colorPrimary};
+            transition: width 200ms ease, left 200ms ease, top 200ms ease;
+        }
+
+        .ft-tabs--content {
+            flex-shrink: 1;
+            flex-grow: 1;
+            overflow: auto;
         }
     `;
 __decorate([
@@ -146,13 +229,22 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtTabs.prototype, "contentBefore", void 0);
+__decorate([
+    property()
+], FtTabs.prototype, "alignTabs", void 0);
 __decorate([
     state()
-], FtTabs.prototype, "tabs", void 0);
+], FtTabs.prototype, "ftTabs", void 0);
+__decorate([
+    query("[role='tablist']")
+], FtTabs.prototype, "tabsContainer", void 0);
+__decorate([
+    query("[aria-selected='true']")
+], FtTabs.prototype, "activeTab", void 0);
+__decorate([
+    query(".ft-tabs--active-tab-indicator")
+], FtTabs.prototype, "activeTabIndicator", void 0);
 __decorate([
     property({ type: Number, reflect: true })
 ], FtTabs.prototype, "activeIndex", void 0);
-__decorate([
-    query(".ft-tabs--resizable")
-], FtTabs.prototype, "resizable", void 0);
 //# sourceMappingURL=ft-tabs.js.map