diff --git a/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts b/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
index bb3d9dbf68..a898f756b9 100644
--- a/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
+++ b/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
@@ -268,14 +268,18 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
${when(
dataTypesEntries.length > 0,
() =>
- html`
Available configurations
+ html`
+ Available configurations
+
${this._renderDataTypes()}${this.#renderLoadMore()}`,
)}
${when(
editorUIEntries.length > 0,
() =>
- html` Create a new configuration
- ${this._renderUIs()}`,
+ html`
+ Create a new configuration
+
+ ${this._renderUIs(true)}`,
)}
`;
}
@@ -298,7 +302,7 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
);
}
- private _renderUIs() {
+ private _renderUIs(createAsNewOnPick?: boolean) {
if (!this._groupedPropertyEditorUIs) return nothing;
const entries = Object.entries(this._groupedPropertyEditorUIs);
@@ -306,33 +310,46 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
return entries.map(
([key, value]) =>
html` ${key === 'undefined' ? 'Uncategorized' : key}
- ${this._renderGroupUIs(value)}`,
+ ${this._renderGroupUIs(value, createAsNewOnPick)}`,
);
}
- private _renderGroupUIs(uis: Array) {
+ private _renderGroupUIs(uis: Array, createAsNewOnPick?: boolean) {
return html`
${this._dataTypePickerModalRouteBuilder
? repeat(
uis,
(propertyEditorUI) => propertyEditorUI.alias,
- (propertyEditorUI) =>
- html` -
-
-
-
- ${propertyEditorUI.meta.label || propertyEditorUI.name}
-
-
- `,
+ (propertyEditorUI) => {
+ return html` - ${this._renderDataTypeButton(propertyEditorUI, createAsNewOnPick)}
`;
+ },
)
: ''}
`;
}
+ private _renderDataTypeButton(propertyEditorUI: ManifestPropertyEditorUi, createAsNewOnPick?: boolean) {
+ if (createAsNewOnPick) {
+ return html` this._createDataType(propertyEditorUI.alias)}>
+ ${this._renderItemContent(propertyEditorUI)}
+ `;
+ } else {
+ return html`
+ ${this._renderItemContent(propertyEditorUI)}
+ `;
+ }
+ }
+ private _renderItemContent(propertyEditorUI: ManifestPropertyEditorUi) {
+ return html`
+
+ ${propertyEditorUI.meta.label || propertyEditorUI.name}
+
`;
+ }
+
private _renderGroupDataTypes(dataTypes: Array) {
return html`