import { DeesElement, customElement, html, css, cssManager, property, type TemplateResult, } from '@design.estate/dees-element'; declare global { interface HTMLElementTagNameMap { 'sz-certificates-card': SzCertificatesCard; } } @customElement('sz-certificates-card') export class SzCertificatesCard extends DeesElement { public static demo = () => html`
`; public static demoGroups = ['Network']; @property({ type: Number }) public accessor validCount: number = 0; @property({ type: Number }) public accessor expiringCount: number = 0; @property({ type: Number }) public accessor expiredCount: number = 0; public static styles = [ cssManager.defaultStyles, css` :host { display: block; min-width: 200px; height: 100%; } .card { background: ${cssManager.bdTheme('#ffffff', '#09090b')}; border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')}; border-radius: 8px; padding: 20px; height: 100%; box-sizing: border-box; } .header { margin-bottom: 16px; } .title { font-size: 16px; font-weight: 600; color: ${cssManager.bdTheme('#18181b', '#fafafa')}; } .subtitle { font-size: 13px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; margin-top: 2px; } .status { display: flex; align-items: center; gap: 8px; } .status-icon { width: 20px; height: 20px; } .status-icon.valid { color: ${cssManager.bdTheme('#22c55e', '#22c55e')}; } .status-icon.warning { color: ${cssManager.bdTheme('#facc15', '#facc15')}; } .status-icon.error { color: ${cssManager.bdTheme('#ef4444', '#ef4444')}; } .status-text { font-size: 14px; color: ${cssManager.bdTheme('#18181b', '#fafafa')}; } .status-list { display: flex; flex-direction: column; gap: 8px; } `, ]; public render(): TemplateResult { return html`
Certificates
SSL/TLS certificate status
${this.validCount > 0 ? html`
${this.validCount} valid
` : ''} ${this.expiringCount > 0 ? html`
${this.expiringCount} expiring soon
` : ''} ${this.expiredCount > 0 ? html`
${this.expiredCount} expired
` : ''} ${this.validCount === 0 && this.expiringCount === 0 && this.expiredCount === 0 ? html`
No certificates
` : ''}
`; } }