64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
|
|
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
|
|
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
|
|
import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
|
|
|
|
@customElement('umb-example-modal')
|
|
export class UmbExampleModal extends UmbModalBaseElement {
|
|
@state()
|
|
private _routes: UmbRoute[] = [];
|
|
|
|
/**
|
|
*
|
|
*/
|
|
constructor() {
|
|
super();
|
|
console.log('modal element loaded');
|
|
}
|
|
|
|
override connectedCallback(): void {
|
|
super.connectedCallback();
|
|
this._routes = [
|
|
{
|
|
path: `overview`,
|
|
component: () => import('./steps/example-modal-step1.element.js'),
|
|
},
|
|
{
|
|
path: `details`,
|
|
component: () => import('./steps/example-modal-step2.element.js'),
|
|
},
|
|
{
|
|
path: '',
|
|
redirectTo: 'overview',
|
|
},
|
|
];
|
|
}
|
|
|
|
override render() {
|
|
return html`
|
|
<div>
|
|
umb-example modal
|
|
<hr />
|
|
<umb-router-slot
|
|
.routes=${this._routes}
|
|
@init=${(event: UmbRouterSlotInitEvent) => {
|
|
console.log('modal route init fired', event);
|
|
}}
|
|
@change=${(event: UmbRouterSlotChangeEvent) => {
|
|
console.log('modal routes change', event);
|
|
}}></umb-router-slot>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
static override styles = [UmbTextStyles, css``];
|
|
}
|
|
|
|
export default UmbExampleModal;
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'umb-example-modal': UmbExampleModal;
|
|
}
|
|
}
|