Add support for labels

demo/src/ha-demo.ts

@@ -72,6 +72,7 @@ export class HaDemo extends HomeAssistantAppEl {
         id: "sensor.co2_intensity",
         name: null,
         icon: null,
+        labels: [],
         platform: "co2signal",
         hidden_by: null,
         entity_category: null,
@@ -88,6 +89,7 @@ export class HaDemo extends HomeAssistantAppEl {
         id: "sensor.co2_intensity",
         name: null,
         icon: null,
+        labels: [],
         platform: "co2signal",
         hidden_by: null,
         entity_category: null,

gallery/src/pages/components/ha-form.ts

@@ -59,6 +59,7 @@ const DEVICES = [
     hw_version: null,
     via_device_id: null,
     serial_number: null,
+    labels: [],
   },
   {
     area_id: "backyard",
@@ -77,6 +78,7 @@ const DEVICES = [
     hw_version: null,
     via_device_id: null,
     serial_number: null,
+    labels: [],
   },
   {
     area_id: null,
@@ -95,6 +97,7 @@ const DEVICES = [
     hw_version: null,
     via_device_id: null,
     serial_number: null,
+    labels: [],
   },
 ];
 
@@ -106,6 +109,7 @@ const AREAS: AreaRegistryEntry[] = [
     icon: null,
     picture: null,
     aliases: [],
+    labels: [],
   },
   {
     area_id: "bedroom",
@@ -114,6 +118,7 @@ const AREAS: AreaRegistryEntry[] = [
     icon: "mdi:bed",
     picture: null,
     aliases: [],
+    labels: [],
   },
   {
     area_id: "livingroom",
@@ -122,6 +127,7 @@ const AREAS: AreaRegistryEntry[] = [
     icon: "mdi:sofa",
     picture: null,
     aliases: [],
+    labels: [],
   },
 ];
 

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

@@ -55,6 +55,7 @@ const DEVICES = [
     hw_version: null,
     via_device_id: null,
     serial_number: null,
+    labels: [],
   },
   {
     area_id: "backyard",
@@ -73,6 +74,7 @@ const DEVICES = [
     hw_version: null,
     via_device_id: null,
     serial_number: null,
+    labels: [],
   },
   {
     area_id: null,
@@ -91,6 +93,7 @@ const DEVICES = [
     hw_version: null,
     via_device_id: null,
     serial_number: null,
+    labels: [],
   },
 ];
 
@@ -102,6 +105,7 @@ const AREAS: AreaRegistryEntry[] = [
     icon: null,
     picture: null,
     aliases: [],
+    labels: [],
   },
   {
     area_id: "bedroom",
@@ -110,6 +114,7 @@ const AREAS: AreaRegistryEntry[] = [
     icon: "mdi:bed",
     picture: null,
     aliases: [],
+    labels: [],
   },
   {
     area_id: "livingroom",
@@ -118,6 +123,7 @@ const AREAS: AreaRegistryEntry[] = [
     icon: "mdi:sofa",
     picture: null,
     aliases: [],
+    labels: [],
   },
 ];
 

gallery/src/pages/misc/entity-state.ts

@@ -406,6 +406,7 @@ export class DemoEntityState extends LitElement {
           entity_id: "select.speed",
           translation_key: "speed",
           platform: "demo",
+          labels: [],
         },
       },
     });

gallery/src/pages/misc/integration-card.ts

@@ -199,6 +199,7 @@ const createEntityRegistryEntries = (
     has_entity_name: false,
     unique_id: "updater",
     options: null,
+    labels: [],
   },
 ];
 
@@ -222,6 +223,7 @@ const createDeviceRegistryEntries = (
     name_by_user: null,
     disabled_by: null,
     configuration_url: null,
+    labels: [],
   },
 ];
 

src/components/chips/ha-input-chip.ts

@@ -19,12 +19,16 @@ export class HaInputChip extends MdInputChip {
           var(--rgb-primary-text-color),
           0.15
         );
+        --ha-input-chip-selected-container-opacity: 1;
       }
       /** Set the size of mdc icons **/
       ::slotted([slot="icon"]) {
         display: flex;
         --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
       }
+      .selected::before {
+        opacity: var(--ha-input-chip-selected-container-opacity);
+      }
     `,
   ];
 }

src/components/ha-area-picker.ts

@@ -142,6 +142,7 @@ export class HaAreaPicker extends LitElement {
             picture: null,
             icon: null,
             aliases: [],
+            labels: [],
           },
         ];
       }
@@ -288,6 +289,7 @@ export class HaAreaPicker extends LitElement {
             picture: null,
             icon: null,
             aliases: [],
+            labels: [],
           },
         ];
       }
@@ -303,6 +305,7 @@ export class HaAreaPicker extends LitElement {
               picture: null,
               icon: "mdi:plus",
               aliases: [],
+              labels: [],
             },
           ];
     }

src/panels/lovelace/components/hui-color-picker.ts → src/components/ha-color-picker.ts

@@ -2,17 +2,15 @@ import "@material/mwc-list/mwc-list-item";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import {
-  computeCssColor,
-  THEME_COLORS,
-} from "../../../common/color/compute-color";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
-import "../../../components/ha-select";
-import { HomeAssistant } from "../../../types";
+import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import "./ha-select";
+import { HomeAssistant } from "../types";
+import { LocalizeKeys } from "../common/translations/localize";
 
-@customElement("hui-color-picker")
-export class HuiColorPicker extends LitElement {
+@customElement("ha-color-picker")
+export class HaColorPicker extends LitElement {
   @property() public label?: string;
 
   @property() public helper?: string;
@@ -21,6 +19,8 @@ export class HuiColorPicker extends LitElement {
 
   @property() public value?: string;
 
+  @property({ type: Boolean }) public defaultColor = false;
+
   @property({ type: Boolean }) public disabled = false;
 
   _valueSelected(ev) {
@@ -52,16 +52,16 @@ export class HuiColorPicker extends LitElement {
               </span>
             `
           : nothing}
-        <mwc-list-item value="default">
-          ${this.hass.localize(
-            `ui.panel.lovelace.editor.color-picker.default_color`
-          )}
-        </mwc-list-item>
+        ${this.defaultColor
+          ? html` <mwc-list-item value="default">
+              ${this.hass.localize(`ui.components.color-picker.default_color`)}
+            </mwc-list-item>`
+          : nothing}
         ${Array.from(THEME_COLORS).map(
           (color) => html`
             <mwc-list-item .value=${color} graphic="icon">
               ${this.hass.localize(
-                `ui.panel.lovelace.editor.color-picker.colors.${color}`
+                `ui.components.color-picker.colors.${color}` as LocalizeKeys
               ) || color}
               <span slot="graphic">${this.renderColorCircle(color)}</span>
             </mwc-list-item>
@@ -100,6 +100,6 @@ export class HuiColorPicker extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-color-picker": HuiColorPicker;
+    "ha-color-picker": HaColorPicker;
   }
 }