diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts index 154673d767..83b3ab6ce3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/inline-list-block/inline-list-block.element.ts @@ -2,9 +2,10 @@ import { UMB_BLOCK_LIST_CONTEXT } from '../../index.js'; import { UMB_BLOCK_WORKSPACE_ALIAS, UMB_BLOCK_WORKSPACE_CONTEXT } from '../../../block/index.js'; import { UmbExtensionsApiInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import { customElement, html } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import '../../../block/workspace/views/edit/block-workspace-view-edit-no-router.element.js'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; /** * @element umb-inline-list-block @@ -15,6 +16,12 @@ export class UmbInlineListBlockElement extends UmbLitElement { #workspaceContext?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE; #contentUdi?: string; + @state() + _label = ''; + + @state() + _isOpen = false; + constructor() { super(); @@ -28,6 +35,9 @@ export class UmbInlineListBlockElement extends UmbLitElement { }, 'observeContentUdi', ); + this.observe(blockContext.label, (label) => { + this._label = label; + }); }); this.observe(umbExtensionsRegistry.getByTypeAndAlias('workspace', UMB_BLOCK_WORKSPACE_ALIAS), (manifest) => { if (manifest) { @@ -53,8 +63,37 @@ export class UmbInlineListBlockElement extends UmbLitElement { } render() { - return html``; + return html` + + ${this._isOpen === true + ? html`` + : ''} + `; } + + static styles = [ + css` + #accordion-button { + display: flex; + text-align: left; + align-items: center; + justify-content: flex-start; + width: 100%; + border: none; + background: none; + padding: 0; + } + `, + ]; } export default UmbInlineListBlockElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-no-router.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-no-router.element.ts index 59346e2b4e..ae8f92868f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-no-router.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-no-router.element.ts @@ -110,6 +110,7 @@ export class UmbBlockWorkspaceViewEditNoRouterElement extends UmbLitElement impl : ''} ${this._activeTabId !== undefined ? html`(this); @state() @@ -66,30 +73,29 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement { render() { return html` - ${this._hasProperties - ? html` - - - - ` - : ''} + ${this._hasProperties ? this.#renderPart(this._tabName) : ''} ${repeat( this._groups, (group) => group.name, - (group) => - html` - - `, + (group) => this.#renderPart(group.name, group.name), )} `; } + #renderPart(groupName: string | null | undefined, boxName?: string | null | undefined) { + return this.hideSingleGroup && this._groups.length === 1 + ? html` ` + : html` `; + } + static styles = [ UmbTextStyles, css`