@fluid-topics/ftds-tabs 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system tabs component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-tabs
+yarn add @fluid-topics/ftds-tabs
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-tabs"
+
+function render() {
+    return html` <ftds-tabs foo="bar"></ftds-tabs> `
+}
+```

package/build/define.d.ts

@@ -0,0 +1 @@
+export {};

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

@@ -0,0 +1,7 @@
+import { FtdsTabs } from "./ftds-tabs";
+import { FtdsTab } from "./ftds-tab";
+declare const _default: {
+    "ftds-tabs": typeof FtdsTabs;
+    "ftds-tab": typeof FtdsTab;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,6 @@
+import { FtdsTabs } from "./ftds-tabs";
+import { FtdsTab } from "./ftds-tab";
+export default {
+    "ftds-tabs": FtdsTabs,
+    "ftds-tab": FtdsTab,
+};

package/build/ftds-tab.d.ts

@@ -0,0 +1,21 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { PropertyValues } from "lit";
+import { FtdsTabProperties } from "./ftds-tab.properties";
+import { FtdsIconVariants } from "@fluid-topics/ftds-icon/build/ftds-icon.properties";
+import { FtdsIcons } from "@fluid-topics/ftds-icon";
+export declare class FtdsTab extends FtLitElement implements FtdsTabProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    label: string;
+    icon?: FtdsIcons;
+    iconVariant?: FtdsIconVariants;
+    active: boolean;
+    disabled: boolean;
+    private readonly uniqueId;
+    id: string;
+    color?: string;
+    rippleColor?: string;
+    ariaLabelledBy?: string;
+    protected render(): unknown;
+    protected update(props: PropertyValues): void;
+    protected updated(props: PropertyValues): void;
+}

package/build/ftds-tab.js

@@ -0,0 +1,67 @@
+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 { FtLitElement, randomId, } from "@fluid-topics/ft-wc-utils";
+import { html, unsafeCSS, } from "lit";
+import { property } from "lit/decorators.js";
+export class FtdsTab extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.active = false;
+        this.disabled = false;
+        this.uniqueId = randomId(5, "tab-");
+    }
+    render() {
+        return html `
+            <style>
+                :host {
+                    display: ${unsafeCSS(this.active ? "block" : "none")};
+                }
+            </style>
+            <slot></slot>
+        `;
+    }
+    update(props) {
+        super.update(props);
+        if (!this.id) {
+            this.id = this.uniqueId;
+        }
+        this.ariaLabelledBy = this.id + "-control";
+    }
+    updated(props) {
+        super.updated(props);
+        this.dispatchEvent(new Event("updated"));
+    }
+}
+FtdsTab.elementDefinitions = {};
+__decorate([
+    property({ type: String })
+], FtdsTab.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], FtdsTab.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], FtdsTab.prototype, "iconVariant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtdsTab.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsTab.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], FtdsTab.prototype, "id", void 0);
+__decorate([
+    property()
+], FtdsTab.prototype, "color", void 0);
+__decorate([
+    property()
+], FtdsTab.prototype, "rippleColor", void 0);
+__decorate([
+    property({ reflect: true, attribute: "aria-labelledby" })
+], FtdsTab.prototype, "ariaLabelledBy", void 0);

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

@@ -0,0 +1,11 @@
+import { FtdsIconVariants } from "@fluid-topics/ftds-icon/build/ftds-icon.properties";
+import { FtdsIcons } from "@fluid-topics/ftds-icon";
+export interface FtdsTabProperties {
+    label?: string;
+    icon?: FtdsIcons;
+    disabled?: boolean;
+    color?: string;
+    rippleColor?: string;
+    iconVariant?: FtdsIconVariants;
+    horizontal?: boolean;
+}

package/build/ftds-tab.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ftds-tab.styles.d.ts

@@ -0,0 +1 @@
+export declare const FtdsTabCssVariables: {};

package/build/ftds-tab.styles.js

@@ -0,0 +1 @@
+export const FtdsTabCssVariables = {};

package/build/ftds-tabs.d.ts

@@ -0,0 +1,33 @@
+import { ClassInfo } from "lit/directives/class-map.js";
+import { ElementDefinitionsMap, FtLitElement, Optional } from "@fluid-topics/ft-wc-utils";
+import { PropertyValues, TemplateResult } from "lit";
+import { FtdsTabsAlignment, FtdsTabsProperties, FtdsTabsStructure } from "./ftds-tabs.properties";
+import { FtdsTab } from "./ftds-tab";
+export declare class IndexChangeEvent extends CustomEvent<Optional<number>> {
+    constructor(index: Optional<number>);
+}
+export declare class FtdsTabs extends FtLitElement implements FtdsTabsProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    alignTabs: FtdsTabsAlignment;
+    private ftdsTabs;
+    private tabsContainer?;
+    private activeTab?;
+    private activeTabIndicator?;
+    horizontal: boolean;
+    activeIndex?: number;
+    structure: FtdsTabsStructure;
+    static styles: import("lit").CSSResult[];
+    get tabsClasses(): ClassInfo;
+    protected render(): TemplateResult<1>;
+    private updateDebouncer;
+    private onTabUpdated;
+    private onContentChange;
+    protected update(props: PropertyValues): void;
+    private resizeObserver;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    private placeIndicator;
+    protected placeActiveTabIndicator(activeTabIndicator?: HTMLDivElement, activeTab?: HTMLButtonElement): void;
+    protected toggleTab(index: number): void;
+    private updateTabs;
+    protected addTooltipIfNecessary(tab: FtdsTab, button: TemplateResult): TemplateResult;
+}

package/build/ftds-tabs.js

@@ -0,0 +1,205 @@
+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 { classMap, } from "lit/directives/class-map.js";
+import { Debouncer, FtLitElement, numberProperty, PostResizeEvent, PreResizeEvent, safariEllipsisFix, } from "@fluid-topics/ft-wc-utils";
+import { designSystemStyles } from "./ftds-tabs.styles";
+import { property, query, state, } from "lit/decorators.js";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { html, } from "lit";
+import { when } from "lit/directives/when.js";
+import { repeat } from "lit/directives/repeat.js";
+import { FtRipple, FtRippleCssVariables, } from "@fluid-topics/ft-ripple";
+import { FtdsIcon } from "@fluid-topics/ftds-icon";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { FtdsTabsAlignment, FtdsTabsStructure, } from "./ftds-tabs.properties";
+export class IndexChangeEvent extends CustomEvent {
+    constructor(index) {
+        super("index-change", { detail: index });
+    }
+}
+export class FtdsTabs extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.alignTabs = FtdsTabsAlignment.justify;
+        this.ftdsTabs = [];
+        this.horizontal = false;
+        this.activeIndex = 0;
+        this.structure = FtdsTabsStructure.sideIcon;
+        this.updateDebouncer = new Debouncer(2);
+        this.onTabUpdated = () => this.updateDebouncer.run(() => {
+            this.requestUpdate();
+            this.dispatchEvent(new PostResizeEvent());
+        });
+        this.resizeObserver = new ResizeObserver(() => this.placeIndicator());
+    }
+    get tabsClasses() {
+        return {
+            "ftds-tabs": true,
+            ["ftds-tabs--align-" + this.alignTabs]: true,
+            "ftds-tabs--horizontal": this.horizontal,
+            "ftds-tabs--side-icon": this.structure == FtdsTabsStructure.sideIcon,
+            "ftds-tabs--icon-only": this.structure == FtdsTabsStructure.iconOnly,
+            "ftds-tabs--label-only": this.structure == FtdsTabsStructure.labelOnly,
+        };
+    }
+    render() {
+        var _a, _b;
+        const activeTabColor = (_b = this.ftdsTabs[(_a = this.activeIndex) !== null && _a !== void 0 ? _a : 0]) === null || _b === void 0 ? void 0 : _b.color;
+        return html `
+            <div class="${classMap(this.tabsClasses)}" part="container">
+                <div role="tablist" part="tablist">
+                    ${repeat(this.ftdsTabs, (tab, index) => this.addTooltipIfNecessary(tab, html `
+                            <button class="${classMap({
+            "ftds-tabs--tab-with-icon": !!tab.icon,
+            "ftds-tabs--tab-with-label": !!tab.label,
+        })}"
+                                    ?disabled=${tab.disabled}
+                                    @click=${() => this.toggleTab(index)}
+                                    role="tab"
+                                    part="tab tab-${tab.id}${tab.active ? " active-tab" : ""}"
+                                    id="${tab.ariaLabelledBy}"
+                                    aria-label="${tab.label}"
+                                    aria-selected="${tab.active ? "true" : "false"}"
+                                    tabindex="${tab.disabled ? "-1" : "0"}"
+                                    aria-controls="${tab.id}"
+                                    style="${tab.color ? `color: ${tab.color} !important;` : ""}">
+                                <ft-ripple primary
+                                           ?disabled=${tab.disabled}
+                                           part="tab-ripple${tab.active ? " active-tab-ripple" : ""}"
+                                           style="${(tab.color || tab.rippleColor)
+            ? FtRippleCssVariables.color.set(tab.color || tab.rippleColor)
+            : ""}"></ft-ripple>
+                                ${when(tab.icon, () => html `
+                                    <ftds-icon class="ftds-tabs--tab-icon"
+                                               part="tab-icon${tab.active ? " active-tab-icon" : ""}"
+                                               icon="${tab.icon}"
+                                               .variant=${tab.iconVariant}>
+                                    </ftds-icon>
+                                `)}
+                                }
+
+                                <ftds-typography class="ftds-tabs--tab-label"
+                                                 part="tab-label${tab.active ? " active-tab-label" : ""}"
+                                                 variant="${FtdsTypographyVariants.body2medium}">
+                                    ${tab.label}
+                                </ftds-typography>
+                            </button>
+                        `))}
+                    <div class="ftds-tabs--active-tab-indicator"
+                         part="active-tab-indicator"
+                         style="${activeTabColor ? `background-color: ${activeTabColor} !important;` : ""}">
+                    </div>
+                </div>
+                <div class="ftds-tabs--content" part="content">
+                    <slot @slotchange=${this.onContentChange}></slot>
+                </div>
+            </div>
+        `;
+    }
+    onContentChange(e) {
+        const slot = e.composedPath()[0];
+        this.ftdsTabs = slot.assignedElements().map((n) => n);
+        this.ftdsTabs.forEach((tab) => {
+            tab.removeEventListener("updated", this.onTabUpdated);
+            tab.addEventListener("updated", this.onTabUpdated);
+        });
+        this.updateTabs();
+    }
+    update(props) {
+        super.update(props);
+        if (props.has("activeIndex")) {
+            this.dispatchEvent(new PreResizeEvent());
+        }
+        if (props.has("ftdsTabs") || props.has("activeIndex")) {
+            this.updateTabs();
+        }
+        if (props.has("activeIndex")) {
+            this.dispatchEvent(new IndexChangeEvent(this.activeIndex));
+        }
+    }
+    contentAvailableCallback(props) {
+        super.contentAvailableCallback(props);
+        if (this.tabsContainer) {
+            this.resizeObserver.observe(this.tabsContainer);
+        }
+        this.placeIndicator();
+    }
+    placeIndicator() {
+        this.placeActiveTabIndicator(this.activeTabIndicator, this.activeTab);
+    }
+    placeActiveTabIndicator(activeTabIndicator, activeTab) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (activeTabIndicator) {
+            const target = (_a = activeTab === null || activeTab === void 0 ? void 0 : activeTab.closest(".ftds-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.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";
+                activeTabIndicator.style.width = "0px";
+            }
+        }
+    }
+    toggleTab(index) {
+        this.activeIndex = index;
+    }
+    updateTabs() {
+        this.ftdsTabs.forEach((tab, index) => {
+            tab.active = index == this.activeIndex;
+        });
+    }
+    addTooltipIfNecessary(tab, button) {
+        return button;
+    }
+}
+FtdsTabs.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ft-tooltip": FtTooltip,
+    "ftds-icon": FtdsIcon,
+    "ftds-typography": FtdsTypography,
+};
+FtdsTabs.styles = [
+    safariEllipsisFix,
+    designSystemStyles,
+];
+__decorate([
+    property()
+], FtdsTabs.prototype, "alignTabs", void 0);
+__decorate([
+    state()
+], FtdsTabs.prototype, "ftdsTabs", void 0);
+__decorate([
+    query("[role='tablist']")
+], FtdsTabs.prototype, "tabsContainer", void 0);
+__decorate([
+    query("[aria-selected='true']")
+], FtdsTabs.prototype, "activeTab", void 0);
+__decorate([
+    query(".ftds-tabs--active-tab-indicator")
+], FtdsTabs.prototype, "activeTabIndicator", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsTabs.prototype, "horizontal", void 0);
+__decorate([
+    numberProperty({ reflect: true })
+], FtdsTabs.prototype, "activeIndex", void 0);
+__decorate([
+    property()
+], FtdsTabs.prototype, "structure", void 0);