feat(catalog): add admin dashboard components

2026-05-07 15:35:37 +00:00
parent 5dbbe90b43
commit 3992adbafa
17 changed files with 2832 additions and 802 deletions
@@ -0,0 +1,65 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-button.js';
+import type { TIdpButtonSize, TIdpButtonVariant } from './idp-button.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-form-submit': IdpFormSubmit;
+  }
+}
+
+@customElement('idp-form-submit')
+export class IdpFormSubmit extends DeesElement {
+  public static demo = () => html`<idp-form-submit>Continue</idp-form-submit>`;
+  public static demoGroups = ['idp.global v3 primitives'];
+
+  @property({ type: String })
+  public accessor text = '';
+
+  @property({ type: String })
+  public accessor variant: TIdpButtonVariant = 'accent';
+
+  @property({ type: String })
+  public accessor size: TIdpButtonSize = 'md';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor disabled = false;
+
+  @property({ type: Boolean, reflect: true })
+  public accessor loading = false;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+      }
+      idp-button {
+        width: 100%;
+      }
+    `,
+  ];
+
+  private handleClick() {
+    if (this.disabled || this.loading) {
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('idp-form-submit-request', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <idp-button
+        variant=${this.variant}
+        size=${this.size}
+        .disabled=${this.disabled || this.loading}
+        .loading=${this.loading}
+        @click=${this.handleClick}
+      >${this.text || html`<slot></slot>`}</idp-button>
+    `;
+  }
+}