74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
|
|
import { customElement, property } from 'lit/decorators.js';
|
|
import { classMap } from 'lit/directives/class-map.js';
|
|
import { MessageController } from '../components-lib/message/controller.js';
|
|
import messageStyle from '../scss/message.scss';
|
|
import { Message } from '../types.js';
|
|
import './icon.js';
|
|
|
|
export function renderMessage(
|
|
message: Message | null,
|
|
renderOptions?: {
|
|
overlay?: boolean;
|
|
},
|
|
): TemplateResult {
|
|
return html` <advanced-camera-card-message
|
|
.message=${message}
|
|
?overlay=${!!renderOptions?.overlay}
|
|
></advanced-camera-card-message>`;
|
|
}
|
|
@customElement('advanced-camera-card-message')
|
|
export class AdvancedCameraCardMessage extends LitElement {
|
|
@property({ attribute: false })
|
|
public message?: Message;
|
|
|
|
@property({ attribute: true, type: Boolean })
|
|
public overlay = false;
|
|
|
|
private _controller = new MessageController();
|
|
|
|
protected render(): TemplateResult | void {
|
|
if (!this.message) {
|
|
return;
|
|
}
|
|
|
|
const url = this._controller.getURL(this.message);
|
|
const messageTemplate = html`
|
|
${this._controller.getMessageString(this.message)}
|
|
${url ? html`. <a href="${url.link}">${url.title}</a>` : ''}
|
|
`;
|
|
|
|
const icon = this._controller.getIcon(this.message);
|
|
const classes = {
|
|
dotdotdot: !!this.message?.dotdotdot,
|
|
};
|
|
|
|
return html` <div class="wrapper">
|
|
<div class="message padded">
|
|
<div class="icon">
|
|
<advanced-camera-card-icon
|
|
part="icon"
|
|
.icon="${{ icon: icon }}"
|
|
></advanced-camera-card-icon>
|
|
</div>
|
|
<div class="contents">
|
|
<span class="${classMap(classes)}">${messageTemplate}</span>
|
|
${this._controller
|
|
.getContextStrings(this.message)
|
|
.map((contextItem) => html`<pre>${contextItem}</pre>`)}
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return unsafeCSS(messageStyle);
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'advanced-camera-card-message': AdvancedCameraCardMessage;
|
|
}
|
|
}
|