diff --git a/properties-panel-list-extension/app/provider/magic/parts/ExtensionList.js b/properties-panel-list-extension/app/provider/magic/parts/ExtensionList.js
index 95da40ba..dde8c037 100644
--- a/properties-panel-list-extension/app/provider/magic/parts/ExtensionList.js
+++ b/properties-panel-list-extension/app/provider/magic/parts/ExtensionList.js
@@ -1,3 +1,5 @@
+import { html } from 'htm/preact';
+
import { without } from 'min-dash';
import { getBusinessObject } from 'bpmn-js/lib/util/ModelUtil';
@@ -90,15 +92,15 @@ export default function ExtensionList(props) {
});
}
- return ;
+ return html`<${ListEntry}
+ element=${ element }
+ autoFocusEntry=${ `[data-entry-id="${id}-extension-${extensionsList.length - 1}"] input` }
+ id=${ id }
+ label=${ translate('Extensions') }
+ items=${ extensionsList }
+ component=${ Extension }
+ onAdd=${ addExtension }
+ onRemove=${ removeExtension } />`;
}
function Extension(props) {
@@ -114,17 +116,16 @@ function Extension(props) {
const id = `${ idPrefix }-extension-${ index }`;
- return (
- ') }
- open={ open }
- />
- );
+ label=${ extension.get('key') || translate('') }
+ open=${ open }
+ />`;
}
\ No newline at end of file
diff --git a/properties-panel-list-extension/package.json b/properties-panel-list-extension/package.json
index 2f83e4ac..c16f9fc6 100644
--- a/properties-panel-list-extension/package.json
+++ b/properties-panel-list-extension/package.json
@@ -50,6 +50,7 @@
"bpmn-js": "^14.2.0",
"bpmn-js-properties-panel": "^5.0.0",
"camunda-bpmn-js-behaviors": "^1.0.0",
+ "htm": "^3.1.1",
"ids": "^1.0.0",
"jquery": "^3.5.1",
"min-dash": "^4.0.0",