Creating a Space Card | Home Assistant | Page 1

Hi all,

I want to create a spacing card, which allows to add custom spacing to the dashboard without any content (so far I always used title cards without title for that).

I created this javascript file so far and it works great. But the config editor does not work yet.
Here is the config part (full file can be found on gist https://gist.github.com/TheZoker/c25ecc373b239bce2ef100c243e9ef97):

// Configuration editor for the card
class SpacerCardEditor extends HTMLElement {
  setConfig(config) {
    this._config = config;
    this.render();
  }

  render() {
    if (!this._config) {
      return;
    }

    this.innerHTML = `
      <div class="card-config">
        <ha-selector-number
          .label="Spacing Height (px)"
          .hass=${this.hass}
          .value=${this._config.height || 20}
          .min=${0}
          .max=${500}
          .step=${1}
          .unit="px"
          @value-changed=${(e) => this._valueChanged(e)}
        ></ha-selector-number>
      </div>
    `;
  }

  // Update the config when the slider value changes and dispatch an event.
  _valueChanged(event) {
    const newValue = event.detail.value;
    if (this._config.height === newValue) {
      return;
    }

    this._config = { ...this._config, height: newValue };
    this.dispatchEvent(
      new CustomEvent("config-changed", {
        detail: { config: this._config },
      })
    );
  }

  // This is called whenever the Home Assistant state changes.
  set hass(hass) {
    this._hass = hass;
    this.render();
  }
}

Can someone tell me, what I need to do to make this work?
Thanks!

#Creating a Space Card