@pinnacle0/web-ui 0.4.16 → 0.4.18

package/core/Resizable/Resizer.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { DragHandler } from "../../hooks/useDrag/type";
+interface Props {
+    onResizeStart: DragHandler;
+    onResize: DragHandler;
+    gap?: number;
+    className?: string;
+}
+export declare const Resizer: ({ onResizeStart, onResize, gap, className }: Props) => JSX.Element;
+export {};

package/core/Resizable/Resizer.js

@@ -0,0 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import { useDraggable } from "../../hooks/useDraggable";
+import { classNames } from "../../util/ClassNames";
+import { ReactUtil } from "../../util/ReactUtil";
+export var Resizer = ReactUtil.memo("Resizer", function (_a) {
+    var onResizeStart = _a.onResizeStart, onResize = _a.onResize, gap = _a.gap, className = _a.className;
+    var ref = React.useRef(null);
+    var bind = useDraggable({ target: ref, onDragStart: onResizeStart, onDrag: onResize, disabled: true, gap: gap });
+    return React.createElement("div", __assign({ className: classNames("resizer", className), ref: ref }, bind));
+});
+//# sourceMappingURL=Resizer.js.map

package/core/Resizable/Resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resizer.js","sourceRoot":"","sources":["../../../src/core/Resizable/Resizer.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAS/C,MAAM,CAAC,IAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,UAAC,EAAgD;QAA/C,aAAa,mBAAA,EAAE,QAAQ,cAAA,EAAE,GAAG,SAAA,EAAE,SAAS,eAAA;IACtF,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IACtD,IAAM,IAAI,GAAG,YAAY,CAAC,EAAC,MAAM,EAAE,GAAG,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAA,EAAC,CAAC,CAAC;IAE5G,OAAO,sCAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG,IAAM,IAAI,EAAI,CAAC;AACpF,CAAC,CAAC,CAAC"}

package/core/Resizable/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./index.less";
+interface Props {
+    height: number;
+    width: number;
+    id?: string;
+    className?: string;
+    minHeight?: number;
+    minWidth?: number;
+    gap?: number;
+    children?: React.ReactNode;
+}
+export declare const Resizable: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/core/Resizable/index.js

@@ -0,0 +1,90 @@
+import React from "react";
+import { Resizer } from "./Resizer";
+import { classNames } from "../../util/ClassNames";
+import "./index.less";
+export var Resizable = React.forwardRef(function (_a, ref) {
+    var height = _a.height, width = _a.width, className = _a.className, id = _a.id, gap = _a.gap, children = _a.children, _b = _a.minHeight, minHeight = _b === void 0 ? 0 : _b, _c = _a.minWidth, minWidth = _c === void 0 ? 0 : _c;
+    var resizableDivRef = React.useRef(null);
+    var startRect = React.useRef({ top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 });
+    var combineRef = function (node) {
+        if (node) {
+            if (ref) {
+                typeof ref === "function" ? ref(node) : (ref.current = node);
+            }
+            resizableDivRef.current = node;
+        }
+    };
+    var onResizeStart = function () {
+        if (resizableDivRef.current) {
+            var _a = resizableDivRef.current.getBoundingClientRect(), top_1 = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, width_1 = _a.width, height_1 = _a.height;
+            startRect.current = { top: top_1, right: right, bottom: bottom, left: left, width: width_1, height: height_1 };
+        }
+    };
+    var onResizeTop = function (state) {
+        if (resizableDivRef.current) {
+            var _a = startRect.current, top_2 = _a.top, height_2 = _a.height;
+            var deltaY = state.delta[1];
+            var transformedHeight = height_2 - deltaY;
+            if (transformedHeight < minHeight) {
+                return;
+            }
+            resizableDivRef.current.style.top = "".concat(top_2 + deltaY, "px");
+            resizableDivRef.current.style.height = "".concat(transformedHeight, "px");
+        }
+    };
+    var onResizeRight = function (state) {
+        if (resizableDivRef.current) {
+            var width_2 = startRect.current.width;
+            var transformedWidth = width_2 + state.delta[0];
+            if (transformedWidth < minWidth) {
+                return;
+            }
+            resizableDivRef.current.style.width = "".concat(transformedWidth, "px");
+        }
+    };
+    var onResizeBottom = function (state) {
+        if (resizableDivRef.current) {
+            var height_3 = startRect.current.height;
+            var transformedHeight = height_3 + state.delta[1];
+            if (transformedHeight < minHeight) {
+                return;
+            }
+            resizableDivRef.current.style.height = "".concat(transformedHeight, "px");
+        }
+    };
+    var onResizeLeft = function (state) {
+        if (resizableDivRef.current) {
+            var _a = startRect.current, left = _a.left, width_3 = _a.width;
+            var deltaX = state.delta[0];
+            var transformedWidth = width_3 - deltaX;
+            if (transformedWidth < minWidth) {
+                return;
+            }
+            resizableDivRef.current.style.left = "".concat(left + deltaX, "px");
+            resizableDivRef.current.style.width = "".concat(transformedWidth, "px");
+        }
+    };
+    return (React.createElement("div", { className: classNames("resizable", className), id: id, ref: combineRef, style: { height: height, width: width } },
+        React.createElement(Resizer, { className: "top", onResizeStart: onResizeStart, onResize: onResizeTop, gap: gap }),
+        React.createElement(Resizer, { className: "top-right", gap: gap, onResizeStart: onResizeStart, onResize: function (state) {
+                onResizeTop(state);
+                onResizeRight(state);
+            } }),
+        React.createElement(Resizer, { className: "right", gap: gap, onResizeStart: onResizeStart, onResize: onResizeRight }),
+        React.createElement(Resizer, { className: "bottom-right", gap: gap, onResizeStart: onResizeStart, onResize: function (state) {
+                onResizeRight(state);
+                onResizeBottom(state);
+            } }),
+        React.createElement(Resizer, { className: "bottom", gap: gap, onResizeStart: onResizeStart, onResize: onResizeBottom }),
+        React.createElement(Resizer, { className: "bottom-left", gap: gap, onResizeStart: onResizeStart, onResize: function (state) {
+                onResizeBottom(state);
+                onResizeLeft(state);
+            } }),
+        React.createElement(Resizer, { className: "left", gap: gap, onResizeStart: onResizeStart, onResize: onResizeLeft }),
+        React.createElement(Resizer, { className: "top-left", gap: gap, onResizeStart: onResizeStart, onResize: function (state) {
+                onResizeTop(state);
+                onResizeLeft(state);
+            } }),
+        children));
+});
+//# sourceMappingURL=index.js.map

