Fix card not always showing in preview mode.

It seems that editMode was recently renamed to preview in the front end:
home-assistant/frontend#21065

Rearranged the logic to toggle the hidden state to track the state
of preview as it changes.

package.json

@@ -1,6 +1,6 @@
 {
  "name": "decluttering-card",
- "version": "1.0.0",
+ "version": "1.0.3",
  "description": "Decluttering Card for Lovelace",
  "main": "dist/decluttering-card.js",
  "scripts": {

src/decluttering-card.ts

@@ -149,7 +149,7 @@ abstract class DeclutteringElement extends LitElement {
  :host(.child-card-hidden) {
  display: none;
  }
- :host([edit-mode='true']) {
+ :host([preview]) {
  display: block !important;
  border: 1px solid var(--primary-color);
  }
@@ -391,8 +391,8 @@ class DeclutteringCardEditor extends LitElement implements LovelaceCardEditor {
 @customElement('decluttering-template')
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 class DeclutteringTemplate extends DeclutteringElement {
- @property({ attribute: 'edit-mode', reflect: true }) editMode;
- @state() private _previewMode = false;
+ @property({ type: Boolean, reflect: true }) preview = false;
+
  @state() private _template?: string;
 
  static getConfigElement(): HTMLElement {
@@ -428,27 +428,15 @@ class DeclutteringTemplate extends DeclutteringElement {
  this._setTemplateConfig(config, undefined);
  }
 
- async connectedCallback(): Promise<void> {
- super.connectedCallback();
-
- this._previewMode = this.parentElement?.localName === 'hui-card-preview';
- if (!this.editMode && !this._previewMode) {
- this.setAttribute('hidden', '');
- } else {
- this.removeAttribute('hidden');
- }
- }
-
  protected render(): TemplateResult | void {
- if (this._template) {
- if (this._previewMode) return super.render();
- if (this.editMode) {
- return html`
- <div class="badge">${this._template}</div>
- ${super.render()}
- `;
- }
+ if (this.preview) {
+ this.toggleAttribute('hidden', false);
+ return html`
+ <div class="badge">${this._template}</div>
+ ${super.render()}
+ `;
  }
+ this.toggleAttribute('hidden', true);
  return html``;
  }
 }

src/types.ts

@@ -34,7 +34,6 @@ export interface LovelaceElementConfig {
 
 export interface LovelaceRow extends HTMLElement {
  hass?: HomeAssistant;
- editMode?: boolean;
  setConfig(config: LovelaceRowConfig);
 }