@idds/js 1.6.1 → 1.6.3

package/dist/index.iife.js

@@ -1299,7 +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;
+        input.readOnly = !!this.options.readonly;
         wrapper.appendChild(input);
         if (this.options.allowClear) {
           clearBtn = document.createElement("button");
@@ -1315,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");
         }
       }
@@ -1620,18 +1634,44 @@ var InaUI = (() => {
         }
       });
       this.elements.input.addEventListener("input", (e) => {
-        const val = e.target.value;
-        this.state.internalValue = val;
+        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(val)) {
-          this.state.currentTime = this.parseTime(val);
+        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 = val && !this.options.disabled ? "flex" : "none";
+          this.elements.clearBtn.style.display = formatted && !this.options.disabled ? "flex" : "none";
         }
         if (typeof this.options.onChange === "function") {
-          this.options.onChange(val);
+          this.options.onChange(formatted);
         }
       });
       this.elements.input.addEventListener("click", (e) => {

package/dist/index.js

@@ -1318,7 +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;
+      input.readOnly = !!this.options.readonly;
       wrapper.appendChild(input);
       if (this.options.allowClear) {
         clearBtn = document.createElement("button");
@@ -1334,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");
       }
     }
@@ -1639,18 +1653,44 @@ var TimePicker = class {
       }
     });
     this.elements.input.addEventListener("input", (e) => {
-      const val = e.target.value;
-      this.state.internalValue = val;
+      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(val)) {
-        this.state.currentTime = this.parseTime(val);
+      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 = val && !this.options.disabled ? "flex" : "none";
+        this.elements.clearBtn.style.display = formatted && !this.options.disabled ? "flex" : "none";
       }
       if (typeof this.options.onChange === "function") {
-        this.options.onChange(val);
+        this.options.onChange(formatted);
       }
     });
     this.elements.input.addEventListener("click", (e) => {

package/package.json

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