@semcore/time-picker 16.1.13 → 16.1.14-prerelease.8

package/lib/{esm/style/time-picker.shadow.css → es6/component/PickerFormat/picker-format.shadow.css}

@@ -1,45 +1,3 @@
-STimePicker {
-  position: relative;
-  width: auto;
-  outline: none;
-
-  SPickerInput {
-    box-sizing: content-box;
-    text-align: center;
-    z-index: 1;
-    height: 1.5em;
-
-    &[placeholder] {
-      text-overflow: initial;
-    }
-    &:focus {
-      outline: none;
-      background-color: var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2));
-    }
-  }
-}
-
-/*STimePicker[keyboardFocused]:focus {*/
-/*  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));*/
-/*}*/
-
-STimePicker[disabled] {
-  color: var(--intergalactic-text-secondary, #6c6e79);
-  cursor: default;
-}
-
-SPickerInput[size='m'] {
-  width: 19px;
-  margin: 0 var(--intergalactic-spacing-2x, 8px);
-  padding: 0;
-}
-
-SPickerInput[size='l'] {
-  width: 21px;
-  margin: 0 var(--intergalactic-spacing-2x, 8px);
-  padding: 0;
-}
-
 SPickerFormat {
   flex-shrink: 0;
   position: relative;
@@ -100,17 +58,4 @@ SPickerFormat[disabled] {
   cursor: default;
   pointer-events: none;
   border-color: transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf);
-}
-
-/*SPickerFormat[keyboardFocused] {*/
-/*  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));*/
-/*}*/
-
-STimePickerSeparator {
-  color: var(--intergalactic-text-primary, #191b23);
-}
-
-STimePickerSeparator[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
-  pointer-events: none;
-}
+}

package/lib/es6/component/PickerInput/PickerInput.js

@@ -0,0 +1,222 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+import { Component, sstyled, Root } from '@semcore/core';
+import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';
+import Input from '@semcore/input';
+import Select from '@semcore/select';
+import React from 'react';
+/*!__reshadow-styles__:"./picker-input.shadow.css"*/
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SPickerInput_1bwib_gg_._size_l_1bwib_gg_,.___SPickerInput_1bwib_gg_._size_m_1bwib_gg_{width:19px;margin:0 var(--intergalactic-spacing-2x, 8px);padding:0}.___SPickerInput_1bwib_gg_._size_l_1bwib_gg_{width:21px}", /*__inner_css_end__*/"1bwib_gg_"),
+/*__reshadow_css_end__*/
+{
+  "__SPickerInput": "___SPickerInput_1bwib_gg_",
+  "_size_m": "_size_m_1bwib_gg_",
+  "_size_l": "_size_l_1bwib_gg_"
+});
+function getOptions(minMax, step = 1) {
+  const [min, max] = minMax;
+  const length = Number(((max + 1 - min) / step).toFixed(0));
+  const options = Array(length).fill('');
+  let numValue = min;
+  return options.map((_i, index) => {
+    numValue = index === 0 ? numValue : numValue + step;
+    const value = String(numValue).padStart(2, '0');
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      value: value,
+      key: value
+    }, value);
+  });
+}
+class AbstractPickerInput extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      dirtyValue: undefined,
+      visible: false
+    });
+    _defineProperty(this, "inputRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "parseValueWithMinMax", value => {
+      const [min, max] = this.minMax;
+      const numberValue = isNaN(Number(value)) ? min : Number(value);
+      return String(Math.max(min, Math.min(max, numberValue)));
+    });
+    _defineProperty(this, "handleChange", (value, event) => {
+      event.stopPropagation();
+      const inputValue = value.replace(/[^0-9]/g, '');
+      const numberValue = Number(inputValue);
+      if (!Number.isNaN(numberValue)) {
+        this.setState({
+          dirtyValue: inputValue.slice(-2)
+        });
+      }
+    });
+    _defineProperty(this, "handleBlur", event => this.submitChanges(event));
+    _defineProperty(this, "handleSelect", (value, event) => {
+      this.dispatchOnChange(value, event);
+    });
+    _defineProperty(this, "handleVisibleChange", visible => this.setState({
+      visible
+    }));
+  }
+  dispatchOnChange(value, event) {
+    this.setState({
+      dirtyValue: undefined
+    });
+    this.asProps.$onValueChange(value, this.field, event);
+  }
+  submitChanges(event) {
+    let {
+      dirtyValue
+    } = this.state;
+    if (dirtyValue !== undefined) {
+      // if changes value
+      if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue); // if not ""
+      this.dispatchOnChange(dirtyValue, event);
+    }
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref2;
+    const SPickerInput = Select.Trigger;
+    const {
+      styles,
+      step,
+      onSelect,
+      time,
+      size,
+      disabled,
+      onVisibleChange,
+      ariaLabel,
+      ...other
+    } = this.asProps;
+    const {
+      dirtyValue,
+      visible
+    } = this.state;
+    const value = dirtyValue === undefined ? time : dirtyValue;
+    return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(Select, _ref2.cn("Select", {
+      ...other,
+      "interaction": 'focus',
+      "size": size,
+      "onChange": callAllEventHandlers(onSelect, this.handleSelect),
+      "onVisibleChange": callAllEventHandlers(onVisibleChange, this.handleVisibleChange),
+      "visible": visible,
+      "value": time,
+      "defaultHighlightedIndex": time ? null : 0
+    }), /*#__PURE__*/React.createElement(SPickerInput, _ref2.cn("SPickerInput", {
+      ..._assignProps({
+        "tag": Input.Value,
+        "ref": this.inputRef,
+        "inputMode": 'numeric',
+        "size": size,
+        "disabled": disabled,
+        "neighborLocation": false,
+        "value": value,
+        "aria-label": ariaLabel,
+        "onChange": this.handleChange,
+        "onBlur": this.handleBlur,
+        "onKeyDown": this.handleKeyDown
+      }, _ref)
+    })), /*#__PURE__*/React.createElement(Select.Menu, {
+      hMax: 180
+    }, getOptions(this.minMax, step)));
+  }
+}
+_defineProperty(AbstractPickerInput, "style", style);
+_defineProperty(AbstractPickerInput, "defaultProps", _ => ({
+  placeholder: '00',
+  offset: [-8, 4]
+}));
+class Hours extends AbstractPickerInput {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handleKeyDown", event => {
+      const {
+        currentTarget
+      } = event;
+      if (event.key === 'Enter') {
+        this.submitChanges(event);
+      }
+      if (event.key === 'ArrowRight') {
+        if (currentTarget.selectionStart && currentTarget.selectionStart >= currentTarget.value.length && currentTarget.selectionStart === currentTarget.selectionEnd) {
+          event.preventDefault();
+          this.focusNext();
+        }
+      }
+    });
+  }
+  get field() {
+    return 'hours';
+  }
+  get minMax() {
+    const {
+      is12Hour
+    } = this.asProps;
+    return is12Hour ? [1, 12] : [0, 23];
+  }
+  focusNext() {
+    if (this.asProps.minutesInputRef.current) {
+      this.setState({
+        visible: false
+      });
+      this.asProps.minutesInputRef.current.focus();
+    }
+  }
+  componentDidUpdate(_, prevState) {
+    const {
+      dirtyValue
+    } = this.state;
+    if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;
+    if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {
+      this.focusNext();
+    }
+  }
+}
+_defineProperty(Hours, "defaultProps", props => ({
+  ...AbstractPickerInput.defaultProps(props),
+  ml: props.size === 'l' ? 3 : undefined
+}));
+class Minutes extends AbstractPickerInput {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handleKeyDown", event => {
+      const {
+        currentTarget
+      } = event;
+      if (event.key === 'ArrowLeft') {
+        if (currentTarget.selectionStart && currentTarget.selectionStart <= 0 && currentTarget.selectionStart === currentTarget.selectionEnd) {
+          event.preventDefault();
+          this.focusPrev();
+        }
+      }
+      if (event.key === 'Backspace') {
+        if (currentTarget.value.length === 0) {
+          event.preventDefault();
+          this.focusPrev();
+        }
+      }
+      if (event.key === 'Enter') this.submitChanges(event);
+    });
+  }
+  get field() {
+    return 'minutes';
+  }
+  get minMax() {
+    return [0, 59];
+  }
+  focusPrev() {
+    if (this.asProps.hoursInputRef.current) {
+      this.setState({
+        visible: false
+      });
+      this.asProps.hoursInputRef.current.focus();
+    }
+  }
+}
+_defineProperty(Minutes, "defaultProps", props => ({
+  ...AbstractPickerInput.defaultProps(props),
+  mr: props.size === 'l' ? 3 : undefined
+}));
+export { Hours, Minutes };
+//# sourceMappingURL=PickerInput.js.map

