import { css, CSSResultGroup, html, nothing, PropertyValues } from "lit";
import { customElement, property } from "lit/decorators.js";
import { AppWithRender } from "../../connection/composition/AppWithRender";
import { initLocalesInTopLevelElement, IWithlocale, localeContext, localeConverter, Locales } from "../../translations/localeContext";
import { provide } from "@lit/context";
import { t } from "i18next";
import { T } from "../../translations/Languages";
import { ref } from "lit/directives/ref.js";
import { ifDefined } from "lit/directives/if-defined.js";
@customElement("connected-app")
export class ConnectedApp extends AppWithRender implements IWithlocale {
@provide({ context: localeContext })
@property({ reflect: true, converter: localeConverter })
locale!: Locales;
@property({ type: String, reflect: true })
public label: string = "Connected app";
public connectedCallback(): void {
super.connectedCallback();
initLocalesInTopLevelElement(this);
if (this.path === undefined || this.path.trim() === '') {
// this.setError( "Parametr path je vyžadovaný pro správnou funkcionalitu této aplikace." );
}
this.originalPath = this.path;
}
static styles?: CSSResultGroup | undefined = css`
${super.styles!}
:host {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.server-footer {
font-size: calc( var(--thermal-fs) * 0.8 );
color: var( --thermal-slate-dark );
margin-top: calc( var(--thermal-gap) * 0.5 );
}
.error {
color: black;
background-color: #bf8f8f;
border-radius: var(--thermal-radius);
border: 1px solid var(--thermal-slate-dark);
box-sizing: border-box;
width: 100%;
padding: calc( var( --thermal-gap ) * .5 );
margin-bottom: calc( var( --thermal-gap ) * .5 );
}
`;
protected renderError() {
if (this.error === undefined) {
return nothing;
}
return html`${this.error}
`;
}
protected render(): unknown {
const slug = this.getCurrentSlug();
return html`
${this.isClientConnected === true
? html``
: nothing}
${this.renderError()}
${this.renderContent()}
`;
}
}