@idds/js 1.6.0 → 1.6.3

package/dist/index.iife.js

@@ -1299,8 +1299,7 @@ var InaUI = (() => {
           input.classList.add(`${PREFIX}-time-picker__input--with-suffix`);
         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;
+        input.readOnly = !!this.options.readonly;
         wrapper.appendChild(input);
         if (this.options.allowClear) {
           clearBtn = document.createElement("button");
@@ -1316,8 +1315,22 @@ var InaUI = (() => {
         wrapper.setAttribute("role", "combobox");
         wrapper.setAttribute("aria-haspopup", "listbox");
         wrapper.setAttribute("aria-expanded", "false");
-        if (input && !input.id) input.id = this.inputId;
-        if (clearBtn && !clearBtn.hasAttribute("aria-label")) {
+        if (input) {
+          if (!input.id) input.id = this.inputId;
+          input.readOnly = !!this.options.readonly;
+        }
+        if (this.options.allowClear && !clearBtn) {
+          clearBtn = document.createElement("button");
+          clearBtn.type = "button";
+          clearBtn.className = `${PREFIX}-time-picker__clear-button`;
+          clearBtn.setAttribute("aria-label", "Hapus waktu");
+          clearBtn.innerHTML = this.createIcon("x");
+          clearBtn.style.display = "none";
+          wrapper.appendChild(clearBtn);
+          if (input) {
+            input.classList.add(`${PREFIX}-time-picker__input--with-suffix`);
+          }
+        } else if (clearBtn && !clearBtn.hasAttribute("aria-label")) {
           clearBtn.setAttribute("aria-label", "Hapus waktu");
         }
       }
@@ -1615,13 +1628,76 @@ 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) => {
+        let val = e.target.value;
+        const allowedChars = this.options.use12Hours ? /[0-9: apm]/gi : /[0-9:]/g;
+        val = (val.match(allowedChars) || []).join("");
+        let rawDigits = val.replace(/[^0-9]/g, "");
+        let formatted = "";
+        if (rawDigits.length > 0) {
+          formatted += rawDigits.slice(0, 2);
+          if (rawDigits.length > 2) {
+            formatted += ":" + rawDigits.slice(2, 4);
+            if (this.options.showSecond && rawDigits.length > 4) {
+              formatted += ":" + rawDigits.slice(4, 6);
+            }
+          }
+        }
+        if (this.options.use12Hours) {
+          const periodMatch = val.match(/(am|pm)/i);
+          if (periodMatch) {
+            formatted += " " + periodMatch[0].toUpperCase();
+          } else if (val.includes(" ")) {
+            formatted += " ";
+          }
+        }
+        let maxLen = 5;
+        if (this.options.showSecond) maxLen = 8;
+        if (this.options.use12Hours) maxLen += 3;
+        formatted = formatted.slice(0, maxLen);
+        e.target.value = formatted;
+        this.state.internalValue = formatted;
+        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(formatted)) {
+          this.state.currentTime = this.parseTime(formatted);
+          if (this.state.isOpen) this.buildPanel();
+        }
+        if (this.elements.clearBtn && this.options.allowClear) {
+          this.elements.clearBtn.style.display = formatted && !this.options.disabled ? "flex" : "none";
+        }
+        if (typeof this.options.onChange === "function") {
+          this.options.onChange(formatted);
+        }
+      });
+      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 +1706,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 +3808,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

@@ -1318,8 +1318,7 @@ var TimePicker = class {
         input.classList.add(`${PREFIX}-time-picker__input--with-suffix`);
       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;
+      input.readOnly = !!this.options.readonly;
       wrapper.appendChild(input);
       if (this.options.allowClear) {
         clearBtn = document.createElement("button");
@@ -1335,8 +1334,22 @@ var TimePicker = class {
       wrapper.setAttribute("role", "combobox");
       wrapper.setAttribute("aria-haspopup", "listbox");
       wrapper.setAttribute("aria-expanded", "false");
-      if (input && !input.id) input.id = this.inputId;
-      if (clearBtn && !clearBtn.hasAttribute("aria-label")) {
+      if (input) {
+        if (!input.id) input.id = this.inputId;
+        input.readOnly = !!this.options.readonly;
+      }
+      if (this.options.allowClear && !clearBtn) {
+        clearBtn = document.createElement("button");
+        clearBtn.type = "button";
+        clearBtn.className = `${PREFIX}-time-picker__clear-button`;
+        clearBtn.setAttribute("aria-label", "Hapus waktu");
+        clearBtn.innerHTML = this.createIcon("x");
+        clearBtn.style.display = "none";
+        wrapper.appendChild(clearBtn);
+        if (input) {
+          input.classList.add(`${PREFIX}-time-picker__input--with-suffix`);
+        }
+      } else if (clearBtn && !clearBtn.hasAttribute("aria-label")) {
         clearBtn.setAttribute("aria-label", "Hapus waktu");
       }
     }
@@ -1634,13 +1647,76 @@ 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) => {
+      let val = e.target.value;
+      const allowedChars = this.options.use12Hours ? /[0-9: apm]/gi : /[0-9:]/g;
+      val = (val.match(allowedChars) || []).join("");
+      let rawDigits = val.replace(/[^0-9]/g, "");
+      let formatted = "";
+      if (rawDigits.length > 0) {
+        formatted += rawDigits.slice(0, 2);
+        if (rawDigits.length > 2) {
+          formatted += ":" + rawDigits.slice(2, 4);
+          if (this.options.showSecond && rawDigits.length > 4) {
+            formatted += ":" + rawDigits.slice(4, 6);
+          }
+        }
+      }
+      if (this.options.use12Hours) {
+        const periodMatch = val.match(/(am|pm)/i);
+        if (periodMatch) {
+          formatted += " " + periodMatch[0].toUpperCase();
+        } else if (val.includes(" ")) {
+          formatted += " ";
+        }
+      }
+      let maxLen = 5;
+      if (this.options.showSecond) maxLen = 8;
+      if (this.options.use12Hours) maxLen += 3;
+      formatted = formatted.slice(0, maxLen);
+      e.target.value = formatted;
+      this.state.internalValue = formatted;
+      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(formatted)) {
+        this.state.currentTime = this.parseTime(formatted);
+        if (this.state.isOpen) this.buildPanel();
+      }
+      if (this.elements.clearBtn && this.options.allowClear) {
+        this.elements.clearBtn.style.display = formatted && !this.options.disabled ? "flex" : "none";
+      }
+      if (typeof this.options.onChange === "function") {
+        this.options.onChange(formatted);
+      }
+    });
+    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 +1725,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 +3919,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.3",
   "publishConfig": {
     "access": "public"
   },