@descope/web-components-ui 1.105.0 → 1.106.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.105.0",
+  "version": "1.106.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -82,14 +82,14 @@
     "@descope-ui/descope-icon": "0.0.14",
     "@descope-ui/descope-text": "0.0.17",
     "@descope-ui/descope-avatar": "0.0.17",
-    "@descope-ui/descope-combo-box": "0.1.6",
-    "@descope-ui/descope-autocomplete-field": "0.0.19",
-    "@descope-ui/descope-address-field": "0.0.18",
-    "@descope-ui/descope-timer": "0.0.13",
-    "@descope-ui/descope-timer-button": "0.0.15",
-    "@descope-ui/descope-password-strength": "0.0.10",
-    "@descope-ui/descope-collapsible-container": "0.0.14",
-    "@descope-ui/descope-recovery-codes": "0.0.3"
+    "@descope-ui/descope-combo-box": "0.1.7",
+    "@descope-ui/descope-autocomplete-field": "0.0.20",
+    "@descope-ui/descope-address-field": "0.0.19",
+    "@descope-ui/descope-timer": "0.0.14",
+    "@descope-ui/descope-timer-button": "0.0.16",
+    "@descope-ui/descope-password-strength": "0.0.11",
+    "@descope-ui/descope-collapsible-container": "0.0.15",
+    "@descope-ui/descope-recovery-codes": "0.0.4"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/descope-date-field/DateFieldClass.js

@@ -28,6 +28,7 @@ import {
 import { DateCounter } from './DateCounterClass';
 import { TextFieldClass } from '../descope-text-field/TextFieldClass';
 import { injectStyle } from '@descope-ui/common/components-helpers';
+import { parseDateString } from './helpers';
 
 export const componentName = getComponentName('date-field');
 
@@ -220,6 +221,11 @@ class RawDateFieldClass extends BaseInputClass {
     return this.getAttribute('disable-calendar') === 'true';
   }
 
+  get isSelectAll() {
+    const inputEle = this.inputElement.baseElement.inputElement;
+    return inputEle.value.length === inputEle.selectionStart + inputEle.selectionEnd;
+  }
+
   reportValidity() {
     this.inputElement.reportValidity();
   }
@@ -254,9 +260,10 @@ class RawDateFieldClass extends BaseInputClass {
     this.inputElement.addEventListener('focus', this.onFocus.bind(this));
     this.inputElement.addEventListener('blur', this.onBlur.bind(this));
     this.inputElement.addEventListener('click', this.handleMouseCaretPositionChange.bind(this));
-    this.inputElement.addEventListener('keydown', this.handleArrowKeys.bind(this));
+    this.inputElement.addEventListener('keydown', this.handleKeyboard.bind(this));
     this.inputElement.addEventListener('beforeinput', this.handleInput.bind(this));
     this.inputElement.addEventListener('pointerdown', this.onPointerDown.bind(this));
+    this.inputElement.addEventListener('paste', this.onPaste.bind(this));
 
     forwardAttrs(this, this.inputElement, {
       includeAttrs: [
@@ -285,6 +292,8 @@ class RawDateFieldClass extends BaseInputClass {
   handleInput(e) {
     e.preventDefault();
 
+    this.handleSelectAll();
+
     if (e.data && isNumber(e.data)) {
       this.parseDigits(e.data);
       this.updateCountersDisplay();
@@ -305,6 +314,12 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
+  handleSelectAll() {
+    if (this.isSelectAll) {
+      this.selectFirstCounter();
+    }
+  }
+
   #popoverPosStylesheet;
 
   #popoverRenderer(root) {
@@ -475,7 +490,8 @@ class RawDateFieldClass extends BaseInputClass {
     }
 
     // On focus select the first counter
-    this.selectedCounterIdx = 0;
+    this.selectFirstCounter();
+    // set selection on first counter
     this.inputElement.setSelectionRange(0, this.sortedCounters[0].length);
   }
 
@@ -534,6 +550,10 @@ class RawDateFieldClass extends BaseInputClass {
     );
   }
 
+  selectFirstCounter() {
+    this.selectedCounterIdx = 0;
+  }
+
   selectNextCounter() {
     if (this.selectedCounterIdx < this.dateCounters.length) {
       this.selectedCounterIdx = Math.min(this.selectedCounterIdx + 1, 2);
@@ -593,7 +613,17 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
-  handleArrowKeys(e) {
+  handleKeyboard(e) {
+    if (e.metaKey || e.ctrlKey) {
+      if (e.key.toLowerCase() === 'x') {
+        this.onCut(e);
+      }
+
+      return;
+    }
+
+    this.handleSelectAll();
+
     if (e.key === 'ArrowUp') {
       this.activeCounter.inc();
     } else if (e.key === 'ArrowDown') {
@@ -626,6 +656,11 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   handleBackspace() {
+    if (this.isSelectAll) {
+      this.resetToInitialState();
+      return;
+    }
+
     const counter = this.activeCounter;
 
     if (counter.isEmpty) {
@@ -743,6 +778,62 @@ class RawDateFieldClass extends BaseInputClass {
 
     return ret;
   }
+
+  resetToInitialState() {
+    this.resetDateCounters();
+    this.selectFirstCounter();
+    this.resetDisplay();
+  }
+
+  onCut(e) {
+    e.preventDefault();
+
+    if (this.isSelectAll) {
+      this.#copyToClipboard(this.countersValue);
+      this.resetToInitialState();
+    } else {
+      this.#copyToClipboard(this.activeCounter.stringValue);
+      this.activeCounter.set('');
+    }
+
+    this.setInputSelectionRange();
+  }
+
+  #copyToClipboard(value) {
+    try {
+      navigator.clipboard.writeText(value);
+    } catch (err) {
+      console.error('Failed to copy date value:', err);
+    }
+  }
+
+  onPaste(e) {
+    e.preventDefault();
+
+    const clipboardData = e.clipboardData || window.clipboardData;
+    const pastedData = clipboardData.getData('Text');
+
+    // try paste entire date if valid
+    const validDate = parseDateString(pastedData, this.format);
+
+    if (validDate) {
+      this.value = validDate.getTime();
+      this.onDateCounterChange();
+
+      // select all
+      setTimeout(() => this.inputElement.setSelectionRange(0, this.inputElement.value.length));
+    } else {
+      const value = Number(pastedData);
+
+      // try paste in counter if possible
+      if (value && this.activeCounter.min <= value && this.activeCounter.max >= value) {
+        // use String to get rid of any zero padding
+        this.activeCounter.set(String(value));
+
+        setTimeout(() => this.setInputSelectionRange());
+      }
+    }
+  }
 }
 
 const textVars = TextFieldClass.cssVarList;

package/src/components/descope-date-field/helpers.js

@@ -1,3 +1,5 @@
+import { formats } from './formats';
+
 export const isValidTimestamp = (val) => !Number.isNaN(Number(val));
 
 export const isNumber = (val) => !!String(val || '').trim() && !Number.isNaN(Number(val));
@@ -47,3 +49,9 @@ export const overrideConstructedStylesheet = (ele) => {
   cs.insertRule(':host{display:block!important;}');
   ele?.shadowRoot?.adoptedStyleSheets?.push(cs);
 };
+
+export const parseDateString = (val, format) => {
+  const trimmed = val.trim?.();
+  if (!trimmed) return null;
+  return formats[format].getDate(trimmed);
+};