feat(catalog): add admin dashboard components

ts_web/elements/idp-button.ts

@@ -40,9 +40,15 @@ export class IdpButton extends DeesElement {
   @property({ type: String })
   public accessor icon = '';
 
+  @property({ type: String })
+  public accessor type: 'button' | 'submit' | 'reset' = 'button';
+
   @property({ type: Boolean, reflect: true })
   public accessor disabled = false;
 
+  @property({ type: Boolean, reflect: true })
+  public accessor loading = false;
+
   public static styles = [
     ...idpElementStyles,
     css`
@@ -101,7 +107,7 @@ export class IdpButton extends DeesElement {
       }
       .accent {
         background: var(--idp-accent);
-        color: #fff;
+        color: var(--idp-accent-fg);
         box-shadow: 0 4px 14px color-mix(in srgb, var(--idp-accent), transparent 64%);
       }
       .accent:hover:not(:disabled) {
@@ -126,18 +132,33 @@ export class IdpButton extends DeesElement {
       }
       .destructive {
         background: var(--idp-destructive);
-        color: #fff;
+        color: var(--idp-accent-fg);
       }
       idp-icon {
         flex: 0 0 auto;
       }
+      .spinner {
+        width: 13px;
+        height: 13px;
+        border: 2px solid currentColor;
+        border-right-color: transparent;
+        border-radius: 999px;
+        animation: spin 700ms linear infinite;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <button class="${this.variant} ${this.size}" ?disabled=${this.disabled} part="button">
-        ${this.icon ? html`<idp-icon name=${this.icon as any} size="14"></idp-icon>` : html``}
+      <button class="${this.variant} ${this.size}" type=${this.type} ?disabled=${this.disabled || this.loading} part="button">
+        ${this.loading
+          ? html`<span class="spinner" aria-hidden="true"></span>`
+          : this.icon ? html`<idp-icon name=${this.icon as any} size="14"></idp-icon>` : html``}
         <slot></slot>
       </button>
     `;