@progress/kendo-themes-html 5.8.2-dev.6 → 5.9.1-dev.0

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

@@ -58,8 +58,8 @@
   var import_react = __toESM(__require("react"));
   var import_client = __toESM(__require("react-dom/client"));
 
-  // src/action-buttons/action-buttons.tsx
-  var React = __toESM(__require("react"));
+  // src/time-selector/time-selector.tsx
+  var React7 = __toESM(__require("react"));
 
   // src/utils/classNames.ts
   var classNames = (...args) => {
@@ -100,50 +100,105 @@
     }
   };
 
-  // src/action-buttons/action-buttons.tsx
-  var ActionButtons = class extends React.Component {
+  // src/time-selector/time-selector-column.tsx
+  var React = __toESM(__require("react"));
+  var TimeSelectorColumn = class extends React.Component {
     render() {
-      const _a = this.props, {
+      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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("li", {
+          className: "k-item"
+        }, /* @__PURE__ */ React.createElement("span", null, data)))
+      );
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, separator && /* @__PURE__ */ React.createElement("div", {
+        className: "k-time-separator"
+      }, ":"), /* @__PURE__ */ React.createElement("div", {
+        className: classNames(
+          "k-time-list-wrapper",
+          focus && "k-focus"
+        )
+      }, /* @__PURE__ */ React.createElement("span", {
+        className: "k-title"
+      }, text), /* @__PURE__ */ React.createElement("div", {
+        className: "k-time-list"
+      }, /* @__PURE__ */ React.createElement("div", {
+        className: "k-content k-scrollable k-time-container"
+      }, /* @__PURE__ */ React.createElement("ul", {
+        className: "k-reset",
+        style: { transform: "translateY(97px)" }
+      }, items), /* @__PURE__ */ React.createElement("div", {
+        className: "k-scrollable-placeholder"
+      })))));
+    }
+  };
+
+  // src/time-selector/time-selector-header.tsx
+  var React2 = __toESM(__require("react"));
+  var TimeSelectorHeader = class extends React2.Component {
+    render() {
+      const {
         children,
         className,
-        alignment,
-        orientation
-      } = _a, htmlAttributes = __objRest(_a, [
-        "children",
-        "className",
-        "alignment",
-        "orientation"
-      ]);
-      return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
+        title
+      } = this.props;
+      return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", {
         className: classNames(
-          "k-actions",
-          {
-            [`k-actions-${alignment}`]: alignment,
-            [`k-actions-${orientation}`]: orientation
-          },
+          "k-time-header",
           className
         )
-      }), children);
+      }, title != null && /* @__PURE__ */ React2.createElement("span", {
+        className: "k-title"
+      }, title), children));
     }
   };
-  ActionButtons.defaultProps = {
-    alignment: "start",
-    orientation: "horizontal"
-  };
+
+  // src/time-selector/time-selector-fast-selection.tsx
+  var React6 = __toESM(__require("react"));
 
   // src/button/button.tsx
-  var React3 = __toESM(__require("react"));
+  var React4 = __toESM(__require("react"));
 
   // src/icon/icon.tsx
