@gpa-gemstone/react-forms 1.1.59 → 1.1.61

package/lib/DateTimeUI/Clock.js

@@ -1,153 +1,153 @@
-"use strict";
-// ******************************************************************************************************
-//  Clock.tsx - Gbtc
-//
-//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  05/15/2023 - C. Lackner
-//       Generated original version of source code.
-//
-// ******************************************************************************************************
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var moment = require("moment");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-function Clock(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    var _j = React.useState((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.format("HH")) !== null && _b !== void 0 ? _b : '00'), hour = _j[0], setHour = _j[1];
-    var _k = React.useState((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.format("mm")) !== null && _d !== void 0 ? _d : '00'), minute = _k[0], setMinute = _k[1];
-    var _l = React.useState((_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.format("ss")) !== null && _f !== void 0 ? _f : '00'), second = _l[0], setSecond = _l[1];
-    var _m = React.useState((_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.format("SSS")) !== null && _h !== void 0 ? _h : '000'), millisecond = _m[0], setMilliSecond = _m[1];
-    var _o = React.useState('none'), hover = _o[0], setHover = _o[1];
-    React.useEffect(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        setHour((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.format("HH")) !== null && _b !== void 0 ? _b : '00');
-        setMinute((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.format("mm")) !== null && _d !== void 0 ? _d : '00');
-        setSecond((_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.format("ss")) !== null && _f !== void 0 ? _f : '00');
-        setMilliSecond((_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.format("SSS")) !== null && _h !== void 0 ? _h : '000');
-    }, [props.DateTime]);
-    React.useEffect(function () {
-        var _a, _b, _c, _d;
-        var h = parseInt(hour, 10);
-        var m = parseInt(minute, 10);
-        var s = parseInt(second, 10);
-        var ms = parseInt(millisecond, 10);
-        if (isNaN(h) || isNaN(m) || isNaN(s) || isNaN(ms))
-            return;
-        if (h !== ((_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.hour()) || m !== ((_b = props.DateTime) === null || _b === void 0 ? void 0 : _b.minute()) || s !== ((_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.second()) || ms !== ((_d = props.DateTime) === null || _d === void 0 ? void 0 : _d.millisecond())) {
-            var d = moment(props.DateTime);
-            if (!d.isValid())
-                d = moment.utc().startOf('d');
-            d.hour(h).minute(m).second(s).millisecond(ms);
-            props.Setter(d);
-        }
-    }, [hour, minute, second, millisecond]);
-    function increase(type) {
-        var d = moment(props.DateTime).add(1, type);
-        if (type === 'h')
-            setHour(d.format("HH"));
-        if (type === 'm')
-            setMinute(d.format("mm"));
-        if (type === 's')
-            setSecond(d.format("ss"));
-        if (type === 'ms')
-            setMilliSecond(d.format("SSS"));
-    }
-    function decrease(type) {
-        var d = moment(props.DateTime).subtract(1, type);
-        if (type === 'h')
-            setHour(d.format("HH"));
-        if (type === 'm')
-            setMinute(d.format("mm"));
-        if (type === 's')
-            setSecond(d.format("ss"));
-        if (type === 'ms')
-            setMilliSecond(d.format("SSS"));
-    }
-    return (React.createElement("div", { style: { background: '#f0f0f0', marginTop: 10, opacity: 1 } },
-        React.createElement("table", { style: { textAlign: 'center' } },
-            React.createElement("tbody", null,
-                React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
-                    React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_h' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('h'); }, onMouseEnter: function () { return setHover('increase_h'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "),
-                    React.createElement("td", { style: { width: 20, padding: 5 } }),
-                    React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_m' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('m'); }, onMouseEnter: function () { return setHover('increase_m'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "),
-                    (props.Accuracy === 'second' || props.Accuracy === 'millisecond') && (React.createElement(React.Fragment, null,
-                        React.createElement("td", { style: { width: 20, padding: 5, } }),
-                        React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_s' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('s'); }, onMouseEnter: function () { return setHover('increase_s'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "))),
-                    props.Accuracy === 'millisecond' && (React.createElement(React.Fragment, null,
-                        React.createElement("td", { style: { width: 20, padding: 5 } }),
-                        React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_ms' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('ms'); }, onMouseEnter: function () { return setHover('increase_ms'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ ")))),
-                React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
-                    React.createElement("td", { style: { width: 52, padding: 5, } },
-                        " ",
-                        React.createElement(TimeInput, { value: hour, setValue: setHour, max: 23 }),
-                        " "),
-                    React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
-                    React.createElement("td", { style: { width: 52, padding: 5, } },
-                        " ",
-                        React.createElement(TimeInput, { value: minute, setValue: setMinute, max: 59 }),
-                        " "),
-                    (props.Accuracy === 'second' || props.Accuracy === 'millisecond') && (React.createElement(React.Fragment, null,
-                        React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
-                        React.createElement("td", { style: { width: 52, padding: 5, } },
-                            " ",
-                            React.createElement(TimeInput, { value: second, setValue: setSecond, max: 59 }),
-                            " "))),
-                    props.Accuracy === 'millisecond' && (React.createElement(React.Fragment, null,
-                        React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
-                        React.createElement("td", { style: { width: 52, padding: 5, } },
-                            " ",
-                            React.createElement(TimeInput, { value: millisecond, setValue: setMilliSecond, max: 999 }),
-                            " ")))),
-                React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
-                    React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_h' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('h'); }, onMouseEnter: function () { return setHover('decrease_h'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
-                    React.createElement("td", { style: { width: 20, padding: 5, } }),
-                    React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_m' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('m'); }, onMouseEnter: function () { return setHover('decrease_m'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
-                    (props.Accuracy === 'second' || props.Accuracy === 'millisecond') && (React.createElement(React.Fragment, null,
-                        React.createElement("td", { style: { width: 20, padding: 5, } }),
-                        React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_s' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('s'); }, onMouseEnter: function () { return setHover('decrease_s'); }, onMouseLeave: function () { return setHover('none'); } }, " v "))),
-                    props.Accuracy === 'millisecond' && (React.createElement(React.Fragment, null,
-                        React.createElement("td", { style: { width: 20, padding: 5, } }),
-                        React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_ms' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('ms'); }, onMouseEnter: function () { return setHover('decrease_ms'); }, onMouseLeave: function () { return setHover('none'); } }, " v "))))))));
-}
-exports.default = Clock;
-var TimeInput = function (props) {
-    var _a = React.useState(props.value.toString()), val = _a[0], setVal = _a[1];
-    var _b = React.useState(false), error = _b[0], setError = _b[1];
-    React.useEffect(function () {
-        if (props.value.length > 5) {
-            setVal("");
-            return;
-        }
-        setVal(props.value.toString());
-    }, [props.value]);
-    React.useEffect(function () {
-        if (!(0, helper_functions_1.IsInteger)(val))
-            return;
-        var v = parseInt(val, 10);
-        if (v > props.max || v < 0) {
-            setError(true);
-            return;
-        }
-        setError(false);
-        props.setValue(val);
-    }, [val, error]);
-    return React.createElement("div", { className: "form-group form-group-sm", style: { width: 52 } },
-        React.createElement("input", { type: "text", className: !error ? 'form-control' : 'form-control is-invalid', onChange: function (evt) {
-                if ((0, helper_functions_1.IsInteger)(evt.target.value))
-                    setVal(evt.target.value);
-            }, value: val }));
-};
+"use strict";
+// ******************************************************************************************************
+//  Clock.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  05/15/2023 - C. Lackner
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Clock;
+var React = require("react");
+var moment = require("moment");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+function Clock(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _j = React.useState((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.format("HH")) !== null && _b !== void 0 ? _b : '00'), hour = _j[0], setHour = _j[1];
+    var _k = React.useState((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.format("mm")) !== null && _d !== void 0 ? _d : '00'), minute = _k[0], setMinute = _k[1];
+    var _l = React.useState((_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.format("ss")) !== null && _f !== void 0 ? _f : '00'), second = _l[0], setSecond = _l[1];
+    var _m = React.useState((_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.format("SSS")) !== null && _h !== void 0 ? _h : '000'), millisecond = _m[0], setMilliSecond = _m[1];
+    var _o = React.useState('none'), hover = _o[0], setHover = _o[1];
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        setHour((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.format("HH")) !== null && _b !== void 0 ? _b : '00');
+        setMinute((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.format("mm")) !== null && _d !== void 0 ? _d : '00');
+        setSecond((_f = (_e = props.DateTime) === null || _e === void 0 ? void 0 : _e.format("ss")) !== null && _f !== void 0 ? _f : '00');
+        setMilliSecond((_h = (_g = props.DateTime) === null || _g === void 0 ? void 0 : _g.format("SSS")) !== null && _h !== void 0 ? _h : '000');
+    }, [props.DateTime]);
+    React.useEffect(function () {
+        var _a, _b, _c, _d;
+        var h = parseInt(hour, 10);
+        var m = parseInt(minute, 10);
+        var s = parseInt(second, 10);
+        var ms = parseInt(millisecond, 10);
+        if (isNaN(h) || isNaN(m) || isNaN(s) || isNaN(ms))
+            return;
+        if (h !== ((_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.hour()) || m !== ((_b = props.DateTime) === null || _b === void 0 ? void 0 : _b.minute()) || s !== ((_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.second()) || ms !== ((_d = props.DateTime) === null || _d === void 0 ? void 0 : _d.millisecond())) {
+            var d = moment(props.DateTime);
+            if (!d.isValid())
+                d = moment.utc().startOf('d');
+            d.hour(h).minute(m).second(s).millisecond(ms);
+            props.Setter(d);
+        }
+    }, [hour, minute, second, millisecond]);
+    function increase(type) {
+        var d = moment(props.DateTime).add(1, type);
+        if (type === 'h')
+            setHour(d.format("HH"));
+        if (type === 'm')
+            setMinute(d.format("mm"));
+        if (type === 's')
+            setSecond(d.format("ss"));
+        if (type === 'ms')
+            setMilliSecond(d.format("SSS"));
+    }
+    function decrease(type) {
+        var d = moment(props.DateTime).subtract(1, type);
+        if (type === 'h')
+            setHour(d.format("HH"));
+        if (type === 'm')
+            setMinute(d.format("mm"));
+        if (type === 's')
+            setSecond(d.format("ss"));
+        if (type === 'ms')
+            setMilliSecond(d.format("SSS"));
+    }
+    return (React.createElement("div", { style: { background: '#f0f0f0', marginTop: 10, opacity: 1 } },
+        React.createElement("table", { style: { textAlign: 'center' } },
+            React.createElement("tbody", null,
+                React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
+                    React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_h' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('h'); }, onMouseEnter: function () { return setHover('increase_h'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }),
+                    React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_m' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('m'); }, onMouseEnter: function () { return setHover('increase_m'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "),
+                    (props.Accuracy === 'second' || props.Accuracy === 'millisecond') && (React.createElement(React.Fragment, null,
+                        React.createElement("td", { style: { width: 20, padding: 5, } }),
+                        React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_s' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('s'); }, onMouseEnter: function () { return setHover('increase_s'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "))),
+                    props.Accuracy === 'millisecond' && (React.createElement(React.Fragment, null,
+                        React.createElement("td", { style: { width: 20, padding: 5 } }),
+                        React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_ms' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('ms'); }, onMouseEnter: function () { return setHover('increase_ms'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ ")))),
+                React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
+                    React.createElement("td", { style: { width: 52, padding: 5, } },
+                        " ",
+                        React.createElement(TimeInput, { value: hour, setValue: setHour, max: 23 }),
+                        " "),
+                    React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
+                    React.createElement("td", { style: { width: 52, padding: 5, } },
+                        " ",
+                        React.createElement(TimeInput, { value: minute, setValue: setMinute, max: 59 }),
+                        " "),
+                    (props.Accuracy === 'second' || props.Accuracy === 'millisecond') && (React.createElement(React.Fragment, null,
+                        React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
+                        React.createElement("td", { style: { width: 52, padding: 5, } },
+                            " ",
+                            React.createElement(TimeInput, { value: second, setValue: setSecond, max: 59 }),
+                            " "))),
+                    props.Accuracy === 'millisecond' && (React.createElement(React.Fragment, null,
+                        React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
+                        React.createElement("td", { style: { width: 52, padding: 5, } },
+                            " ",
+                            React.createElement(TimeInput, { value: millisecond, setValue: setMilliSecond, max: 999 }),
+                            " ")))),
+                React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
+                    React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_h' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('h'); }, onMouseEnter: function () { return setHover('decrease_h'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
+                    React.createElement("td", { style: { width: 20, padding: 5, } }),
+                    React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_m' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('m'); }, onMouseEnter: function () { return setHover('decrease_m'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
+                    (props.Accuracy === 'second' || props.Accuracy === 'millisecond') && (React.createElement(React.Fragment, null,
+                        React.createElement("td", { style: { width: 20, padding: 5, } }),
+                        React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_s' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('s'); }, onMouseEnter: function () { return setHover('decrease_s'); }, onMouseLeave: function () { return setHover('none'); } }, " v "))),
+                    props.Accuracy === 'millisecond' && (React.createElement(React.Fragment, null,
+                        React.createElement("td", { style: { width: 20, padding: 5, } }),
+                        React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_ms' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('ms'); }, onMouseEnter: function () { return setHover('decrease_ms'); }, onMouseLeave: function () { return setHover('none'); } }, " v "))))))));
+}
+var TimeInput = function (props) {
+    var _a = React.useState(props.value.toString()), val = _a[0], setVal = _a[1];
+    var _b = React.useState(false), error = _b[0], setError = _b[1];
+    React.useEffect(function () {
+        if (props.value.length > 5) {
+            setVal("");
+            return;
+        }
+        setVal(props.value.toString());
+    }, [props.value]);
+    React.useEffect(function () {
+        if (!(0, helper_functions_1.IsInteger)(val))
+            return;
+        var v = parseInt(val, 10);
+        if (v > props.max || v < 0) {
+            setError(true);
+            return;
+        }
+        setError(false);
+        props.setValue(val);
+    }, [val, error]);
+    return React.createElement("div", { className: "form-group form-group-sm", style: { width: 52 } },
+        React.createElement("input", { type: "text", className: !error ? 'form-control' : 'form-control is-invalid', onChange: function (evt) {
+                if ((0, helper_functions_1.IsInteger)(evt.target.value))
+                    setVal(evt.target.value);
+            }, value: val }));
+};

package/lib/DateTimeUI/DateTimePopup.d.ts

@@ -1,17 +1,16 @@
-/// <reference types="react" />
-import * as moment from 'moment';
-import { TimeUnit } from '../DatePicker';
-import { Accuracy } from './Clock';
-interface IProps {
-    DateTime: moment.Moment | undefined;
-    Setter: (record: moment.Moment) => void;
-    Valid: boolean;
-    Feedback?: string;
-    Type: TimeUnit;
-    Show: boolean;
-    Top: number;
-    Center: number;
-    Accuracy?: Accuracy;
-}
-export default function DateTimePopup(props: IProps): JSX.Element | null;
-export {};
+import * as moment from 'moment';
+import { TimeUnit } from '../DatePicker';
+import { Accuracy } from './Clock';
+interface IProps {
+    DateTime: moment.Moment | undefined;
+    Setter: (record: moment.Moment) => void;
+    Valid: boolean;
+    Feedback?: string;
+    Type: TimeUnit;
+    Show: boolean;
+    Top: number;
+    Center: number;
+    Accuracy?: Accuracy;
+}
+export default function DateTimePopup(props: IProps): JSX.Element | null;
+export {};

package/lib/DateTimeUI/DateTimePopup.js

@@ -1,59 +1,59 @@
-"use strict";
-// ******************************************************************************************************
-//  DateTimePopup.tsx - Gbtc
-//
-//  Copyright © 2023, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  05/15/2023 - C. Lackner
-//       Generated original version of source code.
-//
-// ******************************************************************************************************
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var react_portal_1 = require("react-portal");
-var styled_components_1 = require("styled-components");
-var Calender_1 = require("./Calender");
-var Clock_1 = require("./Clock");
-var WrapperDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px 21px;\n    position: fixed;\n    transition: opacity 0.3s ease-out;\n    z-index: 9999;\n    opacity: 0.9;\n    background: #222;\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n  &::before {\n    border-left: 8px solid transparent;\n    border-right: 8px solid transparent;\n    border-bottom: 8px solid #222;\n    left: ", ";\n    top: -6px;\n    margin-left: -8px;\n    content: \"\";\n    width: 0px;\n    height: 0px;\n    position: absolute\n  }"], ["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px 21px;\n    position: fixed;\n    transition: opacity 0.3s ease-out;\n    z-index: 9999;\n    opacity: 0.9;\n    background: #222;\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n  &::before {\n    border-left: 8px solid transparent;\n    border-right: 8px solid transparent;\n    border-bottom: 8px solid #222;\n    left: ", ";\n    top: -6px;\n    margin-left: -8px;\n    content: \"\";\n    width: 0px;\n    height: 0px;\n    position: absolute\n  }"])), function (props) { return props.Top + "px"; }, function (props) { return props.Left + "px"; }, function (props) { return props.Indicator + "%"; });
-function DateTimePopup(props) {
-    var divRef = React.useRef(null);
-    var _a = React.useState(props.Type !== 'date'), showTime = _a[0], setShowTime = _a[1];
-    var _b = React.useState(props.Type !== 'time'), showDate = _b[0], setShowDate = _b[1];
-    var _c = React.useState(0), width = _c[0], setWidth = _c[1];
-    var _d = React.useState(0), height = _d[0], setHeight = _d[1];
-    React.useLayoutEffect(function () {
-        var _a, _b, _c, _d;
-        setWidth((_b = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : width);
-        setHeight((_d = (_c = divRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : height);
-    });
-    React.useEffect(function () {
-        setShowTime(props.Type !== 'date');
-        setShowDate(props.Type !== 'time');
-    }, [props.Type]);
-    if (!props.Show)
-        return null;
-    var l = Math.max(props.Center - 0.5 * width, 0);
-    return (React.createElement(react_portal_1.Portal, null,
-        React.createElement(WrapperDiv, { Top: props.Top, Left: l, Indicator: 50, ref: divRef, className: 'gpa-gemstone-datetime' },
-            showDate ? React.createElement(Calender_1.default, { DateTime: props.DateTime, Setter: props.Setter }) : null,
-            showTime ? React.createElement(Clock_1.default, { DateTime: props.DateTime, Setter: props.Setter, Accuracy: props.Accuracy }) : null)));
-}
-exports.default = DateTimePopup;
-var templateObject_1;
+"use strict";
+// ******************************************************************************************************
+//  DateTimePopup.tsx - Gbtc
+//
+//  Copyright © 2023, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  05/15/2023 - C. Lackner
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DateTimePopup;
+var React = require("react");
+var react_portal_1 = require("react-portal");
+var styled_components_1 = require("styled-components");
+var Calender_1 = require("./Calender");
+var Clock_1 = require("./Clock");
+var WrapperDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px 21px;\n    position: fixed;\n    transition: opacity 0.3s ease-out;\n    z-index: 9999;\n    opacity: 0.9;\n    background: #222;\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n  &::before {\n    border-left: 8px solid transparent;\n    border-right: 8px solid transparent;\n    border-bottom: 8px solid #222;\n    left: ", ";\n    top: -6px;\n    margin-left: -8px;\n    content: \"\";\n    width: 0px;\n    height: 0px;\n    position: absolute\n  }"], ["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px 21px;\n    position: fixed;\n    transition: opacity 0.3s ease-out;\n    z-index: 9999;\n    opacity: 0.9;\n    background: #222;\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n  &::before {\n    border-left: 8px solid transparent;\n    border-right: 8px solid transparent;\n    border-bottom: 8px solid #222;\n    left: ", ";\n    top: -6px;\n    margin-left: -8px;\n    content: \"\";\n    width: 0px;\n    height: 0px;\n    position: absolute\n  }"])), function (props) { return "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); }, function (props) { return "".concat(props.Indicator, "%"); });
+function DateTimePopup(props) {
+    var divRef = React.useRef(null);
+    var _a = React.useState(props.Type !== 'date'), showTime = _a[0], setShowTime = _a[1];
+    var _b = React.useState(props.Type !== 'time'), showDate = _b[0], setShowDate = _b[1];
+    var _c = React.useState(0), width = _c[0], setWidth = _c[1];
+    var _d = React.useState(0), height = _d[0], setHeight = _d[1];
+    React.useLayoutEffect(function () {
+        var _a, _b, _c, _d;
+        setWidth((_b = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : width);
+        setHeight((_d = (_c = divRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : height);
+    });
+    React.useEffect(function () {
+        setShowTime(props.Type !== 'date');
+        setShowDate(props.Type !== 'time');
+    }, [props.Type]);
+    if (!props.Show)
+        return null;
+    var l = Math.max(props.Center - 0.5 * width, 0);
+    return (React.createElement(react_portal_1.Portal, null,
+        React.createElement(WrapperDiv, { Top: props.Top, Left: l, Indicator: 50, ref: divRef, className: 'gpa-gemstone-datetime' },
+            showDate ? React.createElement(Calender_1.default, { DateTime: props.DateTime, Setter: props.Setter }) : null,
+            showTime ? React.createElement(Clock_1.default, { DateTime: props.DateTime, Setter: props.Setter, Accuracy: props.Accuracy }) : null)));
+}
+var templateObject_1;

package/lib/DoubleInput.d.ts

@@ -1,12 +1,58 @@
-/// <reference types="react" />
-export default function DoubleInput<T>(props: {
-    Record: T;
-    Field1: keyof T;
-    Field2: keyof T;
-    Setter: (record: T) => void;
-    Valid: (field: keyof T) => boolean;
-    Label?: string;
-    Feedback?: string;
-    Disabled?: boolean;
-    Type?: 'number' | 'text' | 'password' | 'email' | 'color';
-}): JSX.Element;
+interface IProps<T> {
+    /**
+    * Record to be used in form
+    * @type {T}
+   */
+    Record: T;
+    /**
+      * First field of the record to be edited
+      * @type {keyof T}
+    */
+    Field1: keyof T;
+    /**
+      * Second field of the record to be edited
+      * @type {keyof T}
+    */
+    Field2: keyof T;
+    /**
+    * Setter function to update the Record
+    * @param record - Updated Record
+    */
+    Setter: (record: T) => void;
+    /**
+    * Function to determine the validity of a field
+    * @param field - Field of the record to check
+    * @returns {boolean}
+   */
+    Valid: (field: keyof T) => boolean;
+    /**
+    * Label to display for the form, defaults to the Field prop
+    * @type {string}
+    * @optional
+    */
+    Label?: string;
+    /**
+    * Feedback message to show when input is invalid
+    * @type {string}
+    * @optional
+    */
+    Feedback?: string;
+    /**
+    * Flag to disable the input field
+    * @type {boolean}
+    * @optional
+    */
+    Disabled?: boolean;
+    /**
+      * Type of the input fields
+      * @type {'number' | 'text' | 'password' | 'email' | 'color'}
+      * @optional
+    */
+    Type?: 'number' | 'text' | 'password' | 'email' | 'color';
+}
+/**
+ * DoubleInput Component.
+ * A component that renders two input fields, allowing input for two related fields in a single record.
+ */
+export default function DoubleInput<T>(props: IProps<T>): JSX.Element;
+export {};