refactor: scope editor-container and zweroline-pane

src/editor-container.ts

@@ -29,7 +29,6 @@ function childTags(element: Element | null | undefined): SCLTag[] {
  * A responsive container for nested elements with header and
  * create new child functionality.
  */
-@customElement('editor-container')
 export class EditorContainer extends LitElement {
   /** The visualized `Element`. */
   @property()

src/editors/Substation.ts

@@ -3,8 +3,7 @@ import { get } from 'lit-translate';
 
 import { html, newWizardEvent } from '../foundation.js';
 import { wizards } from '../wizards/wizard-library.js';
-
-import '../zeroline-pane.js';
+import { ZerolinePane } from '../zeroline-pane.js';
 
 /** An editor [[`plugin`]] for editing the `Substation` section. */
 export default class SubstationPlugin extends LitElement {
@@ -19,17 +18,19 @@ export default class SubstationPlugin extends LitElement {
   }
 
   render(): TemplateResult {
-    return html` <zeroline-pane .doc=${this.doc}></zeroline-pane>
-      ${!this.doc?.querySelector(':root > Substation')
-        ? html`<h1>
-            <mwc-fab
-              extended
-              icon="add"
-              label="${get('substation.wizard.title.add')}"
-              @click=${() => this.openCreateSubstationWizard()}
-            ></mwc-fab>
-          </h1>`
-        : html``}`;
+    return html` <${ZerolinePane} .doc=${this.doc}></${ZerolinePane}>
+      ${
+        !this.doc?.querySelector(':root > Substation')
+          ? html`<h1>
+              <mwc-fab
+                extended
+                icon="add"
+                label="${get('substation.wizard.title.add')}"
+                @click=${() => this.openCreateSubstationWizard()}
+              ></mwc-fab>
+            </h1>`
+          : html``
+      }`;
   }
 
   static styles = css`

src/zeroline-pane.ts

@@ -30,7 +30,6 @@ function setShowIEDs(value: Settings['showieds']) {
 }
 
 /** [[`Zeroline`]] pane for displaying `Substation` and/or `IED` sections. */
-@customElement('zeroline-pane')
 export class ZerolinePane extends LitElement {
   /** The document being edited as provided to editor by [[`Zeroline`]]. */
   @property({ attribute: false })

src/zeroline/bay-editor.ts

@@ -19,6 +19,8 @@ import { wizards } from '../wizards/wizard-library.js';
 
 import { VoltageLevelEditor } from './voltage-level-editor.js';
 import './conducting-equipment-editor.js';
+import { EditorContainer } from '../editor-container.js';
+import { IedEditor } from './ied-editor.js';
 
 /** [[`SubstationEditor`]] subeditor for a `Bay` element. */
 @customElement('bay-editor')
@@ -61,13 +63,15 @@ export class BayEditor extends LitElement {
     const ieds = this.getAttachedIeds?.(this.element) ?? [];
     return ieds?.length
       ? html`<div id="iedcontainer">
-          ${ieds.map(ied => html`<ied-editor .element=${ied}></ied-editor>`)}
+          ${ieds.map(
+            ied => html`<${IedEditor} .element=${ied}></${IedEditor}>`
+          )}
         </div>`
       : html``;
   }
 
   render(): TemplateResult {
-    return html`<editor-container .element=${this.element} nomargin>
+    return html`<${EditorContainer} .element=${this.element} nomargin>
       <abbr slot="header" title="${translate('lnode.tooltip')}">
         <mwc-icon-button
           icon="account_tree"
@@ -110,7 +114,7 @@ export class BayEditor extends LitElement {
             ></conducting-equipment-editor>`
         )}
       </div>
-    </editor-container> `;
+    </${EditorContainer}> `;
   }
 
   static styles = css`

src/zeroline/ied-editor.ts

@@ -14,7 +14,6 @@ import { selectGseControlWizard } from '../wizards/gsecontrol.js';
 import { gooseIcon } from '../icons.js';
 
 /** [[`SubstationEditor`]] subeditor for a `ConductingEquipment` element. */
-@customElement('ied-editor')
 export class IedEditor extends LitElement {
   @property({ type: Element })
   element!: Element;

src/zeroline/substation-editor.ts

@@ -18,7 +18,8 @@ import {
 import { wizards } from '../wizards/wizard-library.js';
 
 import './voltage-level-editor.js';
-import '../editor-container.js';
+import { EditorContainer } from '../editor-container.js';
+import { IedEditor } from './ied-editor.js';
 
 /** [[`Substation`]] plugin subeditor for editing `Substation` sections. */
 @customElement('substation-editor')
@@ -63,13 +64,15 @@ export class SubstationEditor extends LitElement {
     const ieds = this.getAttachedIeds?.(this.element) ?? [];
     return ieds?.length
       ? html`<div id="iedcontainer">
