diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-toolbar.element.ts
index 7121710110..3531f9de2a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-toolbar.element.ts
+++ b/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`
+
`;
}
@@ -20,6 +21,9 @@ export class UmbCollectionToolbarElement extends UmbLitElement {
justify-content: space-between;
width: 100%;
}
+ #slot {
+ flex: 1;
+ }
`,
];
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/dictionary-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/dictionary-collection.element.ts
new file mode 100644
index 0000000000..d4372f22ec
--- /dev/null
+++ b/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`${this.#renderSearch()}`;
+ }
+
+ #renderSearch() {
+ return html``;
+ }
+
+ static override styles = [
+ css`
+ #input-search {
+ width: 100%;
+ }
+ `,
+ ];
+}
+
+export default UmbDictionaryCollectionElement;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-dictionary-collection': UmbDictionaryCollectionElement;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/manifests.ts
index dbab8a757d..eeffe2cb95 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/collection/manifests.ts
+++ b/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,