@zag-js/number-input 0.1.13 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -66,21 +66,6 @@ var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
66
66
  var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
67
67
  var isLeftClick = (v) => v.button === 0;
68
68
  var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
69
- function observeAttributes(node, attributes, fn) {
70
- if (!node)
71
- return;
72
- const attrs = Array.isArray(attributes) ? attributes : [attributes];
73
- const win = node.ownerDocument.defaultView || window;
74
- const obs = new win.MutationObserver((changes) => {
75
- for (const change of changes) {
76
- if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
77
- fn(change);
78
- }
79
- }
80
- });
81
- obs.observe(node, { attributes: true, attributeFilter: attrs });
82
- return () => obs.disconnect();
83
- }
84
69
  var fallback = {
85
70
  pageX: 0,
86
71
  pageY: 0,
@@ -110,6 +95,21 @@ function addDomEvent(target, eventName, handler, options) {
110
95
  node == null ? void 0 : node.removeEventListener(eventName, handler, options);
111
96
  };
112
97
  }
98
+ function observeAttributes(node, attributes, fn) {
99
+ if (!node)
100
+ return;
101
+ const attrs = Array.isArray(attributes) ? attributes : [attributes];
102
+ const win = node.ownerDocument.defaultView || window;
103
+ const obs = new win.MutationObserver((changes) => {
104
+ for (const change of changes) {
105
+ if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
106
+ fn(change);
107
+ }
108
+ }
109
+ });
110
+ obs.observe(node, { attributes: true, attributeFilter: attrs });
111
+ return () => obs.disconnect();
112
+ }
113
113
  function raf(fn) {
114
114
  const id = globalThis.requestAnimationFrame(fn);
115
115
  return function cleanup() {
@@ -148,7 +148,10 @@ function requestPointerLock(doc, handlers = {}) {
148
148
  if (!supported)
149
149
  return;
150
150
  body.requestPointerLock();
151
- const cleanup = callAll(addPointerlockChangeListener(doc, onPointerChange), addPointerlockErrorListener(doc, onPointerError));
151
+ const cleanup = callAll(
152
+ addPointerlockChangeListener(doc, onPointerChange),
153
+ addPointerlockErrorListener(doc, onPointerError)
154
+ );
152
155
  return function dispose() {
153
156
  if (!supported)
154
157
  return;
@@ -253,6 +256,44 @@ var dom = defineDomHelpers({
253
256
  getDecButtonEl: (ctx) => dom.getById(ctx, dom.getDecButtonId(ctx)),
254
257
  getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
255
258
  getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
259
+ getActiveButton: (ctx, hint = ctx.hint) => {
260
+ let btnEl = null;
261
+ if (hint === "increment") {
262
+ btnEl = dom.getIncButtonEl(ctx);
263
+ }
264
+ if (hint === "decrement") {
265
+ btnEl = dom.getDecButtonEl(ctx);
266
+ }
267
+ return btnEl;
268
+ },
269
+ setupVirtualCursor(ctx) {
270
+ if (isSafari() || !supportsPointerEvent())
271
+ return;
272
+ dom.createVirtualCursor(ctx);
273
+ return () => {
274
+ var _a;
275
+ (_a = dom.getCursorEl(ctx)) == null ? void 0 : _a.remove();
276
+ };
277
+ },
278
+ preventTextSelection(ctx) {
279
+ const doc = dom.getDoc(ctx);
280
+ const html = doc.documentElement;
281
+ const body = doc.body;
282
+ body.style.pointerEvents = "none";
283
+ html.style.userSelect = "none";
284
+ html.style.cursor = "ew-resize";
285
+ return () => {
286
+ body.style.pointerEvents = "";
287
+ html.style.userSelect = "";
288
+ html.style.cursor = "";
289
+ if (!html.style.length) {
290
+ html.removeAttribute("style");
291
+ }
292
+ if (!body.style.length) {
293
+ body.removeAttribute("style");
294
+ }
295
+ };
296
+ },
256
297
  getMousementValue(ctx, event) {
257
298
  const x = roundToDevicePixel(event.movementX);
258
299
  const y = roundToDevicePixel(event.movementY);
@@ -376,6 +417,10 @@ function connect(state, send, normalize) {
376
417
  var _a;
377
418
  (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.focus();
378
419
  },
420
+ blur() {
421
+ var _a;
422
+ (_a = dom.getInputEl(state.context)) == null ? void 0 : _a.blur();
423
+ },
379
424
  rootProps: normalize.element({
380
425
  id: dom.getRootId(state.context),
381
426
  "data-part": "root",
@@ -542,378 +587,382 @@ var callAll2 = (...fns) => (...a) => {
542
587
  // src/number-input.machine.ts
543
588
  var { not, and } = guards;
544
589
  function machine(ctx) {
545
- return createMachine({
546
- id: "number-input",
547
- initial: "unknown",
548
- context: {
549
- dir: "ltr",
550
- focusInputOnChange: true,
551
- clampValueOnBlur: true,
552
- allowOverflow: false,
553
- inputMode: "decimal",
554
- pattern: "[0-9]*(.[0-9]+)?",
555
- hint: null,
556
- value: "",
557
- step: 1,
558
- min: Number.MIN_SAFE_INTEGER,
559
- max: Number.MAX_SAFE_INTEGER,
560
- scrubberCursorPoint: null,
561
- invalid: false,
562
- ...ctx,
563
- messages: {
564
- incrementLabel: "increment value",
565
- decrementLabel: "decrease value",
566
- ...ctx.messages
567
- }
568
- },
569
- computed: {
570
- isRtl: (ctx2) => ctx2.dir === "rtl",
571
- valueAsNumber: (ctx2) => valueOf(ctx2.value),
572
- isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
573
- isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
574
- isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
575
- isValueEmpty: (ctx2) => ctx2.value === "",
576
- canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
577
- canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
578
- valueText: (ctx2) => {
579
- var _a, _b;
580
- return (_b = (_a = ctx2.messages).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
581
- },
582
- formattedValue: (ctx2) => {
583
- var _a;
584
- return ((_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) ?? ctx2.value;
585
- }
586
- },
587
- watch: {
588
- value: ["invokeOnChange"],
589
- isOutOfRange: ["invokeOnInvalid"]
590
- },
591
- on: {
592
- SET_VALUE: {
593
- actions: ["setValue", "setHintToSet"]
594
- },
595
- CLEAR_VALUE: {
596
- actions: ["clearValue"]
597
- },
598
- INCREMENT: {
599
- actions: ["increment"]
590
+ return createMachine(
591
+ {
592
+ id: "number-input",
593
+ initial: "unknown",
594
+ context: {
595
+ dir: "ltr",
596
+ focusInputOnChange: true,
597
+ clampValueOnBlur: true,
598
+ allowOverflow: false,
599
+ inputMode: "decimal",
600
+ pattern: "[0-9]*(.[0-9]+)?",
601
+ hint: null,
602
+ value: "",
603
+ step: 1,
604
+ min: Number.MIN_SAFE_INTEGER,
605
+ max: Number.MAX_SAFE_INTEGER,
606
+ scrubberCursorPoint: null,
607
+ invalid: false,
608
+ spinOnPress: true,
609
+ ...ctx,
610
+ messages: {
611
+ incrementLabel: "increment value",
612
+ decrementLabel: "decrease value",
613
+ ...ctx.messages
614
+ }
600
615
  },
601
- DECREMENT: {
602
- actions: ["decrement"]
603
- }
604
- },
605
- states: {
606
- unknown: {
607
- on: {
608
- SETUP: {
609
- target: "idle",
610
- actions: "syncInputValue"
611
- }
616
+ computed: {
617
+ isRtl: (ctx2) => ctx2.dir === "rtl",
618
+ valueAsNumber: (ctx2) => valueOf(ctx2.value),
619
+ isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
620
+ isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
621
+ isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
622
+ isValueEmpty: (ctx2) => ctx2.value === "",
623
+ canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
624
+ canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
625
+ valueText: (ctx2) => {
626
+ var _a, _b;
627
+ return (_b = (_a = ctx2.messages).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
628
+ },
629
+ formattedValue: (ctx2) => {
630
+ var _a;
631
+ return ((_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) ?? ctx2.value;
612
632
  }
613
633
  },
614
- idle: {
615
- on: {
616
- PRESS_DOWN: {
617
- target: "before:spin",
618
- actions: ["focusInput", "setHint"]
619
- },
620
- PRESS_DOWN_SCRUBBER: {
621
- target: "scrubbing",
622
- actions: ["focusInput", "setHint", "setCursorPoint"]
623
- },
624
- FOCUS: "focused"
634
+ watch: {
635
+ value: ["invokeOnChange"],
636
+ isOutOfRange: ["invokeOnInvalid"],
637
+ scrubberCursorPoint: ["setVirtualCursorPosition"]
638
+ },
639
+ on: {
640
+ SET_VALUE: {
641
+ actions: ["setValue", "setHintToSet"]
642
+ },
643
+ CLEAR_VALUE: {
644
+ actions: ["clearValue"]
645
+ },
646
+ INCREMENT: {
647
+ actions: ["increment"]
648
+ },
649
+ DECREMENT: {
650
+ actions: ["decrement"]
625
651
  }
626
652
  },
627
- focused: {
628
- tags: ["focus"],
629
- entry: "focusInput",
630
- activities: "attachWheelListener",
631
- on: {
632
- PRESS_DOWN: {
633
- target: "before:spin",
634
- actions: ["focusInput", "setHint"]
635
- },
636
- PRESS_DOWN_SCRUBBER: {
637
- target: "scrubbing",
638
- actions: ["focusInput", "setHint", "setCursorPoint"]
639
- },
640
- ARROW_UP: {
641
- actions: "increment"
642
- },
643
- ARROW_DOWN: {
644
- actions: "decrement"
645
- },
646
- HOME: {
647
- actions: "setToMin"
648
- },
649
- END: {
650
- actions: "setToMax"
651
- },
652
- CHANGE: {
653
- actions: ["setValue", "setHint"]
654
- },
655
- BLUR: [
656
- {
657
- guard: "isInvalidExponential",
653
+ states: {
654
+ unknown: {
655
+ on: {
656
+ SETUP: {
658
657
  target: "idle",
659
- actions: ["clearValue", "clearHint"]
658
+ actions: "syncInputValue"
659
+ }
660
+ }
661
+ },
662
+ idle: {
663
+ exit: "invokeOnFocus",
664
+ on: {
665
+ PRESS_DOWN: {
666
+ target: "before:spin",
667
+ actions: ["focusInput", "setHint"]
660
668
  },
661
- {
662
- guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
663
- target: "idle",
664
- actions: ["clampValue", "clearHint"]
669
+ PRESS_DOWN_SCRUBBER: {
670
+ target: "scrubbing",
671
+ actions: ["focusInput", "setHint", "setCursorPoint"]
665
672
  },
666
- {
667
- target: "idle",
668
- actions: "roundValue"
669
- }
670
- ]
671
- }
672
- },
673
- "before:spin": {
674
- tags: ["focus"],
675
- activities: "trackButtonDisabled",
676
- entry: choose([
677
- { guard: "isIncrementHint", actions: "increment" },
678
- { guard: "isDecrementHint", actions: "decrement" }
679
- ]),
680
- after: {
681
- CHANGE_DELAY: {
682
- target: "spinning",
683
- guard: "isInRange"
673
+ FOCUS: "focused"
684
674
  }
685
675
  },
686
- on: {
687
- PRESS_UP: {
688
- target: "focused",
689
- actions: "clearHint"
676
+ focused: {
677
+ tags: "focus",
678
+ entry: "focusInput",
679
+ activities: "attachWheelListener",
680
+ on: {
681
+ PRESS_DOWN: {
682
+ target: "before:spin",
683
+ actions: ["focusInput", "setHint"]
684
+ },
685
+ PRESS_DOWN_SCRUBBER: {
686
+ target: "scrubbing",
687
+ actions: ["focusInput", "setHint", "setCursorPoint"]
688
+ },
689
+ ARROW_UP: {
690
+ actions: "increment"
691
+ },
692
+ ARROW_DOWN: {
693
+ actions: "decrement"
694
+ },
695
+ HOME: {
696
+ actions: "setToMin"
697
+ },
698
+ END: {
699
+ actions: "setToMax"
700
+ },
701
+ CHANGE: {
702
+ actions: ["setValue", "setHint"]
703
+ },
704
+ BLUR: [
705
+ {
706
+ guard: "isInvalidExponential",
707
+ target: "idle",
708
+ actions: ["clearValue", "clearHint", "invokeOnBlur"]
709
+ },
710
+ {
711
+ guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
712
+ target: "idle",
713
+ actions: ["clampValue", "clearHint", "invokeOnBlur"]
714
+ },
715
+ {
716
+ target: "idle",
717
+ actions: ["roundValue", "invokeOnBlur"]
718
+ }
719
+ ]
690
720
  }
691
- }
692
- },
693
- spinning: {
694
- tags: ["focus"],
695
- activities: "trackButtonDisabled",
696
- every: [
697
- {
698
- delay: "CHANGE_INTERVAL",
699
- guard: and(not("isAtMin"), "isIncrementHint"),
700
- actions: "increment"
721
+ },
722
+ "before:spin": {
723
+ tags: "focus",
724
+ activities: "trackButtonDisabled",
725
+ entry: choose([
726
+ { guard: "isIncrementHint", actions: "increment" },
727
+ { guard: "isDecrementHint", actions: "decrement" }
728
+ ]),
729
+ after: {
730
+ CHANGE_DELAY: {
731
+ target: "spinning",
732
+ guard: and("isInRange", "spinOnPress")
733
+ }
701
734
  },
702
- {
703
- delay: "CHANGE_INTERVAL",
704
- guard: and(not("isAtMax"), "isDecrementHint"),
705
- actions: "decrement"
706
- }
707
- ],
708
- on: {
709
- PRESS_UP: {
710
- target: "focused",
711
- actions: "clearHint"
735
+ on: {
736
+ PRESS_UP: {
737
+ target: "focused",
738
+ actions: "clearHint"
739
+ }
712
740
  }
713
- }
714
- },
715
- scrubbing: {
716
- tags: ["focus"],
717
- entry: ["addCustomCursor", "disableTextSelection"],
718
- exit: ["removeCustomCursor", "restoreTextSelection"],
719
- activities: ["activatePointerLock", "trackMousemove"],
720
- on: {
721
- POINTER_UP_SCRUBBER: {
722
- target: "focused",
723
- actions: "clearCursorPoint"
724
- },
725
- POINTER_MOVE_SCRUBBER: [
741
+ },
742
+ spinning: {
743
+ tags: "focus",
744
+ activities: "trackButtonDisabled",
745
+ every: [
726
746
  {
727
- guard: "isIncrementHint",
728
- actions: ["increment", "setCursorPoint", "updateCursor"]
747
+ delay: "CHANGE_INTERVAL",
748
+ guard: and(not("isAtMin"), "isIncrementHint"),
749
+ actions: "increment"
729
750
  },
730
751
  {
731
- guard: "isDecrementHint",
732
- actions: ["decrement", "setCursorPoint", "updateCursor"]
752
+ delay: "CHANGE_INTERVAL",
753
+ guard: and(not("isAtMax"), "isDecrementHint"),
754
+ actions: "decrement"
755
+ }
756
+ ],
757
+ on: {
758
+ PRESS_UP: {
759
+ target: "focused",
760
+ actions: "clearHint"
733
761
  }
734
- ]
762
+ }
763
+ },
764
+ scrubbing: {
765
+ tags: "focus",
766
+ exit: "clearCursorPoint",
767
+ activities: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
768
+ on: {
769
+ POINTER_UP_SCRUBBER: "focused",
770
+ POINTER_MOVE_SCRUBBER: [
771
+ {
772
+ guard: "isIncrementHint",
773
+ actions: ["increment", "setCursorPoint"]
774
+ },
775
+ {
776
+ guard: "isDecrementHint",
777
+ actions: ["decrement", "setCursorPoint"]
778
+ }
779
+ ]
780
+ }
735
781
  }
736
782
  }
737
- }
738
- }, {
739
- delays: {
740
- CHANGE_INTERVAL: 50,
741
- CHANGE_DELAY: 300
742
- },
743
- guards: {
744
- clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
745
- isAtMin: (ctx2) => ctx2.isAtMin,
746
- isAtMax: (ctx2) => ctx2.isAtMax,
747
- isInRange: (ctx2) => !ctx2.isOutOfRange,
748
- isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
749
- isEmptyValue: (ctx2) => ctx2.isValueEmpty,
750
- isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
751
- isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
752
783
  },
753
- activities: {
754
- trackButtonDisabled(ctx2, _evt, { send }) {
755
- let btnEl = null;
756
- if (ctx2.hint === "increment") {
757
- btnEl = dom.getIncButtonEl(ctx2);
758
- }
759
- if (ctx2.hint === "decrement") {
760
- btnEl = dom.getDecButtonEl(ctx2);
761
- }
762
- return observeAttributes(btnEl, "disabled", function onDisable() {
763
- send("PRESS_UP");
764
- });
765
- },
766
- attachWheelListener(ctx2, _evt, { send }) {
767
- const input = dom.getInputEl(ctx2);
768
- if (!input)
769
- return;
770
- function onWheel(event) {
771
- const isInputFocused = dom.getDoc(ctx2).activeElement === input;
772
- if (!ctx2.allowMouseWheel || !isInputFocused)
784
+ {
785
+ delays: {
786
+ CHANGE_INTERVAL: 50,
787
+ CHANGE_DELAY: 300
788
+ },
789
+ guards: {
790
+ clampOnBlur: (ctx2) => !!ctx2.clampValueOnBlur,
791
+ isAtMin: (ctx2) => ctx2.isAtMin,
792
+ spinOnPress: (ctx2) => !!ctx2.spinOnPress,
793
+ isAtMax: (ctx2) => ctx2.isAtMax,
794
+ isInRange: (ctx2) => !ctx2.isOutOfRange,
795
+ isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
796
+ isEmptyValue: (ctx2) => ctx2.isValueEmpty,
797
+ isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
798
+ isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
799
+ },
800
+ activities: {
801
+ setupVirtualCursor(ctx2) {
802
+ return dom.setupVirtualCursor(ctx2);
803
+ },
804
+ preventTextSelection(ctx2) {
805
+ return dom.preventTextSelection(ctx2);
806
+ },
807
+ trackButtonDisabled(ctx2, _evt, { send }) {
808
+ const btn = dom.getActiveButton(ctx2, ctx2.hint);
809
+ return observeAttributes(btn, "disabled", () => send("PRESS_UP"));
810
+ },
811
+ attachWheelListener(ctx2, _evt, { send }) {
812
+ const input = dom.getInputEl(ctx2);
813
+ if (!input)
773
814
  return;
774
- event.preventDefault();
775
- const dir = Math.sign(event.deltaY) * -1;
776
- if (dir === 1) {
777
- send("INCREMENT");
778
- } else if (dir === -1) {
779
- send("DECREMENT");
815
+ function onWheel(event) {
816
+ const isInputFocused = dom.getDoc(ctx2).activeElement === input;
817
+ if (!ctx2.allowMouseWheel || !isInputFocused)
818
+ return;
819
+ event.preventDefault();
820
+ const dir = Math.sign(event.deltaY) * -1;
821
+ if (dir === 1) {
822
+ send("INCREMENT");
823
+ } else if (dir === -1) {
824
+ send("DECREMENT");
825
+ }
780
826
  }
827
+ return addDomEvent(input, "wheel", onWheel, { passive: false });
828
+ },
829
+ activatePointerLock(ctx2) {
830
+ if (isSafari() || !supportsPointerEvent())
831
+ return;
832
+ return requestPointerLock(dom.getDoc(ctx2));
833
+ },
834
+ trackMousemove(ctx2, _evt, { send }) {
835
+ const doc = dom.getDoc(ctx2);
836
+ function onMousemove(event) {
837
+ if (!ctx2.scrubberCursorPoint)
838
+ return;
839
+ const value = dom.getMousementValue(ctx2, event);
840
+ if (!value.hint)
841
+ return;
842
+ send({
843
+ type: "POINTER_MOVE_SCRUBBER",
844
+ hint: value.hint,
845
+ point: value.point
846
+ });
847
+ }
848
+ function onMouseup() {
849
+ send("POINTER_UP_SCRUBBER");
850
+ }
851
+ return callAll2(
852
+ addDomEvent(doc, "mousemove", onMousemove, false),
853
+ addDomEvent(doc, "mouseup", onMouseup, false)
854
+ );
781
855
  }
782
- return addDomEvent(input, "wheel", onWheel, { passive: false });
783
856
  },
784
- activatePointerLock(ctx2) {
785
- if (isSafari() || !supportsPointerEvent())
786
- return;
787
- return requestPointerLock(dom.getDoc(ctx2));
788
- },
789
- trackMousemove(ctx2, _evt, { send }) {
790
- const doc = dom.getDoc(ctx2);
791
- function onMousemove(event) {
792
- if (!ctx2.scrubberCursorPoint)
857
+ actions: {
858
+ focusInput(ctx2) {
859
+ if (!ctx2.focusInputOnChange)
793
860
  return;
794
- const value = dom.getMousementValue(ctx2, event);
795
- if (!value.hint)
861
+ const input = dom.getInputEl(ctx2);
862
+ raf(() => input == null ? void 0 : input.focus());
863
+ },
864
+ increment(ctx2, evt) {
865
+ ctx2.value = utils.increment(ctx2, evt.step);
866
+ },
867
+ decrement(ctx2, evt) {
868
+ ctx2.value = utils.decrement(ctx2, evt.step);
869
+ },
870
+ clampValue(ctx2) {
871
+ ctx2.value = utils.clamp(ctx2);
872
+ },
873
+ roundValue(ctx2) {
874
+ if (ctx2.value !== "") {
875
+ ctx2.value = utils.round(ctx2);
876
+ }
877
+ },
878
+ setValue(ctx2, evt) {
879
+ var _a;
880
+ const value = ((_a = evt.target) == null ? void 0 : _a.value) ?? evt.value;
881
+ ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
882
+ },
883
+ clearValue(ctx2) {
884
+ ctx2.value = "";
885
+ },
886
+ setToMax(ctx2) {
887
+ ctx2.value = ctx2.max.toString();
888
+ },
889
+ setToMin(ctx2) {
890
+ ctx2.value = ctx2.min.toString();
891
+ },
892
+ setHint(ctx2, evt) {
893
+ ctx2.hint = evt.hint;
894
+ },
895
+ clearHint(ctx2) {
896
+ ctx2.hint = null;
897
+ },
898
+ setHintToSet(ctx2) {
899
+ ctx2.hint = "set";
900
+ },
901
+ invokeOnChange(ctx2) {
902
+ var _a;
903
+ (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
904
+ value: ctx2.value,
905
+ valueAsNumber: ctx2.valueAsNumber
906
+ });
907
+ },
908
+ invokeOnFocus(ctx2, evt) {
909
+ var _a;
910
+ let srcElement = null;
911
+ if (evt.type === "PRESS_DOWN") {
912
+ srcElement = dom.getActiveButton(ctx2, evt.hint);
913
+ } else if (evt.type === "FOCUS") {
914
+ srcElement = dom.getInputEl(ctx2);
915
+ } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
916
+ srcElement = dom.getScrubberEl(ctx2);
917
+ }
918
+ (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, {
919
+ value: ctx2.value,
920
+ valueAsNumber: ctx2.valueAsNumber,
921
+ srcElement
922
+ });
923
+ },
924
+ invokeOnBlur(ctx2) {
925
+ var _a;
926
+ (_a = ctx2.onBlur) == null ? void 0 : _a.call(ctx2, {
927
+ value: ctx2.value,
928
+ valueAsNumber: ctx2.valueAsNumber
929
+ });
930
+ },
931
+ invokeOnInvalid(ctx2) {
932
+ var _a;
933
+ if (!ctx2.isOutOfRange)
796
934
  return;
797
- send({
798
- type: "POINTER_MOVE_SCRUBBER",
799
- hint: value.hint,
800
- point: value.point
935
+ const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
936
+ (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
937
+ reason,
938
+ value: ctx2.formattedValue,
939
+ valueAsNumber: ctx2.valueAsNumber
801
940
  });
941
+ },
942
+ syncInputValue(ctx2) {
943
+ const input = dom.getInputEl(ctx2);
944
+ if (!input || input.value == ctx2.value)
945
+ return;
946
+ const value = utils.parse(ctx2, input.value);
947
+ ctx2.value = utils.sanitize(ctx2, value);
948
+ },
949
+ setCursorPoint(ctx2, evt) {
950
+ ctx2.scrubberCursorPoint = evt.point;
951
+ },
952
+ clearCursorPoint(ctx2) {
953
+ ctx2.scrubberCursorPoint = null;
954
+ },
955
+ setVirtualCursorPosition(ctx2) {
956
+ const cursor = dom.getCursorEl(ctx2);
957
+ if (!cursor || !ctx2.scrubberCursorPoint)
958
+ return;
959
+ const { x, y } = ctx2.scrubberCursorPoint;
960
+ cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
802
961
  }
803
- function onMouseup() {
804
- send("POINTER_UP_SCRUBBER");
805
- }
806
- return callAll2(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
807
- }
808
- },
809
- actions: {
810
- focusInput(ctx2) {
811
- if (!ctx2.focusInputOnChange)
812
- return;
813
- const input = dom.getInputEl(ctx2);
814
- raf(() => input == null ? void 0 : input.focus());
815
- },
816
- increment(ctx2, evt) {
817
- ctx2.value = utils.increment(ctx2, evt.step);
818
- },
819
- decrement(ctx2, evt) {
820
- ctx2.value = utils.decrement(ctx2, evt.step);
821
- },
822
- clampValue(ctx2) {
823
- ctx2.value = utils.clamp(ctx2);
824
- },
825
- roundValue(ctx2) {
826
- if (ctx2.value !== "") {
827
- ctx2.value = utils.round(ctx2);
828
- }
829
- },
830
- setValue(ctx2, evt) {
831
- var _a;
832
- const value = ((_a = evt.target) == null ? void 0 : _a.value) ?? evt.value;
833
- ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
834
- },
835
- clearValue(ctx2) {
836
- ctx2.value = "";
837
- },
838
- setToMax(ctx2) {
839
- ctx2.value = ctx2.max.toString();
840
962
  },
841
- setToMin(ctx2) {
842
- ctx2.value = ctx2.min.toString();
843
- },
844
- setHint(ctx2, evt) {
845
- ctx2.hint = evt.hint;
846
- },
847
- clearHint(ctx2) {
848
- ctx2.hint = null;
849
- },
850
- setHintToSet(ctx2) {
851
- ctx2.hint = "set";
852
- },
853
- invokeOnChange(ctx2) {
854
- var _a;
855
- (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
856
- value: ctx2.value,
857
- valueAsNumber: ctx2.valueAsNumber
858
- });
859
- },
860
- invokeOnInvalid(ctx2) {
861
- var _a;
862
- if (!ctx2.isOutOfRange)
863
- return;
864
- const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
865
- (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
866
- reason,
867
- value: ctx2.formattedValue,
868
- valueAsNumber: ctx2.valueAsNumber
869
- });
870
- },
871
- syncInputValue(ctx2) {
872
- const input = dom.getInputEl(ctx2);
873
- if (!input || input.value == ctx2.value)
874
- return;
875
- const value = utils.parse(ctx2, input.value);
876
- ctx2.value = utils.sanitize(ctx2, value);
877
- },
878
- setCursorPoint(ctx2, evt) {
879
- ctx2.scrubberCursorPoint = evt.point;
880
- },
881
- clearCursorPoint(ctx2) {
882
- ctx2.scrubberCursorPoint = null;
883
- },
884
- updateCursor(ctx2) {
885
- const cursor = dom.getCursorEl(ctx2);
886
- if (!cursor || !ctx2.scrubberCursorPoint)
887
- return;
888
- const { x, y } = ctx2.scrubberCursorPoint;
889
- cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
890
- },
891
- addCustomCursor(ctx2) {
892
- if (isSafari() || !supportsPointerEvent())
893
- return;
894
- dom.createVirtualCursor(ctx2);
895
- },
896
- removeCustomCursor(ctx2) {
897
- var _a;
898
- if (isSafari() || !supportsPointerEvent())
899
- return;
900
- (_a = dom.getCursorEl(ctx2)) == null ? void 0 : _a.remove();
901
- },
902
- disableTextSelection(ctx2) {
903
- const doc = dom.getDoc(ctx2);
904
- doc.body.style.pointerEvents = "none";
905
- doc.documentElement.style.userSelect = "none";
906
- doc.documentElement.style.cursor = "ew-resize";
907
- },
908
- restoreTextSelection(ctx2) {
909
- const doc = dom.getDoc(ctx2);
910
- doc.body.style.pointerEvents = "";
911
- doc.documentElement.style.userSelect = "";
912
- doc.documentElement.style.cursor = "";
913
- }
914
- },
915
- hookSync: true
916
- });
963
+ hookSync: true
964
+ }
965
+ );
917
966
  }
918
967
  export {
919
968
  connect,