package/core/Resizable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/Resizable/index.tsx"],"names":[],"mappings":"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"}

package/core/Resizable/index.less

@@ -0,0 +1,77 @@
+@thickness: 12px;
+@half-thickness: 6px;
+
+.resizable {
+    position: fixed;
+    z-index: 99;
+    border: 1px solid #333;
+
+    .resizer {
+        position: absolute;
+        z-index: 100;
+
+        &.top {
+            cursor: ns-resize;
+            top: -@half-thickness;
+            left: @half-thickness;
+            width: calc(100% - @thickness);
+            height: @thickness;
+        }
+
+        &.top-right {
+            cursor: nesw-resize;
+            width: @thickness;
+            height: @thickness;
+            top: -@half-thickness;
+            left: calc(100% - @half-thickness);
+        }
+
+        &.right {
+            cursor: ew-resize;
+            top: @half-thickness;
+            left: calc(100% - @half-thickness);
+            width: @thickness;
+            height: calc(100% - @thickness);
+        }
+
+        &.bottom-right {
+            cursor: nwse-resize;
+            width: @thickness;
+            height: @thickness;
+            top: calc(100% - @half-thickness);
+            left: calc(100% - @half-thickness);
+        }
+
+        &.bottom {
+            cursor: ns-resize;
+            top: calc(100% - @half-thickness);
+            left: @half-thickness;
+            width: calc(100% - @thickness);
+            height: @thickness;
+        }
+
+        &.bottom-left {
+            cursor: nesw-resize;
+            width: @thickness;
+            height: @thickness;
+            top: calc(100% - @half-thickness);
+            left: -@half-thickness;
+        }
+
+        &.left {
+            cursor: ew-resize;
+            top: @half-thickness;
+            left: -@half-thickness;
+            width: @thickness;
+            height: calc(100% - @thickness);
+        }
+
+        &.top-left {
+            cursor: nwse-resize;
+            width: @thickness;
+            height: @thickness;
+            top: -@half-thickness;
+            left: -@half-thickness;
+        }
+    }
+}

package/hooks/useDrag/DragController.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { DragConfig } from "./type";
+export declare class DragController {
+    private dragStarted;
+    private startPosition;
+    private config;
+    private createState;
+    private setStartPosition;
+    onDrag: (event: MouseEvent) => void;
+    onDragStart: React.MouseEventHandler;
+    onDragEnd: (event: MouseEvent) => void;
+    updateHandlers: (config: DragConfig) => void;
+}

package/hooks/useDrag/DragController.js

