@progress/kendo-themes-html 6.2.1-dev.0 → 6.2.1-dev.44

package/dist/table/tests/table-list-jquery.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))
@@ -28,6 +57,385 @@
   // src/table/tests/table-list-jquery.tsx
   var import_react = __toESM(__require("react"));
   var import_client = __toESM(__require("react-dom/client"));
+
+  // src/table/data-table.tsx
+  var React = __toESM(__require("react"));
+
+  // src/utils/classNames.ts
+  var classNames = (...args) => {
+    const result = {};
+    const addLeafKeys = (arg) => {
+      typeof arg === "object" ? Object.keys(arg).forEach((key) => {
+        result[key] = arg[key];
+      }) : result[arg] = true;
+    };
+    const addKeys = (list) => list.filter((arg) => arg !== true && Boolean(arg)).map(
+      (arg) => Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg)
+    );
+    addKeys(args);
+    return Object.keys(result).map((key) => result[key] && key || null).filter((el) => el !== null).join(" ");
+  };
+
+  // src/utils/theme.ts
+  var kendoThemeMaps = {
+    sizeMap: {
+      small: "sm",
+      medium: "md",
+      large: "lg"
+    },
+    roundedMap: {
+      small: "sm",
+      medium: "md",
+      large: "lg"
+    },
+    calloutMap: {
+      top: "n",
+      bottom: "s",
+      left: "w",
+      right: "e"
+    },
+    orientationMap: {
+      vertical: "vstack",
+      horizontal: "hstack"
+    }
+  };
+
+  // src/table/data-table.tsx
+  var DataTable = class extends React.Component {
+    render() {
+      const {
+        children,
+        className,
+        size
+      } = this.props;
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(
+            className,
+            "k-data-table",
+            {
+              [`k-table-${kendoThemeMaps.sizeMap[size] || size}`]: size
+            }
+          )
+        },
+        children
+      );
+    }
+  };
+  DataTable.defaultProps = {
+    size: "medium"
+  };
+
+  // src/table/table-header.tsx
+  var React3 = __toESM(__require("react"));
+
+  // src/table/table.tsx
+  var React2 = __toESM(__require("react"));
+  var Table = class extends React2.Component {
+    render() {
+      const {
+        children,
+        className,
+        size
+      } = this.props;
+      return /* @__PURE__ */ React2.createElement(
+        "table",
+        {
+          className: classNames(
+            className,
+            "k-table",
+            {
+              [`k-table-${kendoThemeMaps.sizeMap[size]}`]: size
+            }
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-header.tsx
+  var TableHeader = class extends React3.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React3.createElement(
+        "div",
+        {
+          className: classNames(
+            className,
+            "k-table-header"
+          )
+        },
+        /* @__PURE__ */ React3.createElement("div", { className: "k-table-header-wrap" }, /* @__PURE__ */ React3.createElement(Table, null, children))
+      );
+    }
+  };
+
+  // src/table/table-body.tsx
+  var React4 = __toESM(__require("react"));
+  var TableBody = class extends React4.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React4.createElement(
+        "div",
+        {
+          className: classNames(
+            className,
+            "k-table-body",
+            "k-table-scroller"
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-footer.tsx
+  var React5 = __toESM(__require("react"));
+  var TableFooter = class extends React5.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React5.createElement(
+        "div",
+        {
+          className: classNames(
+            className,
+            "k-table-footer"
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-list.tsx
+  var React6 = __toESM(__require("react"));
+  var TableList = class extends React6.Component {
+    render() {
+      const {
+        children,
+        className,
+        size,
+        virtualization
+      } = this.props;
+      return /* @__PURE__ */ React6.createElement(
+        "ul",
+        {
+          className: classNames(
+            className,
+            "k-table",
+            "k-table-list",
+            {
+              [`k-table-${kendoThemeMaps.sizeMap[size]}`]: size,
+              "k-virtual-table": virtualization
+            }
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-thead.tsx
+  var React7 = __toESM(__require("react"));
+  var TableThead = class extends React7.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React7.createElement(
+        "thead",
+        {
+          className: classNames(
+            className,
+            "k-table-thead"
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-tbody.tsx
+  var React8 = __toESM(__require("react"));
+
+  // src/table/table-tfoot.tsx
+  var React9 = __toESM(__require("react"));
+
+  // src/table/table-row.tsx
+  var React10 = __toESM(__require("react"));
+  var TableRow = class extends React10.Component {
+    render() {
+      const {
+        children,
+        className,
+        alt,
+        hover,
+        focus,
+        selected,
+        disabled
+      } = this.props;
+      return /* @__PURE__ */ React10.createElement(
+        "tr",
+        {
+          className: classNames(
+            className,
+            "k-table-row",
+            {
+              "k-table-alt-row": alt,
+              "k-hover": hover,
+              "k-focus": focus,
+              "k-selected": selected,
+              "k-disabled": disabled
+            }
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-list-row.tsx
+  var React11 = __toESM(__require("react"));
+  var TableListRow = class extends React11.Component {
+    render() {
+      const {
+        children,
+        className,
+        alt,
+        hover,
+        focus,
+        selected,
+        disabled
+      } = this.props;
+      return /* @__PURE__ */ React11.createElement(
+        "li",
+        {
+          className: classNames(
+            className,
+            "k-table-row",
+            {
+              "k-table-alt-row": alt,
+              "k-hover": hover,
+              "k-focus": focus,
+              "k-selected": selected,
+              "k-disabled": disabled
+            }
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-th.tsx
+  var React12 = __toESM(__require("react"));
+  var TableTh = class extends React12.Component {
+    render() {
+      const _a = this.props, {
+        children,
+        className,
+        text,
+        colspan
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "text",
+        "colspan"
+      ]);
+      const textOrChildren = text ? text : children;
+      return /* @__PURE__ */ React12.createElement(
+        "th",
+        __spreadProps(__spreadValues({
+          colSpan: colspan
+        }, htmlAttributes), {
+          className: classNames(
+            className,
+            "k-table-th"
+          )
+        }),
+        textOrChildren
+      );
+    }
+  };
+
+  // src/table/table-list-th.tsx
+  var React13 = __toESM(__require("react"));
+
+  // src/table/table-td.tsx
+  var React14 = __toESM(__require("react"));
+
+  // src/table/table-list-td.tsx
+  var React15 = __toESM(__require("react"));
+  var TableListTd = class extends React15.Component {
+    render() {
+      const _a = this.props, {
+        children,
+        className,
+        text
+      } = _a, htmlAttributes = __objRest(_a, [
+        "children",
+        "className",
+        "text"
+      ]);
+      const textOrChildren = text ? text : children;
+      return /* @__PURE__ */ React15.createElement(
+        "span",
+        __spreadProps(__spreadValues({
+          style: this.props.style
+        }, htmlAttributes), {
+          className: classNames(
+            className,
+            "k-table-td"
+          )
+        }),
+        textOrChildren
+      );
+    }
+  };
+
+  // src/table/table-group-header.tsx
+  var React16 = __toESM(__require("react"));
+  var TableGroupHeader = class extends React16.Component {
+    render() {
+      const {
+        children,
+        className
+      } = this.props;
+      return /* @__PURE__ */ React16.createElement(
+        "tr",
+        {
+          className: classNames(
+            className,
+            "k-table-group-header"
+          )
+        },
+        children
+      );
+    }
+  };
+
+  // src/table/table-group-sticky-header.tsx
+  var React17 = __toESM(__require("react"));
+
+  // src/table/table-group-row.tsx
+  var React18 = __toESM(__require("react"));
+
+  // src/table/table-list-group-row.tsx
+  var React19 = __toESM(__require("react"));
+
+  // src/table/tests/table-list-jquery.tsx
   var root = import_client.default.createRoot(
     document.getElementById("app")
   );
@@ -43,7 +451,7 @@
     }
 `;
   root.render(
-    /* @__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, "Table list small"), /* @__PURE__ */ import_react.default.createElement("span", null, "Table list medium"), /* @__PURE__ */ import_react.default.createElement("span", null, "Table list large"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-data-table k-table-sm" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "ID"), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "Name"), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "Job Title")), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-group-header" }, /* @__PURE__ */ import_react.default.createElement("td", { colSpan: 3, className: "k-table-th" }, "Initial group")))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-scroller" }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-table k-table-list" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "1"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 1.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 1.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "2"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 2.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 2.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-first" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "3"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 3.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 3.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-group-td" }, /* @__PURE__ */ import_react.default.createElement("span", null, "Group"))), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "4"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 4.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 4.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "5"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 5.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 5.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "6"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 6.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 6.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-footer" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "30 records in total")))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-data-table k-table-md" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "ID"), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "Name"), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "Job Title")), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-group-header" }, /* @__PURE__ */ import_react.default.createElement("td", { colSpan: 3, className: "k-table-th" }, "Initial group")))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-scroller" }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-table k-table-list" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "1"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 1.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 1.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "2"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 2.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 2.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-first" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "3"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 3.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 3.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-group-td" }, /* @__PURE__ */ import_react.default.createElement("span", null, "Group"))), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "4"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 4.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 4.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "5"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 5.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 5.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "6"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 6.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 6.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-footer" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "30 records in total")))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-data-table k-table-lg" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-header-wrap" }, /* @__PURE__ */ import_react.default.createElement("table", { className: "k-table" }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "ID"), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "Name"), /* @__PURE__ */ import_react.default.createElement("th", { className: "k-table-th" }, "Job Title")), /* @__PURE__ */ import_react.default.createElement("tr", { className: "k-table-group-header" }, /* @__PURE__ */ import_react.default.createElement("td", { colSpan: 3, className: "k-table-th" }, "Initial group")))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-scroller" }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-table k-table-list" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "1"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 1.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 1.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "2"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 2.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 2.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-first" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "3"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 3.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 3.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-group-td" }, /* @__PURE__ */ import_react.default.createElement("span", null, "Group"))), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "4"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 4.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 4.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "5"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 5.2"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 5.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-table-row k-table-alt-row" }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "50px" }, className: "k-table-td" }, "6"), /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "160px" }, className: "k-table-td" }, "Data 6.2 (alt)"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "Data 6.3"), /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td k-table-spacer-td" })))), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-table-footer" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-table-td" }, "30 records in total"))))))
+    /* @__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, "Table list small"), /* @__PURE__ */ import_react.default.createElement("span", null, "Table list medium"), /* @__PURE__ */ import_react.default.createElement("span", null, "Table list large"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement(DataTable, { size: "small" }, /* @__PURE__ */ import_react.default.createElement(TableHeader, null, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement(TableThead, null, /* @__PURE__ */ import_react.default.createElement(TableRow, null, /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "ID" }), /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Name" }), /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Job Title" })), /* @__PURE__ */ import_react.default.createElement(TableGroupHeader, null, /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Initial group", colspan: "3" })))), /* @__PURE__ */ import_react.default.createElement(TableBody, null, /* @__PURE__ */ import_react.default.createElement(TableList, null, /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "1", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 1.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 1.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "2", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 2.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 2.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { className: "k-first" }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "3", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 3.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 3.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-group-td" }, /* @__PURE__ */ import_react.default.createElement("span", null, "Group"))), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "4", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 4.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 4.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "5", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 5.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 5.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "6", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 6.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 6.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })))), /* @__PURE__ */ import_react.default.createElement(TableFooter, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "30 records in total" })))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement(DataTable, { size: "medium" }, /* @__PURE__ */ import_react.default.createElement(TableHeader, null, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement(TableThead, null, /* @__PURE__ */ import_react.default.createElement(TableRow, null, /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "ID" }), /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Name" }), /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Job Title" })), /* @__PURE__ */ import_react.default.createElement(TableGroupHeader, null, /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Initial group", colspan: "3" })))), /* @__PURE__ */ import_react.default.createElement(TableBody, null, /* @__PURE__ */ import_react.default.createElement(TableList, null, /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "1", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 1.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 1.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "2", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 2.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 2.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { className: "k-first" }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "3", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 3.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 3.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-group-td" }, /* @__PURE__ */ import_react.default.createElement("span", null, "Group"))), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "4", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 4.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 4.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "5", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 5.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 5.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "6", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 6.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 6.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })))), /* @__PURE__ */ import_react.default.createElement(TableFooter, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "30 records in total" })))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement(DataTable, { size: "large" }, /* @__PURE__ */ import_react.default.createElement(TableHeader, null, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement("col", { style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement("col", null)), /* @__PURE__ */ import_react.default.createElement(TableThead, null, /* @__PURE__ */ import_react.default.createElement(TableRow, null, /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "ID" }), /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Name" }), /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Job Title" })), /* @__PURE__ */ import_react.default.createElement(TableGroupHeader, null, /* @__PURE__ */ import_react.default.createElement(TableTh, { text: "Initial group", colspan: "3" })))), /* @__PURE__ */ import_react.default.createElement(TableBody, null, /* @__PURE__ */ import_react.default.createElement(TableList, null, /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "1", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 1.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 1.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "2", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 2.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 2.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { className: "k-first" }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "3", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 3.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 3.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-group-td" }, /* @__PURE__ */ import_react.default.createElement("span", null, "Group"))), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "4", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 4.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 4.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "5", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 5.2", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 5.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })), /* @__PURE__ */ import_react.default.createElement(TableListRow, { alt: true }, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "6", style: { width: "50px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 6.2 (alt)", style: { width: "160px" } }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "Data 6.3" }), /* @__PURE__ */ import_react.default.createElement(TableListTd, { className: "k-table-spacer-td" })))), /* @__PURE__ */ import_react.default.createElement(TableFooter, null, /* @__PURE__ */ import_react.default.createElement(TableListTd, { text: "30 records in total" }))))))
   );
 })();
 //# sourceMappingURL=table-list-jquery.js.map