Replace polymer paper-tabs

demo/src/configs/jimpower/theme.ts

@@ -3,7 +3,6 @@ export const demoThemeJimpower = () => ({
   "paper-item-icon-color": "var(--primary-text-color)",
   "primary-color": "#5294E2",
   "label-badge-red": "var(--accent-color)",
-  "paper-tabs-selection-bar-color": "green",
   "light-primary-color": "var(--accent-color)",
   "primary-background-color": "#383C45",
   "primary-text-color": "#FFFFFF",

demo/src/configs/kernehed/theme.ts

@@ -4,7 +4,6 @@ export const demoThemeKernehed = () => ({
   "paper-item-icon-color": "var(--primary-text-color)",
   "primary-color": "#2980b9",
   "label-badge-red": "var(--accent-color)",
-  "paper-tabs-selection-bar-color": "green",
   "primary-text-color": "#FFFFFF",
   "light-primary-color": "var(--accent-color)",
   "primary-background-color": "#222222",

package.json

@@ -85,7 +85,6 @@
     "@mdi/svg": "7.4.47",
     "@polymer/paper-item": "3.0.1",
     "@polymer/paper-listbox": "3.0.1",
-    "@polymer/paper-tabs": "3.1.0",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
     "@vaadin/combo-box": "24.4.9",

src/components/ha-md-primary-tab.ts

@@ -0,0 +1,11 @@
+import { customElement } from "lit/decorators";
+import { MdPrimaryTab } from "@material/web/tabs/primary-tab";
+
+@customElement("ha-md-primary-tab")
+export class HaMdPrimaryTab extends MdPrimaryTab {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-md-primary-tab": HaMdPrimaryTab;
+  }
+}

src/components/ha-md-secondary-tab.ts

@@ -0,0 +1,11 @@
+import { customElement } from "lit/decorators";
+import { MdSecondaryTab } from "@material/web/tabs/secondary-tab";
+
+@customElement("ha-md-secondary-tab")
+export class HaMdSecondaryTab extends MdSecondaryTab {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-md-secondary-tab": HaMdSecondaryTab;
+  }
+}

src/components/ha-md-tabs.ts

@@ -0,0 +1,91 @@
+import { customElement, property } from "lit/decorators";
+import { MdTabs } from "@material/web/tabs/tabs";
+import { css } from "lit";
+import "./ha-icon-button-prev";
+import "./ha-icon-button-next";
+import { HomeAssistant } from "../types";
+
+@customElement("ha-md-tabs")
+export class HaMdTabs extends MdTabs {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  protected updated(c) {
+    super.updated(c);
+    const slider = this.shadowRoot?.querySelector(".tabs");
+    let isDown = false;
+    let isMoving = false;
+    let startX;
+    let scrollLeft;
+
+    if (!slider) {
+      return;
+    }
+
+    slider!.addEventListener("mousedown", (e) => {
+      isDown = true;
+      slider!.classList.add("active");
+      startX = e.pageX - (slider! as any).offsetLeft;
+      scrollLeft = slider!.scrollLeft;
+    });
+
+    slider!.addEventListener("mouseleave", () => {
+      isDown = false;
+      isMoving = false;
+      slider!.classList.remove("active");
+    });
+
+    slider!.addEventListener("mouseup", (e) => {
+      if (isDown && isMoving) {
+        e.preventDefault();
+      }
+      isDown = false;
+      isMoving = false;
+      slider!.classList.remove("active");
+    });
+
+    slider!.addEventListener("mousemove", (e) => {
+      if (!isDown) return;
+      e.preventDefault();
+      const x = e.pageX - (slider! as any).offsetLeft;
+      const walk = (x - startX) * 1;
+      slider!.scrollLeft = scrollLeft - walk;
+      if (x > 5) {
+        isMoving = true;
+      }
+    });
+  }
+
+  static override styles = [
+    ...super.styles,
+    css`
+      :host {
+        --md-sys-color-primary: var(--primary-color);
+        --md-sys-color-secondary: var(--secondary-color);
+        --md-sys-color-surface: var(--card-background-color);
+        --md-sys-color-on-surface: var(--primary-color);
+        --md-sys-color-on-surface-variant: var(--secondary-color);
+        --md-divider-thickness: 0px;
+        --md-primary-tab-container-height: 56px;
+        --md-secondary-tab-container-height: 56px;
+      }
+
+      :host {
+        scroll-behavior: unset;
+      }
+
+      :host(.inline) .tabs {
+        justify-content: flex-start !important;
+      }
+
+      :host(.inline) ::slotted(*) {
+        flex: unset !important;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-md-tabs": HaMdTabs;
+  }
+}