@alfalab/core-components-time-input 1.1.0

package/Component.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent } from "react";
+import { InputProps } from "@alfalab/core-components-input";
+type TimeInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void;
+};
+declare const TimeInput: React.ForwardRefExoticComponent<Pick<InputProps, "className" | "dataTestId" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "leftAddons" | "rightAddons" | "size" | "block" | "colors" | "children" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "labelView" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width" | "clear" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef"> & {
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { TimeInputProps, TimeInput };

package/Component.js

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var coreComponentsInput = require('@alfalab/core-components-input');
+var utils_format = require('./utils/format.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(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);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+/* eslint-disable no-useless-escape */
+var TimeInput = React__default['default'].forwardRef(function (_a, ref) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, className = _a.className, restProps = __rest(_a, ["defaultValue", "value", "onChange", "onComplete", "className"]);
+    var _c = React.useState(propValue || defaultValue), value = _c[0], setValue = _c[1];
+    var handleChange = function (event) {
+        var newValue = event.target.value;
+        if (newValue.length > 5)
+            return;
+        // Позволяем вводить только цифры и двоеточия
+        if (/[^\d:]/.test(newValue)) {
+            return;
+        }
+        var colon = newValue.match(/\:/g);
+        // Не даем вводить больше, чем одно двоеточие
+        if (colon && colon.length > 1) {
+            return;
+        }
+        var formattedValue = utils_format.format(newValue);
+        var formattedValueArr = formattedValue.split(':');
+        var hours = Number(formattedValueArr[0]);
+        var mins = Number(formattedValueArr[1]);
+        setValue(formattedValue);
+        if (onChange)
+            onChange(event, { hours: hours, mins: mins, value: formattedValue });
+        if (utils_format.isCompleteTimeInput(formattedValue)) {
+            var valid = formattedValue.length > 0 && utils_format.isValidInputValue(formattedValue);
+            if (!valid)
+                return;
+            if (onComplete) {
+                onComplete(event, { hours: hours, mins: mins, value: formattedValue });
+            }
+        }
+    };
+    var handleClearClick = function () {
+        setValue('');
+    };
+    return (React__default['default'].createElement(coreComponentsInput.Input, __assign({}, restProps, { ref: ref, value: value, className: className, onChange: handleChange, onClear: handleClearClick })));
+});
+
+exports.TimeInput = TimeInput;

package/cssm/Component.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent } from "react";
+import { InputProps } from "@alfalab/core-components-input";
+type TimeInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void;
+};
+declare const TimeInput: React.ForwardRefExoticComponent<Pick<InputProps, "className" | "dataTestId" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "leftAddons" | "rightAddons" | "size" | "block" | "colors" | "children" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "labelView" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width" | "clear" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef"> & {
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { TimeInputProps, TimeInput };

package/cssm/Component.js

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var coreComponentsInput = require('@alfalab/core-components-input/cssm');
+var utils_format = require('./utils/format.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(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);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+/* eslint-disable no-useless-escape */
+var TimeInput = React__default['default'].forwardRef(function (_a, ref) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, className = _a.className, restProps = __rest(_a, ["defaultValue", "value", "onChange", "onComplete", "className"]);
+    var _c = React.useState(propValue || defaultValue), value = _c[0], setValue = _c[1];
+    var handleChange = function (event) {
+        var newValue = event.target.value;
+        if (newValue.length > 5)
+            return;
+        // Позволяем вводить только цифры и двоеточия
+        if (/[^\d:]/.test(newValue)) {
+            return;
+        }
+        var colon = newValue.match(/\:/g);
+        // Не даем вводить больше, чем одно двоеточие
+        if (colon && colon.length > 1) {
+            return;
+        }
+        var formattedValue = utils_format.format(newValue);
+        var formattedValueArr = formattedValue.split(':');
+        var hours = Number(formattedValueArr[0]);
+        var mins = Number(formattedValueArr[1]);
+        setValue(formattedValue);
+        if (onChange)
+            onChange(event, { hours: hours, mins: mins, value: formattedValue });
+        if (utils_format.isCompleteTimeInput(formattedValue)) {
+            var valid = formattedValue.length > 0 && utils_format.isValidInputValue(formattedValue);
+            if (!valid)
+                return;
+            if (onComplete) {
+                onComplete(event, { hours: hours, mins: mins, value: formattedValue });
+            }
+        }
+    };
+    var handleClearClick = function () {
+        setValue('');
+    };
+    return (React__default['default'].createElement(coreComponentsInput.Input, __assign({}, restProps, { ref: ref, value: value, className: className, onChange: handleChange, onClear: handleClearClick })));
+});
+
+exports.TimeInput = TimeInput;

package/cssm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export { isValidInputValue } from "./utils/index";

package/cssm/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+require('react');
+require('@alfalab/core-components-input/cssm');
+var utils_format = require('./utils/format.js');
+
+
+
+exports.TimeInput = Component.TimeInput;
+exports.isValidInputValue = utils_format.isValidInputValue;

package/cssm/utils/format.d.ts

@@ -0,0 +1,6 @@
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteTimeInput: (input: string) => boolean;
+declare const isValidTimeFormat: (value: string) => boolean;
+declare const isValidInputValue: (inputValue?: string | undefined) => boolean;
+declare const format: (value: string) => string;
+export { DATE_MASK, isCompleteTimeInput, isValidTimeFormat, isValidInputValue, format };

package/cssm/utils/format.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/* eslint-disable no-useless-escape */
+var DATE_MASK = [/\d/, /\d/, ':', /\d/, /\d/];
+var isCompleteTimeInput = function (input) { return input.length === DATE_MASK.length; };
+var isValidTimeFormat = function (value) {
+    var timeArr = value.split(':');
+    var hours = timeArr[0];
+    var mins = timeArr[1];
+    if (hours.length !== 2 || Number(hours) > 23) {
+        return false;
+    }
+    if (mins.length !== 2 || Number(mins) > 59) {
+        return false;
+    }
+    return true;
+};
+var isValidInputValue = function (inputValue) {
+    return !inputValue || (isCompleteTimeInput(inputValue) && isValidTimeFormat(inputValue));
+};
+var format = function (value) {
+    return value
+        .replace(/^(\d\d)(\d)$/, '$1:$2') // 123 => 12:3
+        .replace(/^(\d\d)(\d\d)/, '$1:$2') // 12345 => 12:45 (если вместо двоеточия введена цифра, она обратно заменяется на двоеточие)
+        .replace(/^(\d):(\d\d)(\d)/, '$1:$2') // 1:234 => 1:23
+        .replace(/\:$/, '');
+}; // 12: => 12 || : => void
+
+exports.DATE_MASK = DATE_MASK;
+exports.format = format;
+exports.isCompleteTimeInput = isCompleteTimeInput;
+exports.isValidInputValue = isValidInputValue;
+exports.isValidTimeFormat = isValidTimeFormat;

package/cssm/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./format";

package/cssm/utils/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils_format = require('./format.js');
+
+
+
+exports.DATE_MASK = utils_format.DATE_MASK;
+exports.format = utils_format.format;
+exports.isCompleteTimeInput = utils_format.isCompleteTimeInput;
+exports.isValidInputValue = utils_format.isValidInputValue;
+exports.isValidTimeFormat = utils_format.isValidTimeFormat;

package/esm/Component.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent } from "react";
+import { InputProps } from "@alfalab/core-components-input";
+type TimeInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void;
+};
+declare const TimeInput: React.ForwardRefExoticComponent<Pick<InputProps, "className" | "dataTestId" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "leftAddons" | "rightAddons" | "size" | "block" | "colors" | "children" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "labelView" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width" | "clear" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef"> & {
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { TimeInputProps, TimeInput };

package/esm/Component.js

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { Input } from '@alfalab/core-components-input/esm';
+import { format, isCompleteTimeInput, isValidInputValue } from './utils/format.js';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(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);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+/* eslint-disable no-useless-escape */
+var TimeInput = React.forwardRef(function (_a, ref) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, className = _a.className, restProps = __rest(_a, ["defaultValue", "value", "onChange", "onComplete", "className"]);
+    var _c = useState(propValue || defaultValue), value = _c[0], setValue = _c[1];
+    var handleChange = function (event) {
+        var newValue = event.target.value;
+        if (newValue.length > 5)
+            return;
+        // Позволяем вводить только цифры и двоеточия
+        if (/[^\d:]/.test(newValue)) {
+            return;
+        }
+        var colon = newValue.match(/\:/g);
+        // Не даем вводить больше, чем одно двоеточие
+        if (colon && colon.length > 1) {
+            return;
+        }
+        var formattedValue = format(newValue);
+        var formattedValueArr = formattedValue.split(':');
+        var hours = Number(formattedValueArr[0]);
+        var mins = Number(formattedValueArr[1]);
+        setValue(formattedValue);
+        if (onChange)
+            onChange(event, { hours: hours, mins: mins, value: formattedValue });
+        if (isCompleteTimeInput(formattedValue)) {
+            var valid = formattedValue.length > 0 && isValidInputValue(formattedValue);
+            if (!valid)
+                return;
+            if (onComplete) {
+                onComplete(event, { hours: hours, mins: mins, value: formattedValue });
+            }
+        }
+    };
+    var handleClearClick = function () {
+        setValue('');
+    };
+    return (React.createElement(Input, __assign({}, restProps, { ref: ref, value: value, className: className, onChange: handleChange, onClear: handleClearClick })));
+});
+
+export { TimeInput };

