@idds/js 1.6.0 → 1.6.1

package/dist/index.iife.js

@@ -1300,7 +1300,6 @@ var InaUI = (() => {
         input.placeholder = this.container.getAttribute("placeholder") || "Select time";
         if (this.options.disabled) input.disabled = true;
         if (this.options.readonly) input.readOnly = true;
-        else input.readOnly = true;
         wrapper.appendChild(input);
         if (this.options.allowClear) {
           clearBtn = document.createElement("button");
@@ -1615,13 +1614,50 @@ var InaUI = (() => {
     bindEvents() {
       this.elements.wrapper.addEventListener("click", (e) => {
         e.stopPropagation();
-        this.toggle();
+        const target = e.target;
+        if (target === this.elements.wrapper || target.classList.contains(`${PREFIX}-time-picker__suffix-icon`) || target.classList.contains(`${PREFIX}-time-picker__prefix-icon`)) {
+          this.toggle();
+        }
+      });
+      this.elements.input.addEventListener("input", (e) => {
+        const val = e.target.value;
+        this.state.internalValue = val;
+        const timeRegex = this.options.use12Hours ? /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM|am|pm)?$/ : /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/;
+        if (timeRegex.test(val)) {
+          this.state.currentTime = this.parseTime(val);
+          if (this.state.isOpen) this.buildPanel();
+        }
+        if (this.elements.clearBtn && this.options.allowClear) {
+          this.elements.clearBtn.style.display = val && !this.options.disabled ? "flex" : "none";
+        }
+        if (typeof this.options.onChange === "function") {
+          this.options.onChange(val);
+        }
+      });
+      this.elements.input.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.open();
+      });
+      this.elements.input.addEventListener("focus", () => {
+        this.open();
+      });
+      this.elements.input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          if (this.state.internalValue) {
+            this.close();
+          } else {
+            this.toggle();
+          }
+        } else if (e.key === "Escape") {
+          if (this.state.isOpen) this.close();
+        }
       });
       if (this.elements.clearBtn) {
         this.elements.clearBtn.addEventListener("click", (e) => {
           e.stopPropagation();
-          this.container.dataset.value = "";
           this.state.internalValue = "";
+          this.elements.input.value = "";
           this.elements.clearBtn.style.display = "none";
           this.elements.input.dispatchEvent(
             new Event("change", { bubbles: true })
@@ -1630,6 +1666,12 @@ var InaUI = (() => {
             this.options.onChange("");
           }
         });
+        this.elements.clearBtn.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this.elements.clearBtn.click();
+          }
+        });
       }
       document.addEventListener("click", (e) => {
         if (!this.container.contains(e.target)) this.close();
@@ -3726,6 +3768,12 @@ var InaUI = (() => {
         this.elements.clearBtn.addEventListener("click", () => {
           this.clear();
         });
+        this.elements.clearBtn.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this.clear();
+          }
+        });
       }
       document.addEventListener("click", (e) => {
         if (!this.elements.wrapper.contains(e.target)) {

package/dist/index.js

@@ -1319,7 +1319,6 @@ var TimePicker = class {
       input.placeholder = this.container.getAttribute("placeholder") || "Select time";
       if (this.options.disabled) input.disabled = true;
       if (this.options.readonly) input.readOnly = true;
-      else input.readOnly = true;
       wrapper.appendChild(input);
       if (this.options.allowClear) {
         clearBtn = document.createElement("button");
@@ -1634,13 +1633,50 @@ var TimePicker = class {
   bindEvents() {
     this.elements.wrapper.addEventListener("click", (e) => {
       e.stopPropagation();
-      this.toggle();
+      const target = e.target;
+      if (target === this.elements.wrapper || target.classList.contains(`${PREFIX}-time-picker__suffix-icon`) || target.classList.contains(`${PREFIX}-time-picker__prefix-icon`)) {
+        this.toggle();
+      }
+    });
+    this.elements.input.addEventListener("input", (e) => {
+      const val = e.target.value;
+      this.state.internalValue = val;
+      const timeRegex = this.options.use12Hours ? /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM|am|pm)?$/ : /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/;
+      if (timeRegex.test(val)) {
+        this.state.currentTime = this.parseTime(val);
+        if (this.state.isOpen) this.buildPanel();
+      }
+      if (this.elements.clearBtn && this.options.allowClear) {
+        this.elements.clearBtn.style.display = val && !this.options.disabled ? "flex" : "none";
+      }
+      if (typeof this.options.onChange === "function") {
+        this.options.onChange(val);
+      }
+    });
+    this.elements.input.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.open();
+    });
+    this.elements.input.addEventListener("focus", () => {
+      this.open();
+    });
+    this.elements.input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (this.state.internalValue) {
+          this.close();
+        } else {
+          this.toggle();
+        }
+      } else if (e.key === "Escape") {
+        if (this.state.isOpen) this.close();
+      }
     });
     if (this.elements.clearBtn) {
       this.elements.clearBtn.addEventListener("click", (e) => {
         e.stopPropagation();
-        this.container.dataset.value = "";
         this.state.internalValue = "";
+        this.elements.input.value = "";
         this.elements.clearBtn.style.display = "none";
         this.elements.input.dispatchEvent(
           new Event("change", { bubbles: true })
@@ -1649,6 +1685,12 @@ var TimePicker = class {
           this.options.onChange("");
         }
       });
+      this.elements.clearBtn.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this.elements.clearBtn.click();
+        }
+      });
     }
     document.addEventListener("click", (e) => {
       if (!this.container.contains(e.target)) this.close();
@@ -3837,6 +3879,12 @@ var PhoneInput = class {
       this.elements.clearBtn.addEventListener("click", () => {
         this.clear();
       });
+      this.elements.clearBtn.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this.clear();
+        }
+      });
     }
     document.addEventListener("click", (e) => {
       if (!this.elements.wrapper.contains(e.target)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/js",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "publishConfig": {
     "access": "public"
   },