@fluid-topics/ft-tabs 0.1.17 → 0.2.1

package/build/ft-tabs.js

@@ -8,11 +8,10 @@ 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 { customElement, Debouncer, designSystemVariables, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, designSystemVariables, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTab, FtTabPosition } from "./ft-tab";
 import { Tab } from "@material/mwc-tab";
 import { TabBar } from "@material/mwc-tab-bar";
-export { FtTab } from "./ft-tab";
 export const FtTabsCssVariables = {
     colorSurface: FtCssVariable.external(designSystemVariables.colorSurface, "Design system"),
     colorPrimary: FtCssVariable.external(designSystemVariables.colorPrimary, "Design system"),
@@ -24,7 +23,7 @@ export class IndexChangeEvent extends CustomEvent {
         super("index-change", { detail: index });
     }
 }
-let FtTabs = class FtTabs extends FtLitElement {
+export class FtTabs extends FtLitElement {
     constructor() {
         super(...arguments);
         this.dense = false;
@@ -35,50 +34,10 @@ let FtTabs = class FtTabs extends FtLitElement {
         this.updateDebouncer = new Debouncer(20);
         this.resizeDebouncer = new Debouncer(50);
     }
-    // language=CSS
-    getStyles() {
-        return css `
-            .ft-tabs {
-                display: flex;
-                flex-direction: column;
-                background-color: ${FtTabsCssVariables.colorSurface};
-                height: 100%;
-            }
-
-            .ft-tabs--reverse {
-                flex-direction: column-reverse;
-            }
-
-            mwc-tab-bar {
-                display: block;
-                flex-shrink: 0;
-                flex-grow: 0;
-                --mdc-theme-primary: ${FtTabsCssVariables.colorPrimary};
-                --mdc-tab-color-default: ${FtTabsCssVariables.colorOnSurfaceMedium};
-            }
-
-            .ft-tabs--content {
-                flex-shrink: 1;
-                flex-grow: 1;
-                overflow: auto;
-            }
-
-            .ft-tabs--resizable {
-                position: relative;
-                overflow: hidden;
-                width: 100%;
-            }
-
-            mwc-tab[disabled] {
-                pointer-events: none;
-                --mdc-tab-color-default: ${FtTabsCssVariables.colorOnSurfaceDisabled};
-            }
-        `;
-    }
     get currentTab() {
         return this.tabs[this.activeIndex];
     }
-    getTemplate() {
+    render() {
         const classes = {
             "ft-tabs": true,
             "ft-tabs--reverse": this.contentBefore,
@@ -145,12 +104,50 @@ let FtTabs = class FtTabs extends FtLitElement {
             }
         });
     }
-};
+}
 FtTabs.elementDefinitions = {
     "ft-tab": FtTab,
     "mwc-tab": Tab,
     "mwc-tab-bar": TabBar,
 };
+// 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;
+        }
+
+        mwc-tab-bar {
+            display: block;
+            flex-shrink: 0;
+            flex-grow: 0;
+            --mdc-theme-primary: ${FtTabsCssVariables.colorPrimary};
+            --mdc-tab-color-default: ${FtTabsCssVariables.colorOnSurfaceMedium};
+        }
+
+        .ft-tabs--content {
+            flex-shrink: 1;
+            flex-grow: 1;
+            overflow: auto;
+        }
+
+        .ft-tabs--resizable {
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+        }
+
+        mwc-tab[disabled] {
+            pointer-events: none;
+            --mdc-tab-color-default: ${FtTabsCssVariables.colorOnSurfaceDisabled};
+        }
+    `;
 __decorate([
     property({ type: Boolean })
 ], FtTabs.prototype, "dense", void 0);
@@ -166,8 +163,4 @@ __decorate([
 __decorate([
     query(".ft-tabs--resizable")
 ], FtTabs.prototype, "resizable", void 0);
-FtTabs = __decorate([
-    customElement("ft-tabs")
-], FtTabs);
-export { FtTabs };
 //# sourceMappingURL=ft-tabs.js.map