diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
index 4d8764fec6..50ef8fd776 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
@@ -200,11 +200,11 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
};
#renderRefBlock() {
- return html``;
+ return html``;
}
#renderInlineBlock() {
- return html``;
+ return html``;
}
#renderBlock() {
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 23735f41ac..fc432e787d 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
@@ -17,9 +17,12 @@ export class UmbInlineListBlockElement extends UmbLitElement {
#workspaceContext?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
#contentUdi?: string;
- @property({ type: String })
+ @property({ type: String, reflect: false })
label?: string;
+ @property({ type: String, reflect: false })
+ icon?: string;
+
@state()
_isOpen = false;
@@ -60,27 +63,111 @@ export class UmbInlineListBlockElement extends UmbLitElement {
}
override render() {
- return html`
-
- ${this._isOpen === true
- ? html``
- : ''}
- `;
+ return html`
+
+
+ ${this._isOpen === true
+ ? html``
+ : ''}
+
+ `;
+ }
+
+ #renderContent() {
+ return html`
+
+
+
+
+
+
+ `;
}
static override styles = [
UmbTextStyles,
css`
- #accordion-button {
+ #host {
+ position: relative;
+ display: block;
+ width: 100%;
+
+ box-sizing: border-box;
+ border-radius: var(--uui-border-radius);
+ background-color: var(--uui-color-surface);
+
+ border: 1px solid var(--uui-color-border);
+ transition: border-color 80ms;
+
+ min-width: 250px;
+ }
+ #open-part + * {
+ border-top: 1px solid var(--uui-color-border);
+ }
+ :host([disabled]) #open-part {
+ cursor: default;
+ transition: border-color 80ms;
+ }
+ :host(:not([disabled])) #host:has(#open-part:hover) {
+ border-color: var(--uui-color-border-emphasis);
+ }
+ :host(:not([disabled])) #open-part:hover + * {
+ border-color: var(--uui-color-border-emphasis);
+ }
+ :host([disabled]) #host {
+ border-color: var(--uui-color-disabled-standalone);
+ }
+
+ slot[name='tag'] {
+ flex-grow: 1;
+
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ }
+
+ button {
+ font-size: inherit;
+ font-family: inherit;
+ border: 0;
+ padding: 0;
+ background-color: transparent;
+ text-align: left;
+ color: var(--uui-color-text);
+ }
+
+ #content {
+ align-self: stretch;
+ line-height: normal;
+ display: flex;
+ position: relative;
+ align-items: center;
+ }
+
+ #open-part {
+ color: inherit;
+ text-decoration: none;
+ cursor: pointer;
+
display: flex;
text-align: left;
align-items: center;
@@ -88,7 +175,29 @@ export class UmbInlineListBlockElement extends UmbLitElement {
width: 100%;
border: none;
background: none;
- padding: 0;
+
+ min-height: var(--uui-size-16);
+ padding: calc(var(--uui-size-2) + 1px);
+ }
+
+ #icon {
+ font-size: 1.2em;
+ margin-left: var(--uui-size-2);
+ margin-right: var(--uui-size-1);
+ }
+
+ :host(:not([disabled])) #open-part:hover #icon {
+ color: var(--uui-color-interactive-emphasis);
+ }
+ :host(:not([disabled])) #open-part:hover #name {
+ color: var(--uui-color-interactive-emphasis);
+ }
+
+ :host([disabled]) #icon {
+ color: var(--uui-color-disabled-contrast);
+ }
+ :host([disabled]) #name {
+ color: var(--uui-color-disabled-contrast);
}
`,
];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
index 2c167d839a..828caa1ac6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
@@ -11,9 +11,12 @@ import '@umbraco-cms/backoffice/ufm';
@customElement('umb-ref-list-block')
export class UmbRefListBlockElement extends UmbLitElement {
//
- @property({ type: String })
+ @property({ type: String, reflect: false })
label?: string;
+ @property({ type: String, reflect: false })
+ icon?: string;
+
@state()
_content?: UmbBlockDataType;
@@ -46,6 +49,7 @@ export class UmbRefListBlockElement extends UmbLitElement {
override render() {
return html`
+
`;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts
index abc74ff912..62a9961c71 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts
@@ -47,6 +47,8 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
this.#blockWorkspace = workspaceContext;
this.#tabsStructureHelper.setStructureManager(workspaceContext.content.structure);
+
+ // TODO: Switch to use .setup when Validation is merged. [NL]
workspaceContext.content.createPropertyDatasetContext(this);
this._observeRootGroups();
});
@@ -118,11 +120,7 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
? html`
+ .containerId=${this._activeTabId}>
`
: ''}
`;
@@ -135,6 +133,8 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
display: block;
height: 100%;
--uui-tab-background: var(--uui-color-surface);
+
+ padding: calc(var(--uui-size-layout-1));
}
`,
];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts
index 5bc56080a5..34e88a91a2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts
@@ -83,17 +83,22 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
class="properties"
.containerId=${this._containerId}>`
: ''}
- ${repeat(
- this._groups,
- (group) => group.id,
- (group) =>
- html` `,
- )}
+ ${this.hideSingleGroup && this._groups.length === 1
+ ? this.renderGroup(this._groups[0])
+ : repeat(
+ this._groups,
+ (group) => group.id,
+ (group) => html` ${this.renderGroup(group)}`,
+ )}
+ `;
+ }
+
+ renderGroup(group: UmbPropertyTypeContainerModel) {
+ return html`
+
`;
}