@@ -0,0 +1,47 @@
+var DragController = /** @class */ (function () {
+    function DragController() {
+        var _this = this;
+        this.dragStarted = false;
+        this.startPosition = [0, 0];
+        this.config = {};
+        this.createState = function (event) {
+            return {
+                delta: [event.clientX - _this.startPosition[0], event.clientY - _this.startPosition[1]],
+                event: event,
+            };
+        };
+        this.setStartPosition = function (x, y) {
+            _this.startPosition[0] = x;
+            _this.startPosition[1] = y;
+        };
+        this.onDrag = function (event) {
+            var _a, _b;
+            _this.dragStarted && ((_b = (_a = _this.config).onDrag) === null || _b === void 0 ? void 0 : _b.call(_a, _this.createState(event)));
+        };
+        this.onDragStart = function (event) {
+            var _a, _b;
+            // disable right click event
+            if (event.nativeEvent.button !== 0)
+                return;
+            if (event.currentTarget !== event.target)
+                return;
+            event.preventDefault();
+            _this.setStartPosition(event.clientX, event.clientY);
+            _this.dragStarted = true;
+            (_b = (_a = _this.config).onDragStart) === null || _b === void 0 ? void 0 : _b.call(_a, _this.createState(event.nativeEvent));
+        };
+        this.onDragEnd = function (event) {
+            var _a, _b;
+            if (_this.dragStarted) {
+                _this.dragStarted = false;
+                (_b = (_a = _this.config).onDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, _this.createState(event));
+            }
+        };
+        this.updateHandlers = function (config) {
+            _this.config = config;
+        };
+    }
+    return DragController;
+}());
+export { DragController };
+//# sourceMappingURL=DragController.js.map

package/hooks/useDrag/DragController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragController.js","sourceRoot":"","sources":["../../../src/hooks/useDrag/DragController.ts"],"names":[],"mappings":"AAEA;IAAA;QAAA,iBA0CC;QAzCW,gBAAW,GAAY,KAAK,CAAC;QAC7B,kBAAa,GAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC/B,WAAM,GAAe,EAAE,CAAC;QAExB,gBAAW,GAAG,UAAC,KAAiB;YACpC,OAAO;gBACH,KAAK,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,KAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,KAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;gBACrF,KAAK,OAAA;aACR,CAAC;QACN,CAAC,CAAC;QAEM,qBAAgB,GAAG,UAAC,CAAS,EAAE,CAAS;YAC5C,KAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;YAC1B,KAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF,WAAM,GAAG,UAAC,KAAiB;;YACvB,KAAI,CAAC,WAAW,KAAI,MAAA,MAAA,KAAI,CAAC,MAAM,EAAC,MAAM,mDAAG,KAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAA,CAAC;QACtE,CAAC,CAAC;QAEF,gBAAW,GAA4B,UAAA,KAAK;;YACxC,4BAA4B;YAC5B,IAAI,KAAK,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAO;YAC3C,IAAI,KAAK,CAAC,aAAa,KAAK,KAAK,CAAC,MAAM;gBAAE,OAAO;YAEjD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;YACpD,KAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,MAAA,MAAA,KAAI,CAAC,MAAM,EAAC,WAAW,mDAAG,KAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;QACnE,CAAC,CAAC;QAEF,cAAS,GAAG,UAAC,KAAiB;;YAC1B,IAAI,KAAI,CAAC,WAAW,EAAE;gBAClB,KAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBACzB,MAAA,MAAA,KAAI,CAAC,MAAM,EAAC,SAAS,mDAAG,KAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;aACpD;QACL,CAAC,CAAC;QAEF,mBAAc,GAAG,UAAC,MAAkB;YAChC,KAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACzB,CAAC,CAAC;IACN,CAAC;IAAD,qBAAC;AAAD,CAAC,AA1CD,IA0CC"}

package/hooks/useDrag/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { DragConfig } from "./type";
+export declare const useDrag: (config: DragConfig) => {
+    onMouseDown: React.MouseEventHandler<Element>;
+};

package/hooks/useDrag/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { DragController } from "./DragController";
+export var useDrag = function (config) {
+    var controller = React.useMemo(function () { return new DragController(); }, []);
+    React.useEffect(function () {
+        controller.updateHandlers(config);
+    }, [config, controller]);
+    React.useEffect(function () {
+        document.addEventListener("mousemove", controller.onDrag);
+        document.addEventListener("mouseup", controller.onDragEnd);
+        return function () {
+            document.removeEventListener("mousemove", controller.onDrag);
+            document.removeEventListener("mouseup", controller.onDragEnd);
+        };
+    }, [config, controller]);
+    return {
+        onMouseDown: controller.onDragStart.bind(controller),
+    };
+};
+//# sourceMappingURL=index.js.map

