Add compact layout

src/panels/lovelace/card-features/hui-card-features.ts

@@ -1,3 +1,20 @@
+import {
+  mdiAirHumidifier,
+  mdiBrightness5,
+  mdiFan,
+  mdiFormDropdown,
+  mdiFormTextbox,
+  mdiMenu,
+  mdiRobotMower,
+  mdiShield,
+  mdiSunThermometer,
+  mdiSwapVertical,
+  mdiThermometer,
+  mdiThermostat,
+  mdiTuneVariant,
+  mdiVacuum,
+  mdiWaterPercent,
+} from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,
@@ -7,7 +24,9 @@ import {
   html,
   nothing,
 } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import "../../../components/ha-control-button";
+import "../../../components/ha-icon-next";
 import { HomeAssistant } from "../../../types";
 import type { HuiErrorCard } from "../cards/hui-error-card";
 import { LovelaceCardFeatureLayout } from "../cards/types";
@@ -15,6 +34,30 @@ import { createCardFeatureElement } from "../create-element/create-card-feature-
 import type { LovelaceCardFeature } from "../types";
 import type { LovelaceCardFeatureConfig } from "./types";
 
+const SHOW_ICON = true;
+
+const ICONS: Record<LovelaceCardFeatureConfig["type"], string> = {
+  "alarm-modes": mdiShield,
+  "climate-hvac-modes": mdiThermostat,
+  "climate-preset-modes": mdiTuneVariant,
+  "cover-open-close": mdiSwapVertical,
+  "cover-position": mdiMenu,
+  "cover-tilt": mdiSwapVertical,
+  "cover-tilt-position": mdiMenu,
+  "fan-speed": mdiFan,
+  "humidifier-modes": mdiTuneVariant,
+  "humidifier-toggle": mdiAirHumidifier,
+  "lawn-mower-commands": mdiRobotMower,
+  "light-brightness": mdiBrightness5,
+  "light-color-temp": mdiSunThermometer,
+  "numeric-input": mdiFormTextbox,
+  "select-options": mdiFormDropdown,
+  "target-humidity": mdiWaterPercent,
+  "target-temperature": mdiThermometer,
+  "vacuum-commands": mdiVacuum,
+  "water-heater-operation-modes": mdiThermostat,
+};
+
 @customElement("hui-card-features")
 export class HuiCardFeatures extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -27,6 +70,8 @@ export class HuiCardFeatures extends LitElement {
 
   @property({ attribute: false }) public color?: string;
 
+  @state() private _currentFeatureIndex = 0;
+
   private _featuresElements = new WeakMap<
     LovelaceCardFeatureConfig,
     LovelaceCardFeature | HuiErrorCard
@@ -57,11 +102,54 @@ export class HuiCardFeatures extends LitElement {
     return html`${element}`;
   }
 
+  private _next() {
+    let newIndex = this._currentFeatureIndex + 1;
+    if (this.features?.length && newIndex >= this.features.length) {
+      newIndex = 0;
+    }
+    this._currentFeatureIndex = newIndex;
+  }
+
+  private get _nextFeatureIndex() {
+    const newIndex = this._currentFeatureIndex + 1;
+    if (this.features?.length && newIndex >= this.features.length) {
+      return 0;
+    }
+    return newIndex;
+  }
+
   protected render() {
     if (!this.features) {
       return nothing;
     }
 
+    if (this.layout?.type === "compact") {
+      const currentFeature = this.features[this._currentFeatureIndex];
+      const nextFeature = this.features[this._nextFeatureIndex];
+      return html`
+        <div class="container horizontal">
+          ${this.renderFeature(currentFeature, this.stateObj)}
+          ${this.features.length > 1
+            ? html`
+                <ha-control-button
+                  class="next"
+                  @click=${this._next}
+                  .label=${"Next"}
+                >
+                  ${ICONS[nextFeature.type] && SHOW_ICON
+                    ? html`
+                        <ha-svg-icon
+                          .path=${ICONS[nextFeature.type]}
+                        ></ha-svg-icon>
+                      `
+                    : html`<ha-icon-next></ha-icon-next>`}
+                </ha-control-button>
+              `
+            : nothing}
+        </div>
+      `;
+    }
+
     const containerClass = this.layout?.type ? ` ${this.layout.type}` : "";
 
     return html`
@@ -78,13 +166,18 @@ export class HuiCardFeatures extends LitElement {
       :host {
         --feature-color: var(--state-icon-color);
         --feature-padding: 12px;
+        position: relative;
+        width: 100%;
       }
       .container {
+        position: relative;
         display: flex;
         flex-direction: column;
         padding: var(--feature-padding);
         padding-top: 0px;
         gap: var(--feature-padding);
+        width: 100%;
+        box-sizing: border-box;
       }
       .container.horizontal {
         display: flex;
@@ -93,6 +186,9 @@ export class HuiCardFeatures extends LitElement {
       .container.horizontal > * {
         flex: 1;
       }
+      .next {
+        flex: none !important;
+      }
     `;
   }
 }