Add QR code selector (#19588)

src/components/ha-selector/ha-selector-qr-code.ts

@@ -0,0 +1,30 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { QRCodeSelector } from "../../data/selector";
+import "../ha-qr-code";
+
+@customElement("ha-selector-qr_code")
+export class HaSelectorQRCode extends LitElement {
+  @property({ attribute: false }) public selector!: QRCodeSelector;
+
+  protected render() {
+    return html`<ha-qr-code
+      .data=${this.selector.qr_code?.data}
+      .scale=${this.selector.qr_code?.scale}
+      .errorCorrectionLevel=${this.selector.qr_code?.error_correction_level}
+      .centerImage=${this.selector.qr_code?.center_image}
+    ></ha-qr-code>`;
+  }
+
+  static styles = css`
+    ha-qr-code {
+      text-align: center;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-qr_code": HaSelectorQRCode;
+  }
+}

src/components/ha-selector/ha-selector.ts

@@ -34,6 +34,7 @@ const LOAD_ELEMENTS = {
   navigation: () => import("./ha-selector-navigation"),
   number: () => import("./ha-selector-number"),
   object: () => import("./ha-selector-object"),
+  qr_code: () => import("./ha-selector-qr-code"),
   select: () => import("./ha-selector-select"),
   selector: () => import("./ha-selector-selector"),
   state: () => import("./ha-selector-state"),

src/data/selector.ts

@@ -41,6 +41,7 @@ export type Selector =
   | NumberSelector
   | ObjectSelector
   | AssistPipelineSelector
+  | QRCodeSelector
   | SelectSelector
   | SelectorSelector
   | StateSelector
@@ -340,6 +341,15 @@ export interface BackupLocationSelector {
   backup_location: {} | null;
 }
 
+export interface QRCodeSelector {
+  qr_code: {
+    data: string;
+    scale?: number;
+    error_correction_level?: "low" | "medium" | "quartile" | "high";
+    center_image?: string;
+  } | null;
+}
+
 export interface StringSelector {
   text: {
     multiline?: boolean;