@vuu-ui/vuu-ui-controls 2.1.19-beta.2 → 2.1.19-beta.3

package/cjs/tabstrip/useTabstrip.js

@@ -0,0 +1,233 @@
+'use strict';
+
+var React = require('react');
+require('../drag-drop/DragDropProvider.js');
+var useDragDrop = require('../drag-drop/useDragDrop.js');
+require('@vuu-ui/vuu-utils');
+var TabMenuOptions = require('./TabMenuOptions.js');
+var tabstripDomUtils = require('./tabstrip-dom-utils.js');
+var useAnimatedSelectionThumb = require('./useAnimatedSelectionThumb.js');
+var useKeyboardNavigation = require('./useKeyboardNavigation.js');
+var useSelection = require('./useSelection.js');
+
+const editKeys = /* @__PURE__ */ new Set(["Enter", " "]);
+const isEditKey = (key) => editKeys.has(key);
+const useTabstrip = ({
+  activeTabIndex: activeTabIndexProp,
+  allowDragDrop,
+  animateSelectionThumb,
+  containerRef,
+  onActiveChange,
+  onAddTab,
+  onCloseTab,
+  onExitEditMode,
+  onMoveTab,
+  orientation,
+  keyBoardActivation
+}) => {
+  const lastSelection = React.useRef(activeTabIndexProp);
+  const [interactedTabState, setInteractedTabState] = React.useState();
+  const {
+    focusTab: keyboardHookFocusTab,
+    highlightedIdx,
+    onClick: keyboardHookHandleClick,
+    onKeyDown: keyboardHookHandleKeyDown,
+    setHighlightedIdx: keyboardHookSetHighlightedIndex,
+    ...keyboardHook
+  } = useKeyboardNavigation.useKeyboardNavigation({
+    containerRef,
+    keyBoardActivation,
+    orientation,
+    selectedIndex: lastSelection.current
+  });
+  const {
+    activateTab: selectionHookActivateTab,
+    onClick: selectionHookHandleClick,
+    onKeyDown: selectionHookHandleKeyDown,
+    selected: selectionHookSelected
+  } = useSelection.useSelection({
+    highlightedIdx,
+    onSelectionChange: onActiveChange,
+    selected: activeTabIndexProp
+  });
+  lastSelection.current = selectionHookSelected;
+  const { containerStyle, resumeAnimation, suspendAnimation } = useAnimatedSelectionThumb.useAnimatedSelectionThumb(
+    containerRef,
+    animateSelectionThumb ? selectionHookSelected : -1,
+    orientation
+  );
+  const handleDrop = React.useCallback(
+    ({ fromIndex, toIndex }) => {
+      const { current: selected } = lastSelection;
+      console.log(
+        `useTabstrip handleDrop ${fromIndex} - ${toIndex}  ${selected}`
+      );
+      onMoveTab?.(fromIndex, toIndex);
+      let nextSelectedTab = -1;
+      if (toIndex !== -1) {
+        if (selected === fromIndex) {
+          nextSelectedTab = toIndex;
+        } else if (fromIndex > selected && toIndex <= selected) {
+          nextSelectedTab = selected + 1;
+        } else if (fromIndex < selected && toIndex >= selected) {
+          nextSelectedTab = selected - 1;
+        }
+        if (nextSelectedTab !== -1) {
+          suspendAnimation();
+          selectionHookActivateTab(nextSelectedTab);
+          requestAnimationFrame(resumeAnimation);
+        }
+        keyboardHookFocusTab(toIndex, false, false, 350);
+      }
+    },
+    [
+      keyboardHookFocusTab,
+      onMoveTab,
+      resumeAnimation,
+      selectionHookActivateTab,
+      suspendAnimation
+    ]
+  );
+  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = useDragDrop.useDragDrop({
+    allowDragDrop,
+    containerRef,
+    // this is for useDragDropNext
+    draggableClassName: `tabstrip-${orientation}`,
+    // extendedDropZone: overflowedItems.length > 0,
+    onDrop: handleDrop,
+    orientation: "horizontal",
+    itemQuery: ".vuuOverflowContainer-item"
+  });
+  const handleExitEditMode = React.useCallback(
+    (originalValue, editedValue, allowDeactivation, tabIndex) => {
+      setInteractedTabState(void 0);
+      onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);
+      if (!allowDeactivation) {
+        keyboardHookFocusTab(tabIndex, false, true);
+      }
+    },
+    [keyboardHookFocusTab, onExitEditMode]
+  );
+  const handleClick = React.useCallback(
+    (evt, tabIndex) => {
+      keyboardHookHandleClick(evt, tabIndex);
+      selectionHookHandleClick(evt, tabIndex);
+    },
+    // [dragDropHook.isDragging, keyboardHook, selectionHook]
+    [keyboardHookHandleClick, selectionHookHandleClick]
+  );
+  const editTab = React.useCallback(
+    (tabIndex = highlightedIdx) => {
+      console.log(`set interacted tab state ${tabIndex}`);
+      setInteractedTabState({ index: tabIndex, state: "rename" });
+    },
+    [highlightedIdx]
+  );
+  const handleKeyDown = React.useCallback(
+    (evt) => {
+      keyboardHookHandleKeyDown(evt);
+      if (!evt.defaultPrevented) {
+        selectionHookHandleKeyDown(evt);
+      }
+      if (!evt.defaultPrevented && isEditKey(evt.key)) {
+        editTab();
+      }
+    },
+    [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]
+  );
+  const handleCloseTabFromMenu = React.useCallback(
+    (tabIndex) => {
+      const selectedTabIndex = tabstripDomUtils.getIndexOfSelectedTab(containerRef.current);
+      const newActiveTabIndex = selectedTabIndex > tabIndex ? selectedTabIndex - 1 : selectedTabIndex === tabIndex ? 0 : selectedTabIndex;
+      suspendAnimation();
+      onCloseTab?.(tabIndex, newActiveTabIndex);
+      setTimeout(() => {
+        resumeAnimation();
+      }, 200);
+      return true;
+    },
+    [containerRef, onCloseTab, resumeAnimation, suspendAnimation]
+  );
+  const handleRenameTabFromMenu = React.useCallback(
+    (tabIndex) => {
+      editTab(tabIndex);
+      return true;
+    },
+    [editTab]
+  );
+  const handleTabMenuAction = React.useCallback(
+    (menuItemId, options) => {
+      if (TabMenuOptions.isTabMenuOptions(options)) {
+        switch (menuItemId) {
+          case "close-tab":
+            return handleCloseTabFromMenu(options.tabIndex);
+          case "rename-tab":
+            return handleRenameTabFromMenu(options.tabIndex);
+          default:
+            console.log(`tab menu action ${menuItemId}`);
+        }
+      }
+      return false;
+    },
+    [handleCloseTabFromMenu, handleRenameTabFromMenu]
+  );
+  const handleTabMenuClose = React.useCallback(() => {
+    if (interactedTabState?.index === highlightedIdx) {
+      keyboardHookSetHighlightedIndex(highlightedIdx);
+    } else {
+      keyboardHookFocusTab(highlightedIdx);
+    }
+  }, [
+    highlightedIdx,
+    interactedTabState?.index,
+    keyboardHookFocusTab,
+    keyboardHookSetHighlightedIndex
+  ]);
+  const onSwitchWrappedItemIntoView = React.useCallback(
+    (item) => {
+      const index = parseInt(item.index);
+      if (!isNaN(index)) {
+        selectionHookActivateTab(index);
+      }
+    },
+    [selectionHookActivateTab]
+  );
+  const navigationProps = {
+    onFocus: keyboardHook.onFocus,
+    onKeyDown: handleKeyDown
+  };
+  const handleAddTabClick = React.useCallback(() => {
+    onAddTab?.();
+    requestAnimationFrame(() => {
+      const selectedTabIndex = tabstripDomUtils.getIndexOfSelectedTab(containerRef.current);
+      if (selectedTabIndex !== -1) {
+        keyboardHookFocusTab(selectedTabIndex);
+      }
+    });
+  }, [containerRef, keyboardHookFocusTab, onAddTab]);
+  const tabProps = {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onExitEditMode: handleExitEditMode,
+    onMenuAction: handleTabMenuAction,
+    onMenuClose: handleTabMenuClose,
+    onMouseDown: dragDropHookHandleMouseDown
+  };
+  return {
+    activeTabIndex: selectionHookSelected,
+    containerProps: {
+      ...keyboardHook.containerProps,
+      onSwitchWrappedItemIntoView
+    },
+    containerStyle,
+    focusVisible: keyboardHook.focusVisible,
+    interactedTabState,
+    navigationProps,
+    onClickAddTab: handleAddTabClick,
+    tabProps,
+    ...dragDropHook
+  };
+};
+
+exports.useTabstrip = useTabstrip;
+//# sourceMappingURL=useTabstrip.js.map

