Code split edit dialog (#2198)

* Code split edit dialog

* Code split edit view dialog

src/panels/lovelace/components/hui-card-options.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
 import "@polymer/paper-button/paper-button";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { showEditCardDialog } from "../editor/hui-dialog-edit-card";
+import { showEditCardDialog } from "../editor/show-edit-card-dialog";
 
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { confDeleteCard } from "../editor/delete-card";

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

@@ -2,7 +2,7 @@ import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
 import { TemplateResult } from "lit-html";
 
 import { HomeAssistant } from "../../../types";
-import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
+import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import "./hui-edit-card";
 import "./hui-migrate-config";
@@ -11,7 +11,6 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "reload-lovelace": undefined;
-    "show-edit-card": EditCardDialogParams;
   }
   // for add event listener
   interface HTMLElementEventMap {
@@ -19,10 +18,6 @@ declare global {
   }
 }
 
-let registeredDialog = false;
-const dialogShowEvent = "show-edit-card";
-const dialogTag = "hui-dialog-edit-card";
-
 export interface EditCardDialogParams {
   cardConfig?: LovelaceCardConfig;
   viewId?: string | number;
@@ -30,24 +25,6 @@ export interface EditCardDialogParams {
   reloadLovelace: () => void;
 }
 
-const registerEditCardDialog = (element: HTMLElement) =>
-  fireEvent(element, "register-dialog", {
-    dialogShowEvent,
-    dialogTag,
-    dialogImport: () => import("./hui-dialog-edit-card"),
-  });
-
-export const showEditCardDialog = (
-  element: HTMLElement,
-  editCardDialogParams: EditCardDialogParams
-) => {
-  if (!registeredDialog) {
-    registeredDialog = true;
-    registerEditCardDialog(element);
-  }
-  fireEvent(element, dialogShowEvent, editCardDialogParams);
-};
-
 export class HuiDialogEditCard extends LitElement {
   protected hass?: HomeAssistant;
   private _params?: EditCardDialogParams;
@@ -110,4 +87,4 @@ declare global {
   }
 }
 
-customElements.define(dialogTag, HuiDialogEditCard);
+customElements.define("hui-dialog-edit-card", HuiDialogEditCard);

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

@@ -2,16 +2,15 @@ import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
 import { TemplateResult } from "lit-html";
 
 import { HomeAssistant } from "../../../types";
-import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
+import { HASSDomEvent } from "../../../common/dom/fire_event";
-import { LovelaceViewConfig } from "../../../data/lovelace";
 import "./hui-edit-view";
 import "./hui-migrate-config";
+import { EditViewDialogParams } from "./show-edit-view-dialog";
 
 declare global {
   // for fire event
   interface HASSDomEvents {
     "reload-lovelace": undefined;
-    "show-edit-view": EditViewDialogParams;
   }
   // for add event listener
   interface HTMLElementEventMap {
@@ -19,34 +18,6 @@ declare global {
   }
 }
 
-let registeredDialog = false;
-const dialogShowEvent = "show-edit-view";
-const dialogTag = "hui-dialog-edit-view";
-
-export interface EditViewDialogParams {
-  viewConfig?: LovelaceViewConfig;
-  add?: boolean;
-  reloadLovelace: () => void;
-}
-
-const registerEditViewDialog = (element: HTMLElement) =>
-  fireEvent(element, "register-dialog", {
-    dialogShowEvent,
-    dialogTag,
-    dialogImport: () => import("./hui-dialog-edit-view"),
-  });
-
-export const showEditViewDialog = (
-  element: HTMLElement,
-  editViewDialogParams: EditViewDialogParams
-) => {
-  if (!registeredDialog) {
-    registeredDialog = true;
-    registerEditViewDialog(element);
-  }
-  fireEvent(element, dialogShowEvent, editViewDialogParams);
-};
-
 export class HuiDialogEditView extends LitElement {
   protected hass?: HomeAssistant;
   private _params?: EditViewDialogParams;
@@ -98,4 +69,4 @@ declare global {
   }
 }
 
-customElements.define(dialogTag, HuiDialogEditView);
+customElements.define("hui-dialog-edit-view", HuiDialogEditView);

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

@@ -0,0 +1,38 @@
+import { LovelaceCardConfig } from "../../../data/lovelace";
+import { fireEvent } from "../../../common/dom/fire_event";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "show-edit-card": EditCardDialogParams;
+  }
+}
+
+let registeredDialog = false;
+const dialogShowEvent = "show-edit-card";
+const dialogTag = "hui-dialog-edit-card";
+
+export interface EditCardDialogParams {
+  cardConfig?: LovelaceCardConfig;
+  viewId?: string | number;
+  add: boolean;
+  reloadLovelace: () => void;
+}
+
+const registerEditCardDialog = (element: HTMLElement) =>
+  fireEvent(element, "register-dialog", {
+    dialogShowEvent,
+    dialogTag,
+    dialogImport: () => import("./hui-dialog-edit-card"),
+  });
+
+export const showEditCardDialog = (
+  element: HTMLElement,
+  editCardDialogParams: EditCardDialogParams
+) => {
+  if (!registeredDialog) {
+    registeredDialog = true;
+    registerEditCardDialog(element);
+  }
+  fireEvent(element, dialogShowEvent, editCardDialogParams);
+};

