umb-ref-manifest + icons

Author: nielslyngsoe

package-lock.json

@@ -252,7 +252,7 @@
 		"eslint-plugin-wc": "^2.1.0",
 		"glob": "^11.0.0",
 		"globals": "^15.8.0",
-		"lucide-static": "^0.408.0",
+		"lucide-static": "^0.424.0",
 		"msw": "^1.3.2",
 		"playwright-msw": "^3.0.1",
 		"prettier": "3.3.3",

package.json

@@ -83,11 +83,7 @@ export class UmbBlockTypeCustomViewGuideElement extends UmbLitElement {
 					${repeat(
 						this._manifests,
 						(x) => x.alias,
-						(x) => html`
-							<uui-ref-node standalone name=${x.name} detail=${x.alias}>
-								<umb-icon slot="icon" name=${'icon-flowerpot'}></umb-icon
-							></uui-ref-node>
-						`,
+						(x) => html` <umb-ref-manifest standalone .manifest=${x}></umb-ref-manifest> `,
 					)}
 				</div>`
 			: html`No custom view matches the current block editor type and content type.`;

src/packages/block/block-type/components/block-type-custom-view-guide/block-type-custom-view-guide.element.ts

@@ -1,2 +1,3 @@
 export * from './extension-slot/index.js';
 export * from './extension-with-api-slot/index.js';
+export * from './ref-manifest/ref-manifest.element.js';

src/packages/core/extension-registry/components/index.ts

@@ -0,0 +1,52 @@
+import { UUIIconRequestEvent, UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui';
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+import type { ManifestBase } from '@umbraco-cms/backoffice/extension-api';
+
+@customElement('umb-ref-manifest')
+export class UmbRefManifestElement extends UmbElementMixin(UUIRefNodeElement) {
+	@property({ type: Object, attribute: false })
+	public get manifest(): ManifestBase | undefined {
+		return undefined;
+	}
+	public set manifest(value: ManifestBase | undefined) {
+		this._alias = value?.alias;
+		this.name = value?.name ?? '';
+	}
+
+	@state()
+	private _alias?: string;
+
+	override connectedCallback() {
+		super.connectedCallback();
+
+		this.#requestIconSVG('icon-umb-manifest');
+	}
+
+	/* This is a bit stupid, but because this element extends from uui-ref-node, it only accepts the icon via the icon slot.
+	 ** Instead we overwrite the fallbackIcon property which requires a SVG... */
+	#requestIconSVG(iconName: string) {
+		if (iconName !== '' && iconName !== null) {
+			const event = new UUIIconRequestEvent(UUIIconRequestEvent.ICON_REQUEST, {
+				detail: { iconName: iconName },
+			});
+			this.dispatchEvent(event);
+			if (event.icon !== null) {
+				event.icon.then((iconSvg: string) => {
+					this.fallbackIcon = iconSvg;
+					this.requestUpdate('fallbackIcon');
+				});
+			}
+		}
+	}
+
+	protected override renderDetail() {
+		return html`<small id="detail">${this._alias}<slot name="detail"></slot></small>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-ref-manifest': UmbRefManifestElement;
+	}
+}

src/packages/core/extension-registry/components/ref-manifest/ref-manifest.element.ts

@@ -139,15 +139,15 @@
 		},
 		{
 			"name": "icon-bar-chart",
-			"file": "bar-chart-2.svg"
+			"file": "chart-no-axes-column.svg"
 		},
 		{
 			"name": "icon-barcode",
 			"file": "scan-barcode.svg"
 		},
 		{
 			"name": "icon-bars",
-			"file": "bar-chart.svg"
+			"file": "chart-no-axes-column-increasing.svg"
 		},
 		{
 			"name": "icon-battery-full",
@@ -376,11 +376,11 @@
 		},
 		{
 			"name": "icon-chart-curve",
-			"file": "area-chart.svg"
+			"file": "chart-no-axes-combined.svg"
 		},
 		{
 			"name": "icon-chart",
-			"file": "line-chart.svg"
+			"file": "chart-line.svg"
 		},
 		{
 			"name": "icon-chat-active",
@@ -653,7 +653,7 @@
 		},
 		{
 			"name": "icon-defrag",
-			"file": "scatter-chart.svg"
+			"file": "chart-scatter.svg"
 		},
 		{
 			"name": "icon-delete-key",
@@ -1664,7 +1664,7 @@
 		},
 		{
 			"name": "icon-pie-chart",
-			"file": "pie-chart.svg"
+			"file": "chart-pie.svg"
 		},
 		{
 			"name": "icon-piggy-bank",
@@ -2447,6 +2447,10 @@
 		{
 			"name": "icon-database",
 			"file": "database.svg"
+		},
+		{
+			"name": "icon-umb-manifest",
+			"file": "puzzle.svg"
 		}
 	],
 	"simpleIcons": [

src/packages/core/icon-registry/icon-dictionary.json

@@ -2099,6 +2099,10 @@ name: "icon-database",
 
 path: () => import("./icons/icon-database.js"),
 },{
+name: "icon-umb-manifest",
+
+path: () => import("./icons/icon-umb-manifest.js"),
+},{
 name: "icon-facebook",
 
 path: () => import("./icons/icon-facebook.js"),

src/packages/core/icon-registry/icons.ts

@@ -1,4 +1,4 @@
-export default `<!-- @license lucide-static v0.408.0 - ISC -->
+export default `<!-- @license lucide-static v0.424.0 - ISC -->
 <svg
   class="lucide lucide-activity"
   xmlns="http://www.w3.org/2000/svg"

src/packages/core/icon-registry/icons/icon-activity.ts

@@ -1,4 +1,4 @@
-export default `<!-- @license lucide-static v0.408.0 - ISC -->
+export default `<!-- @license lucide-static v0.424.0 - ISC -->
 <svg
   class="lucide lucide-plus"
   xmlns="http://www.w3.org/2000/svg"

src/packages/core/icon-registry/icons/icon-add.ts

@@ -1,4 +1,4 @@
-export default `<!-- @license lucide-static v0.408.0 - ISC -->
+export default `<!-- @license lucide-static v0.424.0 - ISC -->
 <svg
   class="lucide lucide-book-user"
   xmlns="http://www.w3.org/2000/svg"