@vuu-ui/vuu-ui-controls 0.13.24 → 0.13.25

package/cjs/index.js

@@ -43,6 +43,7 @@ var TabNextAction = require('./tabs-next/TabNextAction.js');
 var Tabstrip = require('./tabstrip/Tabstrip.js');
 var Tab = require('./tabstrip/Tab.js');
 var tabstripDomUtils = require('./tabstrip/tabstrip-dom-utils.js');
+var TimeInput = require('./time-input/TimeInput.js');
 var Toolbar = require('./toolbar/Toolbar.js');
 var escapeRegExp = require('./utils/escapeRegExp.js');
 var isOverflowElement = require('./utils/isOverflowElement.js');
@@ -53,6 +54,7 @@ var VuuInput = require('./vuu-input/VuuInput.js');
 var VuuTypeaheadInput = require('./vuu-typeahead-input/VuuTypeaheadInput.js');
 var ContextPanelProvider = require('./context-panel-provider/ContextPanelProvider.js');
 var SortableList = require('./sortable-list/SortableList.js');
+var VuuTimePicker = require('./vuu-time-picker/VuuTimePicker.js');
 
 
 
@@ -143,6 +145,7 @@ exports.Tabstrip = Tabstrip.Tabstrip;
 exports.Tab = Tab.Tab;
 exports.getIndexOfEditedItem = tabstripDomUtils.getIndexOfEditedItem;
 exports.getIndexOfSelectedTab = tabstripDomUtils.getIndexOfSelectedTab;
+exports.TimeInput = TimeInput.TimeInput;
 exports.Toolbar = Toolbar.Toolbar;
 exports.escapeRegExp = escapeRegExp.escapeRegExp;
 exports.isOverflowElement = isOverflowElement.isOverflowElement;
@@ -156,4 +159,5 @@ exports.useContextPanel = ContextPanelProvider.useContextPanel;
 exports.useHideContextPanel = ContextPanelProvider.useHideContextPanel;
 exports.SortableList = SortableList.SortableList;
 exports.SortableOption = SortableList.SortableOption;
+exports.VuuTimePicker = VuuTimePicker.VuuTimePicker;
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/time-input/MaskedInput.js

