@vuu-ui/vuu-ui-controls 0.13.33 → 0.13.35

package/cjs/time-input/MaskedInput.js

@@ -12,66 +12,36 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _input, _pattern, _selectionStart, _selectionEnd, _showTemplateWhileEditing, _value, _unitSelected, _halfUnitSelected;
+var _controlled, _input, _isFocused, _isIncrementalChange, _selectionStart, _selectionEnd, _value, _unitSelected, _halfUnitSelected;
 const NullSelection = { end: null, start: null };
 const FullSelection = { end: 0, start: 8 };
 const CursorAtEnd = { end: 8, start: 8 };
-const incrementTime = (value, unit) => {
-  if (value === "hh" || value == "mm" || value === "ss") {
-    return "00";
-  } else if (/\d\d/.test(value)) {
-    const num = parseInt(value);
-    if (unit === "hours" && num < 23) {
-      return `${num + 1}`.padStart(2, "0").slice(-2);
-    } else if (unit === "hours" && num === 23) {
-      return "00";
-    } else if (num < 59) {
-      return `${num + 1}`.padStart(2, "0").slice(-2);
-    } else if (num === 59) {
-      return "00";
-    }
-  }
-  return value;
-};
-const decrementTime = (value, unit) => {
-  if (value === "hh" || value == "mm" || value === "ss") {
-    return "00";
-  } else if (/\d\d/.test(value)) {
-    const num = parseInt(value);
-    if (unit === "hours" && num > 0) {
-      return `${num - 1}`.padStart(2, "0").slice(-2);
-    } else if (unit === "hours" && num === 0) {
-      return "23";
-    } else if (num > 0) {
-      return `${num - 1}`.padStart(2, "0").slice(-2);
-    } else if (num === 0) {
-      return "59";
-    }
-  }
-  return value;
-};
 class MaskedInput extends vuuUtils.EventEmitter {
-  constructor(value = "", inputEl = null, showTemplateWhileEditing = true) {
+  constructor(defaultValue, inputEl = null) {
     super();
-    __privateAdd(this, _input);
-    __privateAdd(this, _pattern, "hh:mm:ss");
+    __privateAdd(this, _controlled, false);
+    __privateAdd(this, _input, null);
+    __privateAdd(this, _isFocused, false);
+    __privateAdd(this, _isIncrementalChange, false);
     __privateAdd(this, _selectionStart, -1);
     __privateAdd(this, _selectionEnd, -1);
-    __privateAdd(this, _showTemplateWhileEditing, true);
     __privateAdd(this, _value);
     __privateAdd(this, _unitSelected);
     __privateAdd(this, _halfUnitSelected);
+    /**
+     * The change event is fired programatically. This will only be handled
+     * by a native event handler ( not a React handler). We handle this event
+     * and convert to a React (Synthetic) event.
+     */
+    __publicField(this, "emitSyntheticChangeEvent", (e) => {
+      const syntheticEvent = vuuUtils.createSyntheticEvent(
+        e
+      );
+      this.emit("change", syntheticEvent);
+    });
     __publicField(this, "focus", () => {
-      console.log("maskefinput focus");
       if (__privateGet(this, _input)) {
-        if (this.value === "") {
-          if (__privateGet(this, _showTemplateWhileEditing)) {
-            this.value = __privateGet(this, _input).value = __privateGet(this, _pattern);
-          } else {
-            this.value = __privateGet(this, _input).value = "00:00:00";
-            this.emit("change", this.value);
-          }
-        }
+        __privateSet(this, _isFocused, true);
         requestAnimationFrame(() => {
           this.select("hours");
           setTimeout(() => {
@@ -83,19 +53,22 @@ class MaskedInput extends vuuUtils.EventEmitter {
       }
     });
     __publicField(this, "blur", () => {
-      if (__privateGet(this, _input) && __privateGet(this, _input).value === __privateGet(this, _pattern)) {
-        this.value = __privateGet(this, _input).value = "";
-        this.emit("change", this.value);
-      } else {
-        this.removeSelection();
-      }
+      this.removeSelection();
+      __privateSet(this, _isFocused, false);
     });
-    __privateSet(this, _input, inputEl);
-    __privateSet(this, _showTemplateWhileEditing, showTemplateWhileEditing);
-    __privateSet(this, _value, value);
+    if (inputEl) {
+      this.input = inputEl;
+    }
+    __privateSet(this, _value, defaultValue ?? vuuUtils.zeroTime);
   }
   set input(el) {
+    if (__privateGet(this, _input)) {
+      throw Error(
+        "MaskedInput cannot be reused, create a new instance for a new input"
+      );
+    }
     __privateSet(this, _input, el);
+    el.addEventListener("change", this.emitSyntheticChangeEvent);
   }
   get cursorPos() {
     return this.selectionStart;
@@ -107,6 +80,9 @@ class MaskedInput extends vuuUtils.EventEmitter {
       __privateGet(this, _input).setSelectionRange(value, value);
     }
   }
+  get isFocused() {
+    return __privateGet(this, _isFocused);
+  }
   get selectionStart() {
     return __privateGet(this, _selectionStart);
   }
@@ -119,63 +95,75 @@ class MaskedInput extends vuuUtils.EventEmitter {
   set selectionEnd(value) {
     __privateSet(this, _selectionEnd, value);
   }
-  get hours() {
-    return __privateGet(this, _value).slice(0, 2);
-  }
-  set hours(value) {
-    if (__privateGet(this, _input)) {
-      const newValue = `${value}:${this.minutes}:${this.seconds}`;
-      __privateSet(this, _value, newValue);
-      __privateGet(this, _input).value = __privateGet(this, _value);
-      this.emit("change", newValue);
+  setValue(value) {
+    if (!__privateGet(this, _controlled)) {
+      __privateSet(this, _isIncrementalChange, false);
+      __privateSet(this, _value, value);
     }
-  }
-  get minutes() {
-    return __privateGet(this, _value).slice(3, 5);
-  }
-  set minutes(value) {
     if (__privateGet(this, _input)) {
-      const newValue = `${this.hours}:${value}:${this.seconds}`;
-      __privateSet(this, _value, newValue);
-      __privateGet(this, _input).value = __privateGet(this, _value);
-      this.emit("change", newValue);
+      __privateGet(this, _input).value = value;
+      __privateGet(this, _input).dispatchEvent(
+        new Event("change", {
+          bubbles: true,
+          composed: true
+        })
+      );
     }
   }
-  get seconds() {
-    return __privateGet(this, _value).slice(6, 8);
+  setUnitValue(unit, value) {
+    const newTimeString = vuuUtils.updateTimeString(__privateGet(this, _value), unit, value);
+    this.setValue(newTimeString);
   }
-  set seconds(value) {
-    if (__privateGet(this, _input)) {
-      const newValue = `${this.hours}:${this.minutes}:${value}`;
-      __privateSet(this, _value, newValue);
-      __privateGet(this, _input).value = __privateGet(this, _value);
-      this.emit("change", newValue);
+  getUnitValue(unit) {
+    switch (unit) {
+      case "hours":
+        return __privateGet(this, _value).slice(0, 2);
+      case "minutes":
+        return __privateGet(this, _value).slice(3, 5);
+      case "seconds":
+        return __privateGet(this, _value).slice(6, 8);
+      default:
+        throw Error(`[MaskedInout] invalue unit ${unit}`);
     }
   }
   get value() {
     return __privateGet(this, _value);
   }
+  /**
+   * Setting the value this way invokes 'controlled' mode
+   */
   set value(value) {
+    __privateSet(this, _controlled, true);
     __privateSet(this, _value, value);
+    if (this.isFocused) {
+      const isIncremental = __privateGet(this, _isIncrementalChange);
+      __privateSet(this, _isIncrementalChange, false);
+      requestAnimationFrame(() => {
+        if (isIncremental) {
+          this.restoreSelection();
+        } else {
+          this.advanceSelection();
+        }
+      });
+    }
   }
   clear(unit) {
     if (__privateGet(this, _input)) {
-      const { value } = this;
-      const pattern = __privateGet(this, _showTemplateWhileEditing) ? __privateGet(this, _pattern) : "00:00:00";
+      let newValue = __privateGet(this, _value);
       if (unit === "hours") {
-        this.value = pattern.slice(0, 2).concat(value.slice(2));
+        newValue = vuuUtils.zeroTimeUnit.concat(__privateGet(this, _value).slice(2));
       } else if (unit === "minutes") {
-        this.value = value.slice(0, 3).concat(pattern.slice(3, 5)).concat(value.slice(5));
+        newValue = __privateGet(this, _value).slice(0, 3).concat(vuuUtils.zeroTimeUnit).concat(__privateGet(this, _value).slice(5));
       } else if (unit === "seconds") {
-        this.value = value.slice(0, 6).concat(pattern.slice(6));
+        newValue = __privateGet(this, _value).slice(0, 6).concat(vuuUtils.zeroTimeUnit);
+      }
+      if (newValue !== __privateGet(this, _value)) {
+        this.setValue(newValue);
       }
-      __privateGet(this, _input).value = this.value;
-      this.emit("change", this.value);
     }
   }
   select(unit, halfUnit = false) {
     if (__privateGet(this, _input)) {
-      console.log(`select ${unit}`);
       const offset = halfUnit ? 1 : 0;
       if (unit === "hours") {
         this.selectionStart = __privateGet(this, _input).selectionStart = 0 + offset;
@@ -202,8 +190,25 @@ class MaskedInput extends vuuUtils.EventEmitter {
     __privateSet(this, _unitSelected, void 0);
     __privateSet(this, _halfUnitSelected, void 0);
   }
+  restoreSelection() {
+    if (__privateGet(this, _unitSelected)) {
+      this.select(__privateGet(this, _unitSelected));
+    }
+  }
+  advanceSelection() {
+    if (__privateGet(this, _unitSelected)) {
+      this.select(__privateGet(this, _unitSelected), true);
+    } else if (__privateGet(this, _halfUnitSelected) === "hours") {
+      this.select("minutes");
+    } else if (__privateGet(this, _halfUnitSelected) === "minutes") {
+      this.select("seconds");
+    } else if (__privateGet(this, _halfUnitSelected) === "seconds") {
+      this.select("seconds");
+    } else {
+      throw Error("unreachable code, in theory");
+    }
+  }
   moveFocus(direction) {
-    console.log(`move focus ${direction} selected ${__privateGet(this, _unitSelected)}`);
     if (direction === "right") {
       if (__privateGet(this, _unitSelected) === "hours" || __privateGet(this, _halfUnitSelected) === "hours") {
         this.select("minutes");
@@ -217,9 +222,7 @@ class MaskedInput extends vuuUtils.EventEmitter {
         this.select("hours");
       } else {
         const selection = this.getSelection();
-        console.log({ selection });
         if (selection === CursorAtEnd) {
-          console.log("cursor at end");
           this.select("seconds");
         }
       }
@@ -230,80 +233,42 @@ class MaskedInput extends vuuUtils.EventEmitter {
     __privateSet(this, _unitSelected, void 0);
     __privateSet(this, _value, value);
   }
+  getUnitAtCursorPos(cursorPos = this.cursorPos) {
+    if (cursorPos >= 0 && cursorPos < 3) {
+      return "hours";
+    } else if (cursorPos < 6) {
+      return "minutes";
+    } else if (cursorPos <= 8) {
+      return "seconds";
+    } else {
+      throw Error(
+        `[MaskedInput] getUnitAtCursorPos invalid cursor position ${cursorPos}`
+      );
+    }
+  }
   incrementValue() {
-    const { cursorPos } = this;
     if (__privateGet(this, _input)) {
-      if (cursorPos >= 0 && cursorPos <= 2) {
-        const value = this.hours;
-        const nextValue = incrementTime(value, "hours");
-        if (nextValue !== value) {
-          this.hours = nextValue;
-          this.select("hours");
-        }
-      } else if (cursorPos >= 3 && cursorPos < 6) {
-        const value = this.minutes;
-        const nextValue = incrementTime(value, "hours");
-        if (nextValue !== value) {
-          this.minutes = nextValue;
-          this.select("minutes");
-        }
-      } else if (cursorPos >= 5 && cursorPos <= 8) {
-        const value = this.seconds;
-        const nextValue = incrementTime(value, "seconds");
-        if (nextValue !== value) {
-          this.seconds = nextValue;
-          this.select("seconds");
-        }
-      }
+      __privateSet(this, _isIncrementalChange, true);
+      const unit = this.getUnitAtCursorPos();
+      const unitValue = this.getUnitValue(unit);
+      const newUnitValue = vuuUtils.incrementTimeUnitValue(unit, unitValue);
+      this.setUnitValue(unit, newUnitValue);
+      this.select(unit);
     }
   }
   decrementValue() {
-    const { cursorPos } = this;
     if (__privateGet(this, _input)) {
-      if (__privateGet(this, _unitSelected) === "hours") {
-        const value = this.hours;
-        const nextValue = decrementTime(value, "hours");
-        if (nextValue !== value) {
-          this.hours = nextValue;
-          this.select("hours");
-        }
-      } else if (__privateGet(this, _unitSelected)) {
-        const value = this[__privateGet(this, _unitSelected)];
-        const nextValue = decrementTime(value, __privateGet(this, _unitSelected));
-        if (nextValue !== value) {
-          this[__privateGet(this, _unitSelected)] = nextValue;
-          this.select(__privateGet(this, _unitSelected));
-        }
-      } else {
-        if (cursorPos >= 0 && cursorPos <= 2) {
-          const value = this.hours;
-          const nextValue = decrementTime(value, "hours");
-          if (nextValue !== value) {
-            this.hours = nextValue;
-            this.select("hours");
-          }
-        } else if (cursorPos >= 3 && cursorPos < 6) {
-          const value = this.minutes;
-          const nextValue = decrementTime(value, "hours");
-          if (nextValue !== value) {
-            this.minutes = nextValue;
-            this.select("minutes");
-          }
-        } else if (cursorPos >= 5 && cursorPos <= 8) {
-          const value = this.seconds;
-          const nextValue = decrementTime(value, "seconds");
-          if (nextValue !== value) {
-            this.seconds = nextValue;
-            this.select("seconds");
-          }
-        }
-      }
+      __privateSet(this, _isIncrementalChange, true);
+      const unit = this.getUnitAtCursorPos();
+      const unitValue = this.getUnitValue(unit);
+      const newUnitValue = vuuUtils.decrementTimeUnitValue(unit, unitValue);
+      this.setUnitValue(unit, newUnitValue);
+      this.select(unit);
     }
   }
   backspace() {
     if (__privateGet(this, _input)) {
-      const { cursorPos, value } = this;
-      const pattern = __privateGet(this, _showTemplateWhileEditing) ? __privateGet(this, _pattern) : "00:00:00";
+      const { cursorPos } = this;
       if (__privateGet(this, _unitSelected) === "seconds") {
         this.clear("seconds");
         this.select("minutes");
@@ -314,14 +279,12 @@ class MaskedInput extends vuuUtils.EventEmitter {
         this.clear("hours");
         this.select("hours");
       } else {
-        console.log("NEVER HAPPENS");
         if (cursorPos > 0) {
           const offset = this.selectionStart === 6 || this.selectionStart === 3 ? 2 : 1;
-          this.value = value.slice(0, cursorPos - offset).concat(pattern.slice(cursorPos - offset, cursorPos)).concat(value.slice(cursorPos));
+          const newValue = __privateGet(this, _value).slice(0, cursorPos - offset).concat(vuuUtils.zeroTime.slice(cursorPos - offset, cursorPos)).concat(__privateGet(this, _value).slice(cursorPos));
           this.selectionStart -= offset;
           this.selectionEnd -= offset;
-          __privateGet(this, _input).value = this.value;
-          this.emit("change", this.value);
+          this.setValue(newValue);
           requestAnimationFrame(() => {
             __privateGet(this, _input)?.setSelectionRange(
               __privateGet(this, _selectionStart),
@@ -336,44 +299,22 @@ class MaskedInput extends vuuUtils.EventEmitter {
     if (__privateGet(this, _input)) {
       const { cursorPos } = this;
       if (cursorPos < 8) {
-        this.value = this.value.split("").toSpliced(cursorPos, 1, key).join("");
-        __privateGet(this, _input).value = this.value;
-        if (__privateGet(this, _unitSelected)) {
-          this.select(__privateGet(this, _unitSelected), true);
-        } else if (__privateGet(this, _halfUnitSelected) === "hours") {
-          this.select("minutes");
-        } else if (__privateGet(this, _halfUnitSelected) === "minutes") {
-          this.select("seconds");
-        } else if (__privateGet(this, _halfUnitSelected) === "seconds") {
-          this.select("seconds");
+        const newValue = __privateGet(this, _value).split("").toSpliced(cursorPos, 1, key).join("");
+        this.setValue(newValue);
+        if (!vuuUtils.isValidTimeString(newValue)) {
+          if (__privateGet(this, _unitSelected)) {
+            this.select(__privateGet(this, _unitSelected));
+            __privateGet(this, _input).classList.add("invalid");
+          }
         } else {
-          console.log("NEVER HAPPENS");
-          if (this.selectionStart === 1 || this.selectionStart === 4) {
-            this.selectionStart += 2;
-            this.selectionEnd += 2;
-          } else {
-            this.selectionStart += 1;
-            this.selectionEnd += 1;
+          __privateGet(this, _input).classList.remove("invalid");
+          if (!__privateGet(this, _controlled)) {
+            this.advanceSelection();
           }
-          requestAnimationFrame(() => {
-            __privateGet(this, _input)?.setSelectionRange(
-              __privateGet(this, _selectionStart),
-              this.selectionEnd
-            );
-          });
         }
       }
     }
   }
-  getUnitAtCursorPos(cursorPos) {
-    if (cursorPos < 3) {
-      return "hours";
-    } else if (cursorPos < 6) {
-      return "minutes";
-    } else {
-      return "seconds";
-    }
-  }
   getSelection() {
     if (__privateGet(this, _input)) {
       const { selectionEnd, selectionStart } = __privateGet(this, _input);
@@ -395,6 +336,7 @@ class MaskedInput extends vuuUtils.EventEmitter {
   }
   click() {
     if (__privateGet(this, _input)) {
+      __privateSet(this, _isFocused, true);
       const selection = this.getSelection();
       if (selection === NullSelection) {
         this.select("hours");
@@ -419,11 +361,12 @@ class MaskedInput extends vuuUtils.EventEmitter {
     }
   }
 }
+_controlled = new WeakMap();
 _input = new WeakMap();
-_pattern = new WeakMap();
+_isFocused = new WeakMap();
+_isIncrementalChange = new WeakMap();
 _selectionStart = new WeakMap();
 _selectionEnd = new WeakMap();
-_showTemplateWhileEditing = new WeakMap();
 _value = new WeakMap();
 _unitSelected = new WeakMap();
 _halfUnitSelected = new WeakMap();

package/cjs/time-input/MaskedInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaskedInput.js","sources":["../../../../packages/vuu-ui-controls/src/time-input/MaskedInput.ts"],"sourcesContent":["import { EventEmitter, TimeString } from \"@vuu-ui/vuu-utils\";\n\ntype TimeUnit = \"hours\" | \"minutes\" | \"seconds\";\nexport type Digit = \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\";\n\ntype NullSelection = {\n  end: null;\n  start: null;\n};\ntype Selection =\n  | {\n      end: number;\n      start: number;\n    }\n  | NullSelection;\n\nconst NullSelection: NullSelection = { end: null, start: null };\nconst FullSelection: Selection = { end: 0, start: 8 };\nconst CursorAtEnd: Selection = { end: 8, start: 8 };\n\nconst incrementTime = (value: string, unit: TimeUnit) => {\n  if (value === \"hh\" || value == \"mm\" || value === \"ss\") {\n    return \"00\";\n  } else if (/\\d\\d/.test(value)) {\n    const num = parseInt(value);\n    if (unit === \"hours\" && num < 23) {\n      return `${num + 1}`.padStart(2, \"0\").slice(-2);\n    } else if (unit === \"hours\" && num === 23) {\n      return \"00\";\n    } else if (num < 59) {\n      return `${num + 1}`.padStart(2, \"0\").slice(-2);\n    } else if (num === 59) {\n      return \"00\";\n    }\n  }\n  return value;\n};\n\nconst decrementTime = (value: string, unit: TimeUnit) => {\n  if (value === \"hh\" || value == \"mm\" || value === \"ss\") {\n    return \"00\";\n  } else if (/\\d\\d/.test(value)) {\n    const num = parseInt(value);\n    if (unit === \"hours\" && num > 0) {\n      return `${num - 1}`.padStart(2, \"0\").slice(-2);\n    } else if (unit === \"hours\" && num === 0) {\n      return \"23\";\n    } else if (num > 0) {\n      return `${num - 1}`.padStart(2, \"0\").slice(-2);\n    } else if (num === 0) {\n      return \"59\";\n    }\n  }\n  return value;\n};\n\nexport type MaskedInputEvents = {\n  change: (value: TimeString) => void;\n};\n\nexport class MaskedInput extends EventEmitter<MaskedInputEvents> {\n  #input: HTMLInputElement | null;\n  #pattern = \"hh:mm:ss\";\n  #selectionStart = -1;\n  #selectionEnd = -1;\n  #showTemplateWhileEditing = true;\n  #value;\n  #unitSelected?: TimeUnit;\n  #halfUnitSelected?: TimeUnit;\n\n  constructor(\n    value = \"\",\n    inputEl: HTMLInputElement | null = null,\n    showTemplateWhileEditing = true,\n  ) {\n    super();\n    this.#input = inputEl;\n    this.#showTemplateWhileEditing = showTemplateWhileEditing;\n    this.#value = value;\n  }\n\n  set input(el: HTMLInputElement) {\n    this.#input = el;\n  }\n\n  get cursorPos() {\n    return this.selectionStart;\n  }\n  set cursorPos(value: number) {\n    this.selectionStart = value;\n    this.selectionEnd = value;\n    if (this.#input) {\n      this.#input.setSelectionRange(value, value);\n    }\n  }\n\n  get selectionStart() {\n    return this.#selectionStart;\n  }\n  set selectionStart(value: number) {\n    this.#selectionStart = value;\n  }\n\n  get selectionEnd() {\n    return this.#selectionEnd;\n  }\n  set selectionEnd(value: number) {\n    this.#selectionEnd = value;\n  }\n\n  get hours() {\n    return this.#value.slice(0, 2);\n  }\n\n  set hours(value: string) {\n    if (this.#input) {\n      const newValue = `${value}:${this.minutes}:${this.seconds}`;\n      this.#value = newValue;\n      this.#input.value = this.#value;\n      this.emit(\"change\", newValue as TimeString);\n    }\n  }\n\n  get minutes() {\n    return this.#value.slice(3, 5);\n  }\n\n  set minutes(value: string) {\n    if (this.#input) {\n      const newValue = `${this.hours}:${value}:${this.seconds}`;\n      this.#value = newValue;\n      this.#input.value = this.#value;\n      this.emit(\"change\", newValue as TimeString);\n    }\n  }\n\n  get seconds() {\n    return this.#value.slice(6, 8);\n  }\n\n  set seconds(value: string) {\n    if (this.#input) {\n      const newValue = `${this.hours}:${this.minutes}:${value}`;\n      this.#value = newValue;\n      this.#input.value = this.#value;\n      this.emit(\"change\", newValue as TimeString);\n    }\n  }\n\n  get value() {\n    return this.#value;\n  }\n\n  set value(value: string) {\n    this.#value = value;\n  }\n\n  clear(unit: TimeUnit) {\n    if (this.#input) {\n      const { value } = this;\n      const pattern = this.#showTemplateWhileEditing\n        ? this.#pattern\n        : \"00:00:00\";\n\n      if (unit === \"hours\") {\n        this.value = pattern.slice(0, 2).concat(value.slice(2));\n      } else if (unit === \"minutes\") {\n        this.value = value\n          .slice(0, 3)\n          .concat(pattern.slice(3, 5))\n          .concat(value.slice(5));\n      } else if (unit === \"seconds\") {\n        this.value = value.slice(0, 6).concat(pattern.slice(6));\n      }\n      this.#input.value = this.value;\n      this.emit(\"change\", this.value as TimeString);\n    }\n  }\n\n  select(unit: TimeUnit, halfUnit = false) {\n    if (this.#input) {\n      console.log(`select ${unit}`);\n      const offset = halfUnit ? 1 : 0;\n      if (unit === \"hours\") {\n        this.selectionStart = this.#input.selectionStart = 0 + offset;\n        this.selectionEnd = this.#input.selectionEnd = 2;\n      } else if (unit === \"minutes\") {\n        this.selectionStart = this.#input.selectionStart = 3 + offset;\n        this.selectionEnd = this.#input.selectionEnd = 5;\n      } else if (unit === \"seconds\") {\n        this.selectionStart = this.#input.selectionStart = 6 + offset;\n        this.selectionEnd = this.#input.selectionEnd = 8;\n      }\n      this.#input.setSelectionRange(this.selectionStart, this.selectionEnd);\n      if (halfUnit) {\n        this.#halfUnitSelected = unit;\n        this.#unitSelected = undefined;\n      } else {\n        this.#halfUnitSelected = undefined;\n        this.#unitSelected = unit;\n      }\n    }\n  }\n\n  removeSelection() {\n    this.#selectionStart = this.selectionEnd = 8;\n    this.#unitSelected = undefined;\n    this.#halfUnitSelected = undefined;\n  }\n\n  moveFocus(direction: \"left\" | \"right\") {\n    console.log(`move focus ${direction} selected ${this.#unitSelected}`);\n    if (direction === \"right\") {\n      if (\n        this.#unitSelected === \"hours\" ||\n        this.#halfUnitSelected === \"hours\"\n      ) {\n        this.select(\"minutes\");\n      } else if (\n        this.#unitSelected === \"minutes\" ||\n        this.#halfUnitSelected === \"minutes\"\n      ) {\n        this.select(\"seconds\");\n      }\n    } else {\n      if (\n        this.#unitSelected === \"seconds\" ||\n        this.#halfUnitSelected === \"seconds\"\n      ) {\n        this.select(\"minutes\");\n      } else if (\n        this.#unitSelected === \"minutes\" ||\n        this.#halfUnitSelected === \"minutes\"\n      ) {\n        this.select(\"hours\");\n      } else {\n        const selection = this.getSelection();\n        console.log({ selection });\n        if (selection === CursorAtEnd) {\n          console.log(\"cursor at end\");\n          this.select(\"seconds\");\n        }\n      }\n    }\n  }\n\n  pasteValue(value: TimeString) {\n    this.#halfUnitSelected = undefined;\n    this.#unitSelected = undefined;\n    this.#value = value;\n  }\n\n  incrementValue() {\n    const { cursorPos } = this;\n    if (this.#input) {\n      if (cursorPos >= 0 && cursorPos <= 2) {\n        const value = this.hours;\n        const nextValue = incrementTime(value, \"hours\");\n        if (nextValue !== value) {\n          this.hours = nextValue;\n          this.select(\"hours\");\n        }\n      } else if (cursorPos >= 3 && cursorPos < 6) {\n        const value = this.minutes;\n        const nextValue = incrementTime(value, \"hours\");\n        if (nextValue !== value) {\n          this.minutes = nextValue;\n          this.select(\"minutes\");\n        }\n      } else if (cursorPos >= 5 && cursorPos <= 8) {\n        const value = this.seconds;\n        const nextValue = incrementTime(value, \"seconds\");\n        if (nextValue !== value) {\n          this.seconds = nextValue;\n          this.select(\"seconds\");\n        }\n      }\n    }\n  }\n\n  decrementValue() {\n    const { cursorPos } = this;\n    if (this.#input) {\n      if (this.#unitSelected === \"hours\") {\n        const value = this.hours;\n        const nextValue = decrementTime(value, \"hours\");\n        if (nextValue !== value) {\n          this.hours = nextValue;\n          this.select(\"hours\");\n        }\n      } else if (this.#unitSelected) {\n        const value = this[this.#unitSelected];\n        const nextValue = decrementTime(value, this.#unitSelected);\n        if (nextValue !== value) {\n          this[this.#unitSelected] = nextValue;\n          this.select(this.#unitSelected);\n        }\n      } else {\n        if (cursorPos >= 0 && cursorPos <= 2) {\n          const value = this.hours;\n          const nextValue = decrementTime(value, \"hours\");\n          if (nextValue !== value) {\n            this.hours = nextValue;\n            this.select(\"hours\");\n          }\n        } else if (cursorPos >= 3 && cursorPos < 6) {\n          const value = this.minutes;\n          const nextValue = decrementTime(value, \"hours\");\n          if (nextValue !== value) {\n            this.minutes = nextValue;\n            this.select(\"minutes\");\n          }\n        } else if (cursorPos >= 5 && cursorPos <= 8) {\n          const value = this.seconds;\n          const nextValue = decrementTime(value, \"seconds\");\n          if (nextValue !== value) {\n            this.seconds = nextValue;\n            this.select(\"seconds\");\n          }\n        }\n      }\n    }\n  }\n\n  backspace() {\n    if (this.#input) {\n      const { cursorPos, value } = this;\n      const pattern = this.#showTemplateWhileEditing\n        ? this.#pattern\n        : \"00:00:00\";\n\n      if (this.#unitSelected === \"seconds\") {\n        this.clear(\"seconds\");\n        this.select(\"minutes\");\n      } else if (this.#unitSelected === \"minutes\") {\n        this.clear(\"minutes\");\n        this.select(\"hours\");\n      } else if (this.#unitSelected === \"hours\") {\n        this.clear(\"hours\");\n        this.select(\"hours\");\n      } else {\n        console.log(\"NEVER HAPPENS\");\n        if (cursorPos > 0) {\n          //   console.log(`Backspace val = ${this.#value} cursorPos ${cursorPos}`);\n          const offset =\n            this.selectionStart === 6 || this.selectionStart === 3 ? 2 : 1;\n          this.value = value\n            .slice(0, cursorPos - offset)\n            .concat(pattern.slice(cursorPos - offset, cursorPos))\n            .concat(value.slice(cursorPos));\n          this.selectionStart -= offset;\n          this.selectionEnd -= offset;\n          this.#input.value = this.value;\n          this.emit(\"change\", this.value as TimeString);\n\n          requestAnimationFrame(() => {\n            this.#input?.setSelectionRange(\n              this.#selectionStart,\n              this.selectionEnd,\n            );\n          });\n        }\n      }\n    }\n  }\n\n  update(key: Digit) {\n    if (this.#input) {\n      const { cursorPos } = this;\n      if (cursorPos < 8) {\n        this.value = this.value.split(\"\").toSpliced(cursorPos, 1, key).join(\"\");\n        this.#input.value = this.value;\n        if (this.#unitSelected) {\n          this.select(this.#unitSelected, true);\n        } else if (this.#halfUnitSelected === \"hours\") {\n          this.select(\"minutes\");\n        } else if (this.#halfUnitSelected === \"minutes\") {\n          this.select(\"seconds\");\n        } else if (this.#halfUnitSelected === \"seconds\") {\n          this.select(\"seconds\");\n        } else {\n          console.log(\"NEVER HAPPENS\");\n          if (this.selectionStart === 1 || this.selectionStart === 4) {\n            this.selectionStart += 2;\n            this.selectionEnd += 2;\n          } else {\n            this.selectionStart += 1;\n            this.selectionEnd += 1;\n          }\n          requestAnimationFrame(() => {\n            this.#input?.setSelectionRange(\n              this.#selectionStart,\n              this.selectionEnd,\n            );\n          });\n        }\n      }\n    }\n  }\n\n  getUnitAtCursorPos(cursorPos: number): TimeUnit {\n    if (cursorPos < 3) {\n      return \"hours\";\n    } else if (cursorPos < 6) {\n      return \"minutes\";\n    } else {\n      return \"seconds\";\n    }\n  }\n\n  private getSelection(): Selection {\n    if (this.#input) {\n      const { selectionEnd, selectionStart } = this.#input;\n      if (selectionEnd === null || selectionStart === null) {\n        return NullSelection;\n      } else if (selectionStart === 0 && selectionEnd === 8) {\n        return FullSelection;\n      } else if (selectionStart === 8 && selectionEnd === 8) {\n        return CursorAtEnd;\n      } else {\n        return {\n          end: selectionEnd,\n          start: selectionStart,\n        };\n      }\n    } else {\n      throw Error(`[MasketInput] selection referenced, but no input`);\n    }\n  }\n\n  click() {\n    if (this.#input) {\n      const selection = this.getSelection();\n      if (selection === NullSelection) {\n        this.select(\"hours\");\n      } else if (selection === FullSelection) {\n        // do nothing\n      } else {\n        const cursorPos = this.#input.selectionStart ?? 0;\n        this.select(this.getUnitAtCursorPos(cursorPos));\n      }\n    }\n  }\n  doubleClick() {\n    if (this.#input) {\n      //   if (this.value !== this.#pattern) {\n      const { selectionStart, selectionEnd } = this.#input;\n      if (selectionStart === null || selectionEnd === null) {\n        // do nothing\n        // } else if (selectionStart === selectionEnd) {\n      } else {\n        if (selectionStart < 3) {\n          this.select(\"hours\");\n        } else if (selectionStart < 6) {\n          this.select(\"minutes\");\n        } else if (selectionStart <= 8) {\n          this.select(\"seconds\");\n        }\n      }\n    }\n    // }\n  }\n\n  focus = () => {\n    console.log(\"maskefinput focus\");\n    if (this.#input) {\n      if (this.value === \"\") {\n        if (this.#showTemplateWhileEditing) {\n          this.value = this.#input.value = this.#pattern;\n        } else {\n          this.value = this.#input.value = \"00:00:00\";\n          this.emit(\"change\", this.value as TimeString);\n        }\n      }\n      requestAnimationFrame(() => {\n        this.select(\"hours\");\n        setTimeout(() => {\n          if (this.#input?.selectionStart !== 0) {\n            this.select(\"hours\");\n          }\n        }, 200);\n      });\n    }\n  };\n\n  blur = () => {\n    if (this.#input && this.#input.value === this.#pattern) {\n      this.value = this.#input.value = \"\";\n      this.emit(\"change\", this.value as TimeString);\n    } else {\n      this.removeSelection();\n    }\n  };\n}\n"],"names":["EventEmitter"],"mappings":"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"}
+{"version":3,"file":"MaskedInput.js","sources":["../../../../packages/vuu-ui-controls/src/time-input/MaskedInput.ts"],"sourcesContent":["import {\n  createSyntheticEvent,\n  decrementTimeUnitValue,\n  EventEmitter,\n  Hours,\n  incrementTimeUnitValue,\n  isValidTimeString,\n  Minutes,\n  Seconds,\n  TimeString,\n  TimeUnit,\n  TimeUnitValue,\n  updateTimeString,\n  zeroTime,\n  zeroTimeUnit,\n} from \"@vuu-ui/vuu-utils\";\nimport { ChangeEventHandler } from \"react\";\n\nexport type Digit = \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\";\n\ntype NullSelection = {\n  end: null;\n  start: null;\n};\ntype Selection =\n  | {\n      end: number;\n      start: number;\n    }\n  | NullSelection;\n\nconst NullSelection: NullSelection = { end: null, start: null };\nconst FullSelection: Selection = { end: 0, start: 8 };\nconst CursorAtEnd: Selection = { end: 8, start: 8 };\n\nexport type MaskedInputEvents = {\n  change: ChangeEventHandler<HTMLInputElement>;\n};\n\nexport class MaskedInput extends EventEmitter<MaskedInputEvents> {\n  #controlled = false;\n  #input: HTMLInputElement | null = null;\n  #isFocused = false;\n  #isIncrementalChange = false;\n  #selectionStart = -1;\n  #selectionEnd = -1;\n  #value;\n  #unitSelected?: TimeUnit;\n  #halfUnitSelected?: TimeUnit;\n\n  constructor(\n    defaultValue: TimeString | undefined,\n    inputEl: HTMLInputElement | null = null,\n  ) {\n    super();\n    if (inputEl) {\n      this.input = inputEl;\n    }\n    this.#value = defaultValue ?? zeroTime;\n  }\n\n  set input(el: HTMLInputElement) {\n    if (this.#input) {\n      throw Error(\n        \"MaskedInput cannot be reused, create a new instance for a new input\",\n      );\n    }\n    this.#input = el;\n    el.addEventListener(\"change\", this.emitSyntheticChangeEvent);\n  }\n\n  /**\n   * The change event is fired programatically. This will only be handled\n   * by a native event handler ( not a React handler). We handle this event\n   * and convert to a React (Synthetic) event.\n   */\n  private emitSyntheticChangeEvent = (e: Event) => {\n    const syntheticEvent = createSyntheticEvent(\n      e,\n    ) as React.ChangeEvent<HTMLInputElement>;\n\n    this.emit(\"change\", syntheticEvent);\n  };\n\n  get cursorPos() {\n    return this.selectionStart;\n  }\n  set cursorPos(value: number) {\n    this.selectionStart = value;\n    this.selectionEnd = value;\n    if (this.#input) {\n      this.#input.setSelectionRange(value, value);\n    }\n  }\n\n  get isFocused() {\n    return this.#isFocused;\n  }\n\n  get selectionStart() {\n    return this.#selectionStart;\n  }\n  set selectionStart(value: number) {\n    this.#selectionStart = value;\n  }\n\n  get selectionEnd() {\n    return this.#selectionEnd;\n  }\n  set selectionEnd(value: number) {\n    this.#selectionEnd = value;\n  }\n\n  private setValue(value: TimeString) {\n    if (!this.#controlled) {\n      this.#isIncrementalChange = false;\n      this.#value = value;\n    }\n\n    if (this.#input) {\n      // HM this updateds the input value, even if we are controlled.\n      // Thats not right, but if we don't update it, the event will\n      // not carry thwe right value. I don;t thibnk we can simulate\n      // the correct behaviour\n      this.#input.value = value;\n      // this triggers the native change event, which we convert\n      // // to synthetic event and emit in input setter above\n      this.#input.dispatchEvent(\n        new Event(\"change\", {\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n\n  private setUnitValue(unit: TimeUnit, value: Hours | Minutes | Seconds) {\n    const newTimeString = updateTimeString(this.#value, unit, value);\n    this.setValue(newTimeString);\n  }\n\n  private getUnitValue<T extends TimeUnit>(unit: T): TimeUnitValue<T> {\n    switch (unit) {\n      case \"hours\":\n        return this.#value.slice(0, 2) as TimeUnitValue<T>;\n      case \"minutes\":\n        return this.#value.slice(3, 5) as TimeUnitValue<T>;\n      case \"seconds\":\n        return this.#value.slice(6, 8) as TimeUnitValue<T>;\n      default:\n        throw Error(`[MaskedInout] invalue unit ${unit}`);\n    }\n  }\n\n  get value() {\n    return this.#value;\n  }\n\n  /**\n   * Setting the value this way invokes 'controlled' mode\n   */\n  set value(value: TimeString) {\n    this.#controlled = true;\n    this.#value = value;\n    if (this.isFocused) {\n      const isIncremental = this.#isIncrementalChange;\n      this.#isIncrementalChange = false;\n\n      requestAnimationFrame(() => {\n        if (isIncremental) {\n          this.restoreSelection();\n        } else {\n          this.advanceSelection();\n        }\n      });\n    }\n  }\n\n  clear(unit: TimeUnit) {\n    if (this.#input) {\n      let newValue = this.#value;\n      if (unit === \"hours\") {\n        newValue = zeroTimeUnit.concat(this.#value.slice(2)) as TimeString;\n      } else if (unit === \"minutes\") {\n        newValue = this.#value\n          .slice(0, 3)\n          .concat(zeroTimeUnit)\n          .concat(this.#value.slice(5)) as TimeString;\n      } else if (unit === \"seconds\") {\n        newValue = this.#value.slice(0, 6).concat(zeroTimeUnit) as TimeString;\n      }\n      if (newValue !== this.#value) {\n        this.setValue(newValue);\n      }\n    }\n  }\n\n  select(unit: TimeUnit, halfUnit = false) {\n    if (this.#input) {\n      const offset = halfUnit ? 1 : 0;\n      if (unit === \"hours\") {\n        this.selectionStart = this.#input.selectionStart = 0 + offset;\n        this.selectionEnd = this.#input.selectionEnd = 2;\n      } else if (unit === \"minutes\") {\n        this.selectionStart = this.#input.selectionStart = 3 + offset;\n        this.selectionEnd = this.#input.selectionEnd = 5;\n      } else if (unit === \"seconds\") {\n        this.selectionStart = this.#input.selectionStart = 6 + offset;\n        this.selectionEnd = this.#input.selectionEnd = 8;\n      }\n      this.#input.setSelectionRange(this.selectionStart, this.selectionEnd);\n      if (halfUnit) {\n        this.#halfUnitSelected = unit;\n        this.#unitSelected = undefined;\n      } else {\n        this.#halfUnitSelected = undefined;\n        this.#unitSelected = unit;\n      }\n    }\n  }\n\n  removeSelection() {\n    this.#selectionStart = this.selectionEnd = 8;\n    this.#unitSelected = undefined;\n    this.#halfUnitSelected = undefined;\n  }\n\n  restoreSelection() {\n    if (this.#unitSelected) {\n      this.select(this.#unitSelected);\n    }\n  }\n\n  advanceSelection() {\n    if (this.#unitSelected) {\n      this.select(this.#unitSelected, true);\n    } else if (this.#halfUnitSelected === \"hours\") {\n      this.select(\"minutes\");\n    } else if (this.#halfUnitSelected === \"minutes\") {\n      this.select(\"seconds\");\n    } else if (this.#halfUnitSelected === \"seconds\") {\n      this.select(\"seconds\");\n    } else {\n      throw Error(\"unreachable code, in theory\");\n    }\n  }\n\n  moveFocus(direction: \"left\" | \"right\") {\n    if (direction === \"right\") {\n      if (\n        this.#unitSelected === \"hours\" ||\n        this.#halfUnitSelected === \"hours\"\n      ) {\n        this.select(\"minutes\");\n      } else if (\n        this.#unitSelected === \"minutes\" ||\n        this.#halfUnitSelected === \"minutes\"\n      ) {\n        this.select(\"seconds\");\n      }\n    } else {\n      if (\n        this.#unitSelected === \"seconds\" ||\n        this.#halfUnitSelected === \"seconds\"\n      ) {\n        this.select(\"minutes\");\n      } else if (\n        this.#unitSelected === \"minutes\" ||\n        this.#halfUnitSelected === \"minutes\"\n      ) {\n        this.select(\"hours\");\n      } else {\n        const selection = this.getSelection();\n        if (selection === CursorAtEnd) {\n          this.select(\"seconds\");\n        }\n      }\n    }\n  }\n\n  pasteValue(value: TimeString) {\n    this.#halfUnitSelected = undefined;\n    this.#unitSelected = undefined;\n    this.#value = value;\n  }\n\n  private getUnitAtCursorPos(cursorPos = this.cursorPos): TimeUnit {\n    if (cursorPos >= 0 && cursorPos < 3) {\n      return \"hours\";\n    } else if (cursorPos < 6) {\n      return \"minutes\";\n    } else if (cursorPos <= 8) {\n      return \"seconds\";\n    } else {\n      throw Error(\n        `[MaskedInput] getUnitAtCursorPos invalid cursor position ${cursorPos}`,\n      );\n    }\n  }\n\n  incrementValue() {\n    if (this.#input) {\n      this.#isIncrementalChange = true;\n      const unit = this.getUnitAtCursorPos();\n      const unitValue = this.getUnitValue(unit);\n      const newUnitValue = incrementTimeUnitValue(unit, unitValue);\n      this.setUnitValue(unit, newUnitValue);\n      this.select(unit);\n    }\n  }\n\n  decrementValue() {\n    if (this.#input) {\n      this.#isIncrementalChange = true;\n      const unit = this.getUnitAtCursorPos();\n      const unitValue = this.getUnitValue(unit);\n      const newUnitValue = decrementTimeUnitValue(unit, unitValue);\n      this.setUnitValue(unit, newUnitValue);\n      this.select(unit);\n    }\n  }\n\n  backspace() {\n    if (this.#input) {\n      const { cursorPos } = this;\n\n      if (this.#unitSelected === \"seconds\") {\n        this.clear(\"seconds\");\n        this.select(\"minutes\");\n      } else if (this.#unitSelected === \"minutes\") {\n        this.clear(\"minutes\");\n        this.select(\"hours\");\n      } else if (this.#unitSelected === \"hours\") {\n        this.clear(\"hours\");\n        this.select(\"hours\");\n      } else {\n        if (cursorPos > 0) {\n          const offset =\n            this.selectionStart === 6 || this.selectionStart === 3 ? 2 : 1;\n          const newValue = this.#value\n            .slice(0, cursorPos - offset)\n            .concat(zeroTime.slice(cursorPos - offset, cursorPos))\n            .concat(this.#value.slice(cursorPos)) as TimeString;\n          this.selectionStart -= offset;\n          this.selectionEnd -= offset;\n          this.setValue(newValue);\n\n          requestAnimationFrame(() => {\n            this.#input?.setSelectionRange(\n              this.#selectionStart,\n              this.selectionEnd,\n            );\n          });\n        }\n      }\n    }\n  }\n\n  update(key: Digit) {\n    if (this.#input) {\n      const { cursorPos } = this;\n      if (cursorPos < 8) {\n        const newValue = this.#value\n          .split(\"\")\n          .toSpliced(cursorPos, 1, key)\n          .join(\"\") as TimeString;\n\n        this.setValue(newValue);\n\n        if (!isValidTimeString(newValue)) {\n          if (this.#unitSelected) {\n            this.select(this.#unitSelected);\n            this.#input.classList.add(\"invalid\");\n          }\n        } else {\n          this.#input.classList.remove(\"invalid\");\n\n          if (!this.#controlled) {\n            this.advanceSelection();\n          }\n        }\n      }\n    }\n  }\n\n  private getSelection(): Selection {\n    if (this.#input) {\n      const { selectionEnd, selectionStart } = this.#input;\n      if (selectionEnd === null || selectionStart === null) {\n        return NullSelection;\n      } else if (selectionStart === 0 && selectionEnd === 8) {\n        return FullSelection;\n      } else if (selectionStart === 8 && selectionEnd === 8) {\n        return CursorAtEnd;\n      } else {\n        return {\n          end: selectionEnd,\n          start: selectionStart,\n        };\n      }\n    } else {\n      throw Error(`[MasketInput] selection referenced, but no input`);\n    }\n  }\n\n  click() {\n    if (this.#input) {\n      this.#isFocused = true;\n      const selection = this.getSelection();\n      if (selection === NullSelection) {\n        this.select(\"hours\");\n      } else if (selection === FullSelection) {\n        // do nothing\n      } else {\n        const cursorPos = this.#input.selectionStart ?? 0;\n        this.select(this.getUnitAtCursorPos(cursorPos));\n      }\n    }\n  }\n  doubleClick() {\n    if (this.#input) {\n      const { selectionStart, selectionEnd } = this.#input;\n      if (selectionStart === null || selectionEnd === null) {\n        // do nothing\n      } else {\n        if (selectionStart < 3) {\n          this.select(\"hours\");\n        } else if (selectionStart < 6) {\n          this.select(\"minutes\");\n        } else if (selectionStart <= 8) {\n          this.select(\"seconds\");\n        }\n      }\n    }\n    // }\n  }\n\n  focus = () => {\n    if (this.#input) {\n      this.#isFocused = true;\n\n      requestAnimationFrame(() => {\n        this.select(\"hours\");\n        setTimeout(() => {\n          if (this.#input?.selectionStart !== 0) {\n            this.select(\"hours\");\n          }\n        }, 200);\n      });\n    }\n  };\n\n  blur = () => {\n    this.removeSelection();\n    this.#isFocused = false;\n  };\n}\n"],"names":["EventEmitter","createSyntheticEvent","zeroTime","updateTimeString","zeroTimeUnit","incrementTimeUnitValue","decrementTimeUnitValue","isValidTimeString"],"mappings":"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"}

package/cjs/time-input/TimeInput.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var timeInputCss = ".vuuTimeInput {\n    width: 80px;\n\n    &:focus::-webkit-input-placeholder {\n        color: transparent;\n    }\n}\n";
+var timeInputCss = ".salt-density-high .vuuTimeInput {\n    --time-input-width: 60px;\n}\n.salt-density-medium .vuuTimeInput {\n    --time-input-width: 70px;\n}\n.salt-density-low .vuuTimeInput {\n    --time-input-width: 80px;\n}\n.salt-density-touch .vuuTimeInput {\n    --time-input-width: 90px;\n}\n\n.vuuTimeInput {\n    border-width: 1px;\n    font-family: var(--salt-typography-fontFamily);\n    width: var(--vuuTimeInput-width, var(--time-input-width));\n\n    &:focus::-webkit-input-placeholder {\n        color: transparent;\n    }\n\n}\n\n.invalid {\n    border-color: red;\n}\n\n";
 
 module.exports = timeInputCss;
 //# sourceMappingURL=TimeInput.css.js.map

package/cjs/time-input/TimeInput.js

@@ -17,7 +17,7 @@ const TimeInput = React.forwardRef(
     onChange,
     onCommit,
     placeholder = "hh:mm:ss",
-    showTemplateWhileEditing,
+    value,
     ...htmlAttributes
   }, ref) {
     const targetWindow = window.useWindow();
@@ -31,7 +31,7 @@ const TimeInput = React.forwardRef(
       defaultValue,
       onChange,
       onCommit,
-      showTemplateWhileEditing
+      value
     });
     return /* @__PURE__ */ React.createElement(
       "input",
@@ -43,8 +43,10 @@ const TimeInput = React.forwardRef(
         defaultValue,
         key: defaultValue,
         placeholder,
+        readOnly: true,
         ref: core.useForkRef(ref, inputRef),
-        spellCheck: "false"
+        spellCheck: "false",
+        value
       }
     );
   }