refactor(editor-container): replace with more generic action-pane (#400)

* feat: add action-pane component

The new action-pane component is the extraction of the pure user interface part of the old editor-container component, meant to replace the latter while being usable in a more generic way.

* refactor: use action-pane in place of editor-container

* refactor(zeroline): use action pane (#399)

* refactor(zeroline): allow adding child elements to action-pane

* style(action-pane): adapt styling

* test(action-pane): add unit tests

Co-authored-by: Jakob Vogelsang <[email protected]>

Author: ca-d

__snapshots__/action-pane.md

@@ -0,0 +1,51 @@
+# `action-pane`
+
+#### `looks like the latest snapshot`
+
+```html
+<section>
+  <h1>
+    <span>
+      <slot name="icon">
+      </slot>
+    </span>
+    <nav>
+      <slot name="action">
+      </slot>
+    </nav>
+  </h1>
+  <div>
+    <slot>
+    </slot>
+  </div>
+</section>
+
+```
+
+## `with icon property set`
+
+####   `looks like the latest snapshot`
+
+```html
+<section>
+  <h1>
+    <span>
+      <slot name="icon">
+        <mwc-icon>
+          edit
+        </mwc-icon>
+      </slot>
+    </span>
+    <nav>
+      <slot name="action">
+      </slot>
+    </nav>
+  </h1>
+  <div>
+    <slot>
+    </slot>
+  </div>
+</section>
+
+```
+

__snapshots__/bay-editor.md

@@ -3,45 +3,80 @@
 #### `looks like the latest snapshot`
 
 ```html
-<editor-container
-  nomargin=""
+<action-pane
+  label="COUPLING_BAY - Bay"
   tabindex="0"
 >
   <abbr
-    slot="header"
+    slot="action"
     title="[lnode.tooltip]"
   >
     <mwc-icon-button icon="account_tree">
     </mwc-icon-button>
   </abbr>
   <abbr
-    slot="header"
+    slot="action"
     title="[duplicate]"
   >
     <mwc-icon-button icon="content_copy">
     </mwc-icon-button>
   </abbr>
   <abbr
-    slot="header"
+    slot="action"
     title="[edit]"
   >
     <mwc-icon-button icon="edit">
     </mwc-icon-button>
   </abbr>
   <abbr
-    slot="header"
+    slot="action"
     title="[move]"
   >
     <mwc-icon-button icon="forward">
     </mwc-icon-button>
   </abbr>
   <abbr
-    slot="header"
+    slot="action"
     title="[remove]"
   >
     <mwc-icon-button icon="delete">
     </mwc-icon-button>
   </abbr>
+  <abbr
+    slot="action"
+    style="position:relative;"
+    title="[add]"
+  >
+    <mwc-icon-button icon="playlist_add">
+    </mwc-icon-button>
+    <mwc-menu
+      corner="BOTTOM_RIGHT"
+      menucorner="END"
+    >
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="0"
+        value="LNode"
+      >
+        <span>
+          LNode
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="ConductingEquipment"
+      >
+        <span>
+          ConductingEquipment
+        </span>
+      </mwc-list-item>
+    </mwc-menu>
+  </abbr>
   <div id="ceContainer">
     <conducting-equipment-editor>
     </conducting-equipment-editor>
@@ -54,7 +89,7 @@
     <conducting-equipment-editor>
     </conducting-equipment-editor>
   </div>
-</editor-container>
+</action-pane>
 
 ```
 
@@ -63,45 +98,80 @@
 ####   `looks like the latest snapshot`
 
 ```html
-<editor-container
-  nomargin=""
+<action-pane
+  label="COUPLING_BAY - Bay"
   tabindex="0"
 >
   <abbr
-    slot="header"
+    slot="action"
     title="[lnode.tooltip]"
   >
     <mwc-icon-button icon="account_tree">
     </mwc-icon-button>
   </abbr>
   <abbr
-    slot="header"
+    slot="action"
     title="[duplicate]"
   >
     <mwc-icon-button icon="content_copy">
     </mwc-icon-button>
   </abbr>
   <abbr
-    slot="header"
+    slot="action"
     title="[edit]"
   >
     <mwc-icon-button icon="edit">
     </mwc-icon-button>
   </abbr>
   <abbr
-    slot="header"
+    slot="action"
     title="[move]"
   >
     <mwc-icon-button icon="forward">
     </mwc-icon-button>
   </abbr>
   <abbr
-    slot="header"
+    slot="action"
     title="[remove]"
   >
     <mwc-icon-button icon="delete">
     </mwc-icon-button>
   </abbr>
+  <abbr
+    slot="action"
+    style="position:relative;"
+    title="[add]"
+  >
+    <mwc-icon-button icon="playlist_add">
+    </mwc-icon-button>
+    <mwc-menu
+      corner="BOTTOM_RIGHT"
+      menucorner="END"
+    >
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="0"
+        value="LNode"
+      >
+        <span>
+          LNode
+        </span>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+        value="ConductingEquipment"
+      >
+        <span>
+          ConductingEquipment
+        </span>
+      </mwc-list-item>
+    </mwc-menu>
+  </abbr>
   <div id="ceContainer">
     <conducting-equipment-editor readonly="">
     </conducting-equipment-editor>
@@ -114,7 +184,7 @@
     <conducting-equipment-editor readonly="">
     </conducting-equipment-editor>
   </div>
-</editor-container>
+</action-pane>
 
 ```