Add legend to method composition

src/app/development-processes/bm-process-diagram/bm-process-diagram.component.css

+.bpmn-legend-icon {
+  width: 1rem;
+  height: 1rem;
+}

src/app/development-processes/bm-process-diagram/bm-process-diagram.component.html

@@ -196,6 +196,45 @@
 
 <div #canvas class="border" style="height: 500px"></div>
 <div class="container">
+  <div class="p-3 bg-white rounded shadow-sm">
+    <div class="row">
+      <div class="col-4"><strong>Legend:</strong></div>
+    </div>
+    <div class="row">
+      <div class="col-4">
+        <i class="fas fa-list bpmn-legend-icon"></i> Show types
+      </div>
+      <div class="col-4">
+        <i class="fas fa-clipboard-check bpmn-legend-icon"></i> Show Method
+        Building Block summary
+      </div>
+      <div class="col-4">
+        <i class="fas fa-info-circle bpmn-legend-icon"></i> Show Method Pattern
+        details
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-4">
+        <i class="fas fa-database bpmn-legend-icon"></i> Select Method Building
+        Block
+      </div>
+      <div class="col-4">
+        <i class="fas fa-clipboard-list bpmn-legend-icon"></i> Edit Method
+        Building Block details
+      </div>
+      <div class="col-4">
+        <i class="far fa-trash-alt bpmn-legend-icon"></i> Remove Method Building
+        Block from task / Delete Method Pattern
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-4">
+        <i class="fas fa-sign-in-alt bpmn-legend-icon"></i> Insert Method
+        Pattern
+      </div>
+    </div>
+  </div>
+
   <div class="my-3 p-3 bg-white rounded shadow-sm">
     <h6 class="border-bottom border-gray pb-2">Controls</h6>
     <button class="btn btn-primary" (click)="saveDiagram()">

src/app/development-processes/bpmn-extensions/bm-process/BmProcessContextPadProvider.ts

@@ -28,7 +28,7 @@ export default class BmProcessContextPadProvider {
       controls['bmp.showPattern'] = {
         group: 'info',
         className: 'fas fa-info-circle font-bpmn-adaption',
-        title: 'Show pattern details',
+        title: 'Show Method Pattern details',
         action: {
           click: () => this.eventBus.fire('bmp.showPattern', element),
         },