dees-catalog/ts_web/elements/dees-updater.ts
2023-08-07 19:13:29 +02:00

91 lines
2.2 KiB
TypeScript

import { customElement, DeesElement, TemplateResult, html, property } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import './dees-windowlayer';
import { css, cssManager } from '@design.estate/dees-element';
declare global {
interface HTMLElementTagNameMap {
'dees-updater': DeesUpdater;
}
}
@customElement('dees-updater')
export class DeesUpdater extends DeesElement {
public static demo = () => html`<dees-updater></dees-updater>`;
@property({
type: String,
})
currentVersion: string;
@property({
type: String,
})
updatedVersion: string;
constructor() {
super();
domtools.elementBasic.setup();
}
public static styles = [
cssManager.defaultStyles,
css`
.modalContainer {
will-change: transform;
position: relative;
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
margin: auto;
max-width: 800px;
border-radius: 3px;
border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
}
.headingContainer {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 40px;
}
h1 {
margin: none;
font-size: 20px;
color: ${cssManager.bdTheme('#333', '#fff')};
margin-left: 20px;
font-weight: normal;
}
.buttonContainer {
display: grid;
grid-template-columns: 50% 50%;
}
`
]
public render(): TemplateResult {
return html`
<dees-windowlayer @clicked="${this.windowLayerClicked}">
<div class="modalContainer">
<div class="headingContainer">
<dees-spinner .size=${60}></dees-spinner>
<h1>Updating the application...</h1>
</div>
<div class="buttonContainer">
<dees-button>More info</dees-button>
<dees-button>Changelog</dees-button>
</div>
</div>
</dees-windowlayer>>
`;
}
private windowLayerClicked() {
const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
windowLayer.toggleVisibility();
}
}