package/cjs/tabstrip/useTabstrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabstrip.js","sources":["../../../../packages/vuu-ui-controls/src/tabstrip/useTabstrip.ts"],"sourcesContent":["import type { OverflowItem } from \"@vuu-ui/vuu-ui-controls\";\nimport { orientationType } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  RefObject,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { DropOptions, useDragDrop as useDragDrop } from \"../drag-drop\";\nimport { isTabMenuOptions } from \"./TabMenuOptions\";\nimport { getIndexOfSelectedTab } from \"./tabstrip-dom-utils\";\nimport { useAnimatedSelectionThumb } from \"./useAnimatedSelectionThumb\";\nimport { useKeyboardNavigation } from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nexport type ExitEditModeHandler = (\n  originalValue: string,\n  editedValue: string,\n  allowDeactivation: boolean,\n  tabIndex: number,\n) => void;\n\nexport interface TabstripHookProps {\n  activeTabIndex: number;\n  allowDragDrop: boolean;\n  animateSelectionThumb: boolean;\n  containerRef: RefObject<HTMLElement | null>;\n  onActiveChange?: (tabIndex: number) => void;\n  onAddTab?: () => void;\n  onCloseTab?: (tabIndex: number, newActiveTabIndex: number) => void;\n  onExitEditMode?: ExitEditModeHandler;\n  onMoveTab?: (fromIndex: number, toIndex: number) => void;\n  orientation: orientationType;\n  keyBoardActivation?: \"manual\" | \"automatic\";\n}\n\nconst editKeys = new Set([\"Enter\", \" \"]);\nconst isEditKey = (key: string) => editKeys.has(key);\n\ntype InteractedTabState = {\n  index: number;\n  state: \"rename\";\n};\n\nexport const useTabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowDragDrop,\n  animateSelectionThumb,\n  containerRef,\n  onActiveChange,\n  onAddTab,\n  onCloseTab,\n  onExitEditMode,\n  onMoveTab,\n  orientation,\n  keyBoardActivation,\n}: TabstripHookProps) => {\n  const lastSelection = useRef(activeTabIndexProp);\n  const [interactedTabState, setInteractedTabState] = useState<\n    InteractedTabState | undefined\n  >();\n\n  const {\n    focusTab: keyboardHookFocusTab,\n    highlightedIdx,\n    onClick: keyboardHookHandleClick,\n    onKeyDown: keyboardHookHandleKeyDown,\n    setHighlightedIdx: keyboardHookSetHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef,\n    keyBoardActivation,\n    orientation,\n    selectedIndex: lastSelection.current,\n  });\n\n  const {\n    activateTab: selectionHookActivateTab,\n    onClick: selectionHookHandleClick,\n    onKeyDown: selectionHookHandleKeyDown,\n    selected: selectionHookSelected,\n  } = useSelection({\n    highlightedIdx,\n    onSelectionChange: onActiveChange,\n    selected: activeTabIndexProp,\n  });\n  // We need this on reEntry for navigation hook to handle focus and for dragDropHook\n  // to re-apply selection after drag drop. For some reason the value is stale if we\n  // directly use selectionHookSelected within the drag, even though all dependencies\n  //appear to be correctly declared.\n  lastSelection.current = selectionHookSelected;\n\n  const { containerStyle, resumeAnimation, suspendAnimation } =\n    useAnimatedSelectionThumb(\n      containerRef,\n      animateSelectionThumb ? selectionHookSelected : -1,\n      orientation,\n    );\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      const { current: selected } = lastSelection;\n      console.log(\n        `useTabstrip handleDrop ${fromIndex} - ${toIndex}  ${selected}`,\n      );\n      onMoveTab?.(fromIndex, toIndex);\n      let nextSelectedTab = -1;\n      if (toIndex !== -1) {\n        if (selected === fromIndex) {\n          nextSelectedTab = toIndex;\n        } else if (fromIndex > selected && toIndex <= selected) {\n          nextSelectedTab = selected + 1;\n        } else if (fromIndex < selected && toIndex >= selected) {\n          nextSelectedTab = selected - 1;\n        }\n        if (nextSelectedTab !== -1) {\n          suspendAnimation();\n          selectionHookActivateTab(nextSelectedTab);\n          requestAnimationFrame(resumeAnimation);\n        }\n        keyboardHookFocusTab(toIndex, false, false, 350);\n      }\n    },\n    [\n      keyboardHookFocusTab,\n      onMoveTab,\n      resumeAnimation,\n      selectionHookActivateTab,\n      suspendAnimation,\n    ],\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `tabstrip-${orientation}`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  const handleExitEditMode = useCallback<ExitEditModeHandler>(\n    (originalValue, editedValue, allowDeactivation, tabIndex) => {\n      setInteractedTabState(undefined);\n      onExitEditMode?.(originalValue, editedValue, allowDeactivation, tabIndex);\n      if (!allowDeactivation) {\n        // this indicates that Enter or Esc key has been pressed, hence we\n        // want to make sure keyboardHook treats this as a keyboard event\n        // (and applies focusVisible). The last parameter here does that.\n        keyboardHookFocusTab(tabIndex, false, true);\n      }\n    },\n    [keyboardHookFocusTab, onExitEditMode],\n  );\n\n  const handleClick = useCallback(\n    (evt: ReactMouseEvent<HTMLElement>, tabIndex: number) => {\n      // releasing the mouse at end of drag will trigger a click, ignore those\n      // if (!dragDropHook.isDragging) {\n      keyboardHookHandleClick(evt, tabIndex);\n      selectionHookHandleClick(evt, tabIndex);\n      // }\n    },\n    // [dragDropHook.isDragging, keyboardHook, selectionHook]\n    [keyboardHookHandleClick, selectionHookHandleClick],\n  );\n\n  const editTab = useCallback(\n    (tabIndex = highlightedIdx) => {\n      console.log(`set interacted tab state ${tabIndex}`);\n      setInteractedTabState({ index: tabIndex, state: \"rename\" });\n    },\n    [highlightedIdx],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHookHandleKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        selectionHookHandleKeyDown(evt);\n      }\n      if (!evt.defaultPrevented && isEditKey(evt.key)) {\n        editTab();\n      }\n    },\n    [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown],\n  );\n\n  const handleCloseTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      const newActiveTabIndex =\n        selectedTabIndex > tabIndex\n          ? selectedTabIndex - 1\n          : selectedTabIndex === tabIndex\n            ? 0\n            : selectedTabIndex;\n      suspendAnimation();\n      // containerRef.current?.classList.add(\"vuuTabThumb-noTransition\");\n      onCloseTab?.(tabIndex, newActiveTabIndex);\n      setTimeout(() => {\n        resumeAnimation();\n        // containerRef.current?.classList.remove(\"vuuTabThumb-noTransition\");\n      }, 200);\n      return true;\n    },\n    [containerRef, onCloseTab, resumeAnimation, suspendAnimation],\n  );\n\n  const handleRenameTabFromMenu = useCallback(\n    (tabIndex: number) => {\n      editTab(tabIndex);\n      return true;\n    },\n    [editTab],\n  );\n\n  const handleTabMenuAction = useCallback<MenuActionHandler>(\n    (menuItemId, options) => {\n      if (isTabMenuOptions(options)) {\n        switch (menuItemId) {\n          case \"close-tab\":\n            return handleCloseTabFromMenu(options.tabIndex);\n          case \"rename-tab\":\n            return handleRenameTabFromMenu(options.tabIndex);\n          default:\n            console.log(`tab menu action ${menuItemId}`);\n        }\n      }\n      return false;\n    },\n    [handleCloseTabFromMenu, handleRenameTabFromMenu],\n  );\n\n  //TODO( why do we sometimes see this fired twice  eg following rename)\n  const handleTabMenuClose = useCallback(() => {\n    if (interactedTabState?.index === highlightedIdx) {\n      keyboardHookSetHighlightedIndex(highlightedIdx);\n    } else {\n      keyboardHookFocusTab(highlightedIdx);\n    }\n  }, [\n    highlightedIdx,\n    interactedTabState?.index,\n    keyboardHookFocusTab,\n    keyboardHookSetHighlightedIndex,\n  ]);\n\n  const onSwitchWrappedItemIntoView = useCallback(\n    (item: OverflowItem) => {\n      const index = parseInt(item.index);\n      if (!isNaN(index)) {\n        selectionHookActivateTab(index);\n      }\n    },\n    [selectionHookActivateTab],\n  );\n\n  const navigationProps = {\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  const handleAddTabClick = useCallback(() => {\n    onAddTab?.();\n    requestAnimationFrame(() => {\n      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);\n      if (selectedTabIndex !== -1) {\n        keyboardHookFocusTab(selectedTabIndex);\n      }\n    });\n  }, [containerRef, keyboardHookFocusTab, onAddTab]);\n\n  const tabProps = {\n    onClick: handleClick,\n    onKeyDown: handleKeyDown,\n    onExitEditMode: handleExitEditMode,\n    onMenuAction: handleTabMenuAction,\n    onMenuClose: handleTabMenuClose,\n    onMouseDown: dragDropHookHandleMouseDown,\n  };\n\n  return {\n    activeTabIndex: selectionHookSelected,\n    containerProps: {\n      ...keyboardHook.containerProps,\n      onSwitchWrappedItemIntoView,\n    },\n    containerStyle,\n    focusVisible: keyboardHook.focusVisible,\n    interactedTabState,\n    navigationProps,\n    onClickAddTab: handleAddTabClick,\n    tabProps,\n    ...dragDropHook,\n  };\n};\n"],"names":["useRef","useState","useKeyboardNavigation","useSelection","useAnimatedSelectionThumb","useCallback","useDragDrop","getIndexOfSelectedTab","isTabMenuOptions"],"mappings":"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"}