-  var React2 = __toESM(__require("react"));
-  var Icon = class extends React2.Component {
+  var React3 = __toESM(__require("react"));
+  var Icon = class extends React3.Component {
     render() {
       const {
         className,
         style: style2,
         name
       } = this.props;
-      return /* @__PURE__ */ React2.createElement(React2.Fragment, null, name && /* @__PURE__ */ React2.createElement("span", {
+      return /* @__PURE__ */ React3.createElement(React3.Fragment, null, name && /* @__PURE__ */ React3.createElement("span", {
         className: classNames(
           className,
           "k-icon",
@@ -157,7 +212,7 @@
   };
 
   // src/button/button.tsx
-  var Button = class extends React3.Component {
+  var Button = class extends React4.Component {
     render() {
       const _a = this.props, {
         children,
@@ -196,7 +251,7 @@
       ]);
       const hasIcon = icon !== void 0;
       const hasChildren = children !== void 0;
-      return /* @__PURE__ */ React3.createElement("button", __spreadProps(__spreadValues({
+      return /* @__PURE__ */ React4.createElement("button", __spreadProps(__spreadValues({
         style: this.props.style
       }, htmlAttributes), {
         dir: this.props.dir,
@@ -216,16 +271,16 @@
             "k-disabled": disabled
           }
         )
-      }), icon && /* @__PURE__ */ React3.createElement(Icon, {
+      }), icon && /* @__PURE__ */ React4.createElement(Icon, {
         className: classNames(iconClassName, "k-button-icon"),
         name: icon
-      }), text ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, text && /* @__PURE__ */ React3.createElement("span", {
+      }), text ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, text && /* @__PURE__ */ React4.createElement("span", {
         className: "k-button-text"
-      }, text), children) : children && /* @__PURE__ */ React3.createElement("span", {
+      }, text), children) : children && /* @__PURE__ */ React4.createElement("span", {
         className: "k-button-text"
-      }, children), showArrow && /* @__PURE__ */ React3.createElement("span", {
+      }, children), showArrow && /* @__PURE__ */ React4.createElement("span", {
         className: "k-menu-button-arrow k-button-arrow"
-      }, /* @__PURE__ */ React3.createElement(Icon, {
+      }, /* @__PURE__ */ React4.createElement(Icon, {
         name: arrowIconName
       })));
     }
@@ -239,6 +294,83 @@
     arrowIconName: "arrow-s"
   };
 
+  // src/action-buttons/action-buttons.tsx
+  var React5 = __toESM(__require("react"));
+  var ActionButtons = class extends React5.Component {
+    render() {
+      const _a = this.props, {
+        children,
+        className,
+        alignment,
+        orientation
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "alignment",
+        "orientation"
+      ]);
+      return /* @__PURE__ */ React5.createElement("div", __spreadProps(__spreadValues({}, htmlAttributes), {
+        className: classNames(
+          "k-actions",
+          {
+            [`k-actions-${alignment}`]: alignment,
+            [`k-actions-${orientation}`]: orientation
+          },
+          className
+        )
+      }), children);
+    }
+  };
+  ActionButtons.defaultProps = {
+    alignment: "start",
+    orientation: "horizontal"
+  };
+
+  // src/time-selector/time-selector.tsx
+  var TimeSelector = class extends React7.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__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(TimeSelectorColumn, {
+          type: columnType,
+          focus,
+          separator
+        }));
+      });
+      return /* @__PURE__ */ React7.createElement("div", {
+        className: classNames(
+          className,
+          "k-timeselector",
+          {
+            [`k-timeselector-${kendoThemeMaps.sizeMap[size] || size}`]: size
+          }
+        )
+      }, /* @__PURE__ */ React7.createElement(React7.Fragment, null, header), /* @__PURE__ */ React7.createElement(React7.Fragment, null, fastSelection), /* @__PURE__ */ React7.createElement("div", {
+        className: "k-time-list-container"
+      }, /* @__PURE__ */ React7.createElement("span", {
+        className: "k-time-highlight"
+      }), columnsDom));
+    }
+  };
+  TimeSelector.defaultProps = {
+    size: "medium"
+  };
+
   // src/time-selector/tests/time-selector.tsx
   var root = import_client.default.createRoot(
     document.getElementById("app")
@@ -255,181 +387,20 @@
     /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("style", null, style), /* @__PURE__ */ import_react.default.createElement("div", {
       id: "test-area",
       className: "k-d-grid k-grid-cols-3"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "HH:mm:ss:fff tt"), /* @__PURE__ */ import_react.default.createElement("span", null, "HH:mm:ss tt"), /* @__PURE__ */ import_react.default.createElement("span", null, "HH"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
+    }, /* @__PURE__ */ import_react.default.createElement("span", null, "HH:mm:ss:SSS tt"), /* @__PURE__ */ import_react.default.createElement("span", null, "HH:mm:ss tt"), /* @__PURE__ */ import_react.default.createElement("span", null, "HH"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-animation-container"
     }, /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-popup k-reset"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-timeselector"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-header"
-    }, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-title"
-    }, " 13:14:07:189 PM "), /* @__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 k-focus"
-    }, /* @__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-time-container k-content k-scrollable"
-    }, /* @__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, "00")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "01")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "02")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "03")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "04")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "05")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "06")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "07")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "08")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "09"))), /* @__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"
-    }, "minute"), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-list"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-container k-content k-scrollable"
-    }, /* @__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, "00")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "01")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "02")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "03")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "04")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "05")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "06")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "07")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "08")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "09"))), /* @__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-time-container k-content k-scrollable"
-    }, /* @__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, "00")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "01")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "02")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "03")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "04")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "05")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "06")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "07")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "08")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "09"))), /* @__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"
-    }, "millisecond"), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-list"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-time-container k-content k-scrollable"
-    }, /* @__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, "000")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "001")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "002")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "003")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "004")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "005")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "006")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "007")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "008")), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item"
-    }, /* @__PURE__ */ import_react.default.createElement("span", null, "009"))), /* @__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-time-container k-content k-scrollable"
-    }, /* @__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", "SSS", "tt"],
+      focusedColumn: "HH",
+      header: /* @__PURE__ */ import_react.default.createElement(TimeSelectorHeader, {
+        title: "13:14:07:189 PM"
+      }, /* @__PURE__ */ import_react.default.createElement(Button, {
+        fillMode: "flat",
+        className: "k-time-now"
+      }, "Now"))
+    }), /* @__PURE__ */ import_react.default.createElement(ActionButtons, {
       alignment: "stretched",
       className: "k-time-footer"
     }, /* @__PURE__ */ import_react.default.createElement(Button, {
@@ -437,148 +408,20 @@
     }, "Cancel"), /* @__PURE__ */ import_react.default.createElement(Button, {
       themeColor: "primary",
       className: "k-time-accept"
-    }, "Set")))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
+    }, "Set"))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-animation-container"
     }, /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-popup k-reset"