-          ${ieds.map(ied => html`<ied-editor .element=${ied}></ied-editor>`)}
+          ${ieds.map(
+            ied => html`<${IedEditor} .element=${ied}></${IedEditor}>`
+          )}
         </div>`
       : html``;
   }
 
   render(): TemplateResult {
-    return html`<editor-container .element=${this.element}>
+    return html`<${EditorContainer} .element=${this.element}>
       <abbr slot="header" title="${translate('lnode.tooltip')}">
         <mwc-icon-button
           icon="account_tree"
@@ -108,7 +111,7 @@ export class SubstationEditor extends LitElement {
             .getAttachedIeds=${this.getAttachedIeds}
             ?readonly=${this.readonly}
           ></voltage-level-editor>`
-      )}</editor-container
+      )}</${EditorContainer}
     >`;
   }
 

src/zeroline/voltage-level-editor.ts

@@ -19,6 +19,8 @@ import { SubstationEditor } from './substation-editor.js';
 import { wizards } from '../wizards/wizard-library.js';
 
 import './bay-editor.js';
+import { EditorContainer } from '../editor-container.js';
+import { IedEditor } from './ied-editor.js';
 
 /** [[`Substation`]] subeditor for a `VoltageLevel` element. */
 @customElement('voltage-level-editor')
@@ -79,13 +81,15 @@ export class VoltageLevelEditor extends LitElement {
     const ieds = this.getAttachedIeds?.(this.element) ?? [];
     return ieds?.length
       ? html`<div id="iedcontainer">
-          ${ieds.map(ied => html`<ied-editor .element=${ied}></ied-editor>`)}
+          ${ieds.map(
+            ied => html`<${IedEditor} .element=${ied}></${IedEditor}>`
+          )}
         </div>`
       : html``;
   }
 
   render(): TemplateResult {
-    return html`<editor-container
+    return html`<${EditorContainer}
       .element=${this.element}
       header="${this.header}"
     >
@@ -129,7 +133,7 @@ export class VoltageLevelEditor extends LitElement {
           ></bay-editor>`
         )}
       </div>
-    </editor-container>`;
+    </${EditorContainer}>`;
   }
 
   static styles = css`

test/integration/zeroline-pane.test.ts

@@ -20,12 +20,10 @@ describe('zeroline-pane wizarding editing integration', () => {
       .then(response => response.text())
       .then(str => new DOMParser().parseFromString(str, 'application/xml'));
 
-    parent = <MockWizardEditor>(
-      await fixture(
-        html`<mock-wizard-editor
-          ><zeroline-pane .doc=${doc}></zeroline-pane
+    parent = <MockWizardEditor>await fixture(
+      html`<mock-wizard-editor
+          ><${ZerolinePane} .doc=${doc}></${ZerolinePane}
         ></mock-wizard-editor>`
-      )
     );
     zeroline = <ZerolinePane>parent.querySelector('zeroline-pane');
     await parent.updateComplete;

test/unit/editor-container.test.ts

@@ -1,10 +1,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import sinon, { SinonSpy } from 'sinon';
 
-import '../../src/editor-container.js';
 import { EditorContainer } from '../../src/editor-container.js';
 import { html } from '../../src/foundation.js';