package/hooks/useDrag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/useDrag/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAGhD,MAAM,CAAC,IAAM,OAAO,GAAG,UAAC,MAAkB;IACtC,IAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,cAAM,OAAA,IAAI,cAAc,EAAE,EAApB,CAAoB,EAAE,EAAE,CAAC,CAAC;IAEjE,KAAK,CAAC,SAAS,CAAC;QACZ,UAAU,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzB,KAAK,CAAC,SAAS,CAAC;QACZ,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;QAC1D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAE3D,OAAO;YACH,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;YAC7D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;QAClE,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzB,OAAO;QACH,WAAW,EAAE,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;KACvD,CAAC;AACN,CAAC,CAAC"}

package/hooks/useDrag/type.d.ts

@@ -0,0 +1,11 @@
+export type Vector = [number, number];
+export interface DragState {
+    delta: Vector;
+    event: MouseEvent;
+}
+export type DragHandler = (state: DragState) => void;
+export interface DragConfig {
+    onDragStart?: DragHandler;
+    onDrag?: DragHandler;
+    onDragEnd?: DragHandler;
+}

package/hooks/useDrag/type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=type.js.map

package/hooks/useDrag/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../src/hooks/useDrag/type.ts"],"names":[],"mappings":""}

package/hooks/useDraggable.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { DragState } from "./useDrag/type";
+interface Config {
+    target: React.RefObject<HTMLElement>;
+    disabled?: boolean;
+    gap?: number;
+    onDragStart?: (state: DragState) => void;
+    onDrag?: (state: DragState) => void;
+    onDragEnd?: (state: DragState) => void;
+}
+export declare const useDraggable: ({ target, disabled, onDragStart, onDrag, onDragEnd, gap }: Config) => {
+    onMouseDown: React.MouseEventHandler<Element>;
+};
+export {};

package/hooks/useDraggable.js

@@ -0,0 +1,73 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React from "react";
+import { NumberUtil } from "../internal/NumberUtil";
+import { useDrag } from "./useDrag";
+import { useTransform } from "./useTransform";
+export var useDraggable = function (_a) {
+    var target = _a.target, disabled = _a.disabled, onDragStart = _a.onDragStart, onDrag = _a.onDrag, onDragEnd = _a.onDragEnd, _b = _a.gap, gap = _b === void 0 ? 0 : _b;
+    var start = React.useRef([0, 0]);
+    var bounds = React.useRef({ x: [0, 0], y: [0, 0] });
+    var transit = useTransform(target);
+    var boundedDelta = function (delta) {
+        var _a = __read(delta, 2), deltaX = _a[0], deltaY = _a[1];
+        var _b = __read(bounds.current.x, 2), minX = _b[0], maxX = _b[1];
+        var _c = __read(bounds.current.y, 2), minY = _c[0], maxY = _c[1];
+        return [NumberUtil.clamp(deltaX, minX, maxX), NumberUtil.clamp(deltaY, minY, maxY)];
+    };
+    var bind = useDrag({
+        onDragStart: function (state) {
+            if (target.current) {
+                var _a = target.current.getBoundingClientRect(), left = _a.left, right = _a.right, bottom = _a.bottom, top_1 = _a.top;
+                start.current = [left, top_1];
+                bounds.current = { x: [-left + gap, window.innerWidth - right - gap], y: [-top_1 + gap, window.innerHeight - bottom - gap] };
+                onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(state);
+            }
+        },
+        onDrag: function (state) {
+            if (target.current) {
+                var delta = boundedDelta(state.delta);
+                !disabled && transit.to({ x: delta[0], y: delta[1], immediate: false });
+                onDrag === null || onDrag === void 0 ? void 0 : onDrag(__assign(__assign({}, state), { delta: delta }));
+            }
+        },
+        onDragEnd: function (state) {
+            if (target.current) {
+                var delta = boundedDelta(state.delta);
+                if (!disabled) {
+                    target.current.style.left = "".concat(start.current[0] + delta[0], "px");
+                    target.current.style.top = "".concat(start.current[1] + delta[1], "px");
+                }
+                transit.to({ x: 0, y: 0, immediate: true });
+                onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(__assign(__assign({}, state), { delta: delta }));
+            }
+        },
+    });
+    return bind;
+};
+//# sourceMappingURL=useDraggable.js.map

package/hooks/useDraggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDraggable.js","sourceRoot":"","sources":["../../src/hooks/useDraggable.ts"],"names":[],"mappings":"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"}

package/internal/NumberUtil.d.ts

