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.

Author: j9brown

package-lock.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": {

package.json

@@ -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/decluttering-card.ts

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