@progress/kendo-themes-html 5.8.2-dev.5 → 5.9.0

package/dist/datetime-selector/tests/datetime-selector.js

@@ -1,10 +1,27 @@
 (() => {
   var __create = Object.create;
   var __defProp = Object.defineProperty;
+  var __defProps = Object.defineProperties;
   var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
   var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
   var __getProtoOf = Object.getPrototypeOf;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __propIsEnum = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues = (a, b) => {
+    for (var prop in b ||= {})
+      if (__hasOwnProp.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+      for (var prop of __getOwnPropSymbols(b)) {
+        if (__propIsEnum.call(b, prop))
+          __defNormalProp(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
     get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
   }) : x)(function(x) {
@@ -12,6 +29,18 @@
       return require.apply(this, arguments);
     throw new Error('Dynamic require of "' + x + '" is not supported');
   });
+  var __objRest = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+      if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+        target[prop] = source[prop];
+    if (source != null && __getOwnPropSymbols)
+      for (var prop of __getOwnPropSymbols(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+          target[prop] = source[prop];
+      }
+    return target;
+  };
   var __copyProps = (to, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
       for (let key of __getOwnPropNames(from))
@@ -74,15 +103,18 @@
   // src/action-buttons/action-buttons.tsx
   var ActionButtons = class extends React.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
         className,
         alignment,
-        orientation,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React.createElement("div", {
-        ...htmlAttributes,
+        orientation
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "alignment",
+        "orientation"
+      ]);
+      return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           "k-actions",
           {
@@ -91,7 +123,7 @@
           },
           className
         )
-      }, children);
+      }), children);
     }
   };
   ActionButtons.defaultProps = {
@@ -127,7 +159,7 @@
   // src/button/button.tsx
   var Button = class extends React3.Component {
     render() {
-      const {
+      const _a = this.props, {
         children,
         className,
         iconClassName,
@@ -143,14 +175,30 @@
         selected,
         disabled,
         showArrow,
-        arrowIconName,
-        ...htmlAttributes
-      } = this.props;
+        arrowIconName
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "iconClassName",
+        "text",
+        "icon",
+        "size",
+        "rounded",
+        "fillMode",
+        "themeColor",
+        "hover",
+        "focus",
+        "active",
+        "selected",
+        "disabled",
+        "showArrow",
+        "arrowIconName"
+      ]);
       const hasIcon = icon !== void 0;
       const hasChildren = children !== void 0;
-      return /* @__PURE__ */ React3.createElement("button", {
-        style: this.props.style,
-        ...htmlAttributes,
+      return /* @__PURE__ */ React3.createElement("button", __spreadProps(__spreadValues({
+        style: this.props.style
+      }, htmlAttributes), {
         dir: this.props.dir,
         className: classNames(
           className,
@@ -168,7 +216,7 @@
             "k-disabled": disabled
           }
         )
-      }, icon && /* @__PURE__ */ React3.createElement(Icon, {
+      }), icon && /* @__PURE__ */ React3.createElement(Icon, {
         className: classNames(iconClassName, "k-button-icon"),
         name: icon
       }), text ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, text && /* @__PURE__ */ React3.createElement("span", {
@@ -195,7 +243,7 @@
   var React4 = __toESM(__require("react"));
   var Calendar = class extends React4.Component {
     render() {
-      const {
+      const _a = this.props, {
         className,
         size,
         orientation,
@@ -206,11 +254,21 @@
         showOtherMonth,
         showCalendarCaption,
         showCalendarFooter,
-        selectedRange,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React4.createElement("div", {
-        ...htmlAttributes,
+        selectedRange
+      } = _a, htmlAttributes = __objRest(_a, [
+        "className",
+        "size",
+        "orientation",
+        "calendarView",
+        "calendarHeaderText",
+        "viewsCount",
+        "showWeek",
+        "showOtherMonth",
+        "showCalendarCaption",
+        "showCalendarFooter",
+        "selectedRange"
+      ]);
+      return /* @__PURE__ */ React4.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           className,
           "k-calendar",
@@ -219,10 +277,11 @@
             "k-week-number": showWeek
           }
         )
-      }, /* @__PURE__ */ React4.createElement(CalendarHeader, {
+      }), /* @__PURE__ */ React4.createElement(CalendarHeader, {
         showToday: showCalendarFooter ? false : true,
         calendarHeaderText,
-        orientation
+        orientation,
+        size
       }), /* @__PURE__ */ React4.createElement(CalendarView, {
         calendarView,
         viewsCount,
@@ -246,7 +305,7 @@
   var React5 = __toESM(__require("react"));
   var CalendarCell = class extends React5.Component {
     render() {
-      const {
+      const _a = this.props, {
         className,
         text,
         headerCell,
@@ -262,9 +321,25 @@
         disabled,
         rangeStart,
         rangeMid,
-        rangeEnd,
-        ...htmlAttributes
-      } = this.props;
+        rangeEnd
+      } = _a, htmlAttributes = __objRest(_a, [
+        "className",
+        "text",
+        "headerCell",
+        "today",
+        "weekend",
+        "otherMonth",
+        "showOtherMonth",
+        "weekCell",
+        "hover",
+        "focus",
+        "active",
+        "selected",
+        "disabled",
+        "rangeStart",
+        "rangeMid",
+        "rangeEnd"
+      ]);
       const cellType = headerCell ? "th" : "td";
       const calendarCellClasses = [
         className,
@@ -285,21 +360,18 @@
         }
       ];
       if (headerCell) {
-        return /* @__PURE__ */ React5.createElement("th", {
-          ...htmlAttributes,
+        return /* @__PURE__ */ React5.createElement("th", __spreadProps(__spreadValues({}, htmlAttributes), {
           className: classNames(calendarCellClasses)
-        }, text);
+        }), text);
       }
       if (weekCell) {
-        return /* @__PURE__ */ React5.createElement("td", {
-          ...htmlAttributes,
+        return /* @__PURE__ */ React5.createElement("td", __spreadProps(__spreadValues({}, htmlAttributes), {
           className: classNames(calendarCellClasses)
-        }, text);
+        }), text);
       }
-      return /* @__PURE__ */ React5.createElement("td", {
-        ...htmlAttributes,
+      return /* @__PURE__ */ React5.createElement("td", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(calendarCellClasses)
-      }, otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ React5.createElement("span", {
+      }), otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ React5.createElement("span", {
         className: "k-link"
       }, text));
     }
@@ -309,15 +381,20 @@
   var React6 = __toESM(__require("react"));
   var CalendarHeader = class extends React6.Component {
     render() {
-      const {
+      const _a = this.props, {
         className,
         calendarHeaderText,
         showToday,
         orientation,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React6.createElement("div", {
-        ...htmlAttributes,
+        size
+      } = _a, htmlAttributes = __objRest(_a, [
+        "className",
+        "calendarHeaderText",
+        "showToday",
+        "orientation",
+        "size"
+      ]);
+      return /* @__PURE__ */ React6.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           className,
           "k-calendar-header",
@@ -325,9 +402,10 @@
             "k-vstack": orientation === "vertical"
           }
         )
-      }, /* @__PURE__ */ React6.createElement(Button, {
+      }), /* @__PURE__ */ React6.createElement(Button, {
         className: "k-calendar-title",
         text: calendarHeaderText,
+        size,
         fillMode: "flat"
       }), /* @__PURE__ */ React6.createElement("span", {
         className: "k-spacer"
@@ -336,12 +414,14 @@
       }, /* @__PURE__ */ React6.createElement(Button, {
         className: "k-calendar-nav-prev",
         icon: "arrow-chevron-left",
+        size,
         fillMode: "flat"
       }), showToday && /* @__PURE__ */ React6.createElement("span", {
         className: "k-calendar-nav-today"
       }, "Today"), /* @__PURE__ */ React6.createElement(Button, {
         className: "k-calendar-nav-next",
         icon: "arrow-chevron-right",
+        size,
         fillMode: "flat"
       })));
     }
@@ -349,24 +429,25 @@
   CalendarHeader.defaultProps = {
     calendarHeaderText: "October 2021",
     showToday: true,
-    orientation: "horizontal"
+    orientation: "horizontal",
+    size: "medium"
   };
 
   // src/calendar/calendar-footer.tsx
   var React7 = __toESM(__require("react"));
   var CalendarFooter = class extends React7.Component {
     render() {
-      const {
-        className,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React7.createElement("div", {
-        ...htmlAttributes,
+      const _a = this.props, {
+        className
+      } = _a, htmlAttributes = __objRest(_a, [
+        "className"
+      ]);
+      return /* @__PURE__ */ React7.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           className,
           "k-calendar-footer"
         )
-      }, /* @__PURE__ */ React7.createElement("a", {
+      }), /* @__PURE__ */ React7.createElement("a", {
         className: "k-calendar-nav-today"
       }, "Monday, October 29, 2021"));
     }
@@ -376,23 +457,28 @@
   var React8 = __toESM(__require("react"));
   var CalendarTable = class extends React8.Component {
     render() {
-      const {
+      const _a = this.props, {
         className,
         calendarView,
         showOtherMonth,
         showWeek,
         showCalendarCaption,
-        selectedRange,
-        ...htmlAttributes
-      } = this.props;
+        selectedRange
+      } = _a, htmlAttributes = __objRest(_a, [
+        "className",
+        "calendarView",
+        "showOtherMonth",
+        "showWeek",
+        "showCalendarCaption",
+        "selectedRange"
+      ]);
       if (calendarView === "year") {
-        return /* @__PURE__ */ React8.createElement("table", {
-          ...htmlAttributes,
+        return /* @__PURE__ */ React8.createElement("table", __spreadProps(__spreadValues({}, htmlAttributes), {
           className: classNames(
             className,
             "k-calendar-table"
           )
-        }, showCalendarCaption && /* @__PURE__ */ React8.createElement("caption", {
+        }), showCalendarCaption && /* @__PURE__ */ React8.createElement("caption", {
           className: "k-calendar-caption"
         }, "2022"), /* @__PURE__ */ React8.createElement("tbody", {
           className: "k-calendar-tbody"
@@ -433,13 +519,12 @@
         }))));
       }
       if (calendarView === "decade") {
-        return /* @__PURE__ */ React8.createElement("table", {
-          ...htmlAttributes,
+        return /* @__PURE__ */ React8.createElement("table", __spreadProps(__spreadValues({}, htmlAttributes), {
           className: classNames(
             className,
             "k-calendar-table"
           )
-        }, showCalendarCaption && /* @__PURE__ */ React8.createElement("caption", {
+        }), showCalendarCaption && /* @__PURE__ */ React8.createElement("caption", {
           className: "k-calendar-caption"
         }, "2020 - 2029"), /* @__PURE__ */ React8.createElement("tbody", {
           className: "k-calendar-tbody"
@@ -480,13 +565,12 @@
         }))));
       }
       if (calendarView === "century") {
-        return /* @__PURE__ */ React8.createElement("table", {
-          ...htmlAttributes,
+        return /* @__PURE__ */ React8.createElement("table", __spreadProps(__spreadValues({}, htmlAttributes), {
           className: classNames(
             className,
             "k-calendar-table"
           )
-        }, showCalendarCaption && /* @__PURE__ */ React8.createElement("caption", {
+        }), showCalendarCaption && /* @__PURE__ */ React8.createElement("caption", {
           className: "k-calendar-caption"
         }, "2000 - 2099"), /* @__PURE__ */ React8.createElement("tbody", {
           className: "k-calendar-tbody"
@@ -526,13 +610,12 @@
           className: "k-out-of-range"
         }))));
       }
-      return /* @__PURE__ */ React8.createElement("table", {
-        ...htmlAttributes,
+      return /* @__PURE__ */ React8.createElement("table", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           className,
           "k-calendar-table"
         )
-      }, showCalendarCaption && /* @__PURE__ */ React8.createElement("caption", {
+      }), showCalendarCaption && /* @__PURE__ */ React8.createElement("caption", {
         className: "k-calendar-caption"
       }, "October 2021"), /* @__PURE__ */ React8.createElement(CalendarTableHead, {
         showWeek
@@ -709,18 +792,19 @@
   var React9 = __toESM(__require("react"));
   var CalendarTableHead = class extends React9.Component {
     render() {
-      const {
+      const _a = this.props, {
         className,
-        showWeek,
-        ...htmlAttributes
-      } = this.props;
-      return /* @__PURE__ */ React9.createElement("thead", {
-        ...htmlAttributes,
+        showWeek
+      } = _a, htmlAttributes = __objRest(_a, [
+        "className",
+        "showWeek"
+      ]);
+      return /* @__PURE__ */ React9.createElement("thead", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           className,
           "k-calendar-thead"
         )
-      }, /* @__PURE__ */ React9.createElement("tr", {
+      }), /* @__PURE__ */ React9.createElement("tr", {
         className: "k-calendar-tr"
       }, showWeek && /* @__PURE__ */ React9.createElement(CalendarCell, {
         weekCell: true,
@@ -754,7 +838,7 @@
   var React10 = __toESM(__require("react"));
   var CalendarView = class extends React10.Component {
     render() {
-      const {
+      const _a = this.props, {
         className,
         orientation,
         calendarView,
@@ -762,12 +846,19 @@
         showWeek,
         showOtherMonth,
         showCalendarCaption,
-        selectedRange,
-        ...htmlAttributes
-      } = this.props;
+        selectedRange
+      } = _a, htmlAttributes = __objRest(_a, [
+        "className",
+        "orientation",
+        "calendarView",
+        "viewsCount",
+        "showWeek",
+        "showOtherMonth",
+        "showCalendarCaption",
+        "selectedRange"
+      ]);
       const views = Number(viewsCount);
-      return /* @__PURE__ */ React10.createElement("div", {
-        ...htmlAttributes,
+      return /* @__PURE__ */ React10.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
         className: classNames(
           className,
           "k-calendar-view",
@@ -778,7 +869,7 @@
             [`k-${kendoThemeMaps.orientationMap[orientation] || orientation}`]: orientation
           }
         )
-      }, [...Array(views)].map(
+      }), [...Array(views)].map(
         (_e, i) => /* @__PURE__ */ React10.createElement(CalendarTable, {
           key: i,
           calendarView,
@@ -796,6 +887,138 @@
     calendarView: "month"
   };
 
+  // src/time-selector/time-selector.tsx
+  var React11 = __toESM(__require("react"));
+  var TimeSelector = class extends React11.Component {
+    render() {
+      const {
+        header,
+        fastSelection,
+        className,
+        size,
+        columns,
+        focusedColumn
+      } = this.props;
+      const columnsDom = columns.map(function(columnType, index) {
+        let focus = false;
+        let separator = true;
+        if (columnType === focusedColumn) {
+          focus = true;
+        }
+        if (index === 0 || columnType === "tt") {
+          separator = false;
+        }
+        return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(TimeSelectorColumn, {
+          type: columnType,
+          focus,
+          separator
+        }));
+      });
+      return /* @__PURE__ */ React11.createElement("div", {
+        className: classNames(
+          className,
+          "k-timeselector",
+          {
+            [`k-timeselector-${kendoThemeMaps.sizeMap[size] || size}`]: size
+          }
+        )
+      }, /* @__PURE__ */ React11.createElement(React11.Fragment, null, header), /* @__PURE__ */ React11.createElement(React11.Fragment, null, fastSelection), /* @__PURE__ */ React11.createElement("div", {
+        className: "k-time-list-container"
+      }, /* @__PURE__ */ React11.createElement("span", {
+        className: "k-time-highlight"
+      }), columnsDom));
+    }
+  };
+  TimeSelector.defaultProps = {
+    size: "medium"
+  };
+
+  // src/time-selector/time-selector-column.tsx
+  var React12 = __toESM(__require("react"));
+  var TimeSelectorColumn = class extends React12.Component {
+    render() {
+      const {
+        type,
+        focus,
+        separator
+      } = this.props;
+      let text;
+      let columnData = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"];
+      switch (type) {
+        case "dd":
+          text = "Day";
+          break;
+        case "HH":
+          text = "Hour";
+          break;
+        case "mm":
+          text = "Minute";
+          break;
+        case "ss":
+          text = "Second";
+          break;
+        case "SSS":
+          text = "Millisecond";
+          columnData = ["000", "001", "002", "003", "004", "005", "006", "007", "008", "009"];
+          break;
+        case "tt":
+          text = "AM/PM";
+          columnData = ["AM", "PM"];
+          break;
+        default:
+          text = "Column Name";
+          break;
+      }
+      const items = columnData.map(
+        (data) => /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("li", {
+          className: "k-item"
+        }, /* @__PURE__ */ React12.createElement("span", null, data)))
+      );
+      return /* @__PURE__ */ React12.createElement(React12.Fragment, null, separator && /* @__PURE__ */ React12.createElement("div", {
+        className: "k-time-separator"
+      }, ":"), /* @__PURE__ */ React12.createElement("div", {
+        className: classNames(
+          "k-time-list-wrapper",
+          focus && "k-focus"
+        )
+      }, /* @__PURE__ */ React12.createElement("span", {
+        className: "k-title"
+      }, text), /* @__PURE__ */ React12.createElement("div", {
+        className: "k-time-list"
+      }, /* @__PURE__ */ React12.createElement("div", {
+        className: "k-content k-scrollable k-time-container"
+      }, /* @__PURE__ */ React12.createElement("ul", {
+        className: "k-reset",
+        style: { transform: "translateY(97px)" }
+      }, items), /* @__PURE__ */ React12.createElement("div", {
+        className: "k-scrollable-placeholder"
+      })))));
+    }
+  };
+
+  // src/time-selector/time-selector-header.tsx
+  var React13 = __toESM(__require("react"));
+  var TimeSelectorHeader2 = class extends React13.Component {
+    render() {
+      const {
+        children,
+        className,
+        title
+      } = this.props;
+      return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement("div", {
+        className: classNames(
+          "k-time-header",
+          className
+        )
+      }, title != null && /* @__PURE__ */ React13.createElement("span", {
+        className: "k-title"
+      }, title), children));
+    }
+  };
+
+  // src/time-selector/time-selector-fast-selection.tsx
+  var React14 = __toESM(__require("react"));
+
   // src/datetime-selector/tests/datetime-selector.tsx
   var root = import_client.default.createRoot(
     document.getElementById("app")
@@ -865,144 +1088,16 @@
       className: "k-datetime-calendar-wrap"
     }), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-datetime-time-wrap"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-timeselector k-reset"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-part"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-header"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-title"
-    }, "10:00:00 AM"), /* @__PURE__ */ import_react.default.createElement(Button, {
-      fillMode: "flat",
-      className: "k-time-now"
-    }, "Now")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-list-container"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-time-highlight"
-    }), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-list-wrapper"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-title"
-    }, "Hour"), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-list"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-content k-scrollable k-time-container"
-    }, /* @__PURE__ */ import_react.default.createElement("ul", {
-      className: "k-reset",
-      style: { transform: "translateY(97px)" }
-    }, /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "0")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "1")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "2")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "3")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "4")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "5")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "6")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "7")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "8")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "9"))), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-scrollable-placeholder"
-    })))), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-separator"
-    }, ":"), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-list-wrapper k-focus"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-title"
-    }, "Minute"), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-list"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-content k-scrollable k-time-container"
-    }, /* @__PURE__ */ import_react.default.createElement("ul", {
-      className: "k-reset",
-      style: { transform: "translateY(97px)" }
-    }, /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "0")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "1")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "2")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "3")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "4")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "5")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "6")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "7")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "8")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "9"))), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-scrollable-placeholder"
-    })))), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-separator"
-    }, ":"), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-list-wrapper"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-title"
-    }, "Second"), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-list"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-content k-scrollable k-time-container"
-    }, /* @__PURE__ */ import_react.default.createElement("ul", {
-      className: "k-reset",
-      style: { transform: "translateY(97px)" }
-    }, /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "0")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "1")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "2")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "3")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "4")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "5")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "6")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "7")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "8")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "9"))), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-scrollable-placeholder"
-    })))), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-separator"
-    }, ":"), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-list-wrapper"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-title"
-    }, "AM/PM"), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-list"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-content k-scrollable k-time-container"
-    }, /* @__PURE__ */ import_react.default.createElement("ul", {
-      className: "k-reset",
-      style: { transform: "translateY(97px)" }
-    }, /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "AM")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "PM"))), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-scrollable-placeholder"
-    }))))))))), /* @__PURE__ */ import_react.default.createElement(ActionButtons, {
+    }, /* @__PURE__ */ import_react.default.createElement(TimeSelector, {
+      columns: ["HH", "mm", "ss", "tt"],
+      focusedColumn: "mm",
+      header: /* @__PURE__ */ import_react.default.createElement(TimeSelectorHeader2, {
+        title: "10:00:00 AM"
+      }, /* @__PURE__ */ import_react.default.createElement(Button, {
+        fillMode: "flat",
+        className: "k-time-now"
+      }, "Now"))
+    }))), /* @__PURE__ */ import_react.default.createElement(ActionButtons, {
       className: "k-datetime-footer",
       alignment: "stretched"
     }, /* @__PURE__ */ import_react.default.createElement(Button, {