diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/search/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/manifests.ts index c69d4d6a02..ea025667f8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/search/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/manifests.ts @@ -5,7 +5,7 @@ const headerApps: Array = [ type: 'headerApp', alias: 'Umb.HeaderApp.Search', name: 'Header App Search', - loader: () => import('src/backoffice/shared/components/header-app/header-app-button.element'), + loader: () => import('./umb-search-header-app.element'), weight: 10, meta: { label: 'Search', diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts new file mode 100644 index 0000000000..9518fb409f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/search/umb-search-header-app.element.ts @@ -0,0 +1,48 @@ +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { css, CSSResultGroup, html } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbLitElement } from '@umbraco-cms/element'; + +@customElement('umb-search-header-app') +export class UmbSearchHeaderApp extends UmbLitElement { + static styles: CSSResultGroup = [ + UUITextStyles, + css` + uui-button { + font-size: 18px; + --uui-button-background-color: transparent; + } + `, + ]; + + private _modalService?: UmbModalService; + + constructor() { + super(); + + this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (_instance) => { + this._modalService = _instance; + }); + } + + #onSearchClick() { + this._modalService?.search(); + } + + render() { + return html` + + + + `; + } +} + +export default UmbSearchHeaderApp; + +declare global { + interface HTMLElementTagNameMap { + 'umb-search-header-app': UmbSearchHeaderApp; + } +}