Add light brightness extra for tile (#14446)

src/components/tile/ha-tile-slider.ts

@@ -0,0 +1,63 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import "../ha-bar-slider";
+
+@customElement("ha-tile-slider")
+export class HaTileSlider extends LitElement {
+  @property({ type: Boolean })
+  public disabled = false;
+
+  @property()
+  public mode?: "start" | "end" | "indicator" = "start";
+
+  @property({ type: Number })
+  public value?: number;
+
+  @property({ type: Number })
+  public step = 1;
+
+  @property({ type: Number })
+  public min = 0;
+
+  @property({ type: Number })
+  public max = 100;
+
+  @property() public label?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-bar-slider
+        .disabled=${this.disabled}
+        .mode=${this.mode}
+        .value=${this.value}
+        .step=${this.step}
+        .min=${this.min}
+        .max=${this.max}
+        aria-label=${ifDefined(this.label)}
+      >
+      </ha-bar-slider>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-bar-slider {
+        --slider-bar-color: var(
+          --tile-slider-bar-color,
+          rgb(var(--rgb-primary-color))
+        );
+        --slider-bar-background: var(
+          --tile-slider-bar-background,
+          rgba(var(--rgb-disabled-color), 0.2)
+        );
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tile-slider": HaTileSlider;
+  }
+}

src/panels/lovelace/create-element/create-tile-extra-element.ts

@@ -5,10 +5,12 @@ import {
 } from "./create-element-base";
 import "../tile-extra/hui-cover-open-close-tile-extra";
 import "../tile-extra/hui-cover-tilt-tile-extra";
+import "../tile-extra/hui-light-brightness-tile-extra";
 
 const TYPES: Set<LovelaceTileExtraConfig["type"]> = new Set([
   "cover-open-close",
   "cover-tilt",
+  "light-brightness",
 ]);
 
 export const createTileExtraElement = (config: LovelaceTileExtraConfig) =>

src/panels/lovelace/editor/config-elements/hui-tile-card-extras-editor.ts

@@ -32,6 +32,7 @@ import { LovelaceTileExtraConfig } from "../../tile-extra/types";
 const EXTRAS_TYPE: LovelaceTileExtraConfig["type"][] = [
   "cover-open-close",
   "cover-tilt",
+  "light-brightness",
 ];
 
 declare global {

src/panels/lovelace/tile-extra/hui-light-brightness-tile-extra.ts

@@ -0,0 +1,89 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../components/tile/ha-tile-slider";
+import { UNAVAILABLE } from "../../../data/entity";
+import { HomeAssistant } from "../../../types";
+import { LovelaceTileExtra } from "../types";
+import { LightBrightnessTileExtraConfig } from "./types";
+
+@customElement("hui-light-brightness-tile-extra")
+class HuiLightBrightnessTileExtra
+  extends LitElement
+  implements LovelaceTileExtra
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  @state() private _config?: LightBrightnessTileExtraConfig;
+
+  static getStubConfig(): LightBrightnessTileExtraConfig {
+    return {
+      type: "light-brightness",
+    };
+  }
+
+  public setConfig(config: LightBrightnessTileExtraConfig): void {
+    if (!config) {
+      throw new Error("Invalid configuration");
+    }
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this.hass || !this.stateObj) {
+      return html``;
+    }
+
+    const position =
+      this.stateObj.attributes.brightness != null
+        ? Math.max(
+            Math.round((this.stateObj.attributes.brightness * 100) / 255),
+            1
+          )
+        : undefined;
+
+    return html`
+      <div class="container">
+        <ha-tile-slider
+          .value=${position}
+          min="1"
+          max="100"
+          .disabled=${this.stateObj!.state === UNAVAILABLE}
+          @value-changed=${this._valueChanged}
+          .label=${this.hass.localize("ui.card.light.brightness")}
+        ></ha-tile-slider>
+      </div>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const value = ev.detail.value;
+
+    this.hass!.callService("light", "turn_on", {
+      entity_id: this.stateObj!.entity_id,
+      brightness_pct: value,
+    });
+  }
+
+  static get styles() {
+    return css`
+      ha-tile-slider {
+        --tile-slider-bar-color: rgb(var(--tile-color));
+        --tile-slider-bar-background: rgba(var(--tile-color), 0.2);
+      }
+      .container {
+        padding: 0 12px 12px 12px;
+        width: auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-light-brightness-tile-extra": HuiLightBrightnessTileExtra;
+  }
+}

src/panels/lovelace/tile-extra/tile-extras.ts

@@ -2,6 +2,7 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { CoverEntityFeature } from "../../../data/cover";
+import { lightSupportsBrightness } from "../../../data/light";
 import { LovelaceTileExtraConfig } from "./types";
 
 type TileExtraType = LovelaceTileExtraConfig["type"];
@@ -16,6 +17,9 @@ const TILE_EXTRAS_SUPPORT: Record<TileExtraType, SupportsTileExtra> = {
     computeDomain(stateObj.entity_id) === "cover" &&
     (supportsFeature(stateObj, CoverEntityFeature.OPEN_TILT) ||
       supportsFeature(stateObj, CoverEntityFeature.CLOSE_TILT)),
+  "light-brightness": (stateObj) =>
+    computeDomain(stateObj.entity_id) === "light" &&
+    lightSupportsBrightness(stateObj),
 };
 
 const TILE_EXTRAS_EDITABLE: Set<TileExtraType> = new Set([]);

src/panels/lovelace/tile-extra/types.ts

@@ -6,6 +6,11 @@ export interface CoverTiltTileExtraConfig {
   type: "cover-tilt";
 }
 
+export interface LightBrightnessTileExtraConfig {
+  type: "light-brightness";
+}
+
 export type LovelaceTileExtraConfig =
   | CoverOpenCloseTileExtraConfig
-  | CoverTiltTileExtraConfig;
+  | CoverTiltTileExtraConfig
+  | LightBrightnessTileExtraConfig;

src/translations/en.json

@@ -4234,6 +4234,9 @@
                   },
                   "cover-tilt": {
                     "label": "Cover tilt"
+                  },
+                  "light-brightness": {
+                    "label": "Light brightness"
                   }
                 }
               }