package/cjs/time-input/MaskedInput.js

@@ -0,0 +1,377 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+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 _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 };
+class MaskedInput extends vuuUtils.EventEmitter {
+  constructor(defaultValue, inputEl = null) {
+    super();
+    __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, _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", () => {
+      if (__privateGet(this, _input)) {
+        __privateSet(this, _isFocused, true);
+        requestAnimationFrame(() => {
+          this.select("hours");
+        });
+      }
+    });
+    __publicField(this, "blur", () => {
+      this.removeSelection();
+      __privateSet(this, _isFocused, false);
+    });
+    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;
+  }
+  set cursorPos(value) {
+    this.selectionStart = value;
+    this.selectionEnd = value;
+    if (__privateGet(this, _input)) {
+      __privateGet(this, _input).setSelectionRange(value, value);
+    }
+  }
+  get isFocused() {
+    return __privateGet(this, _isFocused);
+  }
+  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);
+  }
+  setValue(value) {
+    if (!__privateGet(this, _controlled)) {
+      __privateSet(this, _isIncrementalChange, false);
+      __privateSet(this, _value, value);
+    }
+    if (__privateGet(this, _input)) {
+      __privateGet(this, _input).value = value;
+      __privateGet(this, _input).dispatchEvent(
+        new Event("change", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  setUnitValue(unit, value) {
+    const newTimeString = vuuUtils.updateTimeString(__privateGet(this, _value), unit, value);
+    this.setValue(newTimeString);
+  }
+  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)) {
+      let newValue = __privateGet(this, _value);
+      if (unit === "hours") {
+        newValue = vuuUtils.zeroTimeUnit.concat(__privateGet(this, _value).slice(2));
+      } else if (unit === "minutes") {
+        newValue = __privateGet(this, _value).slice(0, 3).concat(vuuUtils.zeroTimeUnit).concat(__privateGet(this, _value).slice(5));
+      } else if (unit === "seconds") {
+        newValue = __privateGet(this, _value).slice(0, 6).concat(vuuUtils.zeroTimeUnit);
+      }
+      if (newValue !== __privateGet(this, _value)) {
+        this.setValue(newValue);
+      }
+    }
+  }
+  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);
+  }
+  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) {
+    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("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");
+      } else if (__privateGet(this, _unitSelected) === "hours" || __privateGet(this, _halfUnitSelected) === "hours") {
+        this.select("hours");
+      } else {
+        const selection = this.getSelection();
+        if (selection === CursorAtEnd) {
+          this.select("seconds");
+        }
+      }
+    }
+  }
+  pasteValue(value) {
+    __privateSet(this, _halfUnitSelected, void 0);
+    __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() {
+    if (__privateGet(this, _input)) {
+      __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() {
+    if (__privateGet(this, _input)) {
+      __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 } = this;
+      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 {
+        if (cursorPos > 0) {
+          const offset = this.selectionStart === 6 || this.selectionStart === 3 ? 2 : 1;
+          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;
+          this.setValue(newValue);
+          requestAnimationFrame(() => {
+            __privateGet(this, _input)?.setSelectionRange(
+              __privateGet(this, _selectionStart),
+              this.selectionEnd
+            );
+          });
+        }
+      }
+    }
+  }
+  update(key) {
+    if (__privateGet(this, _input)) {
+      const { cursorPos } = this;
+      if (cursorPos < 8) {
+        const originalValue = __privateGet(this, _value);
+        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 {
+          __privateGet(this, _input).classList.remove("invalid");
+          if (__privateGet(this, _controlled) && newValue === originalValue) {
+            this.advanceSelection();
+          } else if (!__privateGet(this, _controlled)) {
+            this.advanceSelection();
+          }
+        }
+      }
+    }
+  }
+  getSelection() {
+    if (__privateGet(this, _input)) {
+      const { selectionEnd, selectionStart } = __privateGet(this, _input);
+      if (selectionEnd === null || selectionStart === null) {
+        return NullSelection;
+      } else if (selectionStart === 0 && selectionEnd === 8) {
+        return FullSelection;
+      } else if (selectionStart === 8 && selectionEnd === 8) {
+        return CursorAtEnd;
+      } else {
+        return {
+          end: selectionEnd,
+          start: selectionStart
+        };
+      }
+    } else {
+      throw Error(`[MasketInput] selection referenced, but no input`);
+    }
+  }
+  click() {
+    if (__privateGet(this, _input)) {
+      __privateSet(this, _isFocused, true);
+      const selection = this.getSelection();
+      if (selection === NullSelection) {
+        this.select("hours");
+      } else if (selection === FullSelection) ; else {
+        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");
+        }
+      }
+    }
+  }
+}
+_controlled = new WeakMap();
+_input = new WeakMap();
+_isFocused = new WeakMap();
+_isIncrementalChange = new WeakMap();
+_selectionStart = new WeakMap();
+_selectionEnd = new WeakMap();
+_value = new WeakMap();
+_unitSelected = new WeakMap();
+_halfUnitSelected = new WeakMap();
+
+exports.MaskedInput = MaskedInput;
+//# sourceMappingURL=MaskedInput.js.map