feat(catalog): add admin dashboard components

ts_web/elements/idp-input.ts

@@ -15,6 +15,12 @@ export class IdpInput extends DeesElement {
   @property({ type: String })
   public accessor label = '';
 
+  @property({ type: String })
+  public accessor name = '';
+
+  @property({ type: String })
+  public accessor key = '';
+
   @property({ type: String })
   public accessor hint = '';
 
@@ -27,6 +33,15 @@ export class IdpInput extends DeesElement {
   @property({ type: String })
   public accessor type = 'text';
 
+  @property({ type: String })
+  public accessor autocomplete = '';
+
+  @property({ type: String })
+  public accessor error = '';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor required = false;
+
   @property({ type: Boolean, reflect: true })
   public accessor disabled = false;
 
@@ -66,18 +81,49 @@ export class IdpInput extends DeesElement {
       input:disabled {
         opacity: 0.5;
       }
-      .hint {
+      input[aria-invalid='true'] {
+        border-color: var(--idp-destructive);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--idp-destructive), transparent 86%);
+      }
+      .hint,
+      .error {
         color: var(--idp-muted-fg);
         font-size: 12px;
         line-height: 1.4;
       }
+      .error {
+        color: var(--idp-destructive);
+      }
     `,
   ];
 
+  public focus() {
+    this.shadowRoot?.querySelector('input')?.focus();
+  }
+
+  public validate() {
+    const input = this.shadowRoot?.querySelector('input');
+    if (this.required && !this.value.trim()) {
+      this.error = `${this.label || this.name || 'This field'} is required.`;
+      return false;
+    }
+
+    if (input && !input.checkValidity()) {
+      this.error = input.validationMessage;
+      return false;
+    }
+
+    this.error = '';
+    return true;
+  }
+
   private handleInput(eventArg: Event) {
     this.value = (eventArg.target as HTMLInputElement).value;
+    if (this.error) {
+      this.validate();
+    }
     this.dispatchEvent(new CustomEvent('idp-input-change', {
-      detail: { value: this.value },
+      detail: { name: this.name || this.key, key: this.key || this.name, value: this.value },
       bubbles: true,
       composed: true,
     }));
@@ -89,12 +135,16 @@ export class IdpInput extends DeesElement {
         ${this.label ? html`<span class="label">${this.label}</span>` : html``}
         <input
           .value=${this.value}
+          name=${this.name || this.key}
           type=${this.type}
           placeholder=${this.placeholder}
+          autocomplete=${this.autocomplete}
+          ?required=${this.required}
           ?disabled=${this.disabled}
+          aria-invalid=${this.error ? 'true' : 'false'}
           @input=${this.handleInput}
         />
-        ${this.hint ? html`<span class="hint">${this.hint}</span>` : html``}
+        ${this.error ? html`<span class="error">${this.error}</span>` : this.hint ? html`<span class="hint">${this.hint}</span>` : html``}
       </label>
     `;
   }