package/lib/es6/component/PickerInput/PickerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerInput.js","names":["Component","sstyled","Root","callAllEventHandlers","Input","Select","React","style","_sstyled","insert","getOptions","minMax","step","min","max","length","Number","toFixed","options","Array","fill","numValue","map","_i","index","value","String","padStart","createElement","Option","key","AbstractPickerInput","constructor","args","_defineProperty","dirtyValue","undefined","visible","createRef","numberValue","isNaN","Math","event","stopPropagation","inputValue","replace","setState","slice","submitChanges","dispatchOnChange","asProps","$onValueChange","field","state","parseValueWithMinMax","render","_ref","_ref2","SPickerInput","Trigger","styles","onSelect","time","size","disabled","onVisibleChange","ariaLabel","other","cn","handleSelect","handleVisibleChange","_assignProps","Value","inputRef","handleChange","handleBlur","handleKeyDown","Menu","hMax","_","placeholder","offset","Hours","currentTarget","selectionStart","selectionEnd","preventDefault","focusNext","is12Hour","minutesInputRef","current","focus","componentDidUpdate","prevState","props","defaultProps","ml","Minutes","focusPrev","hoursInputRef","mr"],"sources":["../../../../src/component/PickerInput/PickerInput.tsx"],"sourcesContent":["import { Component, sstyled, Root } from '@semcore/core';\nimport { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';\nimport Input from '@semcore/input';\nimport Select from '@semcore/select';\nimport React from 'react';\n\nimport style from './picker-input.shadow.css';\nimport type { PickerInputMinMax, PickerInputProps } from './PickerInput.type';\nimport type { TimePickerField } from '../TimePicker/TimePicker.type';\n\nfunction getOptions(minMax: PickerInputMinMax, step = 1) {\n  const [min, max] = minMax;\n  const length = Number(((max + 1 - min) / step).toFixed(0));\n  const options = Array(length).fill('');\n  let numValue = min;\n  return options.map((_i, index) => {\n    numValue = index === 0 ? numValue : numValue + step;\n    const value = String(numValue).padStart(2, '0');\n\n    return (\n      <Select.Option value={value} key={value}>\n        {value}\n      </Select.Option>\n    );\n  });\n}\n\ntype State = {\n  dirtyValue?: string;\n  visible: boolean;\n};\n\nabstract class AbstractPickerInput extends Component<PickerInputProps, [], {}, {}, State> {\n  static style = style;\n  static defaultProps = (_: PickerInputProps) => ({\n    placeholder: '00',\n    offset: [-8, 4],\n  });\n\n  state: State = {\n    dirtyValue: undefined,\n    visible: false,\n  };\n\n  inputRef = React.createRef();\n\n  abstract get field(): TimePickerField;\n  abstract get minMax(): PickerInputMinMax;\n  abstract handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;\n\n  parseValueWithMinMax = (value: string) => {\n    const [min, max] = this.minMax;\n\n    const numberValue = isNaN(Number(value)) ? min : Number(value);\n\n    return String(Math.max(min, Math.min(max, numberValue)));\n  };\n\n  dispatchOnChange(value: string, event: React.SyntheticEvent) {\n    this.setState({ dirtyValue: undefined });\n    this.asProps.$onValueChange(value, this.field, event);\n  }\n\n  submitChanges(event: React.SyntheticEvent) {\n    let { dirtyValue } = this.state;\n    if (dirtyValue !== undefined) {\n      // if changes value\n      if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue); // if not \"\"\n      this.dispatchOnChange(dirtyValue, event);\n    }\n  }\n\n  handleChange = (value: string, event: React.SyntheticEvent) => {\n    event.stopPropagation();\n\n    const inputValue = value.replace(/[^0-9]/g, '');\n    const numberValue = Number(inputValue);\n\n    if (!Number.isNaN(numberValue)) {\n      this.setState({ dirtyValue: inputValue.slice(-2) });\n    }\n  };\n\n  handleBlur = (event: React.SyntheticEvent) => this.submitChanges(event);\n\n  handleSelect = (value: string, event: React.SyntheticEvent) => {\n    this.dispatchOnChange(value, event);\n  };\n\n  handleVisibleChange = (visible: boolean) => this.setState({ visible });\n\n  render() {\n    const SPickerInput = Root;\n    const { styles, step, onSelect, time, size, disabled, onVisibleChange, ariaLabel, ...other } = this.asProps;\n    const { dirtyValue, visible } = this.state;\n    const value = dirtyValue === undefined ? time : dirtyValue;\n\n    return sstyled(styles)(\n      <Select\n        {...other}\n        interaction='focus'\n        size={size}\n        onChange={callAllEventHandlers(onSelect, this.handleSelect)}\n        onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}\n        visible={visible}\n        value={time}\n        defaultHighlightedIndex={time ? null : 0}\n      >\n        <SPickerInput\n          render={Select.Trigger}\n          tag={Input.Value}\n          ref={this.inputRef}\n          inputMode='numeric'\n          size={size}\n          disabled={disabled}\n          neighborLocation={false}\n          value={value}\n          aria-label={ariaLabel}\n          onChange={this.handleChange}\n          onBlur={this.handleBlur}\n          onKeyDown={this.handleKeyDown}\n        />\n        <Select.Menu hMax={180}>{getOptions(this.minMax, step)}</Select.Menu>\n      </Select>,\n    );\n  }\n}\n\nclass Hours extends AbstractPickerInput {\n  static defaultProps = (props: PickerInputProps) => ({\n    ...AbstractPickerInput.defaultProps(props),\n    ml: props.size === 'l' ? 3 : undefined,\n  });\n\n  get field(): TimePickerField {\n    return 'hours';\n  }\n\n  get minMax(): PickerInputMinMax {\n    const { is12Hour } = this.asProps;\n\n    return is12Hour ? [1, 12] : [0, 23];\n  }\n\n  focusNext() {\n    if (this.asProps.minutesInputRef.current) {\n      this.setState({ visible: false });\n      this.asProps.minutesInputRef.current.focus();\n    }\n  }\n\n  handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    const { currentTarget } = event;\n    if (event.key === 'Enter') {\n      this.submitChanges(event);\n    }\n    if (event.key === 'ArrowRight') {\n      if (\n        currentTarget.selectionStart &&\n        currentTarget.selectionStart >= currentTarget.value.length &&\n        currentTarget.selectionStart === currentTarget.selectionEnd\n      ) {\n        event.preventDefault();\n        this.focusNext();\n      }\n    }\n  };\n\n  componentDidUpdate(_: PickerInputProps, prevState: State) {\n    const { dirtyValue } = this.state;\n    if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;\n\n    if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {\n      this.focusNext();\n    }\n  }\n}\n\nclass Minutes extends AbstractPickerInput {\n  static defaultProps = (props: PickerInputProps) => ({\n    ...AbstractPickerInput.defaultProps(props),\n    mr: props.size === 'l' ? 3 : undefined,\n  });\n\n  get field(): TimePickerField {\n    return 'minutes';\n  }\n\n  get minMax(): PickerInputMinMax {\n    return [0, 59];\n  }\n\n  focusPrev() {\n    if (this.asProps.hoursInputRef.current) {\n      this.setState({ visible: false });\n      this.asProps.hoursInputRef.current.focus();\n    }\n  }\n\n  handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    const { currentTarget } = event;\n    if (event.key === 'ArrowLeft') {\n      if (\n        currentTarget.selectionStart &&\n        currentTarget.selectionStart <= 0 &&\n        currentTarget.selectionStart === currentTarget.selectionEnd\n      ) {\n        event.preventDefault();\n        this.focusPrev();\n      }\n    }\n    if (event.key === 'Backspace') {\n      if (currentTarget.value.length === 0) {\n        event.preventDefault();\n        this.focusPrev();\n      }\n    }\n    if (event.key === 'Enter') this.submitChanges(event);\n  };\n}\n\nexport { Hours, Minutes };\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/component/PickerInput/PickerInput.type.js

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

package/lib/es6/component/PickerInput/PickerInput.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerInput.type.js","names":[],"sources":["../../../../src/component/PickerInput/PickerInput.type.ts"],"sourcesContent":["import type { SelectProps } from '@semcore/select';\n\nimport type { TimePickerField, TimePickerItemProps } from '../TimePicker/TimePicker.type';\n\nexport type PickerInputProps = SelectProps & TimePickerItemProps & {\n  time: string;\n  size?: 'm' | 'l';\n  is12Hour?: boolean;\n  disabled?: boolean;\n  $onValueChange: (value: string, field: TimePickerField, event: React.SyntheticEvent) => void;\n  minutesInputRef: React.RefObject<HTMLElement>;\n  hoursInputRef: React.RefObject<HTMLElement>;\n  ariaLabel: string;\n};\n\nexport type PickerInputMinMax = [number, number];\n"],"mappings":"","ignoreList":[]}

package/lib/es6/component/PickerInput/picker-input.shadow.css

@@ -0,0 +1,11 @@
+SPickerInput[size='m'] {
+  width: 19px;
+  margin: 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0;
+}
+
+SPickerInput[size='l'] {
+  width: 21px;
+  margin: 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0;
+}

package/lib/es6/component/TimePicker/TimePicker.js

@@ -0,0 +1,216 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _applyDecs from "@babel/runtime/helpers/applyDecs2311";
+import _identity from "@babel/runtime/helpers/identity";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps2 } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+var _Class, _TimePickerRoot3;
+let _initClass, _classDecs, _entityDecs, _init_entity, _init_extra_entity, _TimePickerRoot2, _ref5;
+import { Box, ScreenReaderOnly } from '@semcore/base-components';
+import { createComponent, Component, sstyled, Root } from '@semcore/core';
+import propsObserver from '@semcore/core/lib/decorators/propsObserver';
+import reactive from '@semcore/core/lib/decorators/reactive';
+import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
+import Input from '@semcore/input';
+import React from 'react';
+/*!__reshadow-styles__:"./time-picker.shadow.css"*/
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STimePicker_17xeh_gg_{position:relative;width:auto;outline:0}.___STimePicker_17xeh_gg_ .___SPickerInput_17xeh_gg_{box-sizing:content-box;text-align:center;z-index:1;height:1.5em}.___STimePicker_17xeh_gg_ .___SPickerInput_17xeh_gg_.__placeholder_17xeh_gg_{text-overflow:initial}.___STimePicker_17xeh_gg_ .___SPickerInput_17xeh_gg_:focus{outline:0;background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___STimePicker_17xeh_gg_.__disabled_17xeh_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}.___STimePickerSeparator_17xeh_gg_{color:var(--intergalactic-text-primary, #191b23)}.___STimePickerSeparator_17xeh_gg_.__disabled_17xeh_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);pointer-events:none}", /*__inner_css_end__*/"17xeh_gg_"),
+/*__reshadow_css_end__*/
+{
+  "__STimePicker": "___STimePicker_17xeh_gg_",
+  "_disabled": "__disabled_17xeh_gg_",
+  "__STimePickerSeparator": "___STimePickerSeparator_17xeh_gg_",
+  "__SPickerInput": "___SPickerInput_17xeh_gg_",
+  "_placeholder": "__placeholder_17xeh_gg_"
+});
+import TimePickerEntity from '../../entity/TimePickerEntity';
+import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
+import Format from '../PickerFormat/PickerFormat';
+import { Hours, Minutes } from '../PickerInput/PickerInput';
+_classDecs = [propsObserver(['value', 'is12Hour'])];
+let _TimePickerRoot;
+new (_TimePickerRoot2 = (_ref5 = (_entityDecs = reactive(['meridiem'], function () {
+  this.forceUpdate();
+}), "hoursInputRef"), _TimePickerRoot3 = class TimePickerRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, _ref5, /*#__PURE__*/React.createRef());
+    _defineProperty(this, "minutesInputRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "state", {
+      ariaLabel: ''
+    });
+    _defineProperty(this, "entity", _init_entity(this, new TimePickerEntity(this.props.value ?? this.props.defaultValue, this.props.is12Hour)));
+    _defineProperty(this, "handleValueChange", (_init_extra_entity(this), (value, field, event) => {
+      this.entity[field] = value;
+      this.handlers.value(this.entity.toString(), event);
+    }));
+    _defineProperty(this, "handleMeridiemClick", event => {
+      this.entity.toggleMeridiem();
+      this.handlers.value(this.entity.toString(), event);
+    });
+    _defineProperty(this, "getCommonPickerInputProps", () => {
+      const {
+        is12Hour,
+        size,
+        disabled
+      } = this.asProps;
+      return {
+        size,
+        is12Hour,
+        disabled,
+        $onValueChange: this.handleValueChange,
+        minutesInputRef: this.minutesInputRef,
+        hoursInputRef: this.hoursInputRef
+      };
+    });
+    _defineProperty(this, "getHoursProps", () => {
+      return {
+        ...this.getCommonPickerInputProps(),
+        time: this.entity.hours,
+        ariaLabel: this.asProps.getI18nText('hours'),
+        ref: this.hoursInputRef
+      };
+    });
+    _defineProperty(this, "getMinutesProps", () => {
+      return {
+        ...this.getCommonPickerInputProps(),
+        time: this.entity.minutes,
+        ariaLabel: this.asProps.getI18nText('minutes'),
+        ref: this.minutesInputRef
+      };
+    });
+  }
+  componentDidMount() {
+    const {
+      id,
+      'aria-describedby': ariaDescribedBy
+    } = this.asProps;
+    const selector = `[for=${id}]`;
+    const element = document.querySelector(selector) ?? document.querySelector(`#${ariaDescribedBy}`);
+    if (element) {
+      this.setState({
+        ariaLabel: element.textContent
+      });
+    }
+  }
+  onPropsChange(changedProps) {
+    const {
+      value,
+      is12Hour
+    } = changedProps;
+    if (value !== undefined) {
+      const [hours = '', minutes = ''] = value.split(':');
+      this.entity.hours = hours;
+      this.entity.minutes = minutes;
+    }
+    if (is12Hour !== undefined) {
+      this.entity.is12Hour = is12Hour;
+    }
+  }
+  uncontrolledProps() {
+    return {
+      value: null
+    };
+  }
+  getSeparatorProps() {
+    return {
+      disabled: this.asProps.disabled,
+      hoursInputRef: this.hoursInputRef
+    };
+  }
+  getFormatProps() {
+    const {
+      size,
+      disabled,
+      getI18nText
+    } = this.asProps;
+    return {
+      size,
+      disabled,
+      meridiem: this.entity.meridiem,
+      onClick: this.handleMeridiemClick,
+      getI18nText
+    };
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref3;
+    const STimePicker = Input;
+    const {
+      styles,
+      Children,
+      value,
+      is12Hour,
+      getI18nText,
+      id
+    } = this.asProps;
+    const time = `${this.entity.hours}:${this.entity.minutes}`;
+    const meridiem = is12Hour ? this.entity.meridiem : '';
+    const label = value ? `${this.state.ariaLabel} ${getI18nText('title', {
+      time,
+      meridiem
+    })}` : `${this.state.ariaLabel} ${getI18nText('titleEmpty')}`;
+    return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(STimePicker, _ref3.cn("STimePicker", {
+      ..._assignProps({
+        "role": 'group',
+        "aria-label": label,
+        "__excludeProps": ['value', 'id']
+      }, _ref)
+    }), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {}))), /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref3.cn("ScreenReaderOnly", {
+      "tag": 'input',
+      "tabIndex": -1,
+      "id": id,
+      "aria-hidden": true,
+      "value": `${time} ${meridiem}`
+    })));
+  }
+}, {
+  e: [_init_entity, _init_extra_entity],
+  c: [_TimePickerRoot, _initClass]
+} = _applyDecs(_TimePickerRoot3, _classDecs, [[_entityDecs, 0, "entity"]], 0, void 0, Component), _TimePickerRoot3), _Class = class extends _identity {
+  constructor() {
+    super(_TimePickerRoot), _defineProperty(this, "displayName", 'TimePicker'), _defineProperty(this, "style", style), _defineProperty(this, "enhance", [i18nEnhance(localizedMessages)]), _defineProperty(this, "defaultProps", ({
+      is12Hour
+    }) => ({
+      defaultValue: '',
+      size: 'm',
+      children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimePicker.Hours, null), /*#__PURE__*/React.createElement(TimePicker.Separator, null), /*#__PURE__*/React.createElement(TimePicker.Minutes, null), is12Hour && /*#__PURE__*/React.createElement(TimePicker.Format, null)),
+      locale: 'en'
+    })), _initClass();
+  }
+}, _defineProperty(_Class, _TimePickerRoot2, void 0), _Class)();
+class Separator extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handlerClick", () => {
+      if (this.asProps.hoursInputRef.current) {
+        this.asProps.hoursInputRef.current?.focus();
+      }
+    });
+  }
+  render() {
+    var _ref2 = this.asProps,
+      _ref4;
+    const STimePickerSeparator = Box;
+    const {
+      styles
+    } = this.asProps;
+    return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(STimePickerSeparator, _ref4.cn("STimePickerSeparator", {
+      ..._assignProps2({
+        "onClick": this.handlerClick,
+        "aria-hidden": 'true'
+      }, _ref2)
+    }));
+  }
+}
+_defineProperty(Separator, "defaultProps", {
+  children: ':'
+});
+const TimePicker = createComponent(_TimePickerRoot, {
+  Hours,
+  Minutes,
+  Separator,
+  Format
+});
+export default TimePicker;
+//# sourceMappingURL=TimePicker.js.map