@@ -0,0 +1,387 @@
+'use strict';
+
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+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;
+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 {
+  constructor(value = "", inputEl = null, showTemplateWhileEditing = true) {
+    __privateAdd(this, _input);
+    __privateAdd(this, _pattern, "hh:mm:ss");
+    __privateAdd(this, _selectionStart, -1);
+    __privateAdd(this, _selectionEnd, -1);
+    __privateAdd(this, _showTemplateWhileEditing, true);
+    __privateAdd(this, _value);
+    __privateAdd(this, _unitSelected);
+    __privateAdd(this, _halfUnitSelected);
+    __publicField(this, "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";
+          }
+        }
+        requestAnimationFrame(() => {
+          this.select("hours");
+          setTimeout(() => {
+            if (__privateGet(this, _input)?.selectionStart !== 0) {
+              this.select("hours");
+            }
+          }, 200);
+        });
+      }
+    });
+    __publicField(this, "blur", () => {
+      if (__privateGet(this, _input) && __privateGet(this, _input).value === __privateGet(this, _pattern)) {
+        this.value = __privateGet(this, _input).value = "";
+      } else {
+        this.removeSelection();
+      }
+    });
+    __privateSet(this, _input, inputEl);
+    __privateSet(this, _showTemplateWhileEditing, showTemplateWhileEditing);
+    __privateSet(this, _value, value);
+  }
+  set input(el) {
+    __privateSet(this, _input, el);
+  }
+  get cursorPos() {
+    return this.selectionStart;
+  }
+  set cursorPos(value) {
+    this.selectionStart = value;
+    this.selectionEnd = value;
+    if (__privateGet(this, _input)) {
+      __privateGet(this, _input).setSelectionRange(value, value);
+    }
+  }
+  get selectionStart() {
+    return __privateGet(this, _selectionStart);
+  }
+  set selectionStart(value) {
+    __privateSet(this, _selectionStart, value);
+  }
+  get selectionEnd() {
+    return __privateGet(this, _selectionEnd);
+  }
+  set selectionEnd(value) {
+    __privateSet(this, _selectionEnd, value);
+  }
+  get hours() {
+    return __privateGet(this, _value).slice(0, 2);
+  }
+  set hours(value) {
+    if (__privateGet(this, _input)) {
+      __privateSet(this, _value, `${value}:${this.minutes}:${this.seconds}`);
+      __privateGet(this, _input).value = __privateGet(this, _value);
+    }
+  }
+  get minutes() {
+    return __privateGet(this, _value).slice(3, 5);
+  }
+  set minutes(value) {
+    if (__privateGet(this, _input)) {
+      __privateSet(this, _value, `${this.hours}:${value}:${this.seconds}`);
+      __privateGet(this, _input).value = __privateGet(this, _value);
+    }
+  }
+  get seconds() {
+    return __privateGet(this, _value).slice(6, 8);
+  }
+  set seconds(value) {
+    if (__privateGet(this, _input)) {
+      __privateSet(this, _value, `${this.hours}:${this.minutes}:${value}`);
+      __privateGet(this, _input).value = __privateGet(this, _value);
+    }
+  }
+  get value() {
+    return __privateGet(this, _value);
+  }
+  set value(value) {
+    __privateSet(this, _value, value);
+  }
+  get selection() {
+    const { selectionStart, selectionEnd } = this;
+    if (selectionStart === -1 || selectionEnd === -1) {
+      return "";
+    } else if (selectionStart === selectionEnd) {
+      return "";
+    } else {
+      return this.value;
+    }
+  }
+  clear(unit) {
+    if (__privateGet(this, _input)) {
+      const { value } = this;
+      const pattern = __privateGet(this, _showTemplateWhileEditing) ? __privateGet(this, _pattern) : "00:00:00";
+      if (unit === "hours") {
+        this.value = pattern.slice(0, 2).concat(value.slice(2));
+      } else if (unit === "minutes") {
+        this.value = value.slice(0, 3).concat(pattern.slice(3, 5)).concat(value.slice(5));
+      } else if (unit === "seconds") {
+        this.value = value.slice(0, 6).concat(pattern.slice(6));
+      }
+      __privateGet(this, _input).value = this.value;
+    }
+  }
+  select(unit, halfUnit = false) {
+    if (__privateGet(this, _input)) {
+      const offset = halfUnit ? 1 : 0;
+      if (unit === "hours") {
+        this.selectionStart = __privateGet(this, _input).selectionStart = 0 + offset;
+        this.selectionEnd = __privateGet(this, _input).selectionEnd = 2;
+      } else if (unit === "minutes") {
+        this.selectionStart = __privateGet(this, _input).selectionStart = 3 + offset;
+        this.selectionEnd = __privateGet(this, _input).selectionEnd = 5;
+      } else if (unit === "seconds") {
+        this.selectionStart = __privateGet(this, _input).selectionStart = 6 + offset;
+        this.selectionEnd = __privateGet(this, _input).selectionEnd = 8;
+      }
+      __privateGet(this, _input).setSelectionRange(this.selectionStart, this.selectionEnd);
+      if (halfUnit) {
+        __privateSet(this, _halfUnitSelected, unit);
+        __privateSet(this, _unitSelected, void 0);
+      } else {
+        __privateSet(this, _halfUnitSelected, void 0);
+        __privateSet(this, _unitSelected, unit);
+      }
+    }
+  }
+  removeSelection() {
+    __privateSet(this, _selectionStart, this.selectionEnd = 8);
+    __privateSet(this, _unitSelected, void 0);
+    __privateSet(this, _halfUnitSelected, void 0);
+  }
+  moveFocus(direction) {
+    if (direction === "right") {
+      if (__privateGet(this, _unitSelected) === "hours" || __privateGet(this, _halfUnitSelected) === "hours") {
+        this.select("minutes");
+      } else if (__privateGet(this, _unitSelected) === "minutes" || __privateGet(this, _halfUnitSelected) === "minutes") {
+        this.select("seconds");
+      }
+    } else {
+      if (__privateGet(this, _unitSelected) === "seconds" || __privateGet(this, _halfUnitSelected) === "seconds") {
+        this.select("minutes");
+      } else if (__privateGet(this, _unitSelected) === "minutes" || __privateGet(this, _halfUnitSelected) === "minutes") {
+        this.select("hours");
+      }
+    }
+  }
+  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");
+        }
+      }
+    }
+  }
+  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");
+          }
+        }
+      }
+    }
+  }
+  backspace() {
+    if (__privateGet(this, _input)) {
+      const { cursorPos, value } = this;
+      const pattern = __privateGet(this, _showTemplateWhileEditing) ? __privateGet(this, _pattern) : "00:00:00";
+      if (__privateGet(this, _unitSelected) === "seconds") {
+        this.clear("seconds");
+        this.select("minutes");
+      } else if (__privateGet(this, _unitSelected) === "minutes") {
+        this.clear("minutes");
+        this.select("hours");
+      } else if (__privateGet(this, _unitSelected) === "hours") {
+        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));
+          this.selectionStart -= offset;
+          this.selectionEnd -= offset;
+          __privateGet(this, _input).value = this.value;
+          requestAnimationFrame(() => {
+            __privateGet(this, _input)?.setSelectionRange(
+              __privateGet(this, _selectionStart),
+              this.selectionEnd
+            );
+          });
+        }
+      }
+    }
+  }
+  update(key) {
+    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");
+        } 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;
+          }
+          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";
+    }
+  }
+  click() {
+    if (__privateGet(this, _input)) {
+      const cursorPos = __privateGet(this, _input).selectionStart ?? 0;
+      this.select(this.getUnitAtCursorPos(cursorPos));
+    }
+  }
+  doubleClick() {
+    if (__privateGet(this, _input)) {
+      const { selectionStart, selectionEnd } = __privateGet(this, _input);
+      if (selectionStart === null || selectionEnd === null) ; else {
+        if (selectionStart < 3) {
+          this.select("hours");
+        } else if (selectionStart < 6) {
+          this.select("minutes");
+        } else if (selectionStart <= 8) {
+          this.select("seconds");
+        }
+      }
+    }
+  }
+}
+_input = new WeakMap();
+_pattern = new WeakMap();
+_selectionStart = new WeakMap();
+_selectionEnd = new WeakMap();
+_showTemplateWhileEditing = new WeakMap();
+_value = new WeakMap();
+_unitSelected = new WeakMap();
+_halfUnitSelected = new WeakMap();
+
+exports.MaskedInput = MaskedInput;
+//# sourceMappingURL=MaskedInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MaskedInput.js","sources":["../../../../packages/vuu-ui-controls/src/time-input/MaskedInput.ts"],"sourcesContent":["type TimeUnit = \"hours\" | \"minutes\" | \"seconds\";\nexport type Digit = \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\";\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 class MaskedInput {\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    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      this.#value = `${value}:${this.minutes}:${this.seconds}`;\n      this.#input.value = this.#value;\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      this.#value = `${this.hours}:${value}:${this.seconds}`;\n      this.#input.value = this.#value;\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      this.#value = `${this.hours}:${this.minutes}:${value}`;\n      this.#input.value = this.#value;\n    }\n  }\n\n  get value() {\n    return this.#value;\n  }\n\n  set value(value: string) {\n    this.#value = value;\n  }\n\n  get selection() {\n    const { selectionStart, selectionEnd } = this;\n    if (selectionStart === -1 || selectionEnd === -1) {\n      return \"\";\n    } else if (selectionStart === selectionEnd) {\n      return \"\";\n    } else {\n      return this.value;\n    }\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    }\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  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      }\n    }\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\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  click() {\n    if (this.#input) {\n      const cursorPos = this.#input.selectionStart ?? 0;\n      this.select(this.getUnitAtCursorPos(cursorPos));\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    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        }\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    } else {\n      this.removeSelection();\n    }\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var timeInputCss = ".TimeInput {\n    font-family: monospace;\n    width: 80px;\n\n\n&:focus::-webkit-input-placeholder {\n    color: transparent;\n}\n}\n";
+
+module.exports = timeInputCss;
+//# sourceMappingURL=TimeInput.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/time-input/TimeInput.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var useTimeInput = require('./useTimeInput.js');
+var TimeInput$1 = require('./TimeInput.css.js');
+
+const zeroTime = "00:00:00";
+const TimeInput = ({
+  className,
+  date,
+  defaultValue = zeroTime,
+  onCommit,
+  placeholder = "hh:mm:ss",
+  showTemplateWhileEditing
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-time-input",
+    css: TimeInput$1,
+    window: targetWindow
+  });
+  const { inputRef, eventHandlers } = useTimeInput.useTimeInput({
+    date,
+    defaultValue,
+    onCommit,
+    showTemplateWhileEditing
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ...eventHandlers,
+      "aria-placeholder": placeholder,
+      className: cx("TimeInput", className),
+      defaultValue,
+      placeholder,
+      ref: inputRef,
+      spellCheck: "false"
+    }
+  );
+};
+
+exports.TimeInput = TimeInput;
+//# sourceMappingURL=TimeInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.js","sources":["../../../../packages/vuu-ui-controls/src/time-input/TimeInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { TimeInputHookProps, useTimeInput } from \"./useTimeInput\";\n\nimport timeInputCss from \"./TimeInput.css\";\nimport { TimeString } from \"@vuu-ui/vuu-utils\";\n\nconst zeroTime: TimeString = \"00:00:00\";\n\nexport interface TimeInputProps\n  extends TimeInputHookProps,\n    Omit<HTMLAttributes<HTMLInputElement>, \"defaultValue\">,\n    Partial<Pick<HTMLInputElement, \"placeholder\">> {}\n\nexport const TimeInput = ({\n  className,\n  date,\n  defaultValue = zeroTime,\n  onCommit,\n  placeholder = \"hh:mm:ss\",\n  showTemplateWhileEditing,\n}: TimeInputProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-time-input\",\n    css: timeInputCss,\n    window: targetWindow,\n  });\n\n  const { inputRef, eventHandlers } = useTimeInput({\n    date,\n    defaultValue,\n    onCommit,\n    showTemplateWhileEditing,\n  });\n\n  return (\n    <input\n      {...eventHandlers}\n      aria-placeholder={placeholder}\n      className={cx(\"TimeInput\", className)}\n      defaultValue={defaultValue}\n      placeholder={placeholder}\n      ref={inputRef}\n      spellCheck=\"false\"\n    />\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","timeInputCss","useTimeInput","jsx"],"mappings":";;;;;;;;;AASA,MAAM,QAAuB,GAAA,UAAA;AAOtB,MAAM,YAAY,CAAC;AAAA,EACxB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAe,GAAA,QAAA;AAAA,EACf,QAAA;AAAA,EACA,WAAc,GAAA,UAAA;AAAA,EACd;AACF,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,aAAc,EAAA,GAAIC,yBAAa,CAAA;AAAA,IAC/C,IAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,aAAA;AAAA,MACJ,kBAAkB,EAAA,WAAA;AAAA,MAClB,SAAA,EAAW,EAAG,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,MACpC,YAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAK,EAAA,QAAA;AAAA,MACL,UAAW,EAAA;AAAA;AAAA,GACb;AAEJ;;;;"}

