Files
Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/modal-routed/tabs/tab2.element.ts
2024-07-27 15:55:00 +02:00

60 lines
1.6 KiB
TypeScript

import { css, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
import { EXAMPLE_ROUTED_MODAL } from './../modal/example-modal-token';
@customElement('umb-dashboard-tab2')
export class UmbDashboardTab2Element extends UmbElementMixin(LitElement) {
#workspaceModal?: UmbModalRouteRegistrationController;
@state()
_editLinkPath?: string;
constructor() {
super();
// Using workspace modal context
this.#workspaceModal?.destroy();
this.#workspaceModal = new UmbModalRouteRegistrationController(this, EXAMPLE_ROUTED_MODAL)
.addAdditionalPath('view/:entityKey')
.onSetup(() => {
return {
data: {},
value: {}
};
})
.observeRouteBuilder((routeBuilder) => {
this._editLinkPath = routeBuilder({entityKey : 'abc123'});
});
}
override render() {
return html`
<div>
<h2>tab 2</h2>
<p>This element hosts the UmbModalRouteRegistrationController</p>
<a href=${this._editLinkPath ?? ""}>Open modal</a>
<hr/>
Path: ${this._editLinkPath}
</div>
`
}
static override styles = [UmbTextStyles, css``];
}
export default UmbDashboardTab2Element
declare global {
interface UmbDashboardTab2Element {
'umb-dashboard-tab2': UmbDashboardTab2Element;
}
}