diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts index c829c227214a..98799e291fdd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-area-type-permission/block-grid-area-type-permission.element.ts @@ -33,7 +33,7 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement private _blockTypes?: Array; @state() - private _blockTypesWithElementName: Array<{ type: UmbBlockTypeWithGroupKey; name: string }> = []; + private _blockTypesWithElementName: Array<{ type: UmbBlockTypeWithGroupKey; name: string; icon: string | null | undefined }> = []; @state() private _blockGroups: Array = []; @@ -51,11 +51,11 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement .map((item) => { const blockType = this._blockTypes?.find((block) => block.contentElementTypeKey === item.unique); if (blockType) { - return { type: blockType, name: item.name }; + return { type: blockType, name: item.name, icon: item.icon }; } return undefined; }) - .filter((x) => x !== undefined) as Array<{ type: UmbBlockTypeWithGroupKey; name: string }>; + .filter((x) => x !== undefined) as Array<{ type: UmbBlockTypeWithGroupKey; name: string; icon: string | null | undefined }>; }); this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (context) => { @@ -193,7 +193,10 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement this._blockGroups, (group) => group.key, (group) => - html` + html` + ${group.name} `, ); @@ -207,6 +210,7 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement html` + ${block.name} `, ); @@ -245,6 +249,13 @@ export class UmbPropertyEditorUIBlockGridAreaTypePermissionElement uui-combobox strong { padding: 0 var(--uui-size-space-1); } + + uui-combobox-list-option { + display: flex; + align-items: center; + gap: var(--uui-size-space-2); + padding: var(--uui-size-2); + } `, ]; }