package/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export { isValidInputValue } from "./utils/index";

package/esm/index.js

@@ -0,0 +1,4 @@
+export { TimeInput } from './Component.js';
+import 'react';
+import '@alfalab/core-components-input/esm';
+export { isValidInputValue } from './utils/format.js';

package/esm/utils/format.d.ts

@@ -0,0 +1,6 @@
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteTimeInput: (input: string) => boolean;
+declare const isValidTimeFormat: (value: string) => boolean;
+declare const isValidInputValue: (inputValue?: string | undefined) => boolean;
+declare const format: (value: string) => string;
+export { DATE_MASK, isCompleteTimeInput, isValidTimeFormat, isValidInputValue, format };

package/esm/utils/format.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-useless-escape */
+var DATE_MASK = [/\d/, /\d/, ':', /\d/, /\d/];
+var isCompleteTimeInput = function (input) { return input.length === DATE_MASK.length; };
+var isValidTimeFormat = function (value) {
+    var timeArr = value.split(':');
+    var hours = timeArr[0];
+    var mins = timeArr[1];
+    if (hours.length !== 2 || Number(hours) > 23) {
+        return false;
+    }
+    if (mins.length !== 2 || Number(mins) > 59) {
+        return false;
+    }
+    return true;
+};
+var isValidInputValue = function (inputValue) {
+    return !inputValue || (isCompleteTimeInput(inputValue) && isValidTimeFormat(inputValue));
+};
+var format = function (value) {
+    return value
+        .replace(/^(\d\d)(\d)$/, '$1:$2') // 123 => 12:3
+        .replace(/^(\d\d)(\d\d)/, '$1:$2') // 12345 => 12:45 (если вместо двоеточия введена цифра, она обратно заменяется на двоеточие)
+        .replace(/^(\d):(\d\d)(\d)/, '$1:$2') // 1:234 => 1:23
+        .replace(/\:$/, '');
+}; // 12: => 12 || : => void
+
+export { DATE_MASK, format, isCompleteTimeInput, isValidInputValue, isValidTimeFormat };

