@fluid-topics/ft-tabs 0.3.12 → 0.3.13

package/build/ft-tab.css.d.ts

@@ -0,0 +1,2 @@
+export declare const FtTabCssVariables: {};
+//# sourceMappingURL=ft-tab.css.d.ts.map

package/build/ft-tab.css.js

@@ -0,0 +1,2 @@
+export const FtTabCssVariables = {};
+//# sourceMappingURL=ft-tab.css.js.map

package/build/ft-tab.d.ts

@@ -1,12 +1,7 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { PropertyValues } from "lit";
-import { FtIconVariants } from "@fluid-topics/ft-icon";
-export interface FtTabProperties {
-    label?: string;
-    icon?: string;
-    disabled?: boolean;
-    iconVariant?: FtIconVariants;
-}
+import { FtTabProperties } from "./ft-tab.properties";
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
 export declare class FtTab extends FtLitElement implements FtTabProperties {
     static elementDefinitions: ElementDefinitionsMap;
     label: string;

package/build/ft-tab.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { html, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
-import { FtIconVariants } from "@fluid-topics/ft-icon";
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
 export class FtTab extends FtLitElement {
     constructor() {
         super(...arguments);

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

@@ -0,0 +1,8 @@
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
+export interface FtTabProperties {
+    label?: string;
+    icon?: string;
+    disabled?: boolean;
+    iconVariant?: FtIconVariants;
+}
+//# sourceMappingURL=ft-tab.properties.d.ts.map

package/build/ft-tab.properties.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ft-tab.properties.js.map

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

@@ -0,0 +1,8 @@
+export declare const FtTabsCssVariables: {
+    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 const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-tabs.css.d.ts.map

package/build/ft-tabs.css.js

@@ -0,0 +1,99 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+export const FtTabsCssVariables = {
+    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"),
+};
+// language=CSS
+export const styles = css `
+    .ft-tabs {
+        display: flex;
+        flex-direction: column;
+        background-color: ${FtTabsCssVariables.colorSurface};
+        height: 100%;
+    }
+
+    .ft-tabs--reverse {
+        flex-direction: column-reverse;
+    }
+
+    [role="tablist"] {
+        flex-shrink: 0;
+        flex-grow: 0;
+        display: flex;
+        position: relative;
+        flex-wrap: wrap;
+    }
+
+    .ft-tabs--align-right {
+        justify-content: flex-end;
+    }
+
+    .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;
+    }
+
+    [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;
+    }
+`;
+//# sourceMappingURL=ft-tabs.css.js.map

package/build/ft-tabs.d.ts

@@ -1,22 +1,6 @@
 import { PropertyValues } from "lit";
 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: 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;
-};
+import { FtTabsAlignment, FtTabsProperties } from "./ft-tabs.properties";
 export declare class IndexChangeEvent extends CustomEvent<number> {
     constructor(index: number);
 }

package/build/ft-tabs.js

@@ -4,27 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { css, html } from "lit";
+import { 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, FtCssVariableFactory, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTab } from "./ft-tab";
 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: 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"),
-};
+import { FtTabsAlignment } from "./ft-tabs.properties";
+import { styles } from "./ft-tabs.css";
 export class IndexChangeEvent extends CustomEvent {
     constructor(index) {
         super("index-change", { detail: index });
@@ -71,7 +61,7 @@ export class FtTabs extends FtLitElement {
                                     <ft-icon class="ft-tabs--tab-icon" part="tab-icon" variant="${tab.iconVariant}">
                                         ${tab.icon}
                                     </ft-icon>
-                                    <ft-typography class="ft-tabs--tab-label" 
+                                    <ft-typography class="ft-tabs--tab-label"
                                                    part="tab-label"
                                                    variant="${FtTypographyVariants.body2}">
                                         ${tab.label}
@@ -137,95 +127,7 @@ FtTabs.elementDefinitions = {
     "ft-icon": FtIcon,
 };
 // language=CSS
-FtTabs.styles = css `
-        .ft-tabs {
-            display: flex;
-            flex-direction: column;
-            background-color: ${FtTabsCssVariables.colorSurface};
-            height: 100%;
-        }
-
-        .ft-tabs--reverse {
-            flex-direction: column-reverse;
-        }
-
-        [role="tablist"] {
-            flex-shrink: 0;
-            flex-grow: 0;
-            display: flex;
-            position: relative;
-            flex-wrap: wrap;
-        }
-
-        .ft-tabs--align-right {
-            justify-content: flex-end;
-        }
-
-        .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;
-        }
-
-        [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;
-        }
-    `;
+FtTabs.styles = styles;
 __decorate([
     property({ type: Boolean })
 ], FtTabs.prototype, "dense", void 0);