38 lines
1.6 KiB
TypeScript
38 lines
1.6 KiB
TypeScript
/** <maintenance-task-detail-view> — the task-detail sub-view as a web
|
|
* component. The incremental step over the renderers/task-detail
|
|
* extraction: the panel now hands the component a task + the
|
|
* TaskDetailContext instead of calling the render function inline, giving
|
|
* the sub-view a real element boundary (own update lifecycle, testable in
|
|
* isolation, future home for detail-only state).
|
|
*
|
|
* Deliberately renders into LIGHT DOM (createRenderRoot returns `this`):
|
|
* the element lives inside the panel's shadow root, so every selector in
|
|
* panel-styles.ts (.task-header, .kpi-bar, .popup-menu, …) keeps matching
|
|
* and every dialog-opening callback still runs against the panel's shadow
|
|
* root. Moving the ~1000 lines of detail CSS and the dialog ownership in
|
|
* here would be the big-bang rewrite this component exists to avoid.
|
|
*/
|
|
|
|
import { LitElement, html, nothing } from "lit";
|
|
import { property } from "lit/decorators.js";
|
|
import { renderTaskDetail, type TaskDetailContext } from "../renderers/task-detail";
|
|
import type { MaintenanceTask } from "../types";
|
|
|
|
export class MaintenanceTaskDetailView extends LitElement {
|
|
@property({ attribute: false }) public task?: MaintenanceTask;
|
|
@property({ attribute: false }) public ctx?: TaskDetailContext;
|
|
|
|
protected createRenderRoot(): HTMLElement {
|
|
return this;
|
|
}
|
|
|
|
protected render(): unknown {
|
|
if (!this.task || !this.ctx) return nothing;
|
|
return html`${renderTaskDetail(this.task, this.ctx)}`;
|
|
}
|
|
}
|
|
|
|
if (!customElements.get("maintenance-task-detail-view")) {
|
|
customElements.define("maintenance-task-detail-view", MaintenanceTaskDetailView);
|
|
}
|