Feature: Dictionary Searchbar (#2415)

src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-toolbar.element.ts

@@ -7,6 +7,7 @@ export class UmbCollectionToolbarElement extends UmbLitElement {
 	override render() {
 		return html`
 			<umb-collection-action-bundle></umb-collection-action-bundle>
+			<div id="slot"><slot></slot></div>
 			<umb-collection-view-bundle></umb-collection-view-bundle>
 		`;
 	}
@@ -20,6 +21,9 @@ export class UmbCollectionToolbarElement extends UmbLitElement {
 				justify-content: space-between;
 				width: 100%;
 			}
+			#slot {
+				flex: 1;
+			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/dictionary-collection.element.ts

@@ -0,0 +1,54 @@
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import {
+	UMB_COLLECTION_CONTEXT,
+	UmbCollectionDefaultElement,
+	type UmbDefaultCollectionContext,
+} from '@umbraco-cms/backoffice/collection';
+
+@customElement('umb-dictionary-collection')
+export class UmbDictionaryCollectionElement extends UmbCollectionDefaultElement {
+	#collectionContext?: UmbDefaultCollectionContext;
+	#inputTimer?: NodeJS.Timeout;
+	#inputTimerAmount = 500;
+
+	constructor() {
+		super();
+		this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
+			this.#collectionContext = context;
+		});
+	}
+
+	#updateSearch(event: InputEvent) {
+		const target = event.target as HTMLInputElement;
+		const filter = target.value || '';
+		clearTimeout(this.#inputTimer);
+		this.#inputTimer = setTimeout(() => this.#collectionContext?.setFilter({ filter }), this.#inputTimerAmount);
+	}
+
+	protected override renderToolbar() {
+		return html`<umb-collection-toolbar slot="header">${this.#renderSearch()}</umb-collection-toolbar>`;
+	}
+
+	#renderSearch() {
+		return html`<uui-input
+			id="input-search"
+			@input=${this.#updateSearch}
+			placeholder=${this.localize.term('placeholders_search')}></uui-input>`;
+	}
+
+	static override styles = [
+		css`
+			#input-search {
+				width: 100%;
+			}
+		`,
+	];
+}
+
+export default UmbDictionaryCollectionElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-dictionary-collection': UmbDictionaryCollectionElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/manifests.ts

@@ -9,6 +9,7 @@ const collectionManifest: ManifestCollection = {
 	type: 'collection',
 	kind: 'default',
 	alias: UMB_DICTIONARY_COLLECTION_ALIAS,
+	element: () => import('./dictionary-collection.element.js'),
 	name: 'Dictionary Collection',
 	meta: {
 		repositoryAlias: UMB_DICTIONARY_COLLECTION_REPOSITORY_ALIAS,