feat(input-text): add validated success state and text editing context menu to text inputs

ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts

@@ -229,7 +229,8 @@ export const demoFunc = () => html`
             .label=${'Email with Validation'}
             .value=${'invalid@'}
             .validationFunction=${(value: string) => {
-              if (value.includes('@') && value.includes('.')) {
+              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+              if (emailRegex.test(value)) {
                 return { valid: true, message: 'Email address is valid' };
               }
               return { valid: false, message: 'Please enter a valid email address' };

ts_web/elements/00group-input/dees-input-text/dees-input-text.ts

@@ -7,11 +7,13 @@ import {
   customElement,
   type TemplateResult,
   property,
+  state,
   html,
   cssManager,
   css,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -63,6 +65,11 @@ export class DeesInputText extends DeesInputBase {
   })
   accessor vintegrated: boolean = false;
 
+  @property({ attribute: false })
+  accessor validConfirmed: boolean = false;
+
+  private validTimeout: ReturnType<typeof setTimeout> | undefined;
+
   public static styles = [
     themeDefaultStyles,
     ...DeesInputBase.baseStyles,
@@ -145,6 +152,33 @@ export class DeesInputText extends DeesInputBase {
         color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
       }
 
+      /* Valid checkmark icon */
+      .validIcon {
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        pointer-events: none;
+      }
+
+      .validIcon.show {
+        opacity: 1;
+      }
+
+      .validIcon dees-icon {
+        font-size: 14px;
+        color: white;
+      }
+
       /* Validation styles */
       .validationContainer {
         margin-top: 4px;
@@ -239,9 +273,9 @@ export class DeesInputText extends DeesInputBase {
         input {
           font-family: ${this.isPasswordBool ? cssMonoFontFamily : 'inherit'};
           letter-spacing: ${this.isPasswordBool ? '0.5px' : 'normal'};
-          padding-right: ${this.isPasswordBool ? '48px' : '12px'};
+          padding-right: ${this.isPasswordBool ? '48px' : this.validConfirmed ? '40px' : '12px'};
         }
-        ${this.validationText
+        ${this.validationText && !this.validConfirmed
           ? css`
               .validationContainer {
                 height: auto;
@@ -275,6 +309,9 @@ export class DeesInputText extends DeesInputBase {
                 </div>
               `
             : html``}
+          <div class="validIcon ${this.validConfirmed ? 'show' : ''}">
+            <dees-icon .icon=${'lucide:Check'}></dees-icon>
+          </div>
           ${this.validationText
             ? html`
                 <div class="validationContainer ${this.validationState || 'invalid'}">
@@ -292,6 +329,13 @@ export class DeesInputText extends DeesInputBase {
       const result = this.validationFunction(this.value);
       this.validationState = result.valid ? 'valid' : 'invalid';
       this.validationText = result.message || '';
+      if (result.valid) {
+        this.validConfirmed = false;
+        this.validTimeout = setTimeout(() => {
+          this.validConfirmed = true;
+          this.validationState = undefined as any;
+        }, 500);
+      }
     }
   }
 
@@ -302,10 +346,76 @@ export class DeesInputText extends DeesInputBase {
       const result = this.validationFunction(this.value);
       this.validationState = result.valid ? 'valid' : 'invalid';
       this.validationText = result.message || '';
+      if (result.valid) {
+        this.validConfirmed = false;
+        clearTimeout(this.validTimeout);
+        this.validTimeout = setTimeout(() => {
+          this.validConfirmed = true;
+          this.validationState = undefined as any;
+        }, 500);
+      } else {
+        clearTimeout(this.validTimeout);
+        this.validConfirmed = false;
+      }
     }
     this.changeSubject.next(this);
   }
 
+  public getContextMenuItems() {
+    const input = this.shadowRoot!.querySelector('input')!;
+    const hasSelection = input.selectionStart !== input.selectionEnd;
+    return [
+      {
+        name: 'Cut',
+        iconName: 'lucide:Scissors',
+        shortcut: 'Cmd+X',
+        disabled: !hasSelection,
+        action: async () => {
+          const selected = this.value.substring(input.selectionStart!, input.selectionEnd!);
+          await navigator.clipboard.writeText(selected);
+          const start = input.selectionStart!;
+          this.value = this.value.substring(0, start) + this.value.substring(input.selectionEnd!);
+          input.value = this.value;
+          input.setSelectionRange(start, start);
+          this.changeSubject.next(this);
+        },
+      },
+      {
+        name: 'Copy',
+        iconName: 'lucide:Copy',
+        shortcut: 'Cmd+C',
+        disabled: !hasSelection,
+        action: async () => {
+          const selected = this.value.substring(input.selectionStart!, input.selectionEnd!);
+          await navigator.clipboard.writeText(selected);
+        },
+      },
+      {
+        name: 'Paste',
+        iconName: 'lucide:ClipboardPaste',
+        shortcut: 'Cmd+V',
+        action: async () => {
+          const text = await navigator.clipboard.readText();
+          const start = input.selectionStart!;
+          const end = input.selectionEnd!;
+          this.value = this.value.substring(0, start) + text + this.value.substring(end);
+          input.value = this.value;
+          input.setSelectionRange(start + text.length, start + text.length);
+          this.changeSubject.next(this);
+        },
+      },
+      { divider: true },
+      {
+        name: 'Select All',
+        iconName: 'lucide:TextCursorInput',
+        shortcut: 'Cmd+A',
+        action: async () => {
+          input.select();
+        },
+      },
+    ];
+  }
+
   public getValue(): string {
     return this.value;
   }