Allow data passed from editor to preview

src/panels/lovelace/editor/card-editor/hui-card-preview.ts

@@ -12,6 +12,8 @@ export class HuiCardPreview extends ReactiveElement {
 
   @property() public config?: LovelaceCardConfig;
 
+  @property() public editMode = true;
+
   private _element?: LovelaceCard;
 
   private get _error() {
@@ -81,6 +83,9 @@ export class HuiCardPreview extends ReactiveElement {
         this._element.hass = this.hass;
       }
     }
+    if (changedProperties.has("editMode")) {
+      this._element!.editMode = this.editMode;
+    }
   }
 
   private _createCard(configValue: LovelaceCardConfig): void {
@@ -90,6 +95,7 @@ export class HuiCardPreview extends ReactiveElement {
     if (this.hass) {
       this._element!.hass = this.hass;
     }
+    this._element!.editMode = this.editMode;
 
     this.appendChild(this._element!);
   }

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -43,6 +43,13 @@ declare global {
   interface HTMLElementEventMap {
     "reload-lovelace": HASSDomEvent<undefined>;
   }
+
+  interface HASSDomEvents {
+    "edit-mode-changed": any;
+  }
+  interface HTMLElementEventMap {
+    "edit-mode-changed": HASSDomEvent<any>;
+  }
 }
 
 @customElement("hui-dialog-edit-card")
@@ -77,10 +84,13 @@ export class HuiDialogEditCard
 
   @state() private _isEscapeEnabled = true;
 
+  @state() private _editMode = true;
+
   public async showDialog(params: EditCardDialogParams): Promise<void> {
     this._params = params;
     this._GUImode = true;
     this._guiModeAvailable = true;
+    this._editMode = true;
     const [view, card] = params.path;
     this._viewConfig = params.lovelaceConfig.views[view];
     this._cardConfig =
@@ -205,6 +215,7 @@ export class HuiDialogEditCard
               .lovelace=${this._params.lovelaceConfig}
               .value=${this._cardConfig}
               @config-changed=${this._handleConfigChanged}
+              @edit-mode-changed=${this._handleEditModeChanged}
               @GUImode-changed=${this._handleGUIModeChanged}
               @editor-save=${this._save}
               dialogInitialFocus
@@ -214,6 +225,7 @@ export class HuiDialogEditCard
             <hui-card-preview
               .hass=${this.hass}
               .config=${this._cardConfig}
+              .editMode=${this._editMode}
               class=${this._error ? "blur" : ""}
             ></hui-card-preview>
             ${this._error
@@ -284,6 +296,10 @@ export class HuiDialogEditCard
     this._dirty = true;
   }
 
+  private _handleEditModeChanged(ev: HASSDomEvent<any>) {
+    this._editMode = ev.detail ?? true;
+  }
+
   private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void {
     ev.stopPropagation();
     this._GUImode = ev.detail.guiMode;

src/panels/lovelace/types.ts

@@ -38,7 +38,7 @@ export interface LovelaceBadge extends HTMLElement {
 export interface LovelaceCard extends HTMLElement {
   hass?: HomeAssistant;
   isPanel?: boolean;
-  editMode?: boolean;
+  editMode?: any;
   getCardSize(): number | Promise<number>;
   setConfig(config: LovelaceCardConfig): void;
 }