fix(#8): Correct label in variable editor (#14)

src/streamline-card-editor.js

@@ -95,6 +95,7 @@ class StreamlineCardEditor extends HTMLElement {
 
     this.elements.form = document.createElement("ha-form");
     this.elements.form.classList.add("streamline-card-form");
+    this.elements.form.computeLabel = StreamlineCardEditor.computeLabel;
     this.elements.form.addEventListener("value-changed", (ev) => {
       let newConfig = StreamlineCardEditor.formatConfig(ev.detail.value);
       if (this._config.template !== newConfig.template) {
@@ -174,23 +175,20 @@ class StreamlineCardEditor extends HTMLElement {
     return {
       name,
       selector: { entity: {} },
-      title: name,
     };
   }
 
   static getIconSchema(name) {
     return {
       name,
       selector: { icon: {} },
-      title: name,
     };
   }
 
   static getDefaultSchema(name) {
     return {
       name,
       selector: { text: {} },
-      title: name,
     };
   }
 
@@ -227,6 +225,17 @@ class StreamlineCardEditor extends HTMLElement {
     ];
   }
 
+  static computeLabel(schema) {
+    const schemaName = schema.name.replace(/[-_]+/gu, " ");
+    const defaultLabel =
+      schemaName.charAt(0).toUpperCase() + schemaName.slice(1);
+    const translation = this.hass.localize(
+      `ui.panel.lovelace.editor.card.generic.${schema.name}`,
+    );
+
+    return translation || defaultLabel;
+  }
+
   render() {
     const schema = this.getSchema();