search result

src/Umbraco.Web.UI.Client/package.json

@@ -68,6 +68,7 @@
 		"./repository": "./dist-cms/packages/core/repository/index.js",
 		"./resources": "./dist-cms/packages/core/resources/index.js",
 		"./router": "./dist-cms/packages/core/router/index.js",
+		"./search": "./dist-cms/packages/search/index.js",
 		"./section": "./dist-cms/packages/core/section/index.js",
 		"./server-file-system": "./dist-cms/packages/core/server-file-system/index.js",
 		"./sorter": "./dist-cms/packages/core/sorter/index.js",

src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/document-search-result-item.element.ts

@@ -1,16 +1,30 @@
-import type { UmbDocumentItemModel } from '../repository/index.js';
+import type { UmbSearchResultItemModel } from '@umbraco-cms/backoffice/search';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
 const elementName = 'umb-document-search-result-item';
 @customElement(elementName)
 export class UmbDocumentSearchResultItemElement extends UmbLitElement {
-	@property({ attribute: false })
-	item?: UmbDocumentItemModel;
+	@property({ type: Object })
+	item?: UmbSearchResultItemModel;
 
 	render() {
-		return html`HELLO WORLD ${this.item?.unique}`;
+		return html`
+			<div>ICON</div>
+			<div>${this.item?.name}</div>
+		`;
 	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: flex;
+				gap: 12px;
+			}
+		`,
+	];
 }
 
 export { UmbDocumentSearchResultItemElement as element };

src/Umbraco.Web.UI.Client/src/packages/search/index.ts

@@ -0,0 +1 @@
+export { type UmbSearchResultItemModel } from './types.js';

src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts

@@ -5,7 +5,7 @@ import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registr
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbExtensionsManifestInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
 
-import './search-result-item.element.js';
+import '../search-result/search-result-item.element.js';
 
 export type SearchItem = {
 	entityType: string;

src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-result-item.element.ts

@@ -1,21 +0,0 @@
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
-
-const elementName = 'umb-search-result-item';
-@customElement(elementName)
-export class UmbSearchResultItemElement extends UmbLitElement {
-	@property({ type: Object })
-	item: any;
-
-	render() {
-		return html`Helloasasdas`;
-	}
-}
-
-export { UmbSearchResultItemElement as element };
-
-declare global {
-	interface HTMLElementTagNameMap {
-		[elementName]: UmbSearchResultItemElement;
-	}
-}

src/Umbraco.Web.UI.Client/src/packages/search/search-result/search-result-item.element.ts

@@ -0,0 +1,36 @@
+import type { UmbSearchResultItemModel } from '../types.js';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
+const elementName = 'umb-search-result-item';
+@customElement(elementName)
+export class UmbSearchResultItemElement extends UmbLitElement {
+	@property({ type: Object })
+	item?: UmbSearchResultItemModel;
+
+	render() {
+		return html`
+			<div>ICON</div>
+			<div>${this.item?.name}</div>
+		`;
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: flex;
+				gap: 12px;
+			}
+		`,
+	];
+}
+
+export { UmbSearchResultItemElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbSearchResultItemElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/search/types.ts

@@ -0,0 +1,5 @@
+export type UmbSearchResultItemModel = {
+	icon?: string;
+	name: string;
+	unique: string;
+};

src/Umbraco.Web.UI.Client/tsconfig.json

@@ -86,6 +86,7 @@
 			"@umbraco-cms/backoffice/repository": ["./src/packages/core/repository/index.ts"],
 			"@umbraco-cms/backoffice/resources": ["./src/packages/core/resources/index.ts"],
 			"@umbraco-cms/backoffice/router": ["./src/packages/core/router/index.ts"],
+			"@umbraco-cms/backoffice/search": ["./src/packages/search/index.ts"],
 			"@umbraco-cms/backoffice/section": ["./src/packages/core/section/index.ts"],
 			"@umbraco-cms/backoffice/server-file-system": ["./src/packages/core/server-file-system/index.ts"],
 			"@umbraco-cms/backoffice/sorter": ["./src/packages/core/sorter/index.ts"],