@@ -1,7 +1,9 @@
 declare function rounding(value: number, algorithm: "round" | "ceil" | "floor", maxScale: number): number;
 declare function roundingToString(value: number, algorithm: "round" | "ceil" | "floor", scale: number): string;
+declare function clamp(value: number, min: number, max: number): number;
 export declare const NumberUtil: Readonly<{
     rounding: typeof rounding;
     roundingToString: typeof roundingToString;
+    clamp: typeof clamp;
 }>;
 export {};

package/internal/NumberUtil.js

@@ -31,8 +31,15 @@ function rounding(value, algorithm, maxScale) {
 function roundingToString(value, algorithm, scale) {
     return rounding(value, algorithm, scale).toFixed(scale);
 }
+function clamp(value, min, max) {
+    if (min > max) {
+        throw new Error("[util] NumberUtil.clamp min(".concat(min, ") must be <= max(").concat(max, ")"));
+    }
+    return Math.max(min, Math.min(max, value));
+}
 export var NumberUtil = Object.freeze({
     rounding: rounding,
     roundingToString: roundingToString,
+    clamp: clamp,
 });
 //# sourceMappingURL=NumberUtil.js.map

package/internal/NumberUtil.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberUtil.js","sourceRoot":"","sources":["../../src/internal/NumberUtil.ts"],"names":[],"mappings":"AAAA,SAAS,QAAQ,CAAC,KAAa,EAAE,SAAqC,EAAE,QAAgB;IACpF,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,IAAI,QAAQ,GAAG,EAAE,EAAE;QAC9D,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;KAChG;IACD;;;;;;;;;;;;OAYG;IACH,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAClD,IAAM,eAAe,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAC/D,IAAM,mBAAmB,GAAG,SAAA,EAAE,EAAI,eAAe,CAAA,CAAC;IAClD,IAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,mBAAmB,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACxF,IAAM,SAAS,GAAG,SAAA,EAAE,EAAI,QAAQ,CAAA,CAAC;IACjC,IAAI,eAAe,GAAG,QAAQ,IAAI,gBAAgB,EAAE;QAChD,IAAM,aAAa,GAAG,SAAA,EAAE,EAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAA,CAAC;QACzD,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,mBAAmB,CAAC,GAAG,aAAa,CAAC,GAAG,SAAS,CAAC;KACrF;SAAM;QACH,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;KACzD;AACL,CAAC;AAED,SAAS,gBAAgB,CAAC,KAAa,EAAE,SAAqC,EAAE,KAAa;IACzF,OAAO,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC;IACpC,QAAQ,UAAA;IACR,gBAAgB,kBAAA;CACnB,CAAC,CAAC"}
+{"version":3,"file":"NumberUtil.js","sourceRoot":"","sources":["../../src/internal/NumberUtil.ts"],"names":[],"mappings":"AAAA,SAAS,QAAQ,CAAC,KAAa,EAAE,SAAqC,EAAE,QAAgB;IACpF,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,IAAI,QAAQ,GAAG,EAAE,EAAE;QAC9D,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;KAChG;IACD;;;;;;;;;;;;OAYG;IACH,IAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAClD,IAAM,eAAe,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAC/D,IAAM,mBAAmB,GAAG,SAAA,EAAE,EAAI,eAAe,CAAA,CAAC;IAClD,IAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,mBAAmB,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACxF,IAAM,SAAS,GAAG,SAAA,EAAE,EAAI,QAAQ,CAAA,CAAC;IACjC,IAAI,eAAe,GAAG,QAAQ,IAAI,gBAAgB,EAAE;QAChD,IAAM,aAAa,GAAG,SAAA,EAAE,EAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAA,CAAC;QACzD,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,mBAAmB,CAAC,GAAG,aAAa,CAAC,GAAG,SAAS,CAAC;KACrF;SAAM;QACH,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;KACzD;AACL,CAAC;AAED,SAAS,gBAAgB,CAAC,KAAa,EAAE,SAAqC,EAAE,KAAa;IACzF,OAAO,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC;AAED,SAAS,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IAClD,IAAI,GAAG,GAAG,GAAG,EAAE;QACX,MAAM,IAAI,KAAK,CAAC,sCAA+B,GAAG,8BAAoB,GAAG,MAAG,CAAC,CAAC;KACjF;IACD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC;IACpC,QAAQ,UAAA;IACR,gBAAgB,kBAAA;IAChB,KAAK,OAAA;CACR,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinnacle0/web-ui",
-  "version": "0.4.16",
+  "version": "0.4.18",
   "author": "Pinnacle",
   "license": "MIT",
   "sideEffects": [