@progress/kendo-themes-html 5.4.2-dev.1 → 5.4.2-dev.4

package/dist/grid/tests/grid-locked-columns.js

@@ -0,0 +1,633 @@
+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  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) {
+    if (typeof require !== "undefined")
+      return require.apply(this, arguments);
+    throw new Error('Dynamic require of "' + x + '" is not supported');
+  });
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+
+  // src/grid/tests/grid-locked-columns.tsx
+  var import_react = __toESM(__require("react"));
+  var import_client = __toESM(__require("react-dom/client"));
+
+  // src/checkbox/checkbox.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/checkbox/checkbox.tsx
+  var Checkbox = class extends React.Component {
+    render() {
+      const {
+        id,
+        className,
+        checked,
+        indeterminate,
+        size,
+        rounded,
+        hover,
+        focus,
+        invalid,
+        disabled,
+        required
+      } = this.props;
+      return /* @__PURE__ */ React.createElement("span", {
+        className: "k-checkbox-wrap"
+      }, /* @__PURE__ */ React.createElement("input", {
+        id,
+        type: "checkbox",
+        checked,
+        required,
+        className: classNames(className, "k-checkbox", {
+          [`k-checkbox-${kendoThemeMaps.sizeMap[size] || size}`]: size,
+          [`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
+          "k-hover": hover,
+          "k-focus": focus,
+          "k-disabled": disabled,
+          "k-checked": checked,
+          "k-invalid": invalid,
+          "k-indeterminate": !checked && indeterminate
+        })
+      }));
+    }
+  };
+  Checkbox.defaultProps = {
+    size: "medium",
+    rounded: "medium"
+  };
+
+  // src/icon/icon.tsx
+  var React2 = __toESM(__require("react"));
+  var Icon = class extends React2.Component {
+    render() {
+      const {
+        className,
+        style,
+        name
+      } = this.props;
+      return /* @__PURE__ */ React2.createElement(React2.Fragment, null, name && /* @__PURE__ */ React2.createElement("span", {
+        className: classNames(className, "k-icon", {
+          [`k-i-${name}`]: name
+        }),
+        style
+      }));
+    }
+  };
+
+  // src/grid/tests/grid-locked-columns.tsx
+  var root = import_client.default.createRoot(document.getElementById("app"));
+  var styles = `
+    /* These overrides are needed for the "Angular Grid with locked columns, Grouping and Multiline headers" example ->
+    they ensure the Grid layout is not broken in neither of the themes */
+    .grid-styling-overrides .k-header,
+    .grid-styling-overrides .k-grouping-row td,
+    .grid-styling-overrides .k-group-footer td {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+`;
+  root.render(/* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("style", null, styles), /* @__PURE__ */ import_react.default.createElement("div", {
+    id: "test-area",
+    className: "k-d-grid"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-widget k-grid k-grid-display-block k-reorderable k-grid-lockedcolumns"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-header"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-header-locked",
+    style: { width: "400px" }
+  }, /* @__PURE__ */ import_react.default.createElement("table", null, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "150px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "300px" }
+  })), /* @__PURE__ */ import_react.default.createElement("thead", null, /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-header k-with-icon"
+  }, /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-header-column-menu",
+    href: "#"
+  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+    name: "more-vertical"
+  })), /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-link",
+    href: "/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=OrderID-asc"
+  }, "Order ID")), /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-header k-with-icon"
+  }, /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-header-column-menu",
+    href: "#"
+  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+    name: "more-vertical"
+  })), /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-link",
+    href: "/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=ShipName-asc"
+  }, "Ship Name")))))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-header-wrap k-auto-scrollable",
+    style: { width: "581px" }
+  }, /* @__PURE__ */ import_react.default.createElement("table", {
+    style: { width: "1000px" }
+  }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "300px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "300px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "400px" }
+  })), /* @__PURE__ */ import_react.default.createElement("thead", null, /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-header k-with-icon"
+  }, /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-header-column-menu",
+    href: "#"
+  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+    name: "more-vertical"
+  })), /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-link",
+    href: "/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=ShipCountry-asc"
+  }, "Ship Country")), /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-header k-with-icon"
+  }, /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-header-column-menu",
+    href: "#"
+  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+    name: "more-vertical"
+  })), /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-link",
+    href: "/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=ShipCity-asc"
+  }, "Ship City")), /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-header k-with-icon"
+  }, /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-header-column-menu",
+    href: "#"
+  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+    name: "more-vertical"
+  })), /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-link",
+    href: "/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=ShipAddress-asc"
+  }, "Ship Address"))))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-resize-handle",
+    style: { top: "0px", left: "595.5px", height: "37px", width: "9px" }
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-resize-handle-inner"
+  })))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-content-locked",
+    style: { width: "400px", height: "303px" }
+  }, /* @__PURE__ */ import_react.default.createElement("table", null, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "150px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "300px" }
+  })), /* @__PURE__ */ import_react.default.createElement("tbody", null, /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", null, "10248"), /* @__PURE__ */ import_react.default.createElement("td", null, "Vins et alcools Chevalier")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "10249"), /* @__PURE__ */ import_react.default.createElement("td", null, "Toms Spezialit\xE4ten")), /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", null, "10250"), /* @__PURE__ */ import_react.default.createElement("td", null, "Hanari Carnes")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt k-state-hover"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "10251"), /* @__PURE__ */ import_react.default.createElement("td", null, "Victuailles en stock (Hovered)")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-state-selected"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "10252"), /* @__PURE__ */ import_react.default.createElement("td", null, "Supr\xEAmes d\xE9lices (Selected)")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt k-state-hover k-state-selected"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "10253"), /* @__PURE__ */ import_react.default.createElement("td", null, "Hanari (Selected and Hovered)")), /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", null, "10254"), /* @__PURE__ */ import_react.default.createElement("td", null, "Chop-suey Chinese")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "10255"), /* @__PURE__ */ import_react.default.createElement("td", null, "Richter Supermarkt"))))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-content k-auto-scrollable",
+    style: { width: "597px", height: "320px" }
+  }, /* @__PURE__ */ import_react.default.createElement("table", {
+    style: { width: "1000px" }
+  }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "300px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "300px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "400px" }
+  })), /* @__PURE__ */ import_react.default.createElement("tbody", null, /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", null, "France"), /* @__PURE__ */ import_react.default.createElement("td", null, "Reims"), /* @__PURE__ */ import_react.default.createElement("td", null, "59 rue de l'Abbaye")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "Germany"), /* @__PURE__ */ import_react.default.createElement("td", null, "M\xFCnster"), /* @__PURE__ */ import_react.default.createElement("td", null, "Luisenstr. 48")), /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", null, "Brazil"), /* @__PURE__ */ import_react.default.createElement("td", null, "Rio de Janeiro"), /* @__PURE__ */ import_react.default.createElement("td", null, "Rua do Pa\xE7o, 67")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt k-state-hover"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "France"), /* @__PURE__ */ import_react.default.createElement("td", null, "Lyon"), /* @__PURE__ */ import_react.default.createElement("td", null, "2, rue du Commerce")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-state-selected"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "Belgium"), /* @__PURE__ */ import_react.default.createElement("td", null, "Charleroi"), /* @__PURE__ */ import_react.default.createElement("td", null, "Boulevard Tirou, 255")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt k-state-selected k-state-hover"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "Brazil"), /* @__PURE__ */ import_react.default.createElement("td", null, "Rio de Janeiro"), /* @__PURE__ */ import_react.default.createElement("td", null, "Rua do Pa\xE7o, 67")), /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", null, "Switzerland"), /* @__PURE__ */ import_react.default.createElement("td", null, "Bern"), /* @__PURE__ */ import_react.default.createElement("td", null, "Hauptstr. 31")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "Switzerland"), /* @__PURE__ */ import_react.default.createElement("td", null, "Gen\xE8ve"), /* @__PURE__ */ import_react.default.createElement("td", null, "Starenweg 5")))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("span", null, "jQuery Grid - Frozen columns and sorting"), /* @__PURE__ */ import_react.default.createElement("div", {
+    style: { width: "1000px", height: "200px" },
+    className: "k-grid k-widget k-grid-display-block k-grid-lockedcolumns"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-header"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-header-locked",
+    style: { width: "400px" }
+  }, /* @__PURE__ */ import_react.default.createElement("table", null, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "150px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "250px" }
+  })), /* @__PURE__ */ import_react.default.createElement("thead", null, /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("th", {
+    rowSpan: 1,
+    className: "k-header"
+  }, /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-link",
+    href: "#"
+  }, "Order ID")), /* @__PURE__ */ import_react.default.createElement("th", {
+    rowSpan: 1,
+    className: "k-header k-sorted"
+  }, /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-link",
+    href: "#"
+  }, "Ship Name", /* @__PURE__ */ import_react.default.createElement(Icon, {
+    name: "sort-desc-sm"
+  }), /* @__PURE__ */ import_react.default.createElement("span", {
+    className: "k-sort-order"
+  }, "1"))))))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-header-wrap k-auto-scrollable",
+    style: { width: "581px" }
+  }, /* @__PURE__ */ import_react.default.createElement("table", {
+    style: { width: "900px" }
+  }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "400px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "500px" }
+  })), /* @__PURE__ */ import_react.default.createElement("thead", null, /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("th", {
+    rowSpan: 1,
+    className: "k-header k-sorted"
+  }, /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-link",
+    href: "#"
+  }, "Ship Country", /* @__PURE__ */ import_react.default.createElement(Icon, {
+    name: "sort-asc-sm"
+  }), /* @__PURE__ */ import_react.default.createElement("span", {
+    className: "k-sort-order"
+  }, "2"))), /* @__PURE__ */ import_react.default.createElement("th", {
+    rowSpan: 1,
+    className: "k-header"
+  }, /* @__PURE__ */ import_react.default.createElement("a", {
+    className: "k-link",
+    href: "#"
+  }, "Ship City"))))))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-content-locked",
+    style: { width: "400px", height: "146px" }
+  }, /* @__PURE__ */ import_react.default.createElement("table", null, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "150px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "250px" },
+    className: "k-sorted"
+  })), /* @__PURE__ */ import_react.default.createElement("tbody", null, /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", null, "10374"), /* @__PURE__ */ import_react.default.createElement("td", null, "Wolski Zajazd")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "10611"), /* @__PURE__ */ import_react.default.createElement("td", null, "Wolski Zajazd")), /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", null, "10792"), /* @__PURE__ */ import_react.default.createElement("td", null, "Wolski Zajazd")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "10792"), /* @__PURE__ */ import_react.default.createElement("td", null, "Wolski Zajazd"))))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-content k-auto-scrollable",
+    style: { width: "597px", height: "161px" }
+  }, /* @__PURE__ */ import_react.default.createElement("table", {
+    role: "grid",
+    style: { height: "auto", width: "900px" }
+  }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "400px" },
+    className: "k-sorted"
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "500px" }
+  })), /* @__PURE__ */ import_react.default.createElement("tbody", null, /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", null, "Poland"), /* @__PURE__ */ import_react.default.createElement("td", null, "Warszawa")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "Poland"), /* @__PURE__ */ import_react.default.createElement("td", null, "Warszawa")), /* @__PURE__ */ import_react.default.createElement("tr", null, /* @__PURE__ */ import_react.default.createElement("td", null, "Poland"), /* @__PURE__ */ import_react.default.createElement("td", null, "Warszawa")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "Poland"), /* @__PURE__ */ import_react.default.createElement("td", null, "Warszawa"))))))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("span", null, "Angular Grid with locked columns, Grouping and Multiline headers"), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-widget k-grid k-grid-lockedcolumns grid-styling-overrides",
+    style: { height: "430px" }
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-aria-root"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-header"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-header-locked",
+    style: { width: "582px" }
+  }, /* @__PURE__ */ import_react.default.createElement("table", {
+    style: { width: "582px" }
+  }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    className: "k-group-col"
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "200px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "350px" }
+  })), /* @__PURE__ */ import_react.default.createElement("thead", null, /* @__PURE__ */ import_react.default.createElement("tr", {
+    style: { height: "38px" }
+  }, /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-group-cell k-header"
+  }), /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-header",
+    rowSpan: 2,
+    colSpan: 1
+  }, "Product ID"), /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-header",
+    rowSpan: 2,
+    colSpan: 1
+  }, "Product Name")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    style: { height: "38px" }
+  }, /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-group-cell k-header"
+  }))))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-header-wrap"
+  }, /* @__PURE__ */ import_react.default.createElement("table", null, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { height: "120px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { height: "120px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { height: "120px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { height: "120px" }
+  })), /* @__PURE__ */ import_react.default.createElement("thead", null, /* @__PURE__ */ import_react.default.createElement("tr", {
+    style: { height: "38px" }
+  }, /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-header",
+    rowSpan: 1,
+    colSpan: 3
+  }, "Availability"), /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-header",
+    rowSpan: 2,
+    colSpan: 1
+  }, "Discontinued")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    style: { height: "38px" }
+  }, /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-header",
+    rowSpan: 1,
+    colSpan: 1
+  }, "Unit Price"), /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-header",
+    rowSpan: 1,
+    colSpan: 1
+  }, "Units On Order"), /* @__PURE__ */ import_react.default.createElement("th", {
+    className: "k-header",
+    rowSpan: 1,
+    colSpan: 1
+  }, "Units In Stock")))))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-container"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-content-locked",
+    style: { width: "582px", height: "570px" }
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-table-wrap"
+  }, /* @__PURE__ */ import_react.default.createElement("table", {
+    className: "k-grid-table",
+    style: { width: "582px" }
+  }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    className: "k-group-col"
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "200px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "350px" }
+  })), /* @__PURE__ */ import_react.default.createElement("tbody", null, /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-grouping-row",
+    style: { height: "37px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 3
+  }, /* @__PURE__ */ import_react.default.createElement("p", {
+    className: "k-reset"
+  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+    name: "collapse"
+  }), "Discontinued: false"))), /* @__PURE__ */ import_react.default.createElement("tr", {
+    style: { height: "38px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    className: "k-group-cell"
+  }), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "Chai")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt",
+    style: { width: "37px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    className: "k-group-cell"
+  }), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "2"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "Chang")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    style: { width: "37px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    className: "k-group-cell"
+  }), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "3"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "Aniseed Syrup")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt",
+    style: { width: "37px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    className: "k-group-cell"
+  }), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "4"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "Chef Anton's Cajun Seasoning")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    style: { width: "37px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    className: "k-group-cell"
+  }), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "6"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "Grandma's Boysenberry Spread")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-group-footer",
+    style: { height: "39px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    className: "k-group-cell"
+  }), /* @__PURE__ */ import_react.default.createElement("td", null), /* @__PURE__ */ import_react.default.createElement("td", null)), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-grouping-row",
+    style: { height: "37px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 3
+  }, /* @__PURE__ */ import_react.default.createElement("p", {
+    className: "k-reset"
+  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+    name: "collapse"
+  }), "Discontinued: true"))), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt",
+    style: { height: "38px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    className: "k-group-cell"
+  }), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "5"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "Chef Anton's Gumbo Mix")), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-group-footer",
+    style: { height: "39px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    className: "k-group-cell"
+  }), /* @__PURE__ */ import_react.default.createElement("td", null), /* @__PURE__ */ import_react.default.createElement("td", null)))), /* @__PURE__ */ import_react.default.createElement("div", null)), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-height-container"
+  }, /* @__PURE__ */ import_react.default.createElement("div", null))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-content k-virtual-content"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-table-wrap"
+  }, /* @__PURE__ */ import_react.default.createElement("table", {
+    className: "k-grid-table"
+  }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { height: "120px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { height: "120px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { height: "120px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { height: "120px" }
+  })), /* @__PURE__ */ import_react.default.createElement("tbody", null, /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-grouping-row",
+    style: { height: "37px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 4
+  }, /* @__PURE__ */ import_react.default.createElement("p", {
+    className: "k-reset"
+  }))), /* @__PURE__ */ import_react.default.createElement("tr", {
+    style: { height: "38px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "18"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "0"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "39"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, /* @__PURE__ */ import_react.default.createElement(Checkbox, null))), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt",
+    style: { width: "37px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "19"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "40"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "17"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, /* @__PURE__ */ import_react.default.createElement(Checkbox, null))), /* @__PURE__ */ import_react.default.createElement("tr", {
+    style: { width: "37px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "10"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "70"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "13"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, /* @__PURE__ */ import_react.default.createElement(Checkbox, null))), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt",
+    style: { width: "37px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "22"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "0"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "53"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, /* @__PURE__ */ import_react.default.createElement(Checkbox, null))), /* @__PURE__ */ import_react.default.createElement("tr", {
+    style: { width: "37px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "25"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "0"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "120"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, /* @__PURE__ */ import_react.default.createElement(Checkbox, null))), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-group-footer",
+    style: { height: "39px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "Sum: 94"), /* @__PURE__ */ import_react.default.createElement("td", null), /* @__PURE__ */ import_react.default.createElement("td", null), /* @__PURE__ */ import_react.default.createElement("td", null)), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-grouping-row",
+    style: { height: "37px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 4
+  }, /* @__PURE__ */ import_react.default.createElement("p", {
+    className: "k-reset"
+  }))), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-alt",
+    style: { height: "38px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "21.35"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "0"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, "0"), /* @__PURE__ */ import_react.default.createElement("td", {
+    colSpan: 1
+  }, /* @__PURE__ */ import_react.default.createElement(Checkbox, null))), /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-group-footer",
+    style: { height: "39px" }
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "Sum: 24"), /* @__PURE__ */ import_react.default.createElement("td", null), /* @__PURE__ */ import_react.default.createElement("td", null), /* @__PURE__ */ import_react.default.createElement("td", null))))), /* @__PURE__ */ import_react.default.createElement("div", null), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-height-container"
+  }, /* @__PURE__ */ import_react.default.createElement("div", null)))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-footer"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-footer-locked",
+    style: { width: "582px" }
+  }, /* @__PURE__ */ import_react.default.createElement("table", {
+    style: { width: "582px" }
+  }, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    className: "k-group-col"
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "200px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { width: "350px" }
+  })), /* @__PURE__ */ import_react.default.createElement("tfoot", null, /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-footer-template"
+  }, /* @__PURE__ */ import_react.default.createElement("td", {
+    className: "k-group-cell"
+  }), /* @__PURE__ */ import_react.default.createElement("td", null), /* @__PURE__ */ import_react.default.createElement("td", null))))), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "k-grid-footer-wrap"
+  }, /* @__PURE__ */ import_react.default.createElement("table", null, /* @__PURE__ */ import_react.default.createElement("colgroup", null, /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { height: "120px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { height: "120px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { height: "120px" }
+  }), /* @__PURE__ */ import_react.default.createElement("col", {
+    style: { height: "120px" }
+  })), /* @__PURE__ */ import_react.default.createElement("tfoot", null, /* @__PURE__ */ import_react.default.createElement("tr", {
+    className: "k-footer-template"
+  }, /* @__PURE__ */ import_react.default.createElement("td", null, "Total Unit Price: 115.35"), /* @__PURE__ */ import_react.default.createElement("td", null), /* @__PURE__ */ import_react.default.createElement("td", null), /* @__PURE__ */ import_react.default.createElement("td", null))))))))))));
+})();
+//# sourceMappingURL=grid-locked-columns.js.map