src/panels/lovelace/editor/show-edit-view-dialog.ts

@@ -0,0 +1,42 @@
+import { HASSDomEvent, fireEvent } from "../../../common/dom/fire_event";
+import { LovelaceViewConfig } from "../../../data/lovelace";
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "reload-lovelace": undefined;
+    "show-edit-view": EditViewDialogParams;
+  }
+  // for add event listener
+  interface HTMLElementEventMap {
+    "reload-lovelace": HASSDomEvent<undefined>;
+  }
+}
+
+let registeredDialog = false;
+const dialogShowEvent = "show-edit-view";
+const dialogTag = "hui-dialog-edit-view";
+
+export interface EditViewDialogParams {
+  viewConfig?: LovelaceViewConfig;
+  add?: boolean;
+  reloadLovelace: () => void;
+}
+
+const registerEditViewDialog = (element: HTMLElement) =>
+  fireEvent(element, "register-dialog", {
+    dialogShowEvent,
+    dialogTag,
+    dialogImport: () => import("./hui-dialog-edit-view"),
+  });
+
+export const showEditViewDialog = (
+  element: HTMLElement,
+  editViewDialogParams: EditViewDialogParams
+) => {
+  if (!registeredDialog) {
+    registeredDialog = true;
+    registerEditViewDialog(element);
+  }
+  fireEvent(element, dialogShowEvent, editViewDialogParams);
+};

src/panels/lovelace/hui-root.js

@@ -33,7 +33,7 @@ import "./hui-view";
 import debounce from "../../common/util/debounce";
 import createCardElement from "./common/create-card-element";
 import { showSaveDialog } from "./editor/hui-dialog-save-config";
-import { showEditViewDialog } from "./editor/hui-dialog-edit-view";
+import { showEditViewDialog } from "./editor/show-edit-view-dialog";
 import { confDeleteView } from "./editor/delete-view";
 
 // CSS and JS should only be imported once. Modules and HTML are safe.

src/panels/lovelace/hui-view.js

@@ -11,7 +11,7 @@ import EventsMixin from "../../mixins/events-mixin";
 import localizeMixin from "../../mixins/localize-mixin";
 import createCardElement from "./common/create-card-element";
 import { computeCardSize } from "./common/compute-card-size";
-import { showEditCardDialog } from "./editor/hui-dialog-edit-card";
+import { showEditCardDialog } from "./editor/show-edit-card-dialog";
 
 class HUIView extends localizeMixin(EventsMixin(PolymerElement)) {
   static get template() {