update

ts_web/elements/sz-status-grid-infra.ts

@@ -0,0 +1,88 @@
+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>
+  `;
+
+  @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>
+    `;
+  }
+}