package/cjs/time-input/useTimeInput.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var React = require('react');
+var MaskedInput = require('./MaskedInput.js');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const isDigit = (char) => char.length === 1 && /[0-9]/.test(char);
+const useTimeInput = ({
+  defaultValue,
+  onCommit,
+  showTemplateWhileEditing = true
+}) => {
+  const maskedInput = React.useMemo(
+    () => new MaskedInput.MaskedInput(defaultValue, null, showTemplateWhileEditing),
+    [defaultValue, showTemplateWhileEditing]
+  );
+  const setInputEl = React.useCallback(
+    (el) => {
+      if (el) {
+        maskedInput.input = el;
+      }
+    },
+    [maskedInput]
+  );
+  const back = React.useRef(false);
+  const commitValue = React.useCallback(
+    (evt, value) => {
+      if (vuuUtils.stringIsValidTime(value)) {
+        onCommit(evt, vuuUtils.Time(value).asDate(), "text-input");
+      } else if (value === "hh:mm:ss") {
+        console.log("no value set");
+      } else {
+        console.log(`value is not valid`);
+      }
+    },
+    [onCommit]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      console.log(`handleKeyDown ${e.key} cursorPos ${maskedInput.cursorPos}`);
+      if (e.key === "Backspace") {
+        maskedInput.backspace();
+        back.current = true;
+      } else if (isDigit(e.key)) {
+        maskedInput.update(e.key);
+      } else if (e.key === "ArrowLeft") {
+        maskedInput.moveFocus("left");
+      } else if (e.key === "ArrowRight") {
+        maskedInput.moveFocus("right");
+      } else if (e.key === "ArrowUp") {
+        maskedInput.incrementValue();
+      } else if (e.key === "ArrowDown") {
+        maskedInput.decrementValue();
+      } else if (e.key === "v" && e.metaKey) {
+        return;
+      } else if (e.key === "Tab") {
+        return;
+      } else if (e.key === "Enter") {
+        commitValue(e, maskedInput.value);
+      }
+      e.preventDefault();
+    },
+    [commitValue, maskedInput]
+  );
+  const handleClick = React.useCallback(() => {
+    maskedInput.click();
+  }, [maskedInput]);
+  const handleDoubleClick = React.useCallback(() => {
+    maskedInput.doubleClick();
+  }, [maskedInput]);
+  const handlePaste = React.useCallback(
+    (e) => {
+      console.log(`paste ${e.clipboardData.getData("text")}`);
+    },
+    []
+  );
+  return {
+    inputRef: setInputEl,
+    eventHandlers: {
+      onBlur: maskedInput.blur,
+      onClick: handleClick,
+      onDoubleClick: handleDoubleClick,
+      onFocus: maskedInput.focus,
+      onKeyDown: handleKeyDown,
+      // onMouseUp: handleMouseUp,
+      onPaste: handlePaste
+    }
+  };
+};
+
+exports.useTimeInput = useTimeInput;
+//# sourceMappingURL=useTimeInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeInput.js","sources":["../../../../packages/vuu-ui-controls/src/time-input/useTimeInput.ts"],"sourcesContent":["import { CommitHandler, DateStringISO, TimeString } from \"@vuu-ui/vuu-utils\";\nimport {\n  ClipboardEventHandler,\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { Digit, MaskedInput } from \"./MaskedInput\";\nimport { stringIsValidTime, Time } from \"@vuu-ui/vuu-utils\";\n\nconst isDigit = (char: string): char is Digit =>\n  char.length === 1 && /[0-9]/.test(char);\n\nexport interface TimeInputHookProps {\n  date?: Date | DateStringISO;\n  defaultValue?: TimeString;\n  onCommit: CommitHandler<HTMLInputElement, Date>;\n  showTemplateWhileEditing?: boolean;\n}\n\nexport const useTimeInput = ({\n  defaultValue,\n  onCommit,\n  showTemplateWhileEditing = true,\n}: TimeInputHookProps) => {\n  const maskedInput = useMemo<MaskedInput>(\n    () => new MaskedInput(defaultValue, null, showTemplateWhileEditing),\n    [defaultValue, showTemplateWhileEditing],\n  );\n\n  const setInputEl = useCallback<RefCallback<HTMLInputElement>>(\n    (el) => {\n      if (el) {\n        maskedInput.input = el;\n      }\n    },\n    [maskedInput],\n  );\n  const back = useRef(false);\n\n  const commitValue = useCallback<CommitHandler<HTMLInputElement, string>>(\n    (evt, value) => {\n      if (stringIsValidTime(value)) {\n        onCommit(evt, Time(value).asDate(), \"text-input\");\n      } else if (value === \"hh:mm:ss\") {\n        console.log(\"no value set\");\n        // onCommit(evt, Boolean(value), \"text-input\");\n      } else {\n        console.log(`value is not valid`);\n        // onCommit(evt, value, \"text-input\");\n      }\n    },\n    [onCommit],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n    (e) => {\n      console.log(`handleKeyDown ${e.key} cursorPos ${maskedInput.cursorPos}`);\n      if (e.key === \"Backspace\") {\n        maskedInput.backspace();\n        back.current = true;\n      } else if (isDigit(e.key)) {\n        maskedInput.update(e.key);\n      } else if (e.key === \"ArrowLeft\") {\n        maskedInput.moveFocus(\"left\");\n      } else if (e.key === \"ArrowRight\") {\n        maskedInput.moveFocus(\"right\");\n      } else if (e.key === \"ArrowUp\") {\n        maskedInput.incrementValue();\n      } else if (e.key === \"ArrowDown\") {\n        maskedInput.decrementValue();\n      } else if (e.key === \"v\" && e.metaKey) {\n        // keyboard paste, do not prevent default\n        return;\n      } else if (e.key === \"Tab\") {\n        return;\n      } else if (e.key === \"Enter\") {\n        commitValue(e, maskedInput.value);\n      }\n      e.preventDefault();\n    },\n    [commitValue, maskedInput],\n  );\n\n  const handleClick = useCallback(() => {\n    maskedInput.click();\n  }, [maskedInput]);\n\n  const handleDoubleClick = useCallback(() => {\n    maskedInput.doubleClick();\n  }, [maskedInput]);\n\n  const handlePaste = useCallback<ClipboardEventHandler<HTMLInputElement>>(\n    (e) => {\n      console.log(`paste ${e.clipboardData.getData(\"text\")}`);\n    },\n    [],\n  );\n\n  // const handleMouseUp = useCallback<MouseEventHandler<HTMLInputElement>>(\n  //   (e) => {\n  //     const input = e.target as HTMLInputElement;\n  //     console.log(\n  //       `mouseup sytart ${input.selectionStart} end ${input.selectionEnd}`,\n  //     );\n  //     if (input.selectionStart === 0 && input.selectionEnd === 8) {\n  //       console.log(\"full select\");\n  //     }\n  //   },\n  //   [],\n  // );\n\n  return {\n    inputRef: setInputEl,\n    eventHandlers: {\n      onBlur: maskedInput.blur,\n      onClick: handleClick,\n      onDoubleClick: handleDoubleClick,\n      onFocus: maskedInput.focus,\n      onKeyDown: handleKeyDown,\n      // onMouseUp: handleMouseUp,\n      onPaste: handlePaste,\n    },\n  };\n};\n"],"names":["useMemo","MaskedInput","useCallback","useRef","stringIsValidTime","Time"],"mappings":"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"}

package/cjs/vuu-time-picker/VuuTimePicker.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var timePickerCss = ".vuuTimePicker {\n    display: inline-block;\n}";
+
+module.exports = timePickerCss;
+//# sourceMappingURL=VuuTimePicker.css.js.map

package/cjs/vuu-time-picker/VuuTimePicker.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VuuTimePicker.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}