From d8d7fd98ef50f4956fa577af7ebc75e6cbfdfb75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 27 Sep 2024 09:32:49 +0200
Subject: [PATCH] align expose style

---
 .../block-grid-block-inline.element.ts         | 18 +++++++++++++++++-
 .../block-grid-block.element.ts                | 13 ++++++++++++-
 .../ref-list-block/ref-list-block.element.ts   |  3 ++-
 .../ref-rte-block/ref-rte-block.element.ts     |  3 ++-
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
index 076752e03a..297fc38d3f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.ts
@@ -6,6 +6,7 @@ import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type'
 import '../block-grid-areas-container/index.js';
 import '../ref-grid-block/index.js';
 import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
+import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
 
 /**
  * @element umb-block-grid-block-inline
@@ -16,9 +17,18 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	@property({ attribute: false })
 	label?: string;
 
+	@property({ type: String, reflect: false })
+	icon?: string;
+
 	@property({ attribute: false })
 	config?: UmbBlockEditorCustomViewConfiguration;
 
+	@property({ type: Boolean, reflect: true })
+	unpublished?: boolean;
+
+	@property({ attribute: false })
+	content?: UmbBlockDataType;
+
 	@state()
 	_inlineProperty: UmbPropertyTypeModel | undefined;
 
@@ -39,7 +49,9 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 	}
 
 	override render() {
-		return html`<umb-ref-grid-block standalone .name=${this.label ?? ''} href=${this.config?.editContentPath ?? ''}>
+		return html`<umb-ref-grid-block standalone href=${this.config?.editContentPath ?? ''}>
+			<umb-icon slot="icon" .name=${this.icon}></umb-icon>
+			<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
 			<umb-property-type-based-property
 				.property=${this._inlineProperty}
 				slot="areas"></umb-property-type-based-property>
@@ -55,6 +67,10 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
 			umb-block-grid-areas-container::part(area) {
 				margin: var(--uui-size-2);
 			}
+			:host([unpublished]) umb-icon,
+			:host([unpublished]) umb-ufm-render {
+				opacity: 0.6;
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
index 74b10efeab..1cd6c17194 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block/block-grid-block.element.ts
@@ -16,15 +16,22 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 	@property({ attribute: false })
 	label?: string;
 
+	@property({ type: String, reflect: false })
+	icon?: string;
+
 	@property({ attribute: false })
 	config?: UmbBlockEditorCustomViewConfiguration;
 
+	@property({ type: Boolean, reflect: true })
+	unpublished?: boolean;
+
 	@property({ attribute: false })
 	content?: UmbBlockDataType;
 
 	override render() {
 		return html`<umb-ref-grid-block standalone href=${this.config?.editContentPath ?? ''}>
-			<umb-ufm-render inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
+			<umb-icon slot="icon" .name=${this.icon}></umb-icon>
+			<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
 			<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
 		</umb-ref-grid-block>`;
 	}
@@ -37,6 +44,10 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
 			umb-block-grid-areas-container::part(area) {
 				margin: var(--uui-size-2);
 			}
+			:host([unpublished]) umb-icon,
+			:host([unpublished]) umb-ufm-render {
+				opacity: 0.6;
+			}
 		`,
 	];
 }
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 98fc697709..556d67460f 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
@@ -55,7 +55,8 @@ export class UmbRefListBlockElement extends UmbLitElement {
 			uui-ref-node {
 				min-height: var(--uui-size-16);
 			}
-			:host([unpublished]) uui-ref-node {
+			:host([unpublished]) umb-icon,
+			:host([unpublished]) umb-ufm-render {
 				opacity: 0.6;
 			}
 		`,
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.ts
index 9213036fcd..9e32cdecb2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.ts
@@ -49,7 +49,8 @@ export class UmbRefRteBlockElement extends UmbLitElement {
 			uui-ref-node {
 				min-height: var(--uui-size-16);
 			}
-			:host([unpublished]) uui-ref-node {
+			:host([unpublished]) umb-icon,
+			:host([unpublished]) umb-ufm-render {
 				opacity: 0.6;
 			}
 		`,