-import { BayEditor } from '../../src/zeroline/bay-editor.js';
 
 describe('editor-container', () => {
   let element: EditorContainer;
@@ -16,7 +14,7 @@ describe('editor-container', () => {
   );
   beforeEach(async () => {
     element = await fixture(
-      html`<editor-container header="test header"></editor-container>`
+      html`<${EditorContainer} header="test header"></${EditorContainer}>`
     );
     await element.updateComplete;
   });
@@ -185,7 +183,7 @@ describe('editor-container', () => {
     );
     beforeEach(async () => {
       parent = await fixture(
-        `<editor-container header="parent header"><bay-editor .element=${bay}></bay-editor></editor-container>`
+        html`<${EditorContainer} header="parent header"><bay-editor .element=${bay}></bay-editor></${EditorContainer}>`
       );
 
       element = parent
@@ -218,7 +216,7 @@ describe('editor-container', () => {
 
     it('negated the set contrasted property of the parent', async () => {
       parent = await fixture(
-        `<editor-container contrasted header="parent header"><bay-editor .element=${bay}></bay-editor></editor-container>`
+        html`<${EditorContainer} contrasted header="parent header"><bay-editor .element=${bay}></bay-editor></${EditorContainer}>`
       );
 
       element = parent
@@ -231,7 +229,7 @@ describe('editor-container', () => {
 
     it('makes sure maximum level is 6', async () => {
       parent = await fixture(
-        `<editor-container level="6" header="parent header"><bay-editor .element=${bay}></bay-editor></editor-container>`
+        html`<${EditorContainer} level="6" header="parent header"><bay-editor .element=${bay}></bay-editor></${EditorContainer}>`
       );
 
       element = parent

test/unit/wizards/clientln.test.ts

@@ -19,7 +19,7 @@ describe('clientln wizards', () => {
 
     parent = await fixture(
       html`<mock-wizard-editor
-        ><zeroline-pane .doc=${doc}></zeroline-pane
+        ><${ZerolinePane} .doc=${doc}></${ZerolinePane}
       ></mock-wizard-editor>`
     );
 

test/unit/wizards/commmap.test.ts

@@ -20,7 +20,7 @@ describe('communication mapping wizard', () => {
 
     parent = await fixture(
       html`<mock-wizard
-        ><zeroline-pane .doc=${doc}></zeroline-pane
+        ><${ZerolinePane} .doc=${doc}></${ZerolinePane}
       ></mock-wizard>`
     );
 

test/unit/wizards/controlwithiedname.test.ts

@@ -18,7 +18,7 @@ describe('selectExtRefWizard', () => {
 
     parent = await fixture(
       html`<mock-wizard-editor
-        ><zeroline-pane .doc=${doc}></zeroline-pane
+        ><${ZerolinePane} .doc=${doc}></${ZerolinePane}
       ></mock-wizard-editor>`
     );
 

test/unit/zeroline-pane.test.ts

@@ -1,5 +1,6 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from '../../src/foundation.js';
+import { ZerolinePane } from '../../src/zeroline-pane.js';
 import {
   attachedIeds,
   getAttachedIeds,
@@ -38,10 +39,10 @@ describe('zeroline-pane', () => {
 
   it('per default looks like the latest snapshot', async () => {
     const element = await fixture(
-      html`<zeroline-pane
+      html`<${ZerolinePane}
         .doc=${doc}
         .getAttachedIeds="${undefined}"
-      ></zeroline-pane>`
+      ></${ZerolinePane}>`
     );
 
     await new Promise(resolve => setTimeout(resolve, 2000)); // await animation
@@ -51,11 +52,11 @@ describe('zeroline-pane', () => {
 
   it('readonly looks like the latest snapshot', async () => {
     const element = await fixture(
-      html`<zeroline-pane
+      html`<${ZerolinePane}
         .doc=${doc}
         .readonly=${true}
         .getAttachedIeds="${undefined}"
-      ></zeroline-pane>`
+      ></${ZerolinePane}>`
     );
 
     await new Promise(resolve => setTimeout(resolve, 2000)); // await animation
@@ -65,10 +66,10 @@ describe('zeroline-pane', () => {
 
   it('showieds looks like the latest snapshot', async () => {
     const element = await fixture(
-      html`<zeroline-pane
+      html`<${ZerolinePane}
         .doc=${doc}
         .getAttachedIeds=${getAttachedIeds(doc)}
-      ></zeroline-pane>`
+      ></${ZerolinePane}>`
     );
 
     await new Promise(resolve => setTimeout(resolve, 2000)); // await animation