@fluid-topics/ft-tabs 1.1.78 → 1.1.80

package/build/ftds-tabs.d.ts

@@ -0,0 +1,10 @@
+import { FtBaseTabs } from "./ft-base-tabs";
+import { ClassInfo } from "lit/directives/class-map.js";
+export interface FtdsTabsProperties {
+    sideIcon?: boolean;
+}
+export declare class FtdsTabs extends FtBaseTabs implements FtdsTabsProperties {
+    sideIcon: boolean;
+    static styles: import("lit").CSSResult[];
+    get tabsClasses(): ClassInfo;
+}

package/build/ftds-tabs.js

@@ -0,0 +1,35 @@
+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 { designSystemStyles } from "./ftds-tabs.styles";
+import { property } from "lit/decorators.js";
+class FtdsTabs extends FtBaseTabs {
+    constructor() {
+        super(...arguments);
+        this.sideIcon = false;
+    }
+    get tabsClasses() {
+        return {
+            "ft-tabs": true,
+            "ft-tabs--collapsed": this.collapsible && this.activeIndex == null,
+            "ft-tabs--horizontal": this.horizontal,
+            "ft-tabs--reverse": this.contentBefore,
+            "ft-tabs--dense": this.dense,
+            ["ft-tabs--align-" + this.alignTabs]: true,
+            "ft-tabs--side-icon": this.sideIcon
+        };
+    }
+}
+FtdsTabs.styles = [
+    safariEllipsisFix,
+    designSystemStyles
+];
+__decorate([
+    property({ type: Boolean })
+], FtdsTabs.prototype, "sideIcon", void 0);
+export { FtdsTabs };

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