-    }, /* @__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(TimeSelectorHeader, {
+        title: "10:00:00 AM"
+      }, /* @__PURE__ */ import_react.default.createElement(Button, {
+        fillMode: "flat",
+        className: "k-time-now"
+      }, "Now"))
+    }), /* @__PURE__ */ import_react.default.createElement(ActionButtons, {
       alignment: "stretched",
       className: "k-time-footer"
     }, /* @__PURE__ */ import_react.default.createElement(Button, {
@@ -586,59 +429,19 @@
     }, "Cancel"), /* @__PURE__ */ import_react.default.createElement(Button, {
       themeColor: "primary",
       className: "k-time-accept"
-    }, "Set")))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
+    }, "Set"))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-animation-container"
     }, /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-popup k-reset"
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-timeselector"
-    }, /* @__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"), /* @__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(ActionButtons, {
+    }, /* @__PURE__ */ import_react.default.createElement(TimeSelector, {
+      columns: ["HH"],
+      header: /* @__PURE__ */ import_react.default.createElement(TimeSelectorHeader, {
+        title: "10"
+      }, /* @__PURE__ */ import_react.default.createElement(Button, {
+        fillMode: "flat",
+        className: "k-time-now"
+      }, "Now"))
+    }), /* @__PURE__ */ import_react.default.createElement(ActionButtons, {
       alignment: "stretched",
       className: "k-time-footer"
     }, /* @__PURE__ */ import_react.default.createElement(Button, {
@@ -646,7 +449,7 @@
     }, "Cancel"), /* @__PURE__ */ import_react.default.createElement(Button, {
       themeColor: "primary",
       className: "k-time-accept"
-    }, "Set"))))))))
+    }, "Set")))))))
   );
 })();
 //# sourceMappingURL=time-selector.js.map