@fluid-topics/ft-tabs 0.1.16 → 0.2.0

package/build/ft-tab.d.ts

@@ -12,12 +12,12 @@ export interface FtTabProperties {
 }
 export declare class FtTab extends FtLitElement implements FtTabProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    protected getStyles(): import("lit").CSSResult;
+    static get styles(): import("lit").CSSResult;
     label: string;
     icon: string;
     position: FtTabPosition;
     disabled: boolean;
-    protected getTemplate(): unknown;
+    protected render(): unknown;
     protected updated(props: PropertyValues): void;
 }
 //# sourceMappingURL=ft-tab.d.ts.map

package/build/ft-tab.js

@@ -4,7 +4,7 @@ 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 { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { css, html, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
 export var FtTabPosition;
@@ -13,7 +13,7 @@ export var FtTabPosition;
     FtTabPosition["current"] = "current";
     FtTabPosition["after"] = "after";
 })(FtTabPosition || (FtTabPosition = {}));
-let FtTab = class FtTab extends FtLitElement {
+export class FtTab extends FtLitElement {
     constructor() {
         super(...arguments);
         this.label = "";
@@ -21,7 +21,17 @@ let FtTab = class FtTab extends FtLitElement {
         this.position = FtTabPosition.before;
         this.disabled = false;
     }
-    getStyles() {
+    static get styles() {
+        // language=CSS
+        return css `
+            :host {
+                width: 100%;
+                position: absolute;
+                transition: left 250ms cubic-bezier(0.4, 0, 0.2, 1);
+            }
+        `;
+    }
+    render() {
         let left;
         switch (this.position) {
             case FtTabPosition.before:
@@ -34,18 +44,12 @@ let FtTab = class FtTab extends FtLitElement {
                 left = "100%";
                 break;
         }
-        // language=CSS
-        return css `
-            :host {
-                width: 100%;
-                position: absolute;
-                transition: left 250ms cubic-bezier(0.4, 0, 0.2, 1);
-                left: ${unsafeCSS(left)};
-            }
-        `;
-    }
-    getTemplate() {
         return html `
+            <style>
+                :host {
+                    left: ${unsafeCSS(left)};
+                }
+            </style>
             <slot></slot>
         `;
     }
@@ -53,7 +57,7 @@ let FtTab = class FtTab extends FtLitElement {
         super.updated(props);
         this.dispatchEvent(new Event("updated"));
     }
-};
+}
 FtTab.elementDefinitions = {};
 __decorate([
     property({ type: String })
@@ -67,8 +71,4 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtTab.prototype, "disabled", void 0);
-FtTab = __decorate([
-    customElement("ft-tab")
-], FtTab);
-export { FtTab };
 //# sourceMappingURL=ft-tab.js.map

package/build/ft-tabs.d.ts

@@ -1,6 +1,5 @@
 import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
-export { FtTabProperties, FtTab } from "./ft-tab";
 export interface FtTabsProperties {
     dense: boolean;
     contentBefore: boolean;
@@ -17,7 +16,7 @@ export declare class IndexChangeEvent extends CustomEvent<number> {
 }
 export declare class FtTabs extends FtLitElement implements FtTabsProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    protected getStyles(): import("lit").CSSResult;
+    static styles: import("lit").CSSResult;
     dense: boolean;
     contentBefore: boolean;
     private tabs;
@@ -25,7 +24,7 @@ export declare class FtTabs extends FtLitElement implements FtTabsProperties {
     private resizable?;
     private get currentTab();
     private resizeObserver;
-    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
     private onTabChange;
     private updateDebouncer;
     private onContentChange;