@@ -0,0 +1,12 @@
+export declare const FtdsTabsCssVariables: {
+    horizontalButtonsWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    horizontalDenseButtonsWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    widthWhenHorizontalAndOpen: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    backgroundPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    color: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorDisabled: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    focusBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const designSystemStyles: import("lit").CSSResult;

package/build/ftds-tabs.styles.js

@@ -0,0 +1,154 @@
+import { css } from "lit";
+import { FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+import { foundation } from "@fluid-topics/design-system-variables/build/generated/ts/foundation";
+export const FtdsTabsCssVariables = {
+    horizontalButtonsWidth: FtCssVariableFactory.create("--ft-tabs-horizontal-buttons-width", "Width of the tab buttons (N/A for vertical justified tabs)", "SIZE", "100px"),
+    horizontalDenseButtonsWidth: FtCssVariableFactory.create("--ft-tabs-horizontal-dense-buttons-width", "Width of the tab buttons when dense (N/A for vertical justified tabs)", "SIZE", "56px"),
+    widthWhenHorizontalAndOpen: FtCssVariableFactory.create("--ft-tabs-width-when-horizontal-and-open", "Width of the component when set to horizontal and open", "SIZE", "100%"),
+    colorSurface: FtCssVariableFactory.create("--ft-tabs-color-surface", "", "COLOR", "#FFFFFF"),
+    colorPrimary: FtCssVariableFactory.create("--ft-tabs-color-primary", "", "COLOR", foundation.colorBrand0),
+    backgroundPrimary: FtCssVariableFactory.create("--ft-tabs-background-primary", "", "COLOR", foundation.colorBrand10),
+    color: FtCssVariableFactory.create("--ft-tabs-color", "", "COLOR", foundation.colorGray200),
+    colorDisabled: FtCssVariableFactory.create("--ft-tabs-color-disabled", "", "COLOR", foundation.colorGray60),
+    focusBorderColor: FtCssVariableFactory.create("--ft-tabs-focus-border-color", "", "COLOR", foundation.colorCyan70),
+};
+// language=CSS
+export const designSystemStyles = css `
+    .ft-tabs {
+        display: flex;
+        flex-direction: column;
+        background-color: ${FtdsTabsCssVariables.colorSurface};
+        height: 100%;
+    }
+
+    .ft-tabs--horizontal {
+        -webkit-transition: width 200ms ease-in-out;
+        -moz-transition: width 200ms ease-in-out;
+        -o-transition: width 200ms ease-in-out;
+        transition: width 200ms ease-in-out;
+        width: ${FtdsTabsCssVariables.widthWhenHorizontalAndOpen};
+    }
+
+    .ft-tabs--horizontal.ft-tabs--collapsed {
+        width: ${FtdsTabsCssVariables.horizontalButtonsWidth};
+    }
+
+    .ft-tabs--horizontal.ft-tabs--dense.ft-tabs--collapsed {
+        width: ${FtdsTabsCssVariables.horizontalDenseButtonsWidth};
+    }
+
+    .ft-tabs--horizontal {
+        flex-direction: row;
+    }
+
+    .ft-tabs--reverse {
+        flex-direction: column-reverse;
+    }
+
+    .ft-tabs--horizontal.ft-tabs--reverse {
+        flex-direction: row-reverse;
+    }
+
+    [role="tablist"] {
+        flex-shrink: 0;
+        flex-grow: 0;
+        display: flex;
+        position: relative;
+        flex-wrap: wrap;
+    }
+
+    .ft-tabs--horizontal [role="tablist"] {
+        flex-direction: column;
+    }
+
+    .ft-tabs--align-end [role="tablist"],
+    .ft-tabs--align-right [role="tablist"] {
+        justify-content: flex-end;
+    }
+
+    .ft-tabs--align-justify [role="tablist"] {
+        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: 3px solid transparent;
+        text-shadow: 0px 0px 0px transparent;
+        cursor: pointer;
+        outline: none;
+        font-size: 16px;
+        line-height: 1;
+        color: ${FtdsTabsCssVariables.color};
+    }
+
+    [role='tab']:focus {
+        border: 3px solid ${FtdsTabsCssVariables.focusBorderColor};
+        border-radius: 3px;
+    }
+
+    .ft-tabs--side-icon [role='tab'] {
+        flex-direction: row;
+    }
+
+    .ft-tabs--horizontal [role='tab'] {
+        width: ${FtdsTabsCssVariables.horizontalButtonsWidth};
+    }
+
+    .ft-tabs--horizontal.ft-tabs--dense [role='tab'] {
+        width: ${FtdsTabsCssVariables.horizontalDenseButtonsWidth};
+    }
+
+    [role='tab'][aria-selected='true'] {
+        color: ${FtdsTabsCssVariables.colorPrimary};
+        background-color: ${FtdsTabsCssVariables.backgroundPrimary};
+    }
+
+    [role='tab'][disabled] {
+        color: ${FtdsTabsCssVariables.colorDisabled};
+    }
+
+    .ft-tabs--align-justify [role='tab'],
+    .ft-tabs--align-justify .ft-tabs--tab-tooltip,
+    .ft-tabs--align-justify .ft-tabs--tab-tooltip::part(container) {
+        display: flex;
+        flex-grow: 1;
+    }
+
+    [role='tab'] .ft-tabs--tab-label {
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    [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: ${FtdsTabsCssVariables.colorPrimary};
+        transition: width 200ms ease, left 200ms ease, top 200ms ease;
+    }
+
+    .ft-tabs--content {
+        flex-shrink: 1;
+        flex-grow: 1;
+        overflow: auto;
+    }
+`;

package/build/index.d.ts

@@ -2,5 +2,7 @@ export * from "./ft-tab.styles";
 export * from "./ft-tab.properties";
 export * from "./ft-tab";
 export * from "./ft-tabs.styles";
-export * from "./ft-tabs.properties";
 export * from "./ft-tabs";
+export * from "./ft-base-tabs";
+export * from "./ftds-tabs.styles";
+export * from "./ftds-tabs";

package/build/index.js

@@ -1,11 +1,15 @@
 import { customElement } from "@fluid-topics/ft-wc-utils";
 import { FtTab } from "./ft-tab";
 import { FtTabs } from "./ft-tabs";
+import { FtdsTabs } from "./ftds-tabs";
 export * from "./ft-tab.styles";
 export * from "./ft-tab.properties";
 export * from "./ft-tab";
 export * from "./ft-tabs.styles";
-export * from "./ft-tabs.properties";
 export * from "./ft-tabs";
+export * from "./ft-base-tabs";
+export * from "./ftds-tabs.styles";
+export * from "./ftds-tabs";
 customElement("ft-tab")(FtTab);
 customElement("ft-tabs")(FtTabs);
+customElement("ftds-tabs")(FtdsTabs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-tabs",
-  "version": "1.1.78",
+  "version": "1.1.80",
   "description": "Generic tabs component",
   "keywords": [
     "Lit"
@@ -19,12 +19,12 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-icon": "1.1.78",
-    "@fluid-topics/ft-ripple": "1.1.78",
-    "@fluid-topics/ft-tooltip": "1.1.78",
-    "@fluid-topics/ft-typography": "1.1.78",
-    "@fluid-topics/ft-wc-utils": "1.1.78",
+    "@fluid-topics/ft-icon": "1.1.80",
+    "@fluid-topics/ft-ripple": "1.1.80",
+    "@fluid-topics/ft-tooltip": "1.1.80",
+    "@fluid-topics/ft-typography": "1.1.80",
+    "@fluid-topics/ft-wc-utils": "1.1.80",
     "lit": "3.1.0"
   },
-  "gitHead": "b4f44baf8cd02d5ef4ba2fd616f0aa9483a8a027"
+  "gitHead": "9454653b9d84c51d905be4956706b7a0ef1aa2f6"
 }

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

@@ -1,15 +0,0 @@
-export declare enum FtTabsAlignment {
-    left = "left",
-    right = "right",
-    start = "start",
-    end = "end",
-    justify = "justify"
-}
-export interface FtTabsProperties {
-    dense: boolean;
-    collapsible: boolean;
-    horizontal: boolean;
-    contentBefore: boolean;
-    activeIndex?: number;
-    alignTabs: FtTabsAlignment;
-}

package/build/ft-tabs.properties.js

@@ -1,8 +0,0 @@
-export var FtTabsAlignment;
-(function (FtTabsAlignment) {
-    FtTabsAlignment["left"] = "left";
-    FtTabsAlignment["right"] = "right";
-    FtTabsAlignment["start"] = "start";
-    FtTabsAlignment["end"] = "end";
-    FtTabsAlignment["justify"] = "justify";
-})(FtTabsAlignment || (FtTabsAlignment = {}));