package/lib/es6/component/TimePicker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","names":["Box","ScreenReaderOnly","createComponent","Component","sstyled","Root","propsObserver","reactive","i18nEnhance","Input","React","style","_sstyled","insert","TimePickerEntity","localizedMessages","Format","Hours","Minutes","_classDecs","_TimePickerRoot","_TimePickerRoot2","_ref5","_entityDecs","forceUpdate","_TimePickerRoot3","TimePickerRoot","constructor","args","_defineProperty","createRef","ariaLabel","_init_entity","props","value","defaultValue","is12Hour","_init_extra_entity","field","event","entity","handlers","toString","toggleMeridiem","size","disabled","asProps","$onValueChange","handleValueChange","minutesInputRef","hoursInputRef","getCommonPickerInputProps","time","hours","getI18nText","ref","minutes","componentDidMount","id","ariaDescribedBy","selector","element","document","querySelector","setState","textContent","onPropsChange","changedProps","undefined","split","uncontrolledProps","getSeparatorProps","getFormatProps","meridiem","onClick","handleMeridiemClick","render","_ref","_ref3","STimePicker","styles","Children","label","state","createElement","Fragment","cn","_assignProps","e","c","_initClass","_applyDecs","_Class","_identity","children","TimePicker","Separator","locale","current","focus","_ref2","_ref4","STimePickerSeparator","_assignProps2","handlerClick"],"sources":["../../../../src/component/TimePicker/TimePicker.tsx"],"sourcesContent":["import { Box, ScreenReaderOnly } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport propsObserver from '@semcore/core/lib/decorators/propsObserver';\nimport reactive from '@semcore/core/lib/decorators/reactive';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport Input from '@semcore/input';\nimport React from 'react';\n\nimport style from './time-picker.shadow.css';\nimport type {\n  TimePickerComponent,\n  TimePickerProps,\n  TimePickerField,\n  TimePickerSeparatorProps,\n} from './TimePicker.type';\nimport TimePickerEntity from '../../entity/TimePickerEntity';\nimport { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';\nimport Format from '../PickerFormat/PickerFormat';\nimport { Hours, Minutes } from '../PickerInput/PickerInput';\n\n@propsObserver(['value', 'is12Hour'])\nclass TimePickerRoot extends Component<TimePickerProps, typeof TimePickerRoot.enhance, { value: null }> {\n  static displayName = 'TimePicker';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages)] as const;\n  static defaultProps = ({ is12Hour }: TimePickerProps) => ({\n    defaultValue: '',\n    size: 'm',\n    children: (\n      <>\n        <TimePicker.Hours />\n        <TimePicker.Separator />\n        <TimePicker.Minutes />\n        {is12Hour && <TimePicker.Format />}\n      </>\n    ),\n    locale: 'en',\n  });\n\n  hoursInputRef = React.createRef<HTMLElement>();\n  minutesInputRef = React.createRef<HTMLElement>();\n\n  state = {\n    ariaLabel: '',\n  };\n\n  componentDidMount() {\n    const { id, 'aria-describedby': ariaDescribedBy } = this.asProps;\n    const selector = `[for=${id}]`;\n\n    const element = document.querySelector(selector) ?? document.querySelector(`#${ariaDescribedBy}`);\n\n    if (element) {\n      this.setState({ ariaLabel: element.textContent });\n    }\n  }\n\n  @reactive(['meridiem'], function () {\n    this.forceUpdate();\n  })\n  readonly entity = new TimePickerEntity(this.props.value ?? this.props.defaultValue, this.props.is12Hour);\n\n  onPropsChange(changedProps: TimePickerProps) {\n    const { value, is12Hour } = changedProps;\n\n    if (value !== undefined) {\n      const [hours = '', minutes = ''] = value.split(':');\n\n      this.entity.hours = hours;\n      this.entity.minutes = minutes;\n    }\n\n    if (is12Hour !== undefined) {\n      this.entity.is12Hour = is12Hour;\n    }\n  }\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  handleValueChange = (value: string, field: TimePickerField, event: React.SyntheticEvent) => {\n    this.entity[field] = value;\n\n    this.handlers.value(this.entity.toString(), event);\n  };\n\n  handleMeridiemClick = (event: React.SyntheticEvent) => {\n    this.entity.toggleMeridiem();\n\n    this.handlers.value(this.entity.toString(), event);\n  };\n\n  private getCommonPickerInputProps = () => {\n    const { is12Hour, size, disabled } = this.asProps;\n\n    return {\n      size,\n      is12Hour,\n      disabled,\n      $onValueChange: this.handleValueChange,\n      minutesInputRef: this.minutesInputRef,\n      hoursInputRef: this.hoursInputRef,\n    };\n  };\n\n  getHoursProps = () => {\n    return {\n      ...this.getCommonPickerInputProps(),\n      time: this.entity.hours,\n      ariaLabel: this.asProps.getI18nText('hours'),\n      ref: this.hoursInputRef,\n    };\n  };\n\n  getMinutesProps = () => {\n    return {\n      ...this.getCommonPickerInputProps(),\n      time: this.entity.minutes,\n      ariaLabel: this.asProps.getI18nText('minutes'),\n      ref: this.minutesInputRef,\n    };\n  };\n\n  getSeparatorProps() {\n    return {\n      disabled: this.asProps.disabled,\n      hoursInputRef: this.hoursInputRef,\n    };\n  }\n\n  getFormatProps() {\n    const { size, disabled, getI18nText } = this.asProps;\n    return {\n      size,\n      disabled,\n      meridiem: this.entity.meridiem,\n      onClick: this.handleMeridiemClick,\n      getI18nText,\n    };\n  }\n\n  render() {\n    const STimePicker = Root;\n    const { styles, Children, value, is12Hour, getI18nText, id } = this.asProps;\n\n    const time = `${this.entity.hours}:${this.entity.minutes}`;\n    const meridiem = is12Hour ? this.entity.meridiem : '';\n\n    const label = value\n      ? `${this.state.ariaLabel} ${getI18nText('title', {\n        time,\n        meridiem,\n      })}`\n      : `${this.state.ariaLabel} ${getI18nText('titleEmpty')}`;\n\n    return sstyled(styles)(\n      <>\n        <STimePicker render={Input} role='group' aria-label={label} __excludeProps={['value', 'id']}>\n          <Children />\n        </STimePicker>\n        <ScreenReaderOnly tag='input' tabIndex={-1} id={id} aria-hidden={true} value={`${time} ${meridiem}`} />\n      </>,\n    );\n  }\n}\nclass Separator extends Component<TimePickerSeparatorProps> {\n  static defaultProps = {\n    children: ':',\n  };\n\n  handlerClick = () => {\n    if (this.asProps.hoursInputRef.current) {\n      this.asProps.hoursInputRef.current?.focus();\n    }\n  };\n\n  render() {\n    const STimePickerSeparator = Root;\n    const { styles } = this.asProps;\n    return sstyled(styles)(<STimePickerSeparator render={Box} onClick={this.handlerClick} aria-hidden='true' />);\n  }\n}\n\nconst TimePicker = createComponent(TimePickerRoot, {\n  Hours,\n  Minutes,\n  Separator,\n  Format,\n}) as TimePickerComponent;\n\nexport default TimePicker;\n"],"mappings":";;;;;;;;AAAA,SAASA,GAAG,EAAEC,gBAAgB,QAAQ,0BAA0B;AAChE,SAASC,eAAe,EAAEC,SAAS,EAAEC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AACzE,OAAOC,aAAa,MAAM,4CAA4C;AACtE,OAAOC,QAAQ,MAAM,uCAAuC;AAC5D,OAAOC,WAAW,MAAM,8CAA8C;AACtE,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAS1B,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,SAASC,iBAAiB,QAAQ,oDAAoD;AACtF,OAAOC,MAAM,MAAM,8BAA8B;AACjD,SAASC,KAAK,EAAEC,OAAO,QAAQ,4BAA4B;AAACC,UAAA,IAE3Db,aAAa,CAAC,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;AAAA,IAAAc,eAAA;AAAA,KAAAC,gBAAA,IAAAC,KAAA,IAAAC,WAAA,GAqClChB,QAAQ,CAAC,CAAC,UAAU,CAAC,EAAE,YAAY;EAClC,IAAI,CAACiB,WAAW,CAAC,CAAC;AACpB,CAAC,CAAC,oBAAAC,gBAAA,GAvCJ,MAAAC,cAAA,SAC6BvB,SAAS,CAAkE;EAAAwB,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,OAAAP,KAAA,eAkBtFZ,KAAK,CAACoB,SAAS,CAAc,CAAC;IAAAD,eAAA,uCAC5BnB,KAAK,CAACoB,SAAS,CAAc,CAAC;IAAAD,eAAA,gBAExC;MACNE,SAAS,EAAE;IACb,CAAC;IAAAF,eAAA,iBAAAG,YAAA,OAgBiB,IAAIlB,gBAAgB,CAAC,IAAI,CAACmB,KAAK,CAACC,KAAK,IAAI,IAAI,CAACD,KAAK,CAACE,YAAY,EAAE,IAAI,CAACF,KAAK,CAACG,QAAQ,CAAC;IAAAP,eAAA,6BAAAQ,kBAAA,QAuBpF,CAACH,KAAa,EAAEI,KAAsB,EAAEC,KAA2B,KAAK;MAC1F,IAAI,CAACC,MAAM,CAACF,KAAK,CAAC,GAAGJ,KAAK;MAE1B,IAAI,CAACO,QAAQ,CAACP,KAAK,CAAC,IAAI,CAACM,MAAM,CAACE,QAAQ,CAAC,CAAC,EAAEH,KAAK,CAAC;IACpD,CAAC;IAAAV,eAAA,8BAEsBU,KAA2B,IAAK;MACrD,IAAI,CAACC,MAAM,CAACG,cAAc,CAAC,CAAC;MAE5B,IAAI,CAACF,QAAQ,CAACP,KAAK,CAAC,IAAI,CAACM,MAAM,CAACE,QAAQ,CAAC,CAAC,EAAEH,KAAK,CAAC;IACpD,CAAC;IAAAV,eAAA,oCAEmC,MAAM;MACxC,MAAM;QAAEO,QAAQ;QAAEQ,IAAI;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACC,OAAO;MAEjD,OAAO;QACLF,IAAI;QACJR,QAAQ;QACRS,QAAQ;QACRE,cAAc,EAAE,IAAI,CAACC,iBAAiB;QACtCC,eAAe,EAAE,IAAI,CAACA,eAAe;QACrCC,aAAa,EAAE,IAAI,CAACA;MACtB,CAAC;IACH,CAAC;IAAArB,eAAA,wBAEe,MAAM;MACpB,OAAO;QACL,GAAG,IAAI,CAACsB,yBAAyB,CAAC,CAAC;QACnCC,IAAI,EAAE,IAAI,CAACZ,MAAM,CAACa,KAAK;QACvBtB,SAAS,EAAE,IAAI,CAACe,OAAO,CAACQ,WAAW,CAAC,OAAO,CAAC;QAC5CC,GAAG,EAAE,IAAI,CAACL;MACZ,CAAC;IACH,CAAC;IAAArB,eAAA,0BAEiB,MAAM;MACtB,OAAO;QACL,GAAG,IAAI,CAACsB,yBAAyB,CAAC,CAAC;QACnCC,IAAI,EAAE,IAAI,CAACZ,MAAM,CAACgB,OAAO;QACzBzB,SAAS,EAAE,IAAI,CAACe,OAAO,CAACQ,WAAW,CAAC,SAAS,CAAC;QAC9CC,GAAG,EAAE,IAAI,CAACN;MACZ,CAAC;IACH,CAAC;EAAA;EA9EDQ,iBAAiBA,CAAA,EAAG;IAClB,MAAM;MAAEC,EAAE;MAAE,kBAAkB,EAAEC;IAAgB,CAAC,GAAG,IAAI,CAACb,OAAO;IAChE,MAAMc,QAAQ,GAAG,QAAQF,EAAE,GAAG;IAE9B,MAAMG,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAACH,QAAQ,CAAC,IAAIE,QAAQ,CAACC,aAAa,CAAC,IAAIJ,eAAe,EAAE,CAAC;IAEjG,IAAIE,OAAO,EAAE;MACX,IAAI,CAACG,QAAQ,CAAC;QAAEjC,SAAS,EAAE8B,OAAO,CAACI;MAAY,CAAC,CAAC;IACnD;EACF;EAOAC,aAAaA,CAACC,YAA6B,EAAE;IAC3C,MAAM;MAAEjC,KAAK;MAAEE;IAAS,CAAC,GAAG+B,YAAY;IAExC,IAAIjC,KAAK,KAAKkC,SAAS,EAAE;MACvB,MAAM,CAACf,KAAK,GAAG,EAAE,EAAEG,OAAO,GAAG,EAAE,CAAC,GAAGtB,KAAK,CAACmC,KAAK,CAAC,GAAG,CAAC;MAEnD,IAAI,CAAC7B,MAAM,CAACa,KAAK,GAAGA,KAAK;MACzB,IAAI,CAACb,MAAM,CAACgB,OAAO,GAAGA,OAAO;IAC/B;IAEA,IAAIpB,QAAQ,KAAKgC,SAAS,EAAE;MAC1B,IAAI,CAAC5B,MAAM,CAACJ,QAAQ,GAAGA,QAAQ;IACjC;EACF;EAEAkC,iBAAiBA,CAAA,EAAG;IAClB,OAAO;MACLpC,KAAK,EAAE;IACT,CAAC;EACH;EA6CAqC,iBAAiBA,CAAA,EAAG;IAClB,OAAO;MACL1B,QAAQ,EAAE,IAAI,CAACC,OAAO,CAACD,QAAQ;MAC/BK,aAAa,EAAE,IAAI,CAACA;IACtB,CAAC;EACH;EAEAsB,cAAcA,CAAA,EAAG;IACf,MAAM;MAAE5B,IAAI;MAAEC,QAAQ;MAAES;IAAY,CAAC,GAAG,IAAI,CAACR,OAAO;IACpD,OAAO;MACLF,IAAI;MACJC,QAAQ;MACR4B,QAAQ,EAAE,IAAI,CAACjC,MAAM,CAACiC,QAAQ;MAC9BC,OAAO,EAAE,IAAI,CAACC,mBAAmB;MACjCrB;IACF,CAAC;EACH;EAEAsB,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAA/B,OAAA;MAAAgC,KAAA;IACP,MAAMC,WAAW,GAeQtE,KAAK;IAd9B,MAAM;MAAEuE,MAAM;MAAEC,QAAQ;MAAE/C,KAAK;MAAEE,QAAQ;MAAEkB,WAAW;MAAEI;IAAG,CAAC,GAAG,IAAI,CAACZ,OAAO;IAE3E,MAAMM,IAAI,GAAG,GAAG,IAAI,CAACZ,MAAM,CAACa,KAAK,IAAI,IAAI,CAACb,MAAM,CAACgB,OAAO,EAAE;IAC1D,MAAMiB,QAAQ,GAAGrC,QAAQ,GAAG,IAAI,CAACI,MAAM,CAACiC,QAAQ,GAAG,EAAE;IAErD,MAAMS,KAAK,GAAGhD,KAAK,GACf,GAAG,IAAI,CAACiD,KAAK,CAACpD,SAAS,IAAIuB,WAAW,CAAC,OAAO,EAAE;MAChDF,IAAI;MACJqB;IACF,CAAC,CAAC,EAAE,GACF,GAAG,IAAI,CAACU,KAAK,CAACpD,SAAS,IAAIuB,WAAW,CAAC,YAAY,CAAC,EAAE;IAE1D,OAAAwB,KAAA,GAAO1E,OAAO,CAAC4E,MAAM,CAAC,eACpBtE,KAAA,CAAA0E,aAAA,CAAA1E,KAAA,CAAA2E,QAAA,qBACE3E,KAAA,CAAA0E,aAAA,CAACL,WAAW,EAAAD,KAAA,CAAAQ,EAAA;MAAA,GAAAC,YAAA;QAAA,QAAqB,OAAO;QAAA,cAAaL,KAAK;QAAA,kBAAkB,CAAC,OAAO,EAAE,IAAI;MAAC,GAAAL,IAAA;IAAA,iBACzFnE,KAAA,CAAA0E,aAAA,CAACH,QAAQ,EAAAH,KAAA,CAAAQ,EAAA,gBAAE,CACA,CAAC,eACd5E,KAAA,CAAA0E,aAAA,CAACnF,gBAAgB,EAAA6E,KAAA,CAAAQ,EAAA;MAAA,OAAK,OAAO;MAAA,YAAW,CAAC,CAAC;MAAA,MAAM5B,EAAE;MAAA,eAAe,IAAI;MAAA,SAAS,GAAGN,IAAI,IAAIqB,QAAQ;IAAE,EAAG,CACtG,CAAC;EAEP;AACF,CAAC;EAAAe,CAAA,GAAAxD,YAAA,EAAAK,kBAAA;EAAAoD,CAAA,GAAArE,eAAA,EAAAsE,UAAA;AAAA,IAAAC,UAAA,CAAAlE,gBAAA,EAAAN,UAAA,IAAAI,WAAA,4BAlJ4BpB,SAAS,GAAAsB,gBAAA,GAAAmE,MAAA,iBAAAC,SAAA;EAAAlE,YAAA;IAAA,MAAAP,eAAA,GAAAS,eAAA,sBACf,YAAY,GAAAA,eAAA,gBAClBlB,KAAK,GAAAkB,eAAA,kBACH,CAACrB,WAAW,CAACO,iBAAiB,CAAC,CAAC,GAAAc,eAAA,uBAC3B,CAAC;MAAEO;IAA0B,CAAC,MAAM;MACxDD,YAAY,EAAE,EAAE;MAChBS,IAAI,EAAE,GAAG;MACTkD,QAAQ,eACNpF,KAAA,CAAA0E,aAAA,CAAA1E,KAAA,CAAA2E,QAAA,qBACE3E,KAAA,CAAA0E,aAAA,CAACW,UAAU,CAAC9E,KAAK,MAAE,CAAC,eACpBP,KAAA,CAAA0E,aAAA,CAACW,UAAU,CAACC,SAAS,MAAE,CAAC,eACxBtF,KAAA,CAAA0E,aAAA,CAACW,UAAU,CAAC7E,OAAO,MAAE,CAAC,EACrBkB,QAAQ,iBAAI1B,KAAA,CAAA0E,aAAA,CAACW,UAAU,CAAC/E,MAAM,MAAE,CACjC,CACH;MACDiF,MAAM,EAAE;IACV,CAAC,CAAC,GAAAP,UAAA;EAAA;AAAA,GAAA7D,eAAA,CAAA+D,MAAA,EAAAvE,gBAAA,WAAAuE,MAAA;AAmIJ,MAAMI,SAAS,SAAS7F,SAAS,CAA2B;EAAAwB,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,uBAK3C,MAAM;MACnB,IAAI,IAAI,CAACiB,OAAO,CAACI,aAAa,CAACgD,OAAO,EAAE;QACtC,IAAI,CAACpD,OAAO,CAACI,aAAa,CAACgD,OAAO,EAAEC,KAAK,CAAC,CAAC;MAC7C;IACF,CAAC;EAAA;EAEDvB,MAAMA,CAAA,EAAG;IAAA,IAAAwB,KAAA,QAAAtD,OAAA;MAAAuD,KAAA;IACP,MAAMC,oBAAoB,GAE2BtG,GAAG;IADxD,MAAM;MAAEgF;IAAO,CAAC,GAAG,IAAI,CAAClC,OAAO;IAC/B,OAAAuD,KAAA,GAAOjG,OAAO,CAAC4E,MAAM,CAAC,eAACtE,KAAA,CAAA0E,aAAA,CAACkB,oBAAoB,EAAAD,KAAA,CAAAf,EAAA;MAAA,GAAAiB,aAAA;QAAA,WAAuB,IAAI,CAACC,YAAY;QAAA,eAAc;MAAM,GAAAJ,KAAA;IAAA,EAAE,CAAC;EAC7G;AACF;AAACvE,eAAA,CAhBKmE,SAAS,kBACS;EACpBF,QAAQ,EAAE;AACZ,CAAC;AAeH,MAAMC,UAAU,GAAG7F,eAAe,CAACwB,eAAc,EAAE;EACjDT,KAAK;EACLC,OAAO;EACP8E,SAAS;EACThF;AACF,CAAC,CAAwB;AAEzB,eAAe+E,UAAU","ignoreList":[]}

package/lib/es6/component/TimePicker/TimePicker.type.js

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

package/lib/es6/component/TimePicker/TimePicker.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.type.js","names":[],"sources":["../../../../src/component/TimePicker/TimePicker.type.ts"],"sourcesContent":["import type { Box } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { InputProps, InputValueProps } from '@semcore/input';\n\nimport type { TimePickerFormatProps } from '../PickerFormat/PickerFormat.type';\n\nexport type TimePickerProps = Omit<InputProps, 'size'> & {\n  /** Time in the hh:mm format */\n  value?: string;\n  /** Default value if `value` property is not provided */\n  defaultValue?: string;\n  /** The event responses upon time changing */\n  onChange?: (time: string, event?: React.SyntheticEvent) => void;\n  /** In charge of the component blocking */\n  disabled?: boolean;\n  /** Control size\n   * @default m */\n  size?: 'm' | 'l';\n  /** 12-hour time format */\n  is12Hour?: boolean;\n  /** Specifies the locale for i18n support */\n  locale?: string;\n};\n\nexport type TimePickerSeparatorProps = {\n  /** @Internal */\n  hoursInputRef: React.RefObject<HTMLElement>;\n  /** @Internal */\n  disabled?: boolean;\n};\n\nexport type TimePickerItemProps = InputValueProps & {\n  /** Step for changing of the values in the dropdown list */\n  step?: number;\n};\n\nexport type TimePickerContext = {\n  getHoursProps: PropGetterFn;\n  getFormatProps: PropGetterFn;\n  getMinutesProps: PropGetterFn;\n  getSeparatorProps: PropGetterFn;\n};\n\nexport type TimePickerHandlers = {\n  value: (value: string) => void;\n};\n\nexport type TimePickerMeridiem = 'AM' | 'PM';\n\nexport type TimePickerField = 'hours' | 'minutes';\n\nexport type TimePickerComponent = Intergalactic.Component<\n  'div',\n  TimePickerProps,\n  TimePickerContext,\n  [handlers: TimePickerHandlers]\n> & {\n  Hours: Intergalactic.Component<'div', TimePickerItemProps>;\n  Minutes: Intergalactic.Component<'div', TimePickerItemProps>;\n  Separator: typeof Box;\n  Format: Intergalactic.Component<'div', TimePickerFormatProps>;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/es6/component/TimePicker/time-picker.shadow.css

@@ -0,0 +1,34 @@
+STimePicker {
+  position: relative;
+  width: auto;
+  outline: none;
+
+  SPickerInput {
+    box-sizing: content-box;
+    text-align: center;
+    z-index: 1;
+    height: 1.5em;
+
+    &[placeholder] {
+      text-overflow: initial;
+    }
+    &:focus {
+      outline: none;
+      background-color: var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2));
+    }
+  }
+}
+
+STimePicker[disabled] {
+  color: var(--intergalactic-text-secondary, #6c6e79);
+  cursor: default;
+}
+
+STimePickerSeparator {
+  color: var(--intergalactic-text-primary, #191b23);
+}
+
+STimePickerSeparator[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  pointer-events: none;
+}