91 lines
2.1 KiB
TypeScript
91 lines
2.1 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
css,
|
|
cssManager,
|
|
property,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import './sz-dns-ssl-card.js';
|
|
import './sz-quick-actions-card.js';
|
|
|
|
import type { IQuickAction } from './sz-quick-actions-card.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sz-status-grid-infra': SzStatusGridInfra;
|
|
}
|
|
}
|
|
|
|
@customElement('sz-status-grid-infra')
|
|
export class SzStatusGridInfra extends DeesElement {
|
|
public static demo = () => html`
|
|
<div style="padding: 24px; max-width: 1200px;">
|
|
<sz-status-grid-infra
|
|
dnsConfigured
|
|
acmeConfigured
|
|
.actions=${[
|
|
{ label: 'Deploy Service', icon: 'plus', primary: true },
|
|
{ label: 'View All Services' },
|
|
{ label: 'Platform Services' },
|
|
{ label: 'Manage Domains' },
|
|
]}
|
|
></sz-status-grid-infra>
|
|
</div>
|
|
`;
|
|
|
|
public static demoGroups = ['Dashboard Grids'];
|
|
|
|
@property({ type: Boolean })
|
|
public accessor dnsConfigured: boolean = false;
|
|
|
|
@property({ type: Boolean })
|
|
public accessor acmeConfigured: boolean = false;
|
|
|
|
@property({ type: Array })
|
|
public accessor actions: IQuickAction[] = [];
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.grid > * {
|
|
height: 100%;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.grid {
|
|
grid-template-columns: 1fr 2fr;
|
|
}
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="grid">
|
|
<sz-dns-ssl-card
|
|
?dnsConfigured=${this.dnsConfigured}
|
|
?acmeConfigured=${this.acmeConfigured}
|
|
></sz-dns-ssl-card>
|
|
<sz-quick-actions-card
|
|
.actions=${this.actions}
|
|
@action-click=${(e: CustomEvent) => this.dispatchEvent(new CustomEvent('action-click', { detail: e.detail, bubbles: true, composed: true }))}
|
|
></sz-quick-actions-card>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|