package/esm/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./format";

package/esm/utils/index.js

@@ -0,0 +1 @@
+export { DATE_MASK, format, isCompleteTimeInput, isValidInputValue, isValidTimeFormat } from './format.js';

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export { isValidInputValue } from "./utils/index";

package/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+require('react');
+require('@alfalab/core-components-input');
+var utils_format = require('./utils/format.js');
+
+
+
+exports.TimeInput = Component.TimeInput;
+exports.isValidInputValue = utils_format.isValidInputValue;

package/modern/Component.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent } from "react";
+import { InputProps } from "@alfalab/core-components-input";
+type TimeInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void;
+};
+declare const TimeInput: React.ForwardRefExoticComponent<Pick<InputProps, "className" | "dataTestId" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "leftAddons" | "rightAddons" | "size" | "block" | "colors" | "children" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "labelView" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width" | "clear" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef"> & {
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
+        hours: number;
+        mins: number;
+        value: string;
+    }) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { TimeInputProps, TimeInput };

package/modern/Component.js

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Input } from '@alfalab/core-components-input/modern';
+import { format, isCompleteTimeInput, isValidInputValue } from './utils/format.js';
+
+/* eslint-disable no-useless-escape */
+const TimeInput = React.forwardRef(({ defaultValue = '', value: propValue, onChange, onComplete, className, ...restProps }, ref) => {
+    const [value, setValue] = useState(propValue || defaultValue);
+    const handleChange = (event) => {
+        const { value: newValue } = event.target;
+        if (newValue.length > 5)
+            return;
+        // Позволяем вводить только цифры и двоеточия
+        if (/[^\d:]/.test(newValue)) {
+            return;
+        }
+        const colon = newValue.match(/\:/g);
+        // Не даем вводить больше, чем одно двоеточие
+        if (colon && colon.length > 1) {
+            return;
+        }
+        const formattedValue = format(newValue);
+        const formattedValueArr = formattedValue.split(':');
+        const hours = Number(formattedValueArr[0]);
+        const mins = Number(formattedValueArr[1]);
+        setValue(formattedValue);
+        if (onChange)
+            onChange(event, { hours, mins, value: formattedValue });
+        if (isCompleteTimeInput(formattedValue)) {
+            const valid = formattedValue.length > 0 && isValidInputValue(formattedValue);
+            if (!valid)
+                return;
+            if (onComplete) {
+                onComplete(event, { hours, mins, value: formattedValue });
+            }
+        }
+    };
+    const handleClearClick = () => {
+        setValue('');
+    };
+    return (React.createElement(Input, Object.assign({}, restProps, { ref: ref, value: value, className: className, onChange: handleChange, onClear: handleClearClick })));
+});
+
+export { TimeInput };

package/modern/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export { isValidInputValue } from "./utils/index";

package/modern/index.js

@@ -0,0 +1,4 @@
+import 'react';
+import '@alfalab/core-components-input/modern';
+export { isValidInputValue } from './utils/format.js';
+export { TimeInput } from './Component.js';

package/modern/utils/format.d.ts

@@ -0,0 +1,6 @@
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteTimeInput: (input: string) => boolean;
+declare const isValidTimeFormat: (value: string) => boolean;
+declare const isValidInputValue: (inputValue?: string | undefined) => boolean;
+declare const format: (value: string) => string;
+export { DATE_MASK, isCompleteTimeInput, isValidTimeFormat, isValidInputValue, format };

package/modern/utils/format.js

@@ -0,0 +1,23 @@
+/* eslint-disable no-useless-escape */
+const DATE_MASK = [/\d/, /\d/, ':', /\d/, /\d/];
+const isCompleteTimeInput = (input) => input.length === DATE_MASK.length;
+const isValidTimeFormat = (value) => {
+    const timeArr = value.split(':');
+    const hours = timeArr[0];
+    const mins = timeArr[1];
+    if (hours.length !== 2 || Number(hours) > 23) {
+        return false;
+    }
+    if (mins.length !== 2 || Number(mins) > 59) {
+        return false;
+    }
+    return true;
+};
+const isValidInputValue = (inputValue) => !inputValue || (isCompleteTimeInput(inputValue) && isValidTimeFormat(inputValue));
+const format = (value) => value
+    .replace(/^(\d\d)(\d)$/, '$1:$2') // 123 => 12:3
+    .replace(/^(\d\d)(\d\d)/, '$1:$2') // 12345 => 12:45 (если вместо двоеточия введена цифра, она обратно заменяется на двоеточие)
+    .replace(/^(\d):(\d\d)(\d)/, '$1:$2') // 1:234 => 1:23
+    .replace(/\:$/, ''); // 12: => 12 || : => void
+
+export { DATE_MASK, format, isCompleteTimeInput, isValidInputValue, isValidTimeFormat };

package/modern/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./format";

package/modern/utils/index.js

@@ -0,0 +1 @@
+export { DATE_MASK, format, isCompleteTimeInput, isValidInputValue, isValidTimeFormat } from './format.js';

package/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "@alfalab/core-components-time-input",
+    "version": "1.1.0",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1 || ^18.0.0",
+        "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
+    },
+    "dependencies": {
+        "@alfalab/core-components-input": "^10.1.0",
+        "@alfalab/core-components-icon-button": "^5.0.3"
+    }
+}

package/send-stats.js

@@ -0,0 +1,82 @@
+const http = require('http');
+const fs = require('fs');
+const { promisify } = require('util');
+const path = require('path');
+
+const readFile = promisify(fs.readFile);
+
+async function main() {
+    const remoteHost = process.env.NIS_HOST || 'digital';
+    const remotePort = process.env.NIS_PORT || 80;
+    const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
+
+    try {
+        const [_, node, os, arch] =
+            /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
+        const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+        const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+
+        let ownPackageJson, packageJson;
+
+        try {
+            const result = await Promise.all([
+                readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
+                readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
+            ]);
+
+            ownPackageJson = JSON.parse(result[0]);
+            packageJson = JSON.parse(result[1]);
+        } catch (err) {
+            ownPackageJson = '';
+            packageJson = '';
+        }
+
+        const data = {
+            node,
+            npm,
+            yarn,
+            os,
+            arch,
+            ownPackageJson: JSON.stringify(ownPackageJson),
+            packageJson: JSON.stringify(packageJson),
+        };
+
+        const body = JSON.stringify(data);
+
+        const options = {
+            host: remoteHost,
+            port: remotePort,
+            path: remotePath,
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Content-Length': body.length,
+            },
+        };
+
+        return new Promise((resolve, reject) => {
+            const req = http.request(options, res => {
+                res.on('end', () => {
+                    resolve();
+                });
+            });
+
+            req.on('error', () => {
+                reject();
+            });
+
+            req.write(body);
+            req.end();
+        });
+    } catch (error) {
+        throw error;
+    }
+}
+
+main()
+    .then(() => {
+        process.exit(0);
+    })
+    .catch(() => {
+        process.exit(0);
+    });

package/utils/format.d.ts

@@ -0,0 +1,6 @@
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteTimeInput: (input: string) => boolean;
+declare const isValidTimeFormat: (value: string) => boolean;
+declare const isValidInputValue: (inputValue?: string | undefined) => boolean;
+declare const format: (value: string) => string;
+export { DATE_MASK, isCompleteTimeInput, isValidTimeFormat, isValidInputValue, format };

package/utils/format.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/* eslint-disable no-useless-escape */
+var DATE_MASK = [/\d/, /\d/, ':', /\d/, /\d/];
+var isCompleteTimeInput = function (input) { return input.length === DATE_MASK.length; };
+var isValidTimeFormat = function (value) {
+    var timeArr = value.split(':');
+    var hours = timeArr[0];
+    var mins = timeArr[1];
+    if (hours.length !== 2 || Number(hours) > 23) {
+        return false;
+    }
+    if (mins.length !== 2 || Number(mins) > 59) {
+        return false;
+    }
+    return true;
+};
+var isValidInputValue = function (inputValue) {
+    return !inputValue || (isCompleteTimeInput(inputValue) && isValidTimeFormat(inputValue));
+};
+var format = function (value) {
+    return value
+        .replace(/^(\d\d)(\d)$/, '$1:$2') // 123 => 12:3
+        .replace(/^(\d\d)(\d\d)/, '$1:$2') // 12345 => 12:45 (если вместо двоеточия введена цифра, она обратно заменяется на двоеточие)
+        .replace(/^(\d):(\d\d)(\d)/, '$1:$2') // 1:234 => 1:23
+        .replace(/\:$/, '');
+}; // 12: => 12 || : => void
+
+exports.DATE_MASK = DATE_MASK;
+exports.format = format;
+exports.isCompleteTimeInput = isCompleteTimeInput;
+exports.isValidInputValue = isValidInputValue;
+exports.isValidTimeFormat = isValidTimeFormat;

package/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./format";

package/utils/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils_format = require('./format.js');
+
+
+
+exports.DATE_MASK = utils_format.DATE_MASK;
+exports.format = utils_format.format;
+exports.isCompleteTimeInput = utils_format.isCompleteTimeInput;
+exports.isValidInputValue = utils_format.isValidInputValue;
+exports.isValidTimeFormat = utils